/* Sportkarten-Stapel der Landingpage: dieselbe Vor-zurück-Bewegung wie die gestapelte App-Vorschau,
   hier mit den vorhandenen Klassik-Illustrationen für alle Sportarten. */
.deck { position: relative; height: clamp(210px, 18vw, 270px); width: 100%; overflow: visible; }
.deck-karte { position: absolute; width: clamp(140px, 12vw, 184px); aspect-ratio: 3 / 4; left: 50%; top: 0;
  border-radius: 22px; overflow: hidden; background: var(--surface); border: 1px solid var(--glas-rand);
  box-shadow: var(--schatten); display: flex; align-items: flex-end; justify-content: center;
  transition: transform 820ms cubic-bezier(.22,.8,.25,1), opacity 700ms ease; will-change: transform, opacity; }
.deck-karte::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 0%, var(--surface-alt), transparent 70%); }
.deck-karte img { position: relative; width: auto; height: auto; max-width: 78%; max-height: 78%; object-fit: contain; }
.deck-karte img.hell { filter: sepia(.35) hue-rotate(55deg) saturate(1.6) contrast(1.08); }
.deck-karte[data-stufe="0"] { z-index: 4; opacity: 1; transform: translateX(-50%) rotate(-1deg); }
.deck-karte[data-stufe="1"] { z-index: 3; opacity: .88; transform: translateX(-26%) translateY(12px) rotate(7deg) scale(.94); }
.deck-karte[data-stufe="2"] { z-index: 2; opacity: .72; transform: translateX(-76%) translateY(18px) rotate(-8deg) scale(.89); }
.deck-karte[data-stufe="3"] { z-index: 1; opacity: .42; transform: translateX(-17%) translateY(26px) rotate(12deg) scale(.84); }
.deck-karte[data-stufe="versteckt"] { z-index: 0; opacity: 0; transform: translateX(-50%) translateY(40px) scale(.78); pointer-events: none; }
.deck-karte.weg-links { opacity: 0; transform: translateX(-150%) translateY(-8px) rotate(-13deg) scale(.92); }
.deck-karte.weg-rechts { opacity: 0; transform: translateX(50%) translateY(-8px) rotate(13deg) scale(.92); }
.hell { display: block; }
.dunkel { display: none; }
@media (prefers-color-scheme: dark) { .hell { display: none; } .dunkel { display: block; } }

@media (min-width: 861px) {
  main { grid-template-rows: clamp(270px, 23vw, 330px) auto; column-gap: clamp(24px, 4vw, 64px); row-gap: 10px; }
  .text { grid-column: 1; grid-row: 1; align-self: start; }
  .reihe { grid-column: 1; grid-row: 2; align-self: end; margin: 0; }
  .deck { grid-column: 2; grid-row: 1; align-self: start; height: clamp(210px, 18vw, 270px); transform: translateY(clamp(4px, .5vw, 10px)); }
  .dabei { grid-column: 2; grid-row: 2; width: 100%; max-width: none; margin: 0; align-self: end; transform: none; }
}
@media (max-width: 860px) {
  main { grid-template-columns: 1fr; }
  .deck { order: -1; height: min(76vw, 360px); max-width: 520px; margin: 0 auto; }
  .deck-karte { width: min(58%, 230px); }
  .reihe { grid-template-columns: 1fr; }
  .kachel { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; align-items: start; }
  .kachel svg { grid-row: span 2; margin-top: 2px; }
  .kachel b { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .deck-karte { transition: none; } }