/* ---------------- Schul-Aufgaben (Einmaleins-Heft) ---------------- */

/* Deckblatt */
.sa-cover{background:var(--card);border-radius:28px;box-shadow:var(--shadow);padding:22px 18px 20px;text-align:center;margin-bottom:16px;
  border:2.5px solid var(--ink);}
.sa-cover h2{font-size:34px;font-weight:900;margin:10px 0 4px;letter-spacing:-.5px;
  background:repeating-linear-gradient(135deg,var(--ink) 0 3px,#8f92b8 3px 6px);-webkit-background-clip:text;background-clip:text;color:transparent;}
.sa-cover p{margin:0;font-size:14.5px;color:var(--ink-soft);}
.sa-figuren{display:flex;justify-content:center;align-items:flex-end;gap:14px;}
.sa-fig{position:relative;display:grid;place-items:end center;width:58px;height:74px;border:2.5px solid var(--ink);border-radius:18px 18px 14px 14px;
  background:#fff;font-size:30px;font-weight:900;padding-bottom:6px;color:var(--ink);}
.sa-fig.mal{width:48px;height:58px;font-size:34px;}
/* Kulleraugen wie im Heft */
.sa-fig i{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:30px;height:15px;
  background:radial-gradient(circle at 30% 55%,var(--ink) 0 3.5px,transparent 4px),radial-gradient(circle at 70% 55%,var(--ink) 0 3.5px,transparent 4px),
  radial-gradient(circle at 30% 50%,#fff 0 6.5px,var(--ink) 7px 8.5px,transparent 9px),radial-gradient(circle at 70% 50%,#fff 0 6.5px,var(--ink) 7px 8.5px,transparent 9px);}
.sa-alle{width:100%;border:none;cursor:pointer;background:var(--accent);color:#fff;border-radius:20px;padding:17px;font-size:18px;font-weight:800;
  box-shadow:var(--shadow-sm);margin-bottom:16px;font-family:inherit;}
.sa-alle:active{transform:scale(.99);}
.sa-haken{color:var(--good);}
.sa-folge{font-size:13px;font-weight:800;color:var(--ink-soft);margin-left:6px;}

/* Arbeitsblatt */
.sa-papier{background:var(--card);border-radius:22px;box-shadow:var(--shadow);border:2.5px solid var(--ink);padding:18px 16px 22px;}
.sa-auftrag{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:18px;font-weight:800;line-height:1.3;margin-bottom:16px;}
.sa-auftrag .stift{font-size:24px;}
.sa-zaehler{margin-left:auto;font-size:13px;font-weight:800;color:var(--ink-soft);background:var(--paper);border-radius:10px;padding:5px 10px;}
.sa-tipp{font-size:14px;font-weight:700;color:var(--ink-soft);margin:-6px 0 14px;line-height:1.35;}

/* Zahlenfeld */
.sa-in{width:62px;height:46px;border:none;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 2px #dfe2ec;
  font-family:inherit;font-size:22px;font-weight:800;color:var(--ink);text-align:center;-webkit-appearance:none;padding:0;}
.sa-in.eins{width:46px;}
.sa-in:focus{outline:none;box-shadow:inset 0 0 0 2.5px var(--accent);}
.sa-in.ok,.sa-in:disabled.ok{box-shadow:inset 0 0 0 2.5px var(--good);background:color-mix(in srgb,var(--good) 12%,white);color:#2f7a4e;opacity:1;-webkit-text-fill-color:#2f7a4e;}
.sa-in.falsch{box-shadow:inset 0 0 0 2.5px var(--oops);background:color-mix(in srgb,var(--oops) 12%,white);}
.sa-in.luecke{border-radius:50%;width:50px;height:50px;}
.op{font-size:22px;font-weight:800;color:var(--ink-soft);}

.sa-shake{animation:shake .4s;}
.hidden{display:none !important;}

/* 1) Bilder */
.sa-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;}
.sa-box{border:2px solid var(--ink);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s;}
.sa-box.geloest{border-color:var(--good);}
.sa-bild{flex:1;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:8px;padding:12px 8px;min-height:110px;}
.sa-gruppe{display:inline-grid;gap:1px;padding:4px 5px;border:2px dashed #c9cce0;border-radius:12px;font-size:17px;line-height:1.15;}
.sa-gruppe.g2{grid-template-columns:repeat(2,1fr);}
.sa-gruppe.g3{grid-template-columns:repeat(3,1fr);}
.sa-zeile{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;border-top:2px solid var(--ink);background:#FAFBFD;}
.sa-box.geloest .sa-zeile{border-top-color:var(--good);background:color-mix(in srgb,var(--good) 8%,white);}

/* 2) + 8) Rechentafeln */
.sa-zwei{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
.sa-tafel{border:2px solid var(--ink);border-radius:16px;padding:12px 16px;display:flex;flex-direction:column;gap:10px;}
.sa-rechnung{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:800;}
.sa-rechnung .aufg{min-width:110px;text-align:right;}
.sa-rechnung.mitte{justify-content:center;gap:8px;}

/* 3) Richtig / falsch */
.sa-rf-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px 18px;}
.sa-rf{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:8px 10px;border-radius:14px;background:var(--paper);border:2px solid transparent;}
.sa-rf.geloest{border-color:var(--good);}
.sa-rf .aufg{font-size:22px;font-weight:800;min-width:128px;}
.sa-rf-knoepfe{display:flex;gap:8px;margin-left:auto;}
.sa-rund{width:46px;height:46px;border-radius:50%;border:2.5px solid var(--ink);background:#fff;font-size:22px;font-weight:900;cursor:pointer;color:var(--ink);font-family:inherit;}
.sa-rund.ja.gewaehlt{background:var(--good);border-color:var(--good);color:#fff;}
.sa-rund.nein.gewaehlt{background:var(--oops);border-color:var(--oops);color:#fff;}
.sa-rund.aus{opacity:.25;}
.sa-rund.falsch{border-color:var(--oops);color:var(--oops);}
.sa-rf-korrektur{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--ink-soft);width:100%;justify-content:flex-end;}

/* 4) Zahlen-Sterne */
.sa-stern-layout{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;}
@media (max-width:620px){ .sa-stern-layout{grid-template-columns:1fr;} }
.sa-reihen{display:flex;flex-direction:column;gap:10px;}
.sa-reihe{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:16px;border:2.5px solid transparent;cursor:pointer;}
.sa-reihe.aktiv{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,white);}
.sa-reihe.geloest{border-color:var(--good);background:color-mix(in srgb,var(--good) 10%,white);cursor:default;}
.sa-reihe.falsch{border-color:var(--oops);}
.sa-slot{width:54px;height:54px;border-radius:50%;border:2.5px solid var(--ink);background:#fff;font-size:21px;font-weight:800;color:var(--ink);cursor:pointer;font-family:inherit;}
.sa-reihe.geloest .sa-slot{border-color:var(--good);color:#2f7a4e;}
.sa-sternfeld{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;}
@media (max-width:620px){ .sa-sternfeld{grid-template-columns:repeat(5,1fr);} }
.sa-stern{position:relative;aspect-ratio:1;min-width:52px;border:none;cursor:pointer;font-family:inherit;font-size:18px;font-weight:900;color:var(--ink);
  background:none;transform:translate(var(--dx),var(--dy)) rotate(var(--dreh));transition:opacity .2s;z-index:0;}
.sa-stern::before{content:"";position:absolute;inset:0;z-index:-1;background:#FFE58A;
  clip-path:polygon(50% 2%,62% 36%,98% 37%,69% 59%,80% 95%,50% 74%,20% 95%,31% 59%,2% 37%,38% 36%);}
.sa-stern.benutzt{opacity:.25;}
.sa-stern.benutzt::after{content:"";position:absolute;left:18%;right:18%;top:50%;border-top:3px solid var(--ink-soft);transform:rotate(-30deg);}

/* 5) Geheimschrift */
.sa-schluessel{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:18px;}
.sa-buch{display:flex;border:2px solid var(--ink);border-radius:10px;overflow:hidden;cursor:pointer;background:#fff;font-family:inherit;padding:0;
  box-shadow:3px 3px 0 #d9dbe6;}
.sa-buch span{display:grid;place-items:center;min-width:34px;height:40px;font-size:19px;font-weight:900;color:var(--ink);}
.sa-buch .l{border-right:2px solid var(--ink);background:#FFF6DA;}
.sa-buch .z{min-width:40px;}
.sa-buch.falsch{border-color:var(--oops);}
.sa-buch:active{transform:translateY(1px);}
.sa-wort{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:14px;}
.sa-kreis{width:72px;height:72px;border-radius:50%;border:2.5px solid var(--ink);background:#fff;cursor:pointer;font-family:inherit;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;position:relative;}
.sa-kreis::before,.sa-kreis::after{content:"";position:absolute;top:-7px;width:16px;height:14px;border:2.5px solid var(--ink);border-bottom:none;border-radius:50% 50% 0 0;background:#fff;}
.sa-kreis::before{left:6px;transform:rotate(-25deg);}
.sa-kreis::after{right:6px;transform:rotate(25deg);}
.sa-kreis .aufg{font-size:16px;font-weight:800;}
.sa-kreis .lsg{font-size:22px;font-weight:900;color:var(--accent);min-height:24px;}
.sa-kreis.aktiv{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent);}
.sa-kreis.aktiv::before,.sa-kreis.aktiv::after{border-color:var(--accent);}
.sa-kreis.geloest{border-color:var(--good);background:color-mix(in srgb,var(--good) 10%,white);cursor:default;}
.sa-kreis.geloest .lsg{color:#2f7a4e;}
.sa-loesung{text-align:center;font-size:30px;font-weight:900;letter-spacing:4px;color:var(--good);margin-top:6px;animation:pop .3s ease;}

/* 6) Was gehoert zusammen? */
.sa-blasen{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:14px 10px;}
.sa-blase{aspect-ratio:1;border-radius:50%;cursor:pointer;font-family:inherit;font-size:20px;font-weight:800;color:var(--ink);
  border:3px solid var(--ink);background:#fff;transform:translate(var(--dx),var(--dy));
  box-shadow:inset 0 0 0 5px #fff,inset 0 0 0 7px var(--ink);transition:background .2s;}
.sa-blase.aktiv{background:color-mix(in srgb,var(--accent) 18%,white);border-color:var(--accent);}
.sa-blase.geloest{background:var(--farbe);cursor:default;}
.sa-blase.falsch{border-color:var(--oops);}

/* 7) Rechne und male */
.sa-mal-layout{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:18px;align-items:start;}
@media (max-width:620px){ .sa-mal-layout{grid-template-columns:1fr;} }
.sa-malbild{display:grid;border:3px solid var(--ink);border-radius:12px;overflow:hidden;max-width:520px;width:100%;margin:0 auto;}
.sa-zelle{aspect-ratio:1;border:none;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);background:#fff;
  cursor:pointer;font-family:inherit;font-size:clamp(11px,2.6vw,16px);font-weight:800;color:var(--ink);padding:0;transition:background .2s;}
.sa-zelle.geloest{background:var(--farbe);cursor:default;}
.sa-zelle.falsch{background:color-mix(in srgb,var(--oops) 25%,white);}
.sa-stifte{display:flex;flex-direction:column;gap:8px;}
@media (max-width:620px){ .sa-stifte{display:grid;grid-template-columns:repeat(2,1fr);} }
.sa-stift{display:flex;align-items:center;gap:8px;border:2px solid var(--ink);border-radius:12px;background:#fff;cursor:pointer;
  font-family:inherit;padding:8px 10px;text-align:left;color:var(--ink);}
.sa-stift .kappe{width:22px;height:22px;border-radius:6px;background:var(--farbe);border:2px solid var(--ink);flex:none;}
.sa-stift .name{font-weight:800;font-size:15px;}
.sa-stift .werte{margin-left:auto;font-weight:800;font-size:15px;color:var(--ink-soft);}
.sa-stift.aktiv{background:var(--farbe);box-shadow:0 0 0 3px var(--ink);}
.sa-stift.aktiv .werte{color:var(--ink);}