:root{--bg:#0f172a;--panel:#111827;--text:#f8fafc;--muted:#aab6c8;--border:#334155;--accent:#2563eb;--good:#15803d;--bad:#b91c1c}*{box-sizing:border-box}body{margin:0;background:linear-gradient(#0f172a,#101827);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh}button,input,select,textarea{font:inherit}button{min-height:44px;border:0;border-radius:12px;padding:11px 15px;font-weight:700;cursor:pointer}input,select,textarea{width:100%;min-height:44px;border:1px solid var(--border);border-radius:10px;background:#0b1220;color:var(--text);padding:10px;font-size:16px}textarea{min-height:90px}label,form{display:grid;gap:8px}form{gap:14px}.hidden{display:none!important}.shell{max-width:1100px;margin:auto;padding:calc(18px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom))}header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}header h1{margin:0}header p,.section p,small{color:var(--muted)}#account{display:flex;gap:10px;align-items:center}.card{background:#111827;border:1px solid var(--border);border-radius:18px}.auth{max-width:520px;margin:36px auto;padding:20px}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.tabs button,.ghost{background:#1e293b;color:white;border:1px solid var(--border)}.tabs .active,.primary{background:var(--accent);color:white}.secondary{background:#334155;color:white}.danger{background:transparent;color:#fecaca;border:1px solid #7f1d1d}.good{background:var(--good);color:white}.bad{background:var(--bad);color:white}.notice{background:#7c2d12;padding:14px;border-radius:12px;margin:12px 0}.main{margin:18px 0}.boxes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.box{border-radius:14px;padding:12px 6px;text-align:center;border:2px solid transparent;color:white}.box.active{border-color:white}.b1{background:#7f1d1d}.b2{background:#9a3412}.b3{background:#854d0e}.b4{background:#1e3a8a}.b5{background:#166534}.count{font-size:1.4rem;font-weight:800}.controls{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;margin:16px 0}.learn{min-height:500px;padding:28px;display:flex;flex-direction:column}.meta{display:flex;justify-content:space-between;color:var(--muted)}#question{font-size:clamp(1.45rem,4vw,2.15rem);margin:38px 0 24px}.choice{width:100%;text-align:left;background:#1e293b;color:white;border:1px solid #475569;margin-bottom:10px}.answer{background:#0b1220;border:1px solid var(--border);padding:16px;border-radius:12px;margin-top:12px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:24px}.adminGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.adminGrid details{padding:16px}.adminGrid summary{font-weight:800;cursor:pointer}.body{display:grid;gap:12px;padding-top:14px}.section{padding:18px;margin-top:16px}.sectionHead{display:flex;justify-content:space-between;gap:14px;align-items:end}.sectionHead input{max-width:340px}.item{background:#0b1220;border:1px solid var(--border);border-radius:14px;padding:14px;margin-top:10px}.row{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}.badge{padding:4px 8px;border-radius:999px;background:#1e293b;color:var(--muted);font-size:.82rem}.userControls{display:grid;grid-template-columns:130px 1fr auto;gap:10px;align-items:end;margin-top:10px}dialog{width:min(680px,calc(100% - 24px));border:1px solid var(--border);border-radius:16px;background:#111827;color:white}dialog::backdrop{background:#000a}.toast{position:fixed;z-index:99;left:50%;top:18px;transform:translateX(-50%);background:#e2e8f0;color:#0f172a;padding:12px 16px;border-radius:12px}@media(max-width:760px){header{display:grid}.controls,.adminGrid{grid-template-columns:1fr}.sectionHead{display:grid}.sectionHead input{max-width:none}.userControls{grid-template-columns:1fr}.learn{min-height:430px;padding:20px}.box{padding:9px 3px}.count{font-size:1.05rem}}

/* Wissivo v2: sichtbare 5-Kisten-Leiste */
.boxHeader{display:flex;justify-content:space-between;align-items:end;margin:4px 0 10px}.boxHeader>div{display:grid;gap:3px}.boxHeader strong{font-size:1.05rem}.boxHeader span{color:var(--muted);font-size:.92rem}.boxes{grid-template-columns:repeat(5,minmax(118px,1fr));gap:12px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity}.box{min-width:118px;min-height:104px;padding:12px;text-align:left;scroll-snap-align:start;box-shadow:inset 0 0 0 1px #ffffff12;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}.box:hover{transform:translateY(-1px)}.box.active{border-color:#fff;box-shadow:0 0 0 2px #ffffff30,inset 0 0 0 1px #ffffff20}.boxTop{display:flex;justify-content:space-between;align-items:center}.boxNo{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:#ffffff24;font-size:.9rem}.box .count{font-size:1.65rem;line-height:1}.boxName{font-size:1rem;font-weight:800;margin-top:12px}.box small{display:block;color:#ffffffbd;margin-top:2px}.controls.compact{grid-template-columns:minmax(210px,320px) auto;justify-content:space-between}.controls.compact .danger{justify-self:end}
@media(max-width:760px){.boxes{grid-template-columns:repeat(5,132px);margin-right:-16px;padding-right:16px}.box{min-width:132px}.controls.compact{grid-template-columns:1fr}.controls.compact .danger{justify-self:stretch}.boxHeader{margin-top:2px}}