/* acessio.de Startseite · Leistungsbereich als Kartenstapel mit Fortschritt (21.10.2026, Korrektur
   Modul „stapel“ 21.10.2026 abends). Muster nach fleet.co „Einfach starten“: Karten schieben sich
   übereinander, ältere werden kleiner, ihre Zeichnung tritt zurück, eine Leiste mit vier Segmenten
   zeigt den Fortschritt. Ergänzt start-*.css und startseite-*.css. .kann-schluss bleibt unberührt.
   Ohne JS: reiner CSS-Stapel ohne Leiste. Reduzierte Bewegung, Bildschirmhöhe unter 700 px
   oder zu hohe Karten (Skript setzt .ist-ruhig): ruhige Liste wie bisher.

   Korrektur „Karte 4 rutscht nicht über Karte 3“: Karte 4 war das letzte Kind der Liste (dem
   Sticky-Bereich) ohne Platz dahinter. Sie konnte deshalb nie haften, lief an ihrer Andocklage
   nur vorbei (Halt 0–8 px Scrollweg) und schob sofort alle Karten mit hinaus; beim Mausrad
   (100 px je Raste) war der angedockte Zustand nie zu sehen. Jetzt:
   1. Haltweg auch NACH Karte 4 (leere fünfte Zeile hinter dem row-gap): Karte 4 dockt an und bleibt
      wie die anderen Karten einen Haltweg lang stehen.
   2. Gleiche Zeilen per Grid (repeat(4, 1fr)): Die höchste Karte bestimmt die Zeilenhöhe; das
      rechnet der Browser bei jeder Layoutänderung neu (Schrift, Bilder, Breite, Zoom), ohne Skript
      und ohne einmalig gemessene Höhen.
   3. margin-top = Versatz × Kartennummer: Alle Unterkanten liegen angedockt bündig, und alle vier
      Karten lösen sich im selben Augenblick. Der Stapel verlässt den Bildschirm geschlossen, statt
      dass Karte 4 vorher über die Stapelkanten läuft. */

.kann-buehne { --kopf: 96px; --versatz: 16px; --leiste: 44px; --halt: 16vh; position: relative; }

/* Fortschrittsleiste: nur mit Skript sichtbar, rein dekorativ (aria-hidden im HTML). */
.kann-fortschritt { display: none; }
.kann-buehne.ist-bereit .kann-fortschritt {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  position: sticky; top: calc(var(--kopf) - 4px); z-index: 6;
  height: var(--leiste); align-items: center; margin: 0 0 8px;
  background: var(--canvas, #F3F1F0);
}
.kann-fortschritt span { display: grid; gap: 7px; min-width: 0; font: 600 13px/1.1 var(--sans); letter-spacing: .02em; color: var(--muted, #6E6A66); }
.kann-fortschritt em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kann-fortschritt b { display: block; height: 4px; border-radius: 2px; background: rgba(25, 25, 28, .12); overflow: hidden; }
.kann-fortschritt b::after { content: ""; display: block; height: 100%; background: var(--cta, #22C7D6); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.kann-fortschritt span.ist-aktiv { color: var(--ink, #19191C); }

/* Karten stapeln: reines CSS, läuft auch ohne Skript. Der Haltweg ist der Zeilenabstand (row-gap)
   zwischen den Karten und, über die leere fünfte Zeile (::after), auch nach Karte 4. Nach Karte 4
   mindestens 140 px, damit auch ein ungeglätteter Mausrad-Sprung (rund 100 px je Raste) den
   angedockten Zustand trifft. Kein padding-bottom an der Liste: sticky haftet nur im
   Inhaltsbereich, Innenabstand zählt nicht. */
.kann-liste.kann-stapel {
  gap: var(--halt) 0; padding-bottom: 0;
  grid-template-rows: repeat(4, 1fr); grid-auto-rows: auto;
}
.kann-liste.kann-stapel::after { content: ""; display: block; height: max(0px, 140px - var(--halt)); }
.kann-stapel > .kann:nth-child(2) { --i: 1; }
.kann-stapel > .kann:nth-child(3) { --i: 2; }
.kann-stapel > .kann:nth-child(4) { --i: 3; }
.kann-stapel > .kann {
  position: sticky; top: calc(var(--kopf) + var(--leiste) + var(--i, 0) * var(--versatz));
  margin-top: calc(var(--i, 0) * var(--versatz));
  align-content: center;
  padding: clamp(20px, 3.2vw, 52px);
  border-radius: 28px;
  background: var(--flaeche, #FBFAF8);
  box-shadow: 0 1px 0 rgba(25, 25, 28, .05), 0 24px 48px -32px rgba(25, 25, 28, .38);
  transform-origin: 50% 0;
  transform: scale(calc(1 - var(--tiefe, 0) * .035));
}
/* Abblenden nur für die Zeichnung, und erst ab halbem Weg der Folgekarte (QA 21.10.2026).
   Der Text bleibt voll deckend: Solange ein Teil davon sichtbar ist, gilt der volle Kontrast
   (Nummer und Linkzeile #6E6A66 auf #FBFAF8 = 5,1:1); verdeckt spielt Deckkraft keine Rolle. */
.kann-stapel > .kann > .kann__bild { opacity: clamp(.35, calc(1.55 - var(--tiefe, 0) * 1.1), 1); }
.kann-stapel > .kann:focus-within { z-index: 5; }
.kann-stapel > .kann:focus-within > * { opacity: 1; }
.kann-stapel .kann__text h2 { margin-inline: 0; }
.kann-stapel .kann__mehr { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--muted, #6E6A66); }
.kann-stapel .kann__mehr a { white-space: nowrap; }
.kann-stapel .kann__bild picture { display: block; }

@media (max-width: 859px) {
  .kann-buehne { --kopf: 80px; --versatz: 10px; --leiste: 30px; --halt: 10vh; }
  .kann-fortschritt em { display: none; }
  .kann-fortschritt span { gap: 0; }
  .kann-stapel > .kann { border-radius: 22px; }
  .kann-stapel .kann__bild { max-width: 440px; }
}

/* Ruhige Liste: niedrige Bildschirme und reduzierte Bewegung (CSS), zu hohe Karten (Skript). */
@media (max-height: 699px), (prefers-reduced-motion: reduce) {
  .kann-liste.kann-stapel { gap: clamp(44px, 6vw, 92px); grid-template-rows: none; }
  .kann-liste.kann-stapel::after { display: none; }
  .kann-stapel > .kann { position: static; transform: none; margin-top: 0; align-content: normal; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .kann-stapel > .kann > *, .kann-stapel > .kann > .kann__bild { opacity: 1; }
  .kann-buehne.ist-bereit .kann-fortschritt { display: none; }
}
.kann-buehne.ist-ruhig .kann-liste.kann-stapel { gap: clamp(44px, 6vw, 92px); grid-template-rows: none; }
.kann-buehne.ist-ruhig .kann-liste.kann-stapel::after { display: none; }
.kann-buehne.ist-ruhig .kann-stapel > .kann { position: static; transform: none; margin-top: 0; align-content: normal; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.kann-buehne.ist-ruhig .kann-stapel > .kann > * { opacity: 1; }
.kann-buehne.ist-ruhig.ist-bereit .kann-fortschritt { display: none; }
@media (max-width: 859px) {
  .kann-buehne.ist-ruhig .kann-liste.kann-stapel { gap: clamp(48px, 12vw, 72px); }
}
@media (max-width: 859px) and (max-height: 699px), (max-width: 859px) and (prefers-reduced-motion: reduce) {
  .kann-liste.kann-stapel { gap: clamp(48px, 12vw, 72px); }
}