/* Kartenansicht fuer markierte Gruppen. Ohne data-proben-ansicht bleibt die Reihe
   aus arbeitsproben.css unveraendert. Alle Karten behalten ihr Originalformat. */
.kv-proben__kartenprofil, .kv-proben__kartensteuerung { display: none; }
.kv-proben__gruppe[data-proben-ansicht="karten"] {
    --kv-karten-basis: var(--media-gallery-desktop);
    --kv-karten-breite: min(calc(var(--kv-karten-basis) + var(--space-12)), var(--container-narrow), calc(100vw - var(--space-16)));
}
.kv-proben__gruppe[data-proben-ansicht="karten"] .kv-proben__nav { display: none; }
.kv-proben__gruppe[data-proben-ansicht="karten"] .kv-proben__liste {
    --kv-karten-format: calc(9 / 16);
    position: relative;
    display: block;
    height: calc(var(--kv-karten-breite) / var(--kv-karten-format) + var(--space-16) + var(--space-8));
    padding: 0;
    overflow: clip;
    scroll-snap-type: none;
    perspective: var(--media-gallery-perspective);
    touch-action: pan-y pinch-zoom;
    user-select: none;
    isolation: isolate;
    cursor: grab;
}
.kv-proben__gruppe[data-proben-ansicht="karten"] .kv-proben__liste:active { cursor: grabbing; }
.kv-proben__gruppe[data-proben-ansicht="karten"] .kv-proben__liste--quadrat {
    --kv-karten-format: 1;
    --kv-karten-breite: min(calc(var(--kv-karten-basis) + var(--space-24) + var(--space-12)), var(--container-narrow), calc(100vw - var(--space-16)));
}
.kv-proben__gruppe[data-proben-ansicht="karten"] .kv-probe {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: var(--kv-karten-breite);
    height: calc(var(--kv-karten-breite) / var(--kv-karten-format) + var(--space-16));
    margin: 0;
    transform: translate(-50%, -50%);
    transition: transform var(--duration-base) var(--ease-in-out), opacity var(--duration-base) var(--ease-in-out);
}
.kv-proben__gruppe[data-proben-ansicht="karten"] .kv-probe figure { display: grid; grid-template-rows: var(--space-16) minmax(0, 1fr); height: 100%; overflow: hidden; border: thin solid var(--border-subtle); border-radius: var(--space-6); background: var(--surface-sunken); box-shadow: var(--shadow-lg); }
.kv-proben__gruppe[data-proben-ansicht="karten"] .kv-probe[data-proben-aktiv] figure { border-color: var(--text-muted); }
.kv-proben__gruppe[data-proben-ansicht="karten"] .kv-probe__media { min-height: 0; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }
.kv-proben__gruppe[data-proben-ansicht="karten"] .kv-proben__kartenprofil { display: flex; }
.kv-proben__gruppe[data-proben-ansicht="karten"] figcaption { display: none; }
.kv-proben__gruppe[data-proben-ansicht="karten"] .kv-probe:not([data-proben-aktiv]) .kv-probe__ton { visibility: hidden; }
.kv-proben__gruppe[data-proben-ansicht="karten"] .kv-probe:not([data-proben-aktiv]) .kv-probe__start { opacity: 0; }
.kv-proben__gruppe[data-proben-ansicht="karten"] .kv-probe[data-proben-position="0"] { z-index: 4; }
.kv-proben__gruppe[data-proben-ansicht="karten"] .kv-probe[data-proben-position="-1"] { z-index: 3; transform: translateX(calc(-50% - var(--media-gallery-near-offset))) translateY(calc(-50% + var(--space-2))) rotateY(var(--media-gallery-tilt)) scale(var(--media-gallery-near-scale)); }
.kv-proben__gruppe[data-proben-ansicht="karten"] .kv-probe[data-proben-position="1"] { z-index: 3; transform: translateX(calc(-50% + var(--media-gallery-near-offset))) translateY(calc(-50% + var(--space-2))) rotateY(calc(var(--media-gallery-tilt) * -1)) scale(var(--media-gallery-near-scale)); }
.kv-proben__gruppe[data-proben-ansicht="karten"] .kv-probe[data-proben-position="-2"] { z-index: 2; transform: translateX(calc(-50% - var(--media-gallery-far-offset))) translateY(calc(-50% + var(--space-4))) rotateY(var(--media-gallery-tilt)) scale(var(--media-gallery-far-scale)); }
.kv-proben__gruppe[data-proben-ansicht="karten"] .kv-probe[data-proben-position="2"] { z-index: 2; transform: translateX(calc(-50% + var(--media-gallery-far-offset))) translateY(calc(-50% + var(--space-4))) rotateY(calc(var(--media-gallery-tilt) * -1)) scale(var(--media-gallery-far-scale)); }
.kv-proben__gruppe[data-proben-ansicht="karten"] .kv-probe[data-proben-position="-1"] .kv-probe__media, .kv-probe[data-proben-position="1"] .kv-probe__media { opacity: var(--opacity-secondary-media); }
.kv-proben__gruppe[data-proben-ansicht="karten"] .kv-probe[data-proben-position="-2"] .kv-probe__media, .kv-probe[data-proben-position="2"] .kv-probe__media { opacity: var(--opacity-distant-media); }
.kv-proben__gruppe[data-proben-ansicht="karten"] .kv-probe[data-proben-position="weg"] { z-index: 0; visibility: hidden; opacity: 0; pointer-events: none; }
.kv-proben__gruppe[data-proben-ansicht="karten"] .kv-proben__kartensteuerung { display: grid; grid-template-columns: var(--space-12) minmax(0, 1fr) var(--space-12); align-items: start; gap: var(--space-6); width: min(100%, var(--container-narrow)); margin: var(--space-2) auto 0; }
.kv-proben__karten-zurueck .icon { rotate: 180deg; }
.kv-proben__kartenbeschriftung { text-align: center; min-width: 0; }
.lp .kv-proben__zaehler { margin: 0 0 var(--space-2); color: var(--text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.lp .kv-proben__kartentitel { margin: 0; color: var(--text-strong); font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
@media (max-width: 899px) { .kv-proben__gruppe[data-proben-ansicht="karten"] { --kv-karten-basis: var(--media-gallery-tablet); } }
@media (max-width: 600px) {
    .kv-proben__gruppe[data-proben-ansicht="karten"] { --kv-karten-basis: var(--media-gallery-mobile); }
    .kv-proben__gruppe[data-proben-ansicht="karten"] .kv-proben__liste--quadrat { --kv-karten-breite: min(calc(var(--kv-karten-basis) + var(--space-12)), calc(100vw - var(--space-16))); }
    .kv-proben__gruppe[data-proben-ansicht="karten"] .kv-proben__kartensteuerung { gap: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) { .kv-proben__gruppe[data-proben-ansicht="karten"] .kv-probe { transition: none; } }
