/* ==========================================================================
   Kopfbereich, zweite Runde, Fassung 5 (Probe, gehört noch nicht zur Seite). Grundlage: Vorschlag A „Schwebende Karten“.
   Fassung 2 (Steven, 13.11.2026): Karten deutlich kompakter, damit das Handy die Hauptsache bleibt. Vorbild sind die
   kleinen Karten aus dem früheren Entwurf: Bewerbung = nur die Karte aus dem Board, Erfolg = Zitat mit Foto und Name.
   Stevens Rückmeldung vom 13.11.2026 ist eingearbeitet:
   - gedrehte Karten wie in A, aber ruhiger und kleiner: Das Handy bleibt die Hauptsache
   - links NUR Bewerbungen, rechts NUR Erfolge der Praxen
   - Bewerbung sieht aus wie die Karte im Board der App (Kreis, Name, Stelle, „gerade eben · Meta“),
     keine erfundenen Angaben wie Berufsjahre
   - „Über 150 Praxen“ sitzt mittig am Fuß des Handys
   Fassung 3 (Steven, 13.11.2026): Karten weiter außen, blauer Verlauf ohne Ringe hinter dem Handy, das Handy mit
   echtem weichem Schatten statt des eingebrannten, und drei Plätze für „Über 150 Praxen“ (Klasse an .kk-praxen):
   --dunkel (schwarze Karte links unten) | --zeile (Zeile unter den Knöpfen, ohne Karte) | --pille (helle Karte rechts unten)
   Fassung 4 (Steven, 13.11.2026): gewählt ist --pille. Der blaue Verlauf läuft nach unten in Weiß aus, damit das Handy
   unten in Weiß ausläuft. Das Handy bekommt einen kräftigeren Schatten auf dem Blau. Karten wieder etwas näher am Handy.
   Fassung 5 (Steven, 13.11.2026): Die Karte mit den 150 Praxen ist schwarz (--nacht), damit sie sich von den anderen abhebt.
   Der Hintergrund hinter dem Handy kommt je Variante aus einer eigenen Datei (g_a.css, g_b.css, g_c.css), die NACH dieser geladen wird
   und nur .kk-grund und dessen Kinder gestaltet.

   Aufbau:   .kk  >  .kk-grund (Verlauf)  +  .handy  +  .kk-seite--links  +  .kk-seite--rechts   (die 150 Praxen liegen je nach Variante in einer Seite oder im Kopftext)
   Zustände: ohne Klasse = Karten warten unsichtbar (nur wenn Skripte laufen)
             .kk--flug   = Karten fahren am Computer hinter dem Handy hervor
             .kk--steig  = Karten steigen auf Tablet und Handy sanft ein
             .kk--da     = Ruhe, alles steht
   Bewegt werden nur transform und opacity.
   ========================================================================== */

