/* arabic-keyboard.eu v4.23 – Bildschirmtastatur + Arabisch-Schrift (gemeinsam) */
@font-face{font-family:'AkNaskh';src:url('fonts/naskh-amiri.woff2') format('woff2');font-display:swap}
.arf{font-family:'AkNaskh','Amiri','Traditional Arabic',Georgia,serif}
.kb{--g:4px;display:flex;flex-direction:column;gap:var(--g);user-select:none;-webkit-user-select:none;touch-action:manipulation;max-width:760px;margin:0 auto}
.kb .kr{display:grid;grid-template-columns:repeat(var(--cols,30),minmax(0,1fr));gap:var(--g)}
.kb .ks{display:block}
.kb .kk{position:relative;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-bottom-width:3px;border-radius:7px;background:#fff;color:var(--ink);padding:0;font:inherit;cursor:pointer;min-width:0;transition:background .08s,transform .08s;line-height:1}
.kb .kk:not(.kd):not(.km):not(.kspace):not(.kw){aspect-ratio:1/1}
.kb .kspace{height:2.2em}
.kb .kd{background:var(--bg-deep);color:var(--ink-soft);font-size:.62rem;cursor:default;border-color:transparent;min-height:0}
.kb .km{background:var(--bg-deep);font-size:.72rem;font-weight:700;color:var(--ink-soft)}
.kb .ka{font-family:'AkNaskh','Amiri',Georgia,serif;font-size:clamp(.95rem,3.6vw,1.55rem);font-weight:400}
.kb .ka.lg{font-size:clamp(.8rem,2.9vw,1.25rem)}
.kb .kp .ka{font-family:inherit;font-size:clamp(.62rem,2.2vw,.9rem);color:var(--ink-soft)}
.kb .kh{position:absolute;top:2px;inset-inline-start:3px;font-family:'AkNaskh','Amiri',serif;font-size:clamp(.5rem,1.8vw,.8rem);color:var(--gold);line-height:1}
.kb .kl{position:absolute;bottom:2px;inset-inline-end:3px;font-size:clamp(.45rem,1.6vw,.66rem);color:#8A8F8C;font-weight:700;line-height:1}
.kb .kk:hover{border-color:var(--gold)}
.kb .kk.dn,.kb .kk:active{transform:translateY(2px);border-bottom-width:1px;background:var(--bg-deep)}
.kb .kk.on,.kb .kk.on2{background:var(--primary);color:#fff;border-color:var(--primary-dark)}
.kb .kk.on .ka,.kb .kk.on2 .ka{color:#fff}.kb .kk.on2 .kl,.kb .kk.on2 .kh{color:#E4C892}
.kb .kk.hl{background:var(--gold-soft);border-color:var(--gold);box-shadow:0 0 0 3px rgba(138,97,34,.28);animation:kpulse 1s ease-in-out infinite}
.kb .kk.ok{background:#CFE8D6;border-color:var(--ok)}
.kb .kk.bad{background:#F6C9C0;border-color:#B3392B;animation:kshake .26s}
@keyframes kpulse{50%{box-shadow:0 0 0 5px rgba(138,97,34,.12)}}
@keyframes kshake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.kb .kk.hl,.kb .kk.bad{animation:none}}
/* Fingerfarben */
.kb-f .kk.f1{background:#FBE3E3}.kb-f .kk.f2{background:#FCEBD5}.kb-f .kk.f3{background:#FBF6CF}.kb-f .kk.f4{background:#DDF1DC}
.kb-f .kk.f5{background:#D8EEF4}.kb-f .kk.f6{background:#DDE3F8}.kb-f .kk.f7{background:#EBDDF6}.kb-f .kk.f8{background:#F7DDEC}.kb-f .kk.f9{background:#EEE9DC}
.kb-f .kk.hl{background:var(--gold-soft)}.kb-f .kk.on,.kb-f .kk.on2{background:var(--primary)}
.kb-f .kk.ok{background:#CFE8D6}.kb-f .kk.bad{background:#F6C9C0}

.kb-c{--g:3px}.kb-c .kh,.kb-c .kl{display:none}.kb-c .ka{font-size:clamp(1.05rem,5.4vw,1.5rem)}.kb-c .kk{border-radius:6px}