/* Javabohne – Aussehen
   Layout: ab 1160 px links Menü, Mitte Lernpfad, rechts Ziele (normale Desktop-Website).
   760–1159 px: Symbol-Menü links, Statusleiste oben. Unter 760 px: Statusleiste oben, Tab-Leiste unten.
   Bewusst nur hell. Alle Textfarben erreichen mindestens 4,5 : 1. */
:root{
  color-scheme:light;
  --ink:#3c3c3c; --ink2:#4b4b4b; --muted:#6b6b6b; --faint:#757575; --deco:#b5b5b5;
  --line:#e5e5e5; --line2:#d0d0d0; --soft:#f7f7f7; --bg:#fff;
  --brand:#6b3f1d;
  --green:#2c8637; --green-d:#1f6328; --green-hi:#3bb54a; --ok-bg:#d7ffb8; --ok-ink:#2b6f0f; --ok-line:#8fd65a;
  --blue:#147daf; --blue-d:#0d5a80; --blue-hi:#1cb0f6; --blue-bg:#ddf4ff; --blue-line:#84d8ff; --blue-ink:#0c5d86;
  --red:#d92424; --red-d:#a51a1a; --red-bg:#ffdfe0; --red-line:#ffb2b2; --red-ink:#a31b1b;
  --gold:#ffc800; --gold-ink:#8a6a00; --orange:#ff9600; --orange-ink:#a85f00; --purple:#8a4fd0;
  --focus:#0b3a8c;
  --term-bg:#1f2533; --term-ink:#e8ecf4; --term-in:#ffd866;
  --kw:#1560b8; --str:#237a28; --num:#b43c0b; --ty:#7a35bd; --cmt:#646c79;
  --f:"Nunito","Varela Round","Arial Rounded MT Bold","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --top:0px;
}
*,*::before,*::after{box-sizing:border-box; font-variant-ligatures:none!important; font-feature-settings:"liga" 0,"calt" 0!important}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font:600 17px/1.5 var(--f); -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0; line-height:1.2; text-wrap:balance}
p{margin:0 0 12px}
a{color:var(--blue-ink)}
button{font:inherit; color:inherit}
code,kbd,pre{font-family:var(--mono)}
code{font-size:.88em; background:var(--soft); border:1px solid var(--line); border-radius:6px; padding:.05em .35em; font-weight:500; overflow-wrap:anywhere; -webkit-box-decoration-break:clone; box-decoration-break:clone}
kbd{font-size:.85em; background:#fff; border:2px solid var(--line); border-bottom-width:3px; border-radius:7px; padding:0 .45em; white-space:nowrap}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:8px}
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus{outline:none}
.ic{width:24px; height:24px; flex:none; display:block}
.muted{color:var(--muted)}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
mark.fach{background:#fff1a8; color:inherit; border-radius:5px; padding:0 .2em; font-weight:800}
[hidden]{display:none!important}

/* ===== Knöpfe ===== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:800 15px/1.15 var(--f); letter-spacing:.05em; text-transform:uppercase; text-decoration:none;
  border:none; border-radius:16px; padding:14px 22px; cursor:pointer; position:relative; transition:filter .12s, transform .06s; user-select:none; text-align:center}
.btn:hover:not(:disabled){filter:brightness(1.07)}
.btn:active:not(:disabled){transform:translateY(4px); box-shadow:none!important}
.btn:disabled{background:var(--line)!important; color:var(--faint)!important; box-shadow:none!important; border-color:var(--line)!important; cursor:default}
.btn-green{background:var(--green); color:#fff; box-shadow:0 4px 0 var(--green-d)}
.btn-blue{background:var(--blue); color:#fff; box-shadow:0 4px 0 var(--blue-d)}
.btn-red{background:var(--red); color:#fff; box-shadow:0 4px 0 var(--red-d)}
.btn-white{background:#fff; color:var(--ink2); border:2px solid var(--line); box-shadow:0 4px 0 var(--line)}
.btn-white:hover:not(:disabled){filter:none; background:var(--soft)}
.btn.small{padding:10px 16px; font-size:13px; border-radius:13px}
.btn.full{width:100%}
.linkbtn{background:none; border:none; padding:0; color:inherit; font-weight:800; text-decoration:underline; text-underline-offset:3px; cursor:pointer}

/* ===== Rahmen ===== */
.shell{display:grid; grid-template-columns:256px minmax(0,1fr) 360px; grid-template-areas:"side main rail"; min-height:100vh}
.side{grid-area:side; position:sticky; top:0; height:100vh; border-right:2px solid var(--line); padding:26px 16px; display:flex; flex-direction:column; gap:8px}
.topbar{grid-area:top}
.main{grid-area:main; min-width:0; padding:24px max(24px,env(safe-area-inset-right,0px)) 80px max(24px,env(safe-area-inset-left,0px))}
.rail{grid-area:rail; padding:24px 24px 40px 8px; position:sticky; top:0; align-self:start; display:grid; gap:20px; max-height:100vh; overflow-y:auto}
.logo{display:flex; align-items:center; gap:8px; color:var(--brand); text-decoration:none; font:900 30px/1 var(--f); letter-spacing:-.02em; padding:0 10px 22px}
.logo-bohne{width:38px; height:44px; flex:none}
.side nav{display:grid; gap:6px}
.nav{display:flex; align-items:center; gap:16px; padding:10px 16px; border-radius:14px; border:2px solid transparent; text-decoration:none; color:var(--ink2); font:800 15px var(--f); letter-spacing:.05em; text-transform:uppercase}
.nav:hover{background:var(--soft)}
.nav.on{background:var(--blue-bg); border-color:var(--blue-line); color:var(--blue-ink)}
.nav .ic{width:32px; height:32px}
.i-lernen .ic{color:var(--green-hi)}
.i-fehler .ic{color:var(--blue-hi)}
.i-spick .ic{color:var(--purple)}
.i-profil .ic{color:var(--orange)}
.i-blaetter .ic{color:#e8603c}
.side{overflow-y:auto}
.side-blaetter{display:grid; gap:4px; margin-top:18px}
.side-h{font:800 12px var(--f); text-transform:uppercase; letter-spacing:.07em; color:var(--muted); text-decoration:none; padding:6px 18px}
.side-h:hover{color:var(--ink2)}
.side-h.on{color:var(--blue-ink)}
.blatt-link{display:flex; align-items:center; gap:16px; padding:6px 16px; border-radius:14px; border:2px solid transparent; text-decoration:none; color:var(--ink2); font:800 15px var(--f); letter-spacing:.05em; text-transform:uppercase}
.blatt-link:hover{background:var(--soft)}
.blatt-link.on{background:var(--blue-bg); border-color:var(--blue-line); color:var(--blue-ink)}
.blatt-nr{width:32px; height:32px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--ct); color:#fff; font:800 15px var(--f); letter-spacing:0}
.blatt-nr .ic{width:18px; height:18px}
.blatt-nr.locked{background:var(--line); color:#6b6b6b}
.topbar,.tabbar{display:none}
.stats-row{display:flex; align-items:center; justify-content:space-around; gap:14px; padding:6px 4px}
.stat{display:flex; align-items:center; gap:6px; font:800 17px var(--f); color:var(--ink2)}
.stat .ic{width:26px; height:26px}
.stat-fire .ic{color:var(--orange)}
.stat-xp .ic{color:var(--gold)}
.stat-gym .ic{color:var(--blue-hi)}
.card{border:2px solid var(--line); border-radius:16px; padding:18px 20px}
.card-h{font:800 20px var(--f); margin-bottom:10px}
.card p{color:var(--muted); font-size:15px}
.card-src{background:var(--soft); border-color:var(--soft)}
.goal{display:flex; align-items:center; gap:12px; margin-bottom:8px}
.goal b{font-size:14px; color:var(--muted); white-space:nowrap}
.bar{flex:1; height:16px; background:var(--line); border-radius:99px; overflow:hidden}
.bar span{display:block; height:100%; background:var(--gold); border-radius:99px; transition:width .4s}
.warn{display:flex; gap:12px; align-items:flex-start; background:#fff6e0; border:2px solid #f2c45a; border-radius:14px; padding:12px 14px; margin:0 auto 18px; max-width:600px; color:#5c4300}
.warn p{margin:0; font-size:15px}
.warn .ic{color:var(--orange-ink); margin-top:2px}

@media (max-width:1159px){
  .shell{grid-template-columns:88px minmax(0,1fr); grid-template-areas:"side top" "side main"; grid-template-rows:auto 1fr}
  .rail{display:none}
  .side{padding:20px 10px; align-items:center}
  .side .logo span,.nav span,.blatt-link span:last-child,.side-h{display:none}
  .side-blaetter{margin-top:14px; padding-top:14px; border-top:2px solid var(--line)}
  .blatt-link{padding:6px; justify-content:center}
  .side .logo{padding:0 0 18px}
  .nav{padding:10px}
  .topbar{display:flex; position:sticky; top:0; z-index:40; align-items:center; justify-content:flex-end; gap:10px; background:#fff; border-bottom:2px solid var(--line); padding:8px 24px; min-height:58px}
  .topbar .logo{display:none}
  .topbar .stats-row{gap:22px; padding:0; justify-content:flex-end}
  :root{--top:58px}
}
@media (max-width:759px){
  .shell{display:block}
  .side{display:none}
  .topbar{justify-content:space-between; padding:8px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px)); padding-top:calc(8px + env(safe-area-inset-top,0px)); min-height:0}
  .topbar .logo{display:flex; font-size:22px; padding:0}
  .topbar .logo-bohne{width:28px; height:32px}
  .topbar .stats-row{gap:14px}
  .topbar .stat{font-size:15px}
  .topbar .stat .ic{width:22px; height:22px}
  :root{--top:calc(52px + env(safe-area-inset-top,0px))}
  .main{padding:16px max(16px,env(safe-area-inset-right,0px)) 110px max(16px,env(safe-area-inset-left,0px))}
  .tabbar{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); position:fixed; left:0; right:0; bottom:0; z-index:40; background:#fff; border-top:2px solid var(--line);
    padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
  .tab{display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 0; border-radius:12px; text-decoration:none; color:var(--muted); font:800 11px var(--f); border:2px solid transparent; min-height:48px; min-width:0}
  .tab .ic{width:28px; height:28px}
  .tab.on{background:var(--blue-bg); border-color:var(--blue-line); color:var(--blue-ink)}
}

/* ===== Lernpfad ===== */
.path{max-width:600px; margin:0 auto}
.unit{position:relative; margin-bottom:48px}
.unit-banner{position:sticky; top:calc(var(--top) + 12px); z-index:10; display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--ct); color:#fff;
  border-radius:16px; padding:16px 18px; box-shadow:0 4px 0 var(--cd)}
.ub-txt{min-width:0; flex:1}
.unit-banner p{margin:0 0 2px; font:800 13px var(--f); text-transform:uppercase; letter-spacing:.07em}
.unit-banner h2{font:800 22px var(--f); overflow-wrap:anywhere}
.ub-act{display:flex; gap:8px; flex:none}
.ub-btn{display:flex; align-items:center; gap:8px; background:transparent; color:#fff; border:2px solid rgba(255,255,255,.55); border-radius:13px; padding:10px 12px; font:800 13px var(--f);
  text-transform:uppercase; letter-spacing:.05em; text-decoration:none; cursor:pointer; box-shadow:0 3px 0 rgba(0,0,0,.18); min-height:44px}
.ub-btn:hover{background:rgba(255,255,255,.14)}
.ub-btn:active{transform:translateY(3px); box-shadow:none}
.ub-btn:focus-visible{outline-color:#fff}
@media (max-width:600px){
  .unit-banner{padding:12px 12px 12px 14px}
  .unit-banner h2{font-size:19px}
  .unit-banner p{font-size:12px}
  .ub-btn span{display:none}
  .ub-btn{padding:9px}
}
.unit-nodes{padding-top:70px; position:relative}
.node-wrap{position:relative; width:76px; margin:0 auto 26px; transform:translateX(var(--x))}
.node-wrap.has-bubble{margin-top:62px}
.node-wrap.pop-open{z-index:30}
.node{width:76px; height:70px; border-radius:50%; border:none; display:grid; place-items:center; cursor:pointer; color:#fff; background:var(--c); box-shadow:0 8px 0 var(--cd); transition:transform .06s}
.node .ic{width:36px; height:36px; filter:drop-shadow(0 1px 0 rgba(0,0,0,.18))}
.node:active{transform:translateY(8px); box-shadow:none}
.node.locked{background:var(--line); color:#9a9a9a; box-shadow:0 8px 0 #c4c4c4}
.node.locked .ic{filter:none}
.node.done .ic{width:40px; height:40px}
.node.test{width:84px; height:78px; border-radius:24px}
.node.cur{box-shadow:0 8px 0 var(--cd),0 0 0 8px #fff,0 0 0 13px var(--line)}
.start-bubble{position:absolute; bottom:calc(100% + 16px); left:50%; transform:translateX(-50%); background:#fff; color:var(--ct); border:2px solid var(--line); border-radius:12px;
  padding:8px 14px; font:800 15px var(--f); text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; animation:bob 1.8s ease-in-out infinite; z-index:2; pointer-events:none}
.start-bubble::after{content:""; position:absolute; top:100%; left:50%; width:12px; height:12px; background:#fff; border-right:2px solid var(--line); border-bottom:2px solid var(--line); transform:translate(-50%,-6px) rotate(45deg)}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-6px)}}
.unit-deco{position:absolute; top:150px; width:120px; pointer-events:none}
.unit-deco.left{left:2%} .unit-deco.right{right:2%}
@media (max-width:560px){.unit-deco{display:none}}
.node-wrap.mit-text{margin-bottom:58px}
.node-wrap.mit-text.has-bubble{margin-top:122px}
.node-wrap.mit-text.pop-open .node-cap{visibility:hidden}
.node-cap{position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%); width:min(176px,44vw); margin:0; text-align:center; text-wrap:balance; font:800 14px/1.25 var(--f); color:var(--ink2)}
.node.locked ~ .node-cap{color:var(--faint)}
.node.gate{background:var(--blue); box-shadow:0 8px 0 var(--blue-d)}
.node.gate.cur{box-shadow:0 8px 0 var(--blue-d),0 0 0 8px #fff,0 0 0 13px var(--line)}
.blatt-ende{display:grid; justify-items:center; gap:14px; text-align:center; color:var(--muted); padding:0 20px 40px}
.blatt-ende p{margin:0; max-width:420px}
.blatt-grund{font-size:15px}
.blatt-intro{color:var(--muted); margin:-8px 0 20px; max-width:560px}
.unit-link.blatt-zu{color:var(--muted)}
.unit-link.blatt-zu .ul-nr{background:var(--line); color:#6b6b6b; box-shadow:0 4px 0 #c4c4c4}
.unit-link.blatt-zu .ic{color:var(--faint)}
.path-end{text-align:center; color:var(--muted); padding:10px 20px 40px}
.path-end .bohne{width:110px; height:130px}

.pop{position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%); width:min(310px,86vw); background:var(--ct); color:#fff; border-radius:16px; padding:18px; z-index:30;
  text-align:left; box-shadow:0 10px 30px rgba(0,0,0,.18); margin-left:var(--dx,0px)}
.pop::before{content:""; position:absolute; bottom:100%; left:calc(50% - var(--dx,0px)); width:16px; height:16px; background:var(--ct); transform:translate(-50%,8px) rotate(45deg); border-radius:3px}
.pop h3{font:800 19px var(--f); margin-bottom:4px}
.pop p{font-size:15px; margin-bottom:14px}
.btn-pop{background:#fff; color:var(--ct); box-shadow:0 4px 0 rgba(0,0,0,.2)}
.pop.locked{background:var(--soft); color:var(--ink2); border:2px solid var(--line)}
.pop.locked::before{background:var(--soft); border-left:2px solid var(--line); border-top:2px solid var(--line)}
.pop-lock{margin:0!important}

/* ===== Seiten ===== */
.page{max-width:720px; margin:0 auto}
.page-h{font:800 30px var(--f); margin:8px 0 20px}
.sec-h{font:800 22px var(--f); margin:30px 0 12px}
.back{display:inline-block; margin-bottom:14px; font-weight:800; text-decoration:none}
.hero-card{display:flex; gap:20px; align-items:center; border:2px solid var(--line); border-radius:20px; padding:22px}
.hero-card h1{font:800 28px var(--f); margin-bottom:6px}
.hero-bohne{width:110px; height:130px; flex:none}
.hero-btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:12px}
@media (max-width:560px){.hero-card{flex-direction:column; text-align:center}.hero-btns{justify-content:center}}
.mist{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.mist li{border:2px solid var(--line); border-radius:14px; padding:12px 16px; display:grid; gap:2px}
.mist small{color:var(--muted)}
.tipps-head{background:var(--ct); color:#fff; border-radius:18px; padding:22px; box-shadow:0 4px 0 var(--cd)}
.tipps-head p{margin:0}
.tipps-head p:first-child{font:800 13px var(--f); text-transform:uppercase; letter-spacing:.07em}
.tipps-head h1{font:800 28px var(--f); margin:4px 0 6px}
.tipp{border:2px solid var(--line); border-radius:16px; padding:18px 20px; margin-bottom:14px; overflow-wrap:anywhere}
.tipp h3{font:800 19px var(--f); margin-bottom:8px}
.seg-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px}
.seg-tabs button{border:2px solid var(--line); border-bottom-width:4px; background:#fff; border-radius:12px; padding:9px 14px; font:800 14px var(--f); text-transform:uppercase; letter-spacing:.04em; color:var(--ink2); cursor:pointer; min-height:44px}
.seg-tabs button[aria-selected="true"]{background:var(--blue-bg); border-color:var(--blue-line); color:var(--blue-ink)}
.unit-list{display:grid; gap:12px}
.unit-link{display:flex; align-items:center; gap:16px; text-decoration:none; color:var(--ink); border:2px solid var(--line); border-bottom-width:4px; border-radius:16px; padding:14px 18px}
.unit-link:hover{background:var(--soft)}
.unit-link span:nth-child(2){flex:1; display:grid; min-width:0}
.unit-link small{color:var(--muted)}
.unit-link .ic{color:var(--ct); width:28px; height:28px}
.ul-nr{width:44px; height:44px; border-radius:50%; background:var(--ct); color:#fff; display:grid; place-items:center; font:800 18px var(--f); box-shadow:0 4px 0 var(--cd); flex:none}
.gl{display:grid; gap:8px; margin-top:12px}
.gl-row{display:grid; grid-template-columns:minmax(0,13em) minmax(0,1fr) minmax(0,13em); gap:4px 16px; align-items:start; border:2px solid var(--line); border-radius:14px; padding:10px 14px; overflow-wrap:anywhere}
.gl-row code{justify-self:start}
.gl-row.keys{grid-template-columns:70px minmax(0,1fr) minmax(0,1fr); align-items:center}
.gl-row code.big{font-size:20px; justify-self:center}
.gl-row small{color:var(--muted)}
@media (max-width:640px){.gl-row{grid-template-columns:minmax(0,1fr)}.gl-row.keys{grid-template-columns:56px minmax(0,1fr)}.gl-row.keys small{grid-column:2}}
.errc{border:2px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:10px}
.errc p{margin:6px 0 0; font-size:15px; overflow-wrap:anywhere; padding-right:6px}
.errmsg{font-family:var(--mono); font-size:14px; color:var(--red-ink); background:var(--red-bg); border-radius:10px; padding:8px 12px; white-space:pre-wrap; overflow-wrap:anywhere; margin:0}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px}
.kpi{border:2px solid var(--line); border-radius:16px; padding:14px 16px; display:grid; grid-template-columns:auto 1fr; gap:0 10px; align-items:center}
.kpi .ic{grid-row:span 2; width:30px; height:30px}
.kpi b{font:800 22px var(--f)}
.kpi span{color:var(--muted); font-size:14px}
.c-fire{color:var(--orange)} .c-xp{color:var(--gold)} .c-star{color:var(--purple)} .c-ok{color:var(--green-hi)}
.cal{display:grid; grid-template-columns:repeat(14,1fr); gap:6px; max-width:520px}
.day{aspect-ratio:1; border-radius:6px; background:var(--line); max-width:100%}
.day.on{background:var(--orange)}
.day.today{outline:2px solid var(--focus); outline-offset:1px}
.units-prog{display:grid; gap:10px}
.up{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 44px; gap:12px; align-items:center; border:2px solid var(--line); border-radius:14px; padding:12px 14px}
.up small{display:block; color:var(--muted); font-size:13px}
.up .bar span{background:var(--c)}
.up > span{font-weight:800; text-align:right}
.backup{border:2px solid var(--line); border-radius:16px; padding:16px}
.sync-state{display:flex; gap:10px; align-items:flex-start; font-size:15px}
.sync-state .ic{color:var(--blue-ink); margin-top:2px}
.bk-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:10px 0}
.bk-msg{font-size:14px; color:var(--ok-ink); font-weight:800}
.bk-code{width:100%; font:500 13px var(--mono); border:2px solid var(--line); border-radius:12px; padding:10px; resize:vertical; background:var(--soft); color:var(--ink); overflow-wrap:anywhere}
.bk-code:focus{outline:none; border-color:var(--focus); background:#fff}
.settings{display:grid; gap:10px}
.set{display:flex; align-items:center; justify-content:space-between; gap:12px; border:2px solid var(--line); border-radius:14px; padding:12px 16px; min-height:56px}
.set span{display:flex; align-items:center; gap:10px; font-weight:800}
.set input[type=checkbox]{width:24px; height:24px; accent-color:var(--green)}
.set select{font:700 16px var(--f); border:2px solid var(--line); border-radius:10px; padding:6px 10px; background:#fff; color:var(--ink)}
.crash{max-width:640px; margin:60px auto; padding:0 20px; text-align:center}
.crash pre{text-align:left; white-space:pre-wrap; background:var(--soft); border-radius:12px; padding:12px; font-size:12px}

/* ===== Modal ===== */
.modal{position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.5); display:grid; place-items:center; padding:16px}
.modal-in{background:#fff; border-radius:22px; padding:26px 24px; width:100%; max-width:420px; text-align:center; max-height:88vh; overflow-y:auto; overflow-wrap:anywhere}
.modal-in h2{font:800 24px var(--f); margin:8px 0}
.modal-in p{color:var(--muted)}
.modal-bohne{width:90px; height:106px}
.modal-btns{display:grid; gap:12px; margin-top:18px}
.modal-lern{max-width:640px; text-align:left}
.modal-lern p{color:var(--ink)}

/* ===== Lektion ===== */
.player{min-height:100vh; display:flex; flex-direction:column}
.phead{position:sticky; top:0; z-index:20; background:#fff}
.phead-in{max-width:1040px; margin:0 auto; display:flex; align-items:center; gap:14px;
  padding:calc(20px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px))}
.iconbtn{width:44px; height:44px; display:grid; place-items:center; background:none; border:none; border-radius:12px; color:var(--faint); cursor:pointer; flex:none}
.iconbtn:hover{color:var(--ink2); background:var(--soft)}
.iconbtn .ic{width:30px; height:30px}
.pbar{flex:1; height:16px; background:var(--line); border-radius:99px; overflow:hidden}
.pbar span{display:block; position:relative; height:100%; width:0; background:var(--green-hi); border-radius:99px; transition:width .45s cubic-bezier(.3,1.4,.5,1)}
.pbar span::after{content:""; position:absolute; left:10px; right:10px; top:4px; height:4px; border-radius:4px; background:rgba(255,255,255,.3)}
.combo,.hearts{display:flex; align-items:center; gap:4px; font:800 15px var(--f); color:var(--orange-ink); min-width:96px; justify-content:flex-end; white-space:nowrap}
.combo .ic{width:22px; height:22px; color:var(--orange)}
.hearts{color:var(--red-ink); min-width:auto}
.hearts .ic{width:22px; height:22px; color:var(--red)}
.pmain{flex:1; padding:24px max(16px,env(safe-area-inset-right,0px)) 190px max(16px,env(safe-area-inset-left,0px))}
.pstage{max-width:640px; margin:0 auto}
.ex{animation:slide .25s ease both; overflow-wrap:anywhere}
.ex.wide{max-width:none}
.pstage:has(.ex.wide){max-width:1040px}
@keyframes slide{from{transform:translateX(16px)}to{transform:none}}
.ex-q{font:800 26px/1.25 var(--f); color:var(--ink); margin:0 0 20px}
.ex-hint,.ex-sub{color:var(--muted); font-size:15px; margin:-10px 0 16px}
.ex-sub p{margin:0 0 6px}
.again{display:inline-flex; align-items:center; gap:6px; color:var(--orange-ink); font:800 13px var(--f); text-transform:uppercase; letter-spacing:.05em; margin:0 0 10px}
.again .ic{width:20px; height:20px; color:var(--orange)}
.code-box{background:var(--soft); border:2px solid var(--line); border-radius:14px; padding:14px 16px; font:500 15px/1.7 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; tab-size:4; -moz-tab-size:4; margin:0 0 18px; color:#2b2f38; max-width:100%}
.blank{display:inline-block; min-width:3ch; border-bottom:3px solid var(--blue); padding:0 3px; text-align:center; color:var(--blue-ink); font-weight:700}
.blank.filled{background:var(--blue-bg); border-radius:6px 6px 0 0}
.t-kw{color:var(--kw); font-weight:700} .t-str{color:var(--str)} .t-num{color:var(--num)} .t-ty{color:var(--ty)} .t-cmt{color:var(--cmt); font-style:italic}
.term{background:var(--term-bg); color:var(--term-ink); font:500 15px/1.6 var(--mono); border-radius:12px; padding:12px 14px; text-align:left}
.term > div{white-space:pre-wrap; overflow-wrap:anywhere; min-height:1.6em}
.term .in{color:var(--term-in)}
.term .dim{opacity:.7; font-family:var(--f)}
.cap{font:800 12px var(--f); text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:14px 0 6px}

.opts{display:grid; gap:12px}
.opt{display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:#fff; border:2px solid var(--line); border-bottom-width:4px; border-radius:16px;
  padding:14px 16px; font:700 17px/1.35 var(--f); color:var(--ink2); cursor:pointer; transition:background .1s, border-color .1s; min-height:56px}
.opt:hover:not(:disabled){background:var(--soft)}
.opt:disabled{cursor:default}
.opt.sel{background:var(--blue-bg); border-color:var(--blue-line); color:var(--blue-ink)}
.opt.right{background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok-ink)}
.opt.wrong{background:var(--red-bg); border-color:var(--red-line); color:var(--red-ink)}
.okey{width:30px; height:30px; flex:none; border:2px solid var(--line); border-radius:9px; display:grid; place-items:center; font:800 14px var(--f); color:var(--faint)}
.opt.sel .okey{border-color:var(--blue-line); color:var(--blue-ink)}
.otxt{flex:1; min-width:0}
.opts-term .term{flex:1; min-width:0; margin:0; font-size:14px}
.statement{display:flex; align-items:flex-end; gap:12px; margin-bottom:18px}
.st-bohne{width:86px; height:100px; flex:none}
.bubble{position:relative; border:2px solid var(--line); border-radius:16px; padding:14px 16px; font:700 18px/1.4 var(--f); background:#fff; flex:1; min-width:0}
.bubble::before{content:""; position:absolute; left:-9px; bottom:22px; width:14px; height:14px; background:#fff; border-left:2px solid var(--line); border-bottom:2px solid var(--line); transform:rotate(45deg)}
.tf2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.tfb{justify-content:center; font-size:18px}
.tfb .ic{width:22px; height:22px}
@media (max-width:400px){.tfb .okey{display:none}.tfb{padding:12px 8px; font-size:16px}.st-bohne{width:64px; height:76px}}
.type-l{display:block; font:800 13px var(--f); text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:6px}
.type-in{width:100%; font:600 20px var(--mono); padding:14px 16px; border:2px solid var(--line); border-radius:14px; background:var(--soft); color:var(--ink)}
.type-in:focus{outline:3px solid var(--focus); outline-offset:2px; border-color:var(--blue-line); background:#fff}
.type-in.right{border-color:var(--ok-line); background:var(--ok-bg)}
.type-in.wrong{border-color:var(--red-line); background:var(--red-bg)}
.type-in.code-in{font-size:18px}
.type-in + .ex-hint{margin:8px 0 0}

.bau-ans{min-height:124px; display:flex; flex-wrap:wrap; align-content:flex-start; gap:8px; padding:8px 0 10px;
  background:repeating-linear-gradient(transparent 0 58px,var(--line) 58px 60px); border-radius:4px}
.bau-ans.right .tilew{border-color:var(--ok-line); color:var(--ok-ink)}
.bau-ans.wrong .tilew{border-color:var(--red-line); color:var(--red-ink)}
.bau-bank{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:28px}
.slot{display:inline-block; border-radius:12px; background:var(--line); max-width:100%}
.tilew{background:#fff; border:2px solid var(--line); border-bottom-width:4px; border-radius:12px; padding:9px 14px; font:700 17px var(--f); color:var(--ink2); cursor:pointer; white-space:pre-wrap; overflow-wrap:anywhere; min-height:46px; max-width:100%}
.tilew.mono{font:500 16px var(--mono)}
.tilew:hover:not(:disabled){background:var(--soft)}
.tilew.used{visibility:hidden}
.tilew[aria-pressed="true"]{background:var(--blue-bg); border-color:var(--blue-line); color:var(--blue-ink)}
.tilew.right{background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok-ink)}
.tilew.wrong{background:var(--red-bg); border-color:var(--red-line); color:var(--red-ink)}
.multi{display:flex; flex-wrap:wrap; gap:10px}

.ord-ans{list-style:none; margin:0 0 18px; padding:10px; min-height:140px; border:2px dashed var(--line2); border-radius:16px; display:grid; gap:8px; align-content:start}
.ord-ans.right{border-color:var(--ok-line); border-style:solid; background:#f3ffe9}
.ord-ans.wrong{border-color:var(--red-line); border-style:solid; background:#fff6f6}
.ord-bank{display:grid; gap:8px}
.line-tile{display:block; width:100%; text-align:left; background:#fff; border:2px solid var(--line); border-bottom-width:4px; border-radius:12px; padding:10px 14px; font:700 16px var(--f); color:var(--ink2); cursor:pointer; min-height:46px}
.line-tile.mono{font:500 15px var(--mono); white-space:pre-wrap; overflow-wrap:anywhere}
.line-tile:hover:not(:disabled){background:var(--soft)}
.line-tile.used{visibility:hidden}
.ind{white-space:pre}

.code-box.bug{padding:6px 0}
.bugline{display:flex; width:100%; background:none; border:none; text-align:left; font:500 15px/1.6 var(--mono); padding:6px 16px 6px 0; cursor:pointer; white-space:pre-wrap; overflow-wrap:anywhere; color:#2b2f38; min-height:40px; align-items:flex-start}
.bugline:hover:not(:disabled){background:var(--blue-bg)}
.bugline.sel{background:var(--blue-bg); box-shadow:inset 4px 0 0 var(--blue)}
.bugline.right{background:var(--ok-bg); box-shadow:inset 4px 0 0 var(--green)}
.bugline.wrong{background:var(--red-bg); box-shadow:inset 4px 0 0 var(--red)}
.bugline .src{flex:1; min-width:0}
.ln{width:2.8em; text-align:right; padding-right:1em; color:var(--faint); flex:none; user-select:none}

.liste{display:grid; gap:10px}
.lrow-q{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 14px; border:2px solid var(--line); border-radius:14px; padding:10px 14px}
.lrow-q > code{font-size:17px; background:none; border:none; padding:0}
.lrow-q.right{border-color:var(--ok-line); background:#f3ffe9}
.lrow-q.wrong{border-color:var(--red-line); background:#fff6f6}
.seg2{display:flex; gap:8px}
.seg2 button{border:2px solid var(--line); border-bottom-width:4px; background:#fff; border-radius:12px; padding:7px 14px; font:800 14px var(--f); cursor:pointer; color:var(--ink2); min-height:44px}
.seg2 button.sel{background:var(--blue-bg); border-color:var(--blue-line); color:var(--blue-ink)}
.seg2 button.want{outline:3px solid var(--green); outline-offset:1px}

.pairs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.pcol{display:grid; gap:12px; align-content:start}
.pair{width:100%; min-height:58px; white-space:normal; text-align:center; font-size:16px; line-height:1.3}
.pair.sel{background:var(--blue-bg); border-color:var(--blue-line); color:var(--blue-ink)}
.pair.match{background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok-ink); opacity:.6; transition:opacity .4s .3s}
.pair.nomatch{background:var(--red-bg); border-color:var(--red-line); color:var(--red-ink); animation:shake .35s}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

.lern-head{display:flex; align-items:flex-end; gap:14px; margin-bottom:18px}
.lern-bohne{width:92px; height:108px; flex:none}
.lern-head .bubble h1{font:800 23px/1.25 var(--f)}
.neu-badge{display:inline-block; background:var(--purple); color:#fff; font:800 12px var(--f); text-transform:uppercase; letter-spacing:.07em; border-radius:8px; padding:2px 8px; margin-bottom:6px}
.lern-body{font-size:18px; line-height:1.6}
.lern-body p,.tipp p{margin-bottom:12px}
.lern-body ul,.lern-body ol,.tipp ul,.tipp ol{padding-left:1.3em; margin:0 0 14px}
.lern-body li,.tipp li{margin-bottom:6px}
.lern-body svg,.tipp svg{max-width:100%; height:auto}
.merke{border:2px solid var(--gold); background:#fffbe6; border-radius:14px; padding:12px 16px; margin:16px 0}
.merke b{display:block; font:800 13px var(--f); text-transform:uppercase; letter-spacing:.07em; color:var(--gold-ink); margin-bottom:4px}
.merke p{margin:0}
.quelle{display:flex; align-items:center; gap:6px; color:var(--muted); font-size:14px; margin-top:16px}
.quelle .ic{width:18px; height:18px}
@media (max-width:420px){.lern-bohne{width:64px; height:76px}.lern-head .bubble h1{font-size:20px}.ex-q{font-size:22px}}
.kisten{display:flex; flex-wrap:wrap; gap:20px 12px; padding-top:14px; min-height:70px}
.kiste{position:relative; min-width:74px; padding:20px 10px 9px; background:#fff; border:2px solid var(--ink2); border-radius:4px 4px 12px 12px; text-align:center}
.schild{position:absolute; top:-13px; left:50%; transform:translateX(-50%) rotate(-2deg); background:#fff1a8; border:2px solid var(--ink2); border-radius:6px; font:500 13px var(--mono); padding:0 8px; white-space:nowrap}
.inhalt{font:600 21px var(--mono)}
.leer{color:var(--faint); font-weight:800; font-size:15px}
.kiste.neu{background:var(--ok-bg); animation:pop .4s ease}
@keyframes pop{0%{transform:scale(.9)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
.flow{display:flex; flex-wrap:wrap; align-items:stretch; gap:8px; margin:6px 0 16px}
.flow > div{flex:1 1 140px; background:var(--soft); border-radius:14px; padding:12px 14px; font-size:15px}
.flow > div b{display:block; font-size:16px}
.flow > i{align-self:center; font-style:normal; color:var(--muted); font-weight:800}
.bits{display:flex; gap:6px; margin:8px 0 14px; flex-wrap:wrap}
.bits div{border:2px solid var(--line); border-radius:12px; text-align:center; padding:6px 10px; min-width:56px}
.bits div b{display:block; font:600 24px var(--mono)}
.bits div small{color:var(--muted); font-size:12px}
.bits div.one{background:#fff1a8; border-color:var(--gold)}
.duo{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:6px 0 16px}
.duo > div{background:var(--soft); border-radius:14px; padding:12px 14px; font-size:15px}
.duo h4{margin:0 0 6px; font:800 15px var(--f)}
.duo ol,.duo ul{margin:0; padding-left:1.2em}
@media (max-width:560px){.duo{grid-template-columns:minmax(0,1fr)}}
.tbl{width:100%; border-collapse:collapse; margin:4px 0 16px; font-size:16px}
.tbl th,.tbl td{border-bottom:2px solid var(--line); padding:8px 10px; text-align:left}
.tbl th{font:800 12px var(--f); text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.tbl td code{font-size:15px; white-space:nowrap}
.tblwrap{overflow-x:auto}
.shapes{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin:6px 0 16px}
.shapes > div{background:var(--soft); border-radius:14px; padding:10px; text-align:center; font-size:14px}
.shapes svg{width:96px; height:46px; display:block; margin:0 auto 4px}
.shapes b{display:block; font-size:15px}
.s{fill:#fff; stroke:var(--ink2); stroke-width:1.6}
.s.term2{fill:#eef2f7} .s.dec{fill:#fff1a8} .s.io{fill:#ddf4ff}
.figure{margin:4px 0 16px; overflow-x:auto}
.figure svg{display:block; width:100%; max-width:420px; height:auto}
.figure text{font:600 13px var(--mono); fill:var(--ink)}
.edge-a{stroke:var(--blue); stroke-width:3; fill:none} .edge-b{stroke:var(--red); stroke-width:3; fill:none} .edge-c{stroke:var(--green); stroke-width:3; fill:none}
.hid{stroke-dasharray:6 5}

.pfoot{position:fixed; left:0; right:0; bottom:0; z-index:30; background:#fff; border-top:2px solid var(--line); padding-bottom:env(safe-area-inset-bottom,0px); max-height:72vh; overflow-y:auto; overscroll-behavior:contain}
.pfoot.ok{background:var(--ok-bg); border-top-color:var(--ok-bg)}
.pfoot.bad{background:var(--red-bg); border-top-color:var(--red-bg)}
.pfoot-in{max-width:1040px; margin:0 auto; display:flex; align-items:center; gap:16px; min-height:128px;
  padding:20px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px))}
.pfb{flex:1; display:flex; align-items:flex-start; gap:16px; min-width:0}
.pfb:empty{display:block}
.pfb-txt{min-width:0; flex:1}
.pfb-ic{width:64px; height:64px; border-radius:50%; background:#fff; display:grid; place-items:center; flex:none}
.pfb-ic .ic{width:36px; height:36px}
.ok .pfb-ic{color:var(--ok-ink)} .bad .pfb-ic{color:var(--red-ink)}
.pfb h3{font:800 23px var(--f); margin-bottom:4px}
.ok .pfb h3{color:var(--ok-ink)} .bad .pfb h3{color:var(--red-ink)}
.pfb .sol{color:var(--red-ink); font-size:16px; margin-bottom:6px; overflow-wrap:anywhere}
.pfb .sol .code-box{margin:6px 0; font-size:14px; background:#fff}
.pfb .sol .term{margin:6px 0; font-size:14px}
.pfb .sol ol{margin:4px 0; padding-left:1.3em}
.pfb .sol code{background:#fff}
.pfb .erkl{font-size:15px; margin:0 0 4px}
.ok .pfb .erkl{color:var(--ok-ink)} .bad .pfb .erkl{color:#7d1f1f}
.pfb .soon{font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--red-ink); margin:6px 0 4px}
.pfb .linkbtn{font-size:15px; color:var(--red-ink); min-height:32px}
.pskip,.pmainbtn{min-width:150px}
@media (max-width:640px){
  .pfoot-in{flex-wrap:wrap; min-height:0; padding-top:14px; padding-bottom:14px; gap:12px}
  .pfb{flex-basis:100%}
  .pfb-ic{display:none}
  .pfb h3{font-size:20px}
  .pmainbtn{flex:1}
  .pskip{flex:1; min-width:0}
  .opt{font-size:16px}
}

.finish{position:relative; text-align:center; padding:30px 0 10px}
.finish h1{font:800 32px var(--f); color:var(--gold-ink); margin:10px 0 8px}
.finish p{color:var(--muted); font-size:18px; max-width:460px; margin:0 auto 22px}
.done-bohne{width:150px; height:176px; animation:hop .9s ease .1s 2}
@keyframes hop{0%,100%{transform:none}40%{transform:translateY(-22px)}}
.tiles{display:flex; flex-wrap:wrap; justify-content:center; gap:14px}
.tile{--tc:#8a6a00; min-width:128px; background:var(--tc); border:2px solid var(--tc); border-radius:16px; overflow:hidden}
.tile p{color:#fff; font:800 13px var(--f); text-transform:uppercase; letter-spacing:.05em; margin:0; padding:6px}
.tile b{display:flex; align-items:center; justify-content:center; gap:6px; background:#fff; border-radius:14px; padding:14px 12px; font:800 22px var(--f); color:var(--tc)}
.tile b .ic{width:22px; height:22px}
.t-acc{--tc:var(--green)} .t-time{--tc:var(--blue)}
.confetti{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.confetti i{position:absolute; top:-12px; left:var(--x); width:9px; height:14px; border-radius:2px; transform:rotate(var(--r)); animation:fall 1.8s var(--d) ease-in both}
@keyframes fall{from{transform:translateY(0) rotate(var(--r))}to{transform:translateY(520px) rotate(calc(var(--r) + 540deg)); opacity:0}}
.big-fire{display:inline-flex; flex-direction:column; align-items:center; color:var(--orange)}
.big-fire .ic{width:120px; height:120px}
.big-fire b{font:900 64px var(--f); margin-top:-10px; color:var(--orange-ink)}

/* ===== Spiel Computer ===== */
.bench{border:2px solid var(--line); border-radius:18px; padding:16px}
.bench-form{border-bottom:2px dashed var(--line); padding-bottom:14px; margin-bottom:16px}
.bench-fields{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end}
.fld{display:flex; flex-direction:column; gap:4px; font:500 14px var(--mono); color:var(--muted)}
.fld input{width:104px; font:600 18px var(--mono); color:var(--ink); background:var(--soft); border:2px solid var(--line); border-radius:12px; padding:8px 10px}
.fld input:focus{outline:3px solid var(--focus); outline-offset:2px; background:#fff}
.bench-examples{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.chip{border:2px solid var(--line); border-bottom-width:4px; background:#fff; border-radius:12px; padding:6px 12px; font:700 14px var(--f); cursor:pointer; color:var(--ink2); min-height:40px}
.chip:hover{background:var(--soft)}
.bench-err{color:var(--red-ink); background:var(--red-bg); border-radius:10px; padding:8px 12px; margin:12px 0 0; font-size:15px}
.bench-grid{display:grid; gap:16px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start}
.bench-side{display:flex; flex-direction:column; gap:14px; min-width:0; order:2}
.bench-codecol{min-width:0; order:1; position:sticky; top:84px}
.bench-code{max-height:min(560px,62vh); overflow:auto; position:relative; margin:0; padding:10px 0; white-space:normal}
.bench-code .code-inner{min-width:max-content}
.bench-code .cl{display:flex; white-space:pre; padding-right:16px}
.bench-code .cl .ln{width:2.8em}
.bench-code .cl.seen .ln{color:var(--blue-ink); font-weight:700}
.bench-code .cl.cur{background:#fff1a8}
.bench-note{background:var(--blue-bg); border-radius:16px; padding:14px 16px}
.note-top{display:flex; justify-content:space-between; font:800 13px var(--f); color:var(--blue-ink); margin-bottom:6px}
.note-line{background:#fff1a8; color:var(--ink); border-radius:6px; padding:0 8px; font-family:var(--mono); font-weight:600}
.note-body p{margin:0 0 8px; font-size:16px}
.note-body .after{margin-top:8px}
.note-ctrl{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.q{display:flex; flex-wrap:wrap; gap:6px}
.q-pill{border-radius:10px; padding:4px 10px; font-weight:800; font-size:14px}
.q-pill code{background:none; border:none; padding:0}
.q-pill.yes{background:var(--ok-bg); color:var(--ok-ink)} .q-pill.no{background:var(--red-bg); color:var(--red-ink)}
.mini-h{font:800 13px var(--f); text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:0 0 4px}
.fld-text{flex:1 1 240px; min-width:0; font-family:var(--f); font-weight:800}
.fld-text input{width:100%}
.term .err{color:#ffb4a8}
.post-row{display:flex; align-items:center; gap:14px; min-height:56px}
.post-bild{width:58px; height:46px; flex:none}
.post-slot{min-width:0}
.post-leer{color:var(--faint); font-weight:800; font-size:15px}
.zettel{display:inline-block; background:#fff; border:2px solid var(--ink2); border-radius:6px; padding:5px 14px; font:600 20px var(--mono); transform:rotate(-2deg); box-shadow:2px 3px 0 var(--line2); overflow-wrap:anywhere}
.post-rest{margin:6px 0 0; font-size:14px; color:var(--muted); overflow-wrap:anywhere}
.tbl-umbruch td code{white-space:normal}
@media (max-width:860px){
  .bench-grid{display:flex; flex-direction:column; align-items:stretch}
  .bench-side{display:contents}
  .bench-note{order:1}
  .bench-codecol{order:2; position:static; width:100%; max-width:100%}
  .bench-post{order:3}
  .bench-box{order:3}
  .bench-screen{order:4}
  .bench-code{max-height:300px}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important; transition:none!important; scroll-behavior:auto!important}}