.kk {
  --kk-linie: rgb(13 13 13 / .07);
  --kk-blau: #dbeafe;
  --kk-auf-blau: #1d4ed8;
  --kk-gruen: #10b981;
  --kk-gruen-text: #047857;
  --kk-zitat: #2d2d2d;
  --kk-feder: cubic-bezier(.34, 1.36, .64, 1);
  --kk-dreh: 1;                 /* Anteil der Drehung: am Computer voll, sonst weniger */
  --kk-handy: min(372px, 100vw - 2 * var(--rand)); /* Breite des Films, Höhe = Breite * 1382 / 864 */
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
/* Echte Federkurve (ein leichtes Überschwingen, dann Ruhe). Ältere Browser nehmen die Kurve darüber. */
@supports (animation-timing-function: linear(0, 1)) {
  .kk {
    --kk-feder: linear(0, .0333, .1168, .2297, .3556, .4826, .6025, .7098, .8019, .8776, .9374, .9825, 1.0146, 1.0358, 1.0481, 1.0535, 1.0539, 1.0508, 1.0455, 1.039, 1.0321, 1.0253, 1.019, 1.0135, 1.0089, 1.0052, 1.0023, 1.0001, .9987, .9977, .9972, .9971, .9971, .9974, .9977, .998, .9984, .9988, .9991, .9994, 1);
  }
}

/* Das Handy liegt über den Karten: Beim Start kommen sie dahinter hervor. */
.kk .handy { z-index: 2; }

/* --------------------------------------------------------------------------
   Karte: weiß, feine Linie, weicher Schatten in mehreren Schichten
   -------------------------------------------------------------------------- */
.kk-karte {
  --w: calc(var(--r, 0deg) * var(--kk-dreh));
  --kk-ton: 13 13 13;           /* Farbe des weiten Schattens: links ein Hauch Grün, rechts ein Hauch Blau */
  position: relative;
  z-index: 1;
  margin: 0;
  border: 1px solid var(--kk-linie);
  border-radius: 20px;
  background: #fff;
  box-shadow:
    0 1px 1px rgb(13 13 13 / .03),
    0 3px 6px -2px rgb(13 13 13 / .05),
    0 14px 28px -10px rgb(13 13 13 / .08),
    0 32px 56px -28px rgb(var(--kk-ton) / .2);
  transform: rotate(var(--w));
  color: var(--text);
  text-align: left;
  font-size: .875rem;
  line-height: 1.4;
  letter-spacing: 0;
}
.kk-seite--links .kk-karte { --kk-ton: 6 95 70; }
.kk-seite--rechts .kk-karte { --kk-ton: 29 78 216; }
.kk-karte svg { width: 14px; height: 14px; }

/* Drehung und Reihenfolge je Platz (i = Reihenfolge am Computer, j = auf Tablet und Handy) */
.kk-seite--links  .kk-karte:nth-child(1) { --r: -1.2deg; --i: 0; --j: 1; }
.kk-seite--links  .kk-karte:nth-child(2) { --r: 1deg;    --i: 2; --j: 3; }
.kk-seite--rechts .kk-karte:nth-child(1) { --r: 1deg;    --i: 1; --j: 2; }
.kk-seite--rechts .kk-karte:nth-child(2) { --r: -1.2deg; --i: 3; --j: 4; }
.kk-seite--links  .kk-karte:nth-child(3) { --r: -1.4deg; --i: 4; --j: 5; }
.kk-seite--rechts .kk-karte:nth-child(3) { --r: 1.4deg;  --i: 4; --j: 5; }

/* --------------------------------------------------------------------------
   Bewerbung: die Karte aus dem Board der App, kompakt. Eine kleine Fahne sagt, was passiert ist.
   -------------------------------------------------------------------------- */
.kk-bew {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px 14px;
  border-radius: 18px;
}
/* Die frische Bewerbung trägt den grünen Rand, mit dem neue Karten im Board aufleuchten */
.kk-seite--links .kk-karte:nth-child(1) {
  border-color: #6ee7b7;
  box-shadow:
    0 0 0 3px rgb(110 231 183 / .26),
    0 1px 1px rgb(13 13 13 / .03),
    0 3px 6px -2px rgb(13 13 13 / .05),
    0 14px 28px -10px rgb(13 13 13 / .08),
    0 32px 56px -28px rgb(var(--kk-ton) / .2);
}
.kk-fahne {
  position: absolute;
  top: -13px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 12px 0 9px;
  border: 1px solid var(--kk-linie);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px -2px rgb(13 13 13 / .12);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .004em;
  line-height: 1;
  color: var(--text-stark);
  white-space: nowrap;
}
.kk-punkt {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kk-gruen);
  box-shadow: 0 0 0 3px rgb(16 185 129 / .18);
}
.kk-kreis {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e5e5e5;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1;
  color: #5d5d5d;
}
.kk-board__text { min-width: 0; }
.kk-name {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.3;
  color: #171717;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kk-stelle {
  display: block;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.35;
  color: #414141;
}
.kk-meta {
  display: block;
  margin-top: 1px;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--text-leise);
}

/* --------------------------------------------------------------------------
   Erfolg einer Praxis, kompakt: das Ergebnis als grüne Marke, das Zitat, dann wer es sagt
   -------------------------------------------------------------------------- */
