/* Kiki meldet Tastenkürzel (js/lernen-kiki-tasten.js): kleine Sprechblase unten rechts und die Karte „Kikis Tastensammlung“ in Mein Lernbereich (js/lernen-mein.js).
   Die Blase blockiert nichts (pointer-events: none) und verschwindet von selbst; bei „weniger Bewegung“ ohne Hineingleiten. Farben wie lernen.css. */

/* Screenreader: Statuszeile, unsichtbar */
.kt-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Sprechblase */
.kt-toast{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:75;display:flex;align-items:flex-end;gap:8px;max-width:min(380px,calc(100vw - 32px));
  pointer-events:none;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s ease,transform .25s ease,visibility 0s linear .25s}
.kt-toast.an{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .25s ease,visibility 0s}
.kt-blase{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;padding:9px 13px;background:var(--ink,#101820);color:#fff;border-radius:14px 14px 14px 4px;
  box-shadow:0 10px 26px #07233433;font-size:14px;line-height:1.35}
.kt-text{font-weight:600}
.kt-zahl{font-size:12px;color:#cfe3ee}

/* Kiki mit Tasten (kiki-tasten.webp) – sonst kiki.webp im Kreis mit zwei ⌨ daneben, sonst 🐹 */
.kt-bild{position:relative;flex:0 0 auto;width:56px;height:56px;display:grid;place-items:center}
.kt-bild img{width:100%;height:100%;object-fit:contain;display:block}
.kt-tasten img{border-radius:12px;box-shadow:0 6px 16px #07233433}
.kt-kiki img,.kt-keins{border-radius:50%;background:#2a74c6;box-shadow:0 0 0 3px #fff,0 6px 16px #07233433;object-fit:cover}
.kt-kiki img{width:48px;height:48px}
.kt-keins{font-size:30px;width:48px;height:48px}
.kt-deko{position:absolute;font-size:16px;line-height:1;background:#fff;border-radius:6px;padding:1px 2px;box-shadow:0 2px 6px #07233433}
.kt-deko1{left:-6px;bottom:-2px;transform:rotate(-14deg)}
.kt-deko2{right:-6px;bottom:6px;transform:rotate(12deg)}

@media(max-width:600px){
  .kt-toast{right:10px;left:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 20px)}
  .kt-blase{font-size:13px;padding:7px 11px}
  .kt-bild{width:44px;height:44px}
  .kt-kiki img,.kt-keins{width:38px;height:38px}
  .kt-keins{font-size:24px}
  .kt-deko{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .kt-toast,.kt-toast.an{transform:none;transition:none}
}

/* Mein Lernbereich: Karte „Kikis Tastensammlung“ */
.kt-karte{display:flex;gap:14px;align-items:flex-start;margin:18px 0 0;padding:12px 16px;background:#fff;border:1px solid var(--line,#dbe3e9);border-left:5px solid var(--gold,#d0bd8c);border-radius:14px;font-size:14px}
.kt-karte{flex-wrap:wrap}
.kt-szene{display:block;flex:0 0 calc(100% + 32px);width:calc(100% + 32px);max-width:none;height:auto;aspect-ratio:16/9;max-height:460px;object-fit:cover;object-position:center 45%;margin:-12px -16px 2px;border-radius:9px 13px 0 0}
.kt-karte .kt-bild{width:48px;height:48px}
.kt-karte .kt-kiki img,.kt-karte .kt-keins{width:42px;height:42px}
.kt-karte-text{flex:1;min-width:0}
.kt-karte-text p{margin:.15em 0}
.kt-karte details{margin-top:6px}
.kt-karte summary{cursor:pointer;color:var(--teal,#00797b);font-weight:600}
.kt-liste{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.kt-liste li{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border:1px solid var(--line,#dbe3e9);border-radius:999px;background:#f7fafb;font-size:13px}
.kt-liste kbd{font:600 12px/1.2 ui-monospace,Consolas,monospace;background:#fff;border:1px solid #c8d3db;border-bottom-width:2px;border-radius:5px;padding:1px 5px}
.kt-liste .kt-n{color:var(--muted,#536373)}
.kt-stumm{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;color:var(--muted,#536373)}