/* ============================================================================
   Rechenküche — Anzeige. Kassenbon-Optik in Bordeaux/Creme/Gold.
   Die Zahlentastatur ist der wichtigste Teil: grosse, sichere Tippziele (≥48 px),
   Layout wechselt NICHT zwischen den Aufgaben (sonst vertippt man sich).
   ============================================================================ */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:radial-gradient(1000px 620px at 50% -10%,#3d2a20 0%,#2b1d16 55%,#1e140f 100%);
  color:#f6eeda;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none
}
.rk-app{height:100%;display:flex;align-items:center;justify-content:center;padding:8px}
.rk-shell{position:relative;width:100%;max-width:560px;height:100%;display:flex;flex-direction:column;gap:8px}

/* ---- Kopfzeile ---- */
.rk-top{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.rk-brand{font-weight:800;letter-spacing:.04em;font-size:15px;line-height:1.1;margin-right:auto}
.rk-brand small{display:block;font-weight:600;font-size:10px;opacity:.6;letter-spacing:.12em;text-transform:uppercase}
.rk-icon{background:#4a3225;border:1px solid #6b4a35;color:#f6eeda;border-radius:9px;
  width:38px;height:38px;font-size:17px;cursor:pointer;line-height:1}
.rk-icon:hover{background:#5c3f2e}
.rk-icon.off{opacity:.42}
.rk-back{color:#e8c07a;text-decoration:none;font-size:14px;font-weight:600;padding:8px 10px;white-space:nowrap}
.rk-back:hover{color:#f6eeda}

/* ---- laufende Runde ---- */
.rk-play{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px}
.rk-play[hidden]{display:none}
.rk-hud{display:flex;gap:6px;flex:0 0 auto;flex-wrap:wrap;align-items:center}
.rk-stat{background:#3a2820;border:1px solid #55392a;border-radius:9px;padding:5px 11px;min-width:76px;text-align:center}
.rk-stat small{display:block;font-size:10px;opacity:.6;letter-spacing:.09em;text-transform:uppercase}
.rk-stat b{font-size:17px;font-variant-numeric:tabular-nums}
.rk-unrated{background:#7a4a12;border:1px solid #c98b2a;color:#ffdc9a;border-radius:9px;
  padding:5px 12px;font-size:13px;font-weight:700;display:flex;align-items:center}
.rk-unrated[hidden]{display:none}

.rk-bar{flex:0 0 auto;height:6px;background:#3a2820;border-radius:3px;overflow:hidden}
.rk-bar-in{height:100%;width:0;background:linear-gradient(90deg,#c1362f,#f2c14e);transition:width .25s ease}

/* ---- Aufgabenkarte im Bon-Look ---- */
.rk-bon{
  flex:1 1 auto;min-height:0;background:#fffaf0;color:#2f2a22;border-radius:14px;
  padding:16px 18px;display:flex;flex-direction:column;gap:8px;overflow:auto;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  /* gezackte Bonkante unten */
  -webkit-mask:radial-gradient(9px at 9px 100%,transparent 98%,#000) repeat-x bottom/18px 9px, linear-gradient(#000,#000) top/100% calc(100% - 8px) no-repeat;
          mask:radial-gradient(9px at 9px 100%,transparent 98%,#000) repeat-x bottom/18px 9px, linear-gradient(#000,#000) top/100% calc(100% - 8px) no-repeat
}
.rk-bon.gut{animation:rkGut .5s ease}
.rk-bon.schlecht{animation:rkSchlecht .5s ease}
@keyframes rkGut{0%,100%{background:#fffaf0}35%{background:#dff3e0}}
@keyframes rkSchlecht{0%,100%{background:#fffaf0}35%{background:#fbdcd9}}
@keyframes rkRein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rk-bon.neu{animation:rkRein .28s ease}

.rk-bon-kopf{display:flex;align-items:center;gap:9px;border-bottom:2px dashed #d8c9a8;padding-bottom:8px}
.rk-ik{width:34px;height:34px;flex:0 0 auto}
.rk-kat{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#a8823f}
.rk-zeilen{font-size:17px;line-height:1.5;font-variant-numeric:tabular-nums}
.rk-zeilen div{display:block}
.rk-frage{font-size:16px;font-weight:700;color:#7c2230;margin-top:2px}
.rk-eingabe{margin-top:auto;display:flex;align-items:baseline;justify-content:flex-end;gap:8px;
  border-top:2px dashed #d8c9a8;padding-top:10px}
.rk-wert{font-size:38px;font-weight:800;font-variant-numeric:tabular-nums;color:#2f2a22;
  min-width:2ch;text-align:right;letter-spacing:.02em}
.rk-wert.leer{color:#b3a893}
.rk-einheit{font-size:22px;font-weight:700;color:#a8823f}
.rk-hinweis{min-height:1.3em;font-size:14px;font-weight:700}
.rk-hinweis.gut{color:#2f7a4a}
.rk-hinweis.schlecht{color:#a8322f}

/* ---- Zahlentastatur ---- */
.rk-pad{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.rk-pad button{
  min-height:52px;font:inherit;font-size:23px;font-weight:700;cursor:pointer;
  background:#4a3225;border:1px solid #6b4a35;color:#f6eeda;border-radius:11px;
  font-variant-numeric:tabular-nums
}
.rk-pad button:active{background:#5c3f2e;transform:translateY(1px)}
.rk-pad button[disabled]{opacity:.3;cursor:default}
.rk-pad .rk-del{background:#5a3a2c;font-size:20px}
.rk-pad .rk-ok{grid-column:1 / -1;background:#c1362f;border-color:#c1362f;font-size:18px;min-height:56px}
.rk-pad .rk-ok:active{background:#d8443c}
.rk-pad .rk-ok[disabled]{background:#7a4a45;border-color:#7a4a45}

/* ---- Lösung / Rechenweg (Übung) ---- */
.rk-loesung{flex:0 0 auto;background:#3a2820;border:1px solid #6b4a35;border-radius:12px;padding:13px 15px}
.rk-loesung[hidden]{display:none}
.rk-loesung-kopf{margin:0 0 7px;font-size:17px;font-weight:800}
.rk-loesung-kopf.gut{color:#9fe0a8}
.rk-loesung-kopf.schlecht{color:#ff9d94}
.rk-weg{font-size:14px;line-height:1.65;opacity:.9;font-variant-numeric:tabular-nums}
.rk-weg div{margin-bottom:2px}

/* ---- Überlagerungen ---- */
.rk-ov{position:absolute;inset:0;background:rgba(20,13,9,.93);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:9000;padding:12px;overflow:auto}
.rk-ov[hidden]{display:none}
.rk-dlg{background:#3a2820;border:1px solid #6b4a35;border-radius:16px;padding:22px 24px;
  max-width:460px;width:100%;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.6)}
.rk-dlg h1{margin:0 0 2px;font-size:31px;color:#f2c14e;letter-spacing:.02em}
.rk-dlg h2{margin:0 0 10px;font-size:25px;color:#f2c14e}
.rk-sub{margin:0 0 14px;font-size:13px;font-style:italic;opacity:.6;letter-spacing:.05em}
.rk-dlg p{margin:0 0 12px;line-height:1.55;font-size:15px}
.rk-small{font-size:13px;opacity:.72}
.rk-ergebnis{font-size:19px}
.rk-ergebnis b{color:#f2c14e;font-size:26px;font-variant-numeric:tabular-nums}
.rk-score{font-size:18px}
.rk-score b{color:#f2c14e;font-size:25px;font-variant-numeric:tabular-nums}
.rk-lern{background:#4a3225;border-radius:9px;padding:10px 12px;font-size:14px;line-height:1.55}
.rk-err{color:#ff9d94;font-size:13.5px;min-height:1.2em;margin:6px 0 0}
.rk-ok-msg{color:#9fe0a8;font-size:15px;font-weight:600}
.rk-challenge-info{background:#4a3225;border-radius:9px;padding:11px 13px;font-size:13.5px;line-height:1.55;text-align:left}

.rk-modus{display:flex;flex-direction:column;gap:9px;margin:16px 0 4px}
.rk-modus-btn{background:#4a3225;border:1px solid #6b4a35;color:#f6eeda;border-radius:12px;
  padding:14px 16px;font:inherit;cursor:pointer;text-align:left}
.rk-modus-btn b{display:block;font-size:17px;margin-bottom:2px}
.rk-modus-btn span{font-size:13px;opacity:.7}
.rk-modus-btn:hover{background:#5c3f2e}
.rk-modus-btn.an{border-color:#f2c14e;background:#5c3f2e}
.rk-modus-haupt{background:#c1362f;border-color:#c1362f}
.rk-modus-haupt:hover{background:#d8443c}
.rk-modus-haupt.an{background:#d8443c;border-color:#f2c14e}

.rk-uebung-opt{margin-top:14px;text-align:left}
.rk-uebung-opt[hidden]{display:none}
.rk-lbl{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  opacity:.6;margin:12px 0 6px}
.rk-wahl{display:flex;flex-wrap:wrap;gap:6px}
.rk-wahl button{background:#2b1d16;border:1px solid #6b4a35;color:#e8c07a;border-radius:8px;
  padding:9px 13px;font:inherit;font-size:14px;cursor:pointer;min-height:40px}
.rk-wahl button.an{background:#f2c14e;border-color:#f2c14e;color:#2b1d16;font-weight:700}

.rk-btn{background:#c1362f;color:#fff6e0;border:none;border-radius:10px;padding:13px 26px;
  font:inherit;font-size:16px;font-weight:700;cursor:pointer;margin-top:14px;width:100%}
.rk-btn:hover{background:#d8443c}
.rk-btn[disabled]{opacity:.5;cursor:default}
.rk-btn-ghost{background:transparent;border:1px solid #6b4a35;color:#e8c07a;font-size:14px;padding:10px 18px}
.rk-btn-ghost:hover{background:#4a3225}
.rk-entry{display:flex;gap:8px;justify-content:center;margin:8px 0 0}
.rk-entry input{background:#2b1d16;border:1px solid #6b4a35;color:#f6eeda;border-radius:9px;
  padding:12px 14px;font:inherit;font-size:19px;width:120px;text-align:center;text-transform:uppercase;letter-spacing:.16em}
.rk-entry .rk-btn{margin-top:0;width:auto}
.rk-count{font-size:96px;font-weight:800;color:#f2c14e;text-shadow:0 6px 24px rgba(0,0,0,.6)}

@media (max-width:420px){
  .rk-zeilen{font-size:15px}
  .rk-wert{font-size:32px}
  .rk-pad button{min-height:48px;font-size:21px}
  .rk-dlg{padding:18px 15px}
  .rk-dlg h1{font-size:26px}
}
@media (max-height:620px){
  .rk-bon{padding:11px 13px;gap:5px}
  .rk-pad button{min-height:46px}
  .rk-pad .rk-ok{min-height:50px}
}
@media (prefers-reduced-motion:reduce){
  .rk-bon.gut,.rk-bon.schlecht,.rk-bon.neu{animation:none}
  .rk-bar-in{transition:none}
}