.kf-bild {
  display: block; width: 100%; height: auto; overflow: visible;
  --kf-haut: #f0c8a0; --kf-haar: #4a3222; --kf-hose: #34474d; --kf-schuh: #1e2a2e;
  --kf-dauer: var(--bewegung-szene, 600ms);
  --kf-atem: var(--bewegung-atem, 4200ms);
}
.kf-boden { fill: var(--sunken); stroke: var(--line); stroke-width: 1; }
.kf-schatten { fill: var(--ink); opacity: .12; }


.kf-figur, .kf-kopf, .kf-atmen { transform-box: view-box; }
.kf-figur {
  transform-origin: 200px 262px; transform: scale(var(--kf-groesse, 1));
  transition: transform var(--kf-dauer) var(--kurve-feder, cubic-bezier(.34, 1.56, .64, 1));
}
.kf-kopf {
  transform-origin: 200px 128px; transform: scale(var(--kf-kopf, 1));
  transition: transform var(--kf-dauer) var(--kurve-wechsel, ease-in-out);
}
.kf-haut { fill: var(--kf-haut); }
.kf-haar { fill: var(--kf-haar); }
.kf-auge { fill: var(--kf-schuh); }
.kf-mund { fill: none; stroke: var(--kf-schuh); stroke-width: 2.4; stroke-linecap: round; }
.kf-wange { fill: var(--danger-line, var(--accent-2)); opacity: .35; }
.kf-hose { fill: var(--kf-hose); }
.kf-schuh { fill: var(--kf-schuh); }
.kf-hand { fill: var(--kf-haut); }

.kf-hemd, .kf-aermel { fill: var(--accent-2); }
.kf-weiss { fill: var(--card); }
.kf-krawatte { fill: var(--accent-2); }
.kf-revers { fill: var(--accent); stroke: var(--on-accent); stroke-width: 1; stroke-opacity: .35; }
.kf-knopf { fill: var(--accent-2); }
.kf-stulpe { fill: var(--gold-ink, var(--kf-schuh)); }
.kf-lid { opacity: 0; }


.kf-moebel, .kf-tisch, .kf-tischbein, .kf-rahmen { fill: var(--muted); }
.kf-fach { fill: var(--sunken); }
.kf-ordner-a { fill: var(--accent); }
.kf-ordner-b { fill: var(--accent-2); }
.kf-ordner-c { fill: var(--line); stroke: var(--muted); stroke-width: .8; }
.kf-blatt { fill: var(--card); }
.kf-zeile { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; }
.kf-siegel, .kf-lampe, .kf-topf, .kf-becher { fill: var(--accent-2); }
.kf-henkel, .kf-kabel { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.kf-schein { fill: var(--accent-2); opacity: .07; }
.kf-blatt-gruen { fill: var(--kauf, var(--accent)); }
.kf-blatt-2 { opacity: .8; }
.kf-geraet { fill: var(--kf-schuh); }
.kf-schirm { fill: var(--accent); }
.kf-kurve { fill: none; stroke: var(--accent-2); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.kf-zeile-hell { fill: none; stroke: var(--on-accent); stroke-width: 1.6; stroke-linecap: round; opacity: .8; }


.kf-teil, .kf-kleidung, .kf-stulpe {
  opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transform: translateY(10px) scale(.94);
  transition: opacity var(--kf-dauer) linear, transform var(--kf-dauer) var(--kurve-herein, ease-out);
}
.kf-kleidung, .kf-stulpe { transform: none; }
.kf-bild:is([data-schritt="3"], [data-schritt="4"], [data-schritt="5"], [data-schritt="6"], [data-schritt="7"]) :is(.kf-hemd, .kf-aermel) { fill: var(--accent); }

.kf-bild[data-schritt="3"] :is(.kf-hemd, .kf-aermel) { fill-opacity: .62; }
.kf-bild:is([data-schritt="4"], [data-schritt="5"], [data-schritt="6"], [data-schritt="7"]) .kf-kleidung { opacity: 1; }
.kf-bild:is([data-schritt="5"], [data-schritt="6"], [data-schritt="7"]) .kf-stulpe { opacity: 1; }
.kf-hand { transform-box: fill-box; transform-origin: 50% 50%; transition: transform var(--kf-dauer) var(--kurve-feder, ease-out); }
.kf-bild:is([data-schritt="5"], [data-schritt="6"], [data-schritt="7"]) .kf-hand { fill: var(--accent-2); transform: scale(1.28); }
.kf-bild:is([data-schritt="6"], [data-schritt="7"]) .kf-arbeitsplatz,
.kf-bild[data-schritt="7"] .kf-buero { opacity: 1; transform: none; }

.kf-bild:is([data-schritt="6"], [data-schritt="7"]) .kf-figur { transform: translateX(22px) scale(var(--kf-groesse, 1)); }
.kf-bild:is([data-schritt="6"], [data-schritt="7"]) .kf-schatten { opacity: 0; }


.kf-atmen { transform-origin: 200px 262px; }
.kf-lebt .kf-atmen { animation: kf-atmen var(--kf-atem) ease-in-out infinite; }
.kf-lebt .kf-lid { animation: kf-blinzeln calc(var(--kf-atem) * 1.4) linear infinite; }
@keyframes kf-atmen { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.012); } }
@keyframes kf-blinzeln { 0%, 93% { opacity: 0; } 95%, 97% { opacity: 1; } 100% { opacity: 0; } }

.kf-neu .kf-atmen { animation: kf-aufleben var(--kf-dauer) var(--kurve-feder, ease-out); }
@keyframes kf-aufleben { 0% { transform: scaleY(1); } 40% { transform: scaleY(1.05); } 100% { transform: scaleY(1); } }


.kw { display: grid; grid-template-columns: minmax(180px, 300px) 1fr; gap: 6px 22px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-md, 12px); background: var(--card); padding: 14px 16px; margin: 0 0 16px; }
.kw-bild { min-width: 0; }
.kw-klein { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.kw-name { font-size: 21px; font-weight: 800; color: var(--accent); margin: 2px 0 6px; }
.kw-satz, .kw-fehlt, .kw-kontrolle { font-size: 14px; line-height: 1.55; margin: 0 0 8px; color: var(--ink); }
.kw-kontrolle { border-left: 4px solid var(--accent-2); padding-left: 10px; color: var(--muted); margin-bottom: 0; }
.kw-leiter { grid-column: 1 / -1; list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.kw-leiter li { display: grid; justify-items: center; gap: 4px; text-align: center; font-size: 12px; line-height: 1.25; color: var(--muted); }
.kw-nr { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12.5px;
  background: var(--sunken); border: 1.5px solid var(--line); color: var(--muted); }
.kw-erreicht .kw-nr { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.kw-hier .kw-nr { background: var(--accent-2); border-color: var(--accent-2); color: var(--gold-ink, var(--ink)); }
.kw-hier .kw-was { color: var(--ink); font-weight: 700; }
.kw-was { overflow-wrap: anywhere; }

.gs-lern-figur { flex: none; width: 54px; margin: -6px 0; }
@media (max-width: 640px) {
  .kw { grid-template-columns: minmax(0, 1fr); }
  .kw-bild { max-width: 260px; margin: 0 auto; width: 100%; }
  .kw-leiter { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  
  .kw-leiter .kw-was { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kf-figur, .kf-kopf, .kf-teil, .kf-kleidung, .kf-stulpe, .kf-hand { transition: none; }
  .kf-lebt .kf-atmen, .kf-lebt .kf-lid, .kf-neu .kf-atmen { animation: none; }
}