Webklar/src/components/home/kundenportal.css

/*
 * Abschnitt Kundenportal (Spezifikation 7.2).
 * Bewegung: nur transform und opacity, alles hinter prefers-reduced-motion: no-preference,
 * der Grundzustand ist statisch und vollständig sichtbar. Hover nur mit Maus.
 * Vorfahren der sticky-Bühne nutzen kein overflow: hidden (8.4).
 */

.kp {
  /* Länge eines Funktionsschritts auf der Bühne; fünf davon plus der letzte Schritt ergeben die Scrollstrecke */
  --kp-s: 45svh;
  --kp-ende: 120svh;
  --kp-oben: calc(var(--header-h) + 24px);
  --kp-buehne-h: calc(100svh - var(--header-h) - 48px);
}
@media (prefers-reduced-motion: reduce) {
  .kp {
    /* nichts bewegt sich im letzten Schritt, also braucht er keine lange Strecke */
    --kp-ende: 50svh;
  }
}

.kp__kopf {
  margin-bottom: clamp(40px, 5vw, 72px);
}
.kp__kopf .wk-h2 {
  max-width: none;
}
.kp-satz {
  display: block;
}

/* ── Desktop-Bühne (ab 900 px) ────────────────────────────────────────── */

.kp-huelle {
  position: relative;
  height: calc(var(--kp-buehne-h) + 5 * var(--kp-s) + var(--kp-ende));
}

/* unsichtbare Spur aus Markern: der IntersectionObserver beobachtet sie, die Bühne klebt darüber */
.kp-spur {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.kp-marker {
  flex: 0 0 var(--kp-s);
}
/* Die erste Marke reicht bis zur Mitte des Bildschirms, wenn die Bühne anklebt: Schritt 1 ist beim Ankommen aktiv */
.kp-marker:first-child {
  flex-basis: calc(50svh - var(--kp-oben) + var(--kp-s));
}
.kp-marker:last-child {
  flex: 1 1 auto;
}

.kp-buehne {
  position: sticky;
  top: var(--kp-oben);
  height: var(--kp-buehne-h);
  display: flex;
  align-items: center;
}

.kp-buehne__innen {
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

/* Liste der Funktionen */
.kp-liste {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kp-eintrag {
  position: relative;
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 0;
  text-align: left;
  color: var(--fg-muted);
  -webkit-tap-highlight-color: transparent;
}
.kp-eintrag__titel {
  display: block;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  transition: color var(--dur-state) var(--ease);
}
.kp-eintrag__text {
  display: block;
  margin-top: 4px;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-wrap: pretty;
}
.kp-eintrag[aria-current="step"] .kp-eintrag__titel {
  color: var(--fg);
}
/* kleiner roter Punkt als Marker der aktiven Funktion (hängt im Rand links vom Text) */
.kp-eintrag__punkt {
  position: absolute;
  left: -20px;
  top: 19px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: scale(0.4);
}
.kp-eintrag[aria-current="step"] .kp-eintrag__punkt {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: no-preference) {
  .kp-eintrag__punkt {
    transition:
      opacity var(--dur-state) var(--ease),
      transform var(--dur-state) var(--ease);
  }
}
@media (hover: hover) and (pointer: fine) {
  .kp-eintrag:hover .kp-eintrag__titel {
    color: var(--fg);
  }
}
/* niedrige Fenster: die Liste wird enger, damit sie in die Bühne passt (Text bleibt mindestens 14 px) */
@media (max-height: 800px) {
  .kp-liste {
    gap: 2px;
  }
  .kp-eintrag {
    padding: 6px 0;
  }
  .kp-eintrag__titel {
    font-size: 1.25rem;
  }
  .kp-eintrag__text {
    margin-top: 2px;
    font-size: var(--fs-small);
  }
  .kp-eintrag__punkt {
    top: 15px;
  }
}
/* sehr niedrige Fenster: nur die aktive Funktion zeigt ihre Unterschrift */
@media (max-height: 620px) {
  .kp-eintrag:not([aria-current="step"]) .kp-eintrag__text {
    display: none;
  }
}

/* Geräte: Desktop-Fenster mit überlappendem Handy-Rahmen unten rechts */
.kp-geraete {
  /* Breite so, dass die Geräte nie höher werden als die Bühne (Seitenverhältnis 100 : 95) */
  width: min(100%, calc((var(--kp-buehne-h) - 8px) / 0.95));
  aspect-ratio: 100 / 95;
  justify-self: end;
  position: relative;
  /* Bezugsgröße (cqw) für die Verschiebung des Handys im letzten Schritt */
  container-type: inline-size;
}
.kp-fenster {
  position: absolute;
  left: 0;
  top: 0;
  width: 94%;
}
.kp-handy {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30%;
}

/* Ebenen, die per Überblendung wechseln (nur die aktive ist sichtbar) */
.kp-ebenen {
  position: absolute;
  inset: 0;
}
.kp-lage {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.kp-lage.is-aktiv {
  opacity: 1;
}
.kp-lage img {
  display: block;
  width: 100%;
  height: auto;
}

/* Schritt 6 "Als App": Fenster blendet aus, das Handy rückt in die Mitte und wird größer.
   Ohne reduzierte Bewegung geschieht das weich, sonst wird einfach getauscht. */
.kp-buehne[data-app="ja"] .kp-fenster {
  opacity: 0;
  pointer-events: none;
}
.kp-buehne[data-app="ja"] .kp-handy {
  transform: translate(-35cqw, -16.75cqw) scale(1.5);
}

/* Der lange Screenshot: gleiche Breite wie der Schirm, 68,9 % seiner Höhe wandern aus dem Bild
   ((5428 - 1688) / 5428). Die Verschiebung hängt am Scrollfortschritt (--kp-q), kein eigener Scrollbereich. */
.kp-lang {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.kp-lang img {
  display: block;
  width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .kp-lage,
  .kp-fenster {
    transition: opacity var(--dur-enter) var(--ease);
  }
  .kp-handy {
    transition: transform var(--dur-enter) var(--ease);
  }
  .kp-buehne .kp-lang {
    transform: translateY(calc(var(--kp-q, 0) * -68.9%));
  }
  /* die große Ebene nur im letzten Schritt auf die Grafikkarte legen */
  .kp-buehne[data-app="ja"] .kp-lang {
    will-change: transform;
  }
}

/* ── Handy: Wisch-Reihe (unter 900 px) ─────────────────────────────────── */

.kp-karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.kp-karte__handy {
  width: min(100%, 250px);
  margin-bottom: 1.5rem;
}
.kp-karte__titel {
  margin-bottom: 0.35rem;
}
.kp-karte__text {
  max-width: 26ch;
}

/* "Als App": der lange Screenshot schiebt sich langsam nach oben, solange die Karte zu sehen ist */
/* (.kp-lang liegt absolut im Schirm; was unten herausragt, schneidet der Rahmen ab) */
@media (prefers-reduced-motion: no-preference) {
  .kp-karte .kp-lang {
    animation: kp-hoch 18s linear both paused;
  }
  .kp-karte[data-sichtbar="ja"] .kp-lang {
    animation-play-state: running;
  }
}
@keyframes kp-hoch {
  0%,
  6% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-68.9%);
  }
}

/* ── Schrittzeile ──────────────────────────────────────────────────────── */

.kp-schritte {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 40px);
  margin-top: clamp(24px, 3vw, 40px);
}
.kp-schritt {
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-strong);
}
.kp-schritt__nr {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.2;
  color: var(--fg-muted);
}
.kp-schritt__text {
  display: block;
  font-size: 1.1875rem;
  line-height: 1.3;
  color: var(--fg);
  text-wrap: balance;
}

/* Handy: vier kleine Karten in einer Wisch-Reihe */
.kp-schritte-handy {
  margin-top: clamp(40px, 10vw, 64px);
}
.kp-schritte-reihe .wk-wisch__karte {
  flex-basis: 62vw;
  max-width: 250px;
}
.kp-schritt-karte {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
  min-height: 132px;
  padding: 1.25rem;
  border-radius: 18px;
  background: var(--bg);
}
.kp-schritt-karte .kp-schritt__nr {
  margin-bottom: 0;
}