/* ============================================================
   LERNWERKSTATT INFORMATIK — gemeinsames Design
   Klasse 5 · helles, freundliches Layout · iPad-tauglich
   ============================================================ */
:root{
  --acc:#6c5ce7;          /* Akzentfarbe, pro Tool überschrieben */
  --acc2:#a29bfe;
  --ok:#00b894; --err:#e17055;
  --ink:#2d3436; --mut:#636e72;
  --bg:#f1f2fb; --card:#ffffff;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{min-height:100%;}
body{background:var(--bg); color:var(--ink);
  font-family:'Nunito',system-ui,sans-serif; font-size:17px;
  -webkit-tap-highlight-color:transparent;}
h1,h2,h3,.dfont{font-family:'Baloo 2','Nunito',sans-serif;}

/* Kopfzeile */
.top{background:linear-gradient(120deg,var(--acc),var(--acc2));
  color:#fff; padding:18px 20px 22px; border-radius:0 0 26px 26px;
  box-shadow:0 6px 20px -8px var(--acc);}
.top .back{color:#fff; text-decoration:none; font-weight:800; opacity:.9;
  font-size:15px; display:inline-block; margin-bottom:6px;}
.top h1{font-size:clamp(24px,5vw,36px); line-height:1.1; letter-spacing:.5px;}
.top p{opacity:.92; margin-top:4px; font-size:15px;}

.wrap{max-width:920px; margin:0 auto; padding:18px 16px 60px;}

/* Tabs */
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin:16px 0;}
.tab{border:2px solid transparent; background:#fff; color:var(--mut);
  font-family:'Baloo 2'; font-weight:700; font-size:16px; padding:10px 18px;
  border-radius:999px; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.06);}
.tab.active{background:var(--acc); color:#fff; box-shadow:0 4px 14px -4px var(--acc);}

/* Karten & Buttons */
.card{background:var(--card); border-radius:20px; padding:20px;
  box-shadow:0 4px 18px rgba(40,40,90,.08); margin-bottom:16px;}
.bigbtn{display:inline-block; border:0; cursor:pointer; font-family:'Baloo 2';
  font-weight:800; font-size:18px; color:#fff; background:var(--acc);
  padding:13px 30px; border-radius:999px; box-shadow:0 5px 16px -4px var(--acc);
  transition:transform .1s;}
.bigbtn:active{transform:scale(.96);}
.bigbtn.ghost{background:#fff; color:var(--acc); border:2px solid var(--acc); box-shadow:none;}
.bigbtn.small{font-size:15px; padding:9px 20px;}
.bigbtn:disabled{opacity:.4; cursor:default;}

/* Punkte-Chip */
.hudrow{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:10px 0 16px;}
.chip{background:#fff; border-radius:999px; padding:8px 18px; font-weight:800;
  box-shadow:0 2px 8px rgba(0,0,0,.07); font-family:'Baloo 2'; font-size:17px;}
.chip b{color:var(--acc);}
.chip.pop{animation:pop .35s;}
@keyframes pop{40%{transform:scale(1.25);}}

/* Feedback */
.fb{min-height:30px; font-weight:800; font-size:17px; margin-top:10px;}
.fb.ok{color:var(--ok);} .fb.err{color:var(--err);}
.shake{animation:shake .3s;}
@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

/* Sortier-Buckets */
.buckets{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px; margin-top:16px;}
.bucket{border:3px solid #e3e4f2; background:#fff; border-radius:18px;
  padding:16px 10px; text-align:center; cursor:pointer; transition:.15s;
  font-family:'Baloo 2'; font-weight:800; font-size:17px;}
.bucket:active{transform:scale(.96);}
.bucket .em{font-size:34px; display:block; margin-bottom:4px;}
.bucket.right{border-color:var(--ok); background:#e8fff7;}
.bucket.wrong{border-color:var(--err); background:#fff0ec;}

/* Item-Karte (Sortierspiele) */
.itemcard{background:#fff; border-radius:22px; padding:28px 20px; text-align:center;
  box-shadow:0 6px 22px rgba(40,40,90,.1); margin-top:6px;}
.itemcard .em{font-size:64px; display:block;}
.itemcard .nm{font-family:'Baloo 2'; font-weight:800; font-size:26px; margin-top:6px;}
.itemcard .why{color:var(--mut); font-size:15px; min-height:22px; margin-top:6px;}

/* Pixel-/KI-Raster */
.gridbox{display:grid; gap:3px; touch-action:none; user-select:none;
  background:#dcdff0; border-radius:14px; padding:6px; width:min(92vw,420px);
  aspect-ratio:1;}
.cell{background:#fff; border-radius:4px; cursor:pointer;}
.cell.on{background:var(--ink);}
.codebox{font-family:ui-monospace,Consolas,monospace; font-size:clamp(11px,2.6vw,15px);
  letter-spacing:2px; background:#20233c; color:#7ef2c1; border-radius:14px;
  padding:14px 16px; line-height:1.7; overflow-x:auto; white-space:pre;}

/* Bit-Lampen (Binär) */
.bitrow{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:14px 0;}
.bitcard{width:min(16vw,86px); border-radius:16px; border:3px solid #e3e4f2;
  background:#fff; cursor:pointer; text-align:center; padding:10px 0 12px;
  transition:.15s; user-select:none;}
.bitcard.on{border-color:var(--acc); background:#f3f0ff; box-shadow:0 4px 14px -4px var(--acc);}
.bitcard .lamp{font-size:30px;}
.bitcard .val{font-family:'Baloo 2'; font-weight:800; font-size:22px;}
.bitcard .bit{font-family:ui-monospace,monospace; font-weight:700; color:var(--mut);}
.bitcard.on .bit{color:var(--acc);}

.codechip{display:inline-block; font-family:ui-monospace,monospace; font-weight:700;
  background:#f3f0ff; color:var(--acc); border-radius:8px; padding:6px 10px;
  margin:3px; font-size:clamp(13px,3vw,17px); letter-spacing:1px;}

input.answer{font-family:'Baloo 2'; font-weight:800; font-size:22px; text-align:center;
  border:3px solid #e3e4f2; border-radius:14px; padding:10px 14px; width:200px;
  outline:none; background:#fff; color:var(--ink);}
input.answer:focus{border-color:var(--acc);}

/* Endbildschirm */
.done-big{font-size:56px;}
.hidden{display:none !important;}
.mut{color:var(--mut); font-size:15px;}
.center{text-align:center;}