.kk-stimme {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 18px;
}
.kk-ergebnis {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  max-width: 100%;
  padding: 0 13px 0 9px;
  border-radius: 999px;
  background: var(--akzent);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .002em;
  line-height: 1.2;
  color: var(--auf-akzent);
  white-space: nowrap;
}
.kk-ergebnis svg { flex: none; stroke-width: 2.75; }
.kk-nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.kk-zitat { align-self: stretch; margin: 10px 0 0; }
.kk-zitat p {
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.4;
  color: var(--text-stark);
  text-indent: -0.43em;        /* das öffnende Anführungszeichen hängt vor der Kante */
  padding-left: 0.43em;
  text-wrap: pretty;
}

.kk-wer {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  margin-top: 12px;
}
.kk-foto {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--karte);
  box-shadow: 0 0 0 1px var(--kk-linie);
}
/* Ohne Foto: Kreis mit Anfangsbuchstaben */
span.kk-foto {
  display: grid;
  place-items: center;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1;
  color: var(--auf-akzent);
  background: var(--akzent);
  box-shadow: none;
}
.kk-wer__text { min-width: 0; }
.kk-wer__text strong {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  line-height: 1.3;
  color: var(--text-stark);
}
.kk-wer__praxis {
  display: block;
  margin-top: 1px;
  font-size: .8125rem;
  letter-spacing: .004em;
  line-height: 1.35;
  color: var(--text-leise);
  text-wrap: pretty;
}
/* Ohne Zitat: Ergebnis und Name tragen die Karte allein */
.kk-stimme--ohne .kk-zitat { display: none; }

/* --------------------------------------------------------------------------
   Über 150 Praxen: drei Fassungen zum Vergleich
   -------------------------------------------------------------------------- */
.kk-stapel { display: flex; flex: none; }
.kk-stapel img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--karte);
  box-shadow: 0 0 0 2px #fff;
}
.kk-stapel img + img { margin-left: -11px; }
/* Die Köpfe wechseln von Zeit zu Zeit: einer blendet aus, ein anderer ein (Skript). */
.kk-stapel img { transition: opacity 320ms ease; }
.kk-stapel img.kk-weg { opacity: 0; }

/* a) Schwarze Karte: setzt sich bewusst ab, wie im früheren Entwurf */
.kk-praxen--dunkel {
  display: block;
  padding: 18px 20px 19px;
  border-color: transparent;
  background: #0d0d0d;
  color: rgb(255 255 255 / .78);
  font-size: .875rem;
  line-height: 1.45;
  letter-spacing: .002em;
  text-wrap: pretty;
}
.kk-praxen--dunkel strong {
  display: block;
  margin-bottom: 6px;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: #fff;
}
.kk-praxen--dunkel strong span { font-weight: 500; color: rgb(255 255 255 / .62); }

/* c) Helle Karte mit Fotos: gehört optisch zu den Erfolgen */
.kk-praxen--pille {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px 12px 14px;
  border-radius: 22px;
}
.kk-praxen--pille .kk-praxen__text,
.kk-zeile .kk-praxen__text {
  font-size: .8125rem;
  letter-spacing: .004em;
  line-height: 1.35;
  color: var(--text);
  text-wrap: balance;
}
.kk-praxen--pille .kk-stapel img:nth-child(n + 4) { display: none; }
.kk-praxen--pille strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.016em;
  line-height: 1.25;
  color: var(--text-stark);
}

/* Schwarz: Die Karte hebt sich bewusst von den weißen Karten ab */
.kk-praxen--nacht {
  border-color: transparent;
  background: #0d0d0d;
  box-shadow:
    0 1px 1px rgb(13 13 13 / .06),
    0 6px 12px -4px rgb(13 13 13 / .18),
    0 22px 40px -16px rgb(13 13 13 / .34);
}
.kk-praxen--nacht .kk-praxen__text { color: rgb(255 255 255 / .78); }
.kk-praxen--nacht strong { color: #fff; }
.kk-praxen--nacht .kk-stapel img { box-shadow: 0 0 0 2px #0d0d0d; }

/* b) Zeile unter den Knöpfen: keine Karte, keine Kante, nur Fotos und ein Satz */
.kk-zeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 34em;
  margin: 28px auto 0;
  text-align: left;
}
.kk-zeile .kk-stapel img { width: 30px; height: 30px; }
.kk-zeile .kk-praxen__text { font-size: .875rem; line-height: 1.4; text-wrap: pretty; }
.kk-zeile strong { font-weight: 600; color: var(--text-stark); }
@media (max-width: 479px) {
  .kk-zeile { gap: 10px; }
  .kk-zeile .kk-stapel img:nth-child(n + 4) { display: none; }
}

/* --------------------------------------------------------------------------
   Deko hinter dem Handy (nur am Computer, je Variante)
   -------------------------------------------------------------------------- */
/* Blauer Verlauf hinter dem Handy: weich, ohne Ringe. Liegt hinter Überschrift, Knöpfen und Karten. */
.start { overflow-x: clip; }
.kk-grund {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: calc(var(--kk-handy) * 1382 / 864 * .46);
  width: min(1120px, 190vw);
  height: min(1040px, 176vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgb(191 219 254 / .66) 0%, rgb(219 234 254 / .8) 30%, rgb(219 234 254 / .44) 58%, rgb(219 234 254 / .12) 82%, rgb(219 234 254 / 0) 100%);
  /* Nach unten blendet der Verlauf aus: Wo der Film ausläuft, ist der Grund schon weiß. */
  -webkit-mask-image: linear-gradient(#000, #000 40%, transparent 70%);
  mask-image: linear-gradient(#000, #000 40%, transparent 70%);
}

/* Das Handy: Der Film wird genau an der Kante des Handys abgeschnitten. Damit fallen der weiße Rand und der
   eingebrannte Schatten des Films weg. An ihre Stelle treten ein echter, weicher Schatten und eine feine Linie.
   Beides liegt sauber auf dem Verlauf und läuft unten mit dem Film aus.
   Maße aus dem Film: Fenster 900 von 1080 breit (je 8,33 % Rand), oben 90 von 1728 (5,21 %), Ecken 82 von 1080 (7,59 %). */
.kk .handy { container-type: inline-size; }
.kk .film {
  background: none;
  clip-path: inset(5.3% 8.42% 0 8.42% round 28px 28px 0 0);
  clip-path: inset(5.3% 8.42% 0 8.42% round 7.5cqw 7.5cqw 0 0);
  -webkit-mask-image: linear-gradient(#000, #000 calc(100% - 90px), transparent);
  mask-image: linear-gradient(#000, #000 calc(100% - 90px), transparent);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
.kk .handy::before,
.kk .handy::after {
  content: "";
  position: absolute;
  left: 8.42%;
  right: 8.42%;
  top: 5.3%;
  bottom: 0;
  border-radius: 28px 28px 0 0;
  border-radius: 7.5cqw 7.5cqw 0 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000, #000 calc(100% - 150px), transparent calc(100% - 20px));
  mask-image: linear-gradient(#000, #000 calc(100% - 150px), transparent calc(100% - 20px));
}
/* Schatten: eine weichgezeichnete dunkelblaue Fläche in der Form des Handys, leicht nach unten versetzt.
   Der Kasten ist rundum 70 px größer als das Handy (durchsichtiger Rand), damit die Weichzeichnung Platz hat
   und der Schatten auf dem blauen Grund rund um das Handy zu sehen ist. Unten läuft er mit dem Film aus. */
.kk .handy::before {
  z-index: -1;
  left: calc(8.42% - 70px);
  right: calc(8.42% - 70px);
  top: calc(5.3% - 70px);
  bottom: -70px;
  border: 70px solid transparent;
  border-radius: 98px 98px 0 0;
  border-radius: calc(7.5cqw + 70px) calc(7.5cqw + 70px) 0 0;
  background: rgb(30 58 138 / .3) padding-box;
  filter: blur(26px);
  transform: translateY(18px);
  -webkit-mask-image: linear-gradient(#000, #000 calc(100% - 330px), transparent calc(100% - 150px));
  mask-image: linear-gradient(#000, #000 calc(100% - 330px), transparent calc(100% - 150px));
}
/* feine Linie um das Handy */
.kk .handy::after {
  border: 1px solid rgb(13 13 13 / .08);
  border-bottom: 0;
  -webkit-mask-image: linear-gradient(#000, #000 calc(100% - 110px), transparent calc(100% - 10px));
  mask-image: linear-gradient(#000, #000 calc(100% - 110px), transparent calc(100% - 10px));
}

/* --------------------------------------------------------------------------
   Handy (unter 768 px): Film, darunter 150 Praxen, eine Bewerbung, ein Erfolg
   -------------------------------------------------------------------------- */
.kk-seite {
  display: grid;
  align-content: start;
  gap: 20px;
  width: min(400px, 100%);
}
.kk-seite .kk-karte:nth-child(n + 2):not(.kk-praxen) { display: none; }
/* Platz für den höchsten Erfolg ist reserviert: Beim Tausch der Inhalte verrutscht darunter nichts. */
.kk-seite--rechts { min-height: 326px; }
@media (min-width: 400px) { .kk-seite--rechts { min-height: 304px; } }
.kk-seite--links { margin-top: 6px; }   /* Luft für die kleine Fahne über der Karte */

/* --------------------------------------------------------------------------
   Tablet (768 bis 1023 px): Film oben, links die Bewerbungen, rechts die Erfolge
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .kk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  .kk-seite { width: min(340px, 100%); gap: 26px; }
  .kk-seite .kk-karte:nth-child(n + 2):not(.kk-praxen) { display: flex; }
  .kk-seite--links { justify-self: end; }
  .kk-seite--rechts { justify-self: start; min-height: 548px; }
  .kk-seite--links  .kk-karte:nth-child(1) { --r: -1.6deg; }
  .kk-seite--links  .kk-karte:nth-child(2) { --r: 1.3deg; }
  .kk-seite--rechts .kk-karte:nth-child(1) { --r: 1.4deg; }
  .kk-seite--rechts .kk-karte:nth-child(2) { --r: -1.2deg; }
}

/* --------------------------------------------------------------------------
   Computer (ab 1024 px): Karten schweben links und rechts neben dem Handy
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .kk {
    --kk-dreh: .7;
    --kk-handy: 432px;
    grid-template-columns: minmax(0, 1fr) 432px minmax(0, 1fr);
    gap: 0;
    align-items: start;
  }
  .kk .handy { grid-column: 2; grid-row: 1; }

  .kk-seite {
    display: flex;
    flex-direction: column;
    width: auto;
    min-height: 0;
    grid-row: 1;
  }
  .kk-seite--links  { grid-column: 1; justify-self: stretch; align-items: flex-end;   gap: 54px; padding-top: 140px; margin-left:  clamp(-24px, (100vw - 1200px) * .14, 0px); }
  .kk-seite--rechts { grid-column: 3; justify-self: stretch; align-items: flex-start; gap: 28px; padding-top: 96px;  margin-right: clamp(-24px, (100vw - 1200px) * .14, 0px); min-height: 0; }

  .kk-seite--links  .kk-karte { width: min(272px, 100% - 16px); }
  .kk-seite--rechts .kk-karte { width: min(340px, 100% - 8px); }

  /* Versetzt: eine Karte je Seite rückt nach außen, die andere bleibt nah am Handy */
  .kk-seite--links  .kk-karte:nth-child(1) { --r: -4deg;   margin-right: clamp(12px, 100% - 296px, 104px); }
  .kk-seite--links  .kk-karte:nth-child(2) { --r: 2.6deg;  margin-right: clamp(6px, 100% - 372px, 30px); }
  .kk-seite--links  .kk-karte:nth-child(3) { --r: -2.2deg; margin-right: clamp(10px, 100% - 330px, 104px); }
  .kk-seite--rechts .kk-karte:nth-child(1) { --r: 2.2deg;  margin-left: clamp(8px, 100% - 356px, 68px); }
  .kk-seite--rechts .kk-karte:nth-child(2) { --r: -1.8deg; margin-left: clamp(4px, 100% - 404px, 22px); }
  .kk-seite--rechts .kk-karte:nth-child(3) { --r: 2deg;    margin-left: clamp(8px, 100% - 356px, 52px); }
  .kk-seite--links  .kk-praxen { width: min(264px, 100% - 16px); }
  .kk-seite--rechts .kk-praxen { width: min(320px, 100% - 8px); }

  /* Enger Computer (1024 bis 1199 px): etwas kleinere Schrift */
  .kk-stimme { padding: 14px 15px; }
  .kk-zitat p { font-size: .875rem; }
  .kk-ergebnis { font-size: .8125rem; padding: 0 11px 0 8px; gap: 6px; }
  /* Ecken des Handys, falls der Browser die Einheit cqw nicht kennt: 432 px breit ergibt 32,8 px */
  .kk .film { clip-path: inset(5.3% 8.42% 0 8.42% round 33px 33px 0 0); clip-path: inset(5.3% 8.42% 0 8.42% round 7.5cqw 7.5cqw 0 0); }
  .kk .handy::after { border-radius: 33px 33px 0 0; border-radius: 7.5cqw 7.5cqw 0 0; }
  .kk .handy::before { border-radius: 103px 103px 0 0; border-radius: calc(7.5cqw + 70px) calc(7.5cqw + 70px) 0 0; }
}

@media (min-width: 1200px) {
  .kk { --kk-dreh: 1; }
  .kk-stimme { padding: 16px 18px; }
  .kk-zitat p { font-size: .9375rem; }
  .kk-ergebnis { font-size: .875rem; padding: 0 13px 0 9px; gap: 7px; }
}
/* Breite Bildschirme: Die Karten rücken über den Inhaltsrahmen hinaus nach außen, die Mitte bekommt Luft. */
@media (min-width: 1280px) {
  .kk-seite--links  { margin-left:  clamp(-56px, (1280px - 100vw) / 2, 0px); }
  .kk-seite--rechts { margin-right: clamp(-56px, (1280px - 100vw) / 2, 0px); }
}

/* --------------------------------------------------------------------------
   Bewegung: einmal je Laden, danach Ruhe
   -------------------------------------------------------------------------- */
/* Solange Skripte laufen, warten die Karten unsichtbar, bis ihr Inhalt getauscht ist (kein Aufblitzen). */
.js .kk:not(.kk--flug):not(.kk--steig):not(.kk--da) .kk-karte { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  /* Computer: klein und unsichtbar hinter dem Handy, dann gestaffelt an ihren Platz */
  .kk--flug .kk-seite .kk-karte {
    animation:
      kk-flug 820ms var(--kk-feder) calc(var(--kk-warte, 0ms) + var(--i) * 85ms) both,
      kk-sicht 240ms ease-out calc(var(--kk-warte, 0ms) + var(--i) * 85ms) both;
    will-change: transform, opacity;
  }
  /* Der Hintergrund blendet ruhig mit dem Handy ein */
  .js .kk-grund { animation: kk-sicht 900ms ease-out .3s both; }
  /* Tablet und Handy: Karten steigen sanft ein, sobald sie ins Bild kommen */
  .kk--steig .kk-karte { animation: kk-steig 560ms var(--kurve) calc(var(--j) * 75ms) both; }

  @keyframes kk-flug {
    from { transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) rotate(calc(var(--w) * -1.5)) scale(.5); }
    to   { transform: translate3d(0, 0, 0) rotate(var(--w)) scale(1); }
  }
  @keyframes kk-steig {
    from { opacity: 0; transform: translate3d(0, 22px, 0) rotate(var(--w)) scale(.97); }
    to   { opacity: 1; transform: translate3d(0, 0, 0) rotate(var(--w)) scale(1); }
  }
  @keyframes kk-sicht { from { opacity: 0; } to { opacity: 1; } }
}