/**
 * Online-Schnupperstunde game styles. Everything scoped under #rc-sch
 * (mount div rendered by [rc_schnupperstunde]); page runs on
 * template-agent-blank. Brand colors via var(--robbo-*) tokens
 * (brand-tokens.css, loaded site-wide). px only — no rem.
 */

#rc-sch{
  /* game palette on top of brand tokens */
  --g:var(--robbo-green, #00af41);
  --gd:var(--robbo-green-dark, #009638);
  --coal:var(--robbo-coal, #383838);
  --muted:#8a9089;
  --bg:#f5f6f4; --floor:#e9ece8; --floor-line:#d8dcd6;
  --card:var(--robbo-white, #fff); --line:#e2e5e0;
  --star:#f5b301; --loopc:#7a5bd6;

  background:var(--bg); color:var(--coal);
  font-family:'ProximaNova','Proxima Nova','Noto Sans',sans-serif;
  min-height:100vh; width:100%;
  display:flex; justify-content:center;
  user-select:none; -webkit-user-select:none; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
#rc-sch *{box-sizing:border-box;}
#rc-sch button{font-family:inherit; color:var(--coal); cursor:pointer;}
/* band themes */
#rc-sch.sch-b57{--bg:#faf6ec; --floor:#f1ead9; --floor-line:#e2d9c4; --line:#e8e1d2;}
#rc-sch.sch-b1115{--bg:#f8efe9; --floor:#eed9cb; --floor-line:#dfc4b1; --line:#e9dbd1;}

/* ---------- screens ---------- */
#rc-sch .sch-screen{width:100%; max-width:430px; padding:10px 12px 24px; display:none;
  flex-direction:column; gap:10px;}
#rc-sch .sch-screen.sch-show{display:flex;}

/* ---------- age select ---------- */
#rc-sch #sch-agesel{text-align:center; padding-top:26px;}
#rc-sch .sch-logo{font-weight:800; letter-spacing:.1em; font-size:var(--robbo-fs-badge); color:var(--g);}
#rc-sch #sch-agesel .sch-title{font-size:26px; margin:8px 0 2px; line-height:1.2; color:var(--coal); font-family:inherit; font-weight:800;}
#rc-sch .sch-sub{color:var(--muted); font-size:14px; margin:0 0 18px;}
#rc-sch .sch-mcard{display:flex; align-items:center; gap:14px; text-align:left; width:100%;
  background:var(--card); border:2px solid var(--line); border-radius:16px;
  padding:14px; margin-bottom:12px; box-shadow:0 2px 0 var(--line);}
#rc-sch .sch-mcard:active{transform:translateY(1px); box-shadow:none;}
#rc-sch .sch-mcard .sch-em{font-size:32px;}
#rc-sch .sch-mcard b{font-size:17px; display:block;}
#rc-sch .sch-mcard small{color:var(--muted); font-size:var(--robbo-fs-sm); display:block; margin-top:2px;}
#rc-sch .sch-mcard .sch-mstars{margin-left:auto; font-size:var(--robbo-fs-xs); font-weight:800;
  color:var(--star); white-space:nowrap;}
#rc-sch .sch-foot{font-size:var(--robbo-fs-legal); color:var(--muted); margin-top:14px;}

/* ---------- game header ---------- */
#rc-sch header{display:flex; align-items:center; justify-content:space-between; gap:8px;}
#rc-sch .sch-mission{font-weight:800; font-size:15px; line-height:1.25;}
#rc-sch .sch-mission small{display:block; font-weight:600; color:var(--muted); font-size:var(--robbo-fs-xs);}
#rc-sch .sch-dots{display:flex; gap:5px; flex-wrap:wrap;}
#rc-sch .sch-dot{width:21px; height:21px; border-radius:50%; border:2px solid var(--line);
  background:var(--card); font-size:var(--robbo-fs-badge); font-weight:800; color:var(--muted);
  display:grid; place-items:center; padding:0;}
#rc-sch .sch-dot.sch-done{background:var(--g); border-color:var(--g); color:#fff;}
#rc-sch .sch-dot.sch-cur{border-color:var(--g); color:var(--g);}
#rc-sch .sch-dot:disabled{opacity:.45;}
#rc-sch .sch-iconbtn{width:34px; height:34px; border-radius:10px; border:1.5px solid var(--line);
  background:var(--card); font-size:15px; display:grid; place-items:center; padding:0; flex:none;}

/* ---------- board ---------- */
#rc-sch .sch-boardwrap{position:relative; margin:0 auto;}
#rc-sch .sch-board{display:grid; gap:0; border:3px solid #c9cec7; border-radius:12px;
  overflow:hidden; background:var(--floor);}
#rc-sch .sch-cell{background:var(--floor); box-shadow:inset 0 0 0 1px var(--floor-line);
  display:grid; place-items:center; position:relative;}
#rc-sch .sch-cell.sch-ob{background:#b98a5a;
  background-image:linear-gradient(#0000 46%, #00000022 46% 54%, #0000 54%),
                   linear-gradient(90deg,#0000 46%, #00000018 46% 54%, #0000 54%);
  box-shadow:inset 0 0 0 2px #8a6540, inset 0 -4px 0 #00000022;}
#rc-sch.sch-b1115 .sch-cell.sch-ob{background:#8d7468;
  background-image:radial-gradient(circle at 50% 42%, #6d564b 0 34%, #0000 35%);
  box-shadow:inset 0 0 0 2px #6d564b, inset 0 -4px 0 #00000026;}
#rc-sch .sch-cell.sch-goal{background:#d9efe0; box-shadow:inset 0 0 0 2px var(--g);}
#rc-sch .sch-goalicon{font-size:20px; color:var(--gd); display:grid; place-items:center;}
#rc-sch .sch-pkg{transition:transform .3s, opacity .3s; font-size:22px;}
#rc-sch .sch-pkg.sch-taken{transform:scale(0); opacity:0;}
#rc-sch .sch-ghosta{color:#00000030; font-size:17px; font-weight:800;}
#rc-sch .sch-robot{position:absolute; left:0; top:0; z-index:5; will-change:transform;
  transition:transform .38s ease-in-out; pointer-events:none;
  display:grid; place-items:center;}
#rc-sch .sch-robot.sch-noanim{transition:none;}
#rc-sch .sch-robot.sch-crash{animation:sch-shake .5s;}
#rc-sch .sch-carry{position:absolute; top:-6px; right:-4px; font-size:14px; display:none; z-index:6;}
#rc-sch .sch-robot.sch-haspkg .sch-carry{display:block;}
#rc-sch .sch-bot-body{fill:var(--g);}
#rc-sch .sch-bot-nose{fill:var(--gd);}
@keyframes sch-shake{0%,100%{margin-left:0}20%{margin-left:-5px}40%{margin-left:5px}
  60%{margin-left:-4px}80%{margin-left:4px}}
#rc-sch .sch-toast{position:absolute; left:50%; top:38%; transform:translate(-50%,-50%);
  background:#fff; border:2px solid var(--star); border-radius:14px; padding:10px 16px;
  font-weight:800; font-size:15px; text-align:center; box-shadow:0 6px 24px #00000022;
  z-index:20; display:none; width:max-content; max-width:88%; color:var(--coal);}

/* ---------- program ---------- */
#rc-sch .sch-panel{background:var(--card); border:1.5px solid var(--line);
  border-radius:14px; padding:10px;}
#rc-sch .sch-lane{border:2px solid transparent; border-radius:10px; padding:6px;}
#rc-sch .sch-lane.sch-active{border-color:var(--g); background:#f2faf5;}
#rc-sch .sch-lane h5{margin:0 0 6px; font-size:var(--robbo-fs-badge); color:var(--muted); font-weight:800;
  display:flex; align-items:center; gap:8px; letter-spacing:.04em;}
#rc-sch .sch-nctl{margin-left:auto; display:flex; align-items:center; gap:6px;}
#rc-sch .sch-nctl button{width:24px; height:24px; border-radius:8px;
  border:1.5px solid var(--line); background:#fff; font-weight:800; font-size:14px; padding:0;}
#rc-sch .sch-nctl b{font-size:var(--robbo-fs-sm); min-width:26px; text-align:center;}
#rc-sch .sch-slotrow{display:flex; flex-wrap:wrap; gap:5px;}
#rc-sch .sch-slot{width:38px; height:38px; border-radius:9px; border:2px dashed #cfd4cd;
  background:var(--bg); display:grid; place-items:center; font-size:19px; font-weight:800;
  padding:0; color:var(--coal);}
#rc-sch.sch-b57 .sch-slot{width:46px; height:46px; font-size:23px;}
#rc-sch .sch-slot.sch-filled{border-style:solid; border-color:var(--g); background:#fff;}
#rc-sch .sch-slot.sch-loopb{border-color:var(--loopc); color:var(--loopc); position:relative;}
#rc-sch .sch-slot.sch-loopb::after{content:attr(data-n); position:absolute; right:-4px; top:-7px;
  background:var(--loopc); color:#fff; font-size:var(--robbo-fs-badge); border-radius:8px; padding:1px 4px;}
#rc-sch .sch-slot.sch-exec{background:var(--g); border-color:var(--gd); color:#fff;
  transform:scale(1.08);}
#rc-sch .sch-slot.sch-exec.sch-loopb{background:var(--loopc); border-color:#5b3fb8;}
#rc-sch .sch-counter{font-size:var(--robbo-fs-xs); color:var(--muted); font-weight:700; margin-top:6px;
  display:flex; justify-content:space-between;}
#rc-sch .sch-codepanel{display:none; background:#232823; color:#7ee2a2; border-radius:10px;
  margin-top:8px; padding:10px 12px;
  font:12px/1.7 ui-monospace,'SF Mono',Consolas,monospace;
  white-space:pre; overflow-x:auto;}
#rc-sch .sch-codepanel.sch-show{display:block;}

/* ---------- controls ---------- */
#rc-sch .sch-controls{display:flex; gap:8px; align-items:center;}
#rc-sch .sch-palette{display:flex; gap:7px; flex:1;}
#rc-sch .sch-pal{width:46px; height:46px; border-radius:12px; border:2px solid var(--line);
  background:var(--card); font-size:22px; font-weight:800; padding:0;
  box-shadow:0 2px 0 var(--line);}
#rc-sch.sch-b57 .sch-pal{width:56px; height:56px; font-size:27px;}
#rc-sch .sch-pal:active{transform:translateY(1px); box-shadow:none;}
#rc-sch .sch-pal:disabled{opacity:.35;}
#rc-sch .sch-pal.sch-loop{color:var(--loopc);}
#rc-sch .sch-runbtn{flex:1; background:var(--g); color:#fff; border:none; border-radius:14px;
  padding:14px 10px; font-size:17px; font-weight:800; box-shadow:0 3px 0 var(--gd);}
#rc-sch .sch-runbtn:active{transform:translateY(2px); box-shadow:none;}
#rc-sch .sch-runbtn:disabled{opacity:.6;}

/* ---------- overlay / modal ---------- */
#rc-sch .sch-overlay{position:fixed; inset:0; background:#38383866; z-index:9990; display:none;
  align-items:center; justify-content:center; padding:18px;}
#rc-sch .sch-overlay.sch-show{display:flex;}
#rc-sch .sch-modal{background:#fff; border-radius:18px; padding:22px 18px; width:100%;
  max-width:360px; text-align:center; box-shadow:0 12px 40px #00000033; max-height:92vh;
  overflow-y:auto; color:var(--coal);}
#rc-sch .sch-modal h2{margin:4px 0 8px; font-size:21px; line-height:1.2; color:var(--coal);}
#rc-sch .sch-modal p{margin:6px 0; font-size:14px; line-height:1.5;}
#rc-sch .sch-mstars-big{font-size:30px; letter-spacing:4px; margin:4px 0;}
#rc-sch .sch-eltern{font-size:var(--robbo-fs-sm); color:var(--muted); border-top:1px dashed var(--line);
  margin-top:12px; padding-top:10px; text-align:left;}
#rc-sch .sch-fact{background:#f2faf5; border:1.5px solid #cde8d6; border-radius:12px;
  padding:10px; font-size:var(--robbo-fs-md); text-align:left; margin-top:10px;}
#rc-sch .sch-codebox{background:#232823; color:#7ee2a2; border-radius:10px; padding:10px 12px;
  font:11.5px/1.7 ui-monospace,Consolas,monospace; text-align:left; white-space:pre;
  overflow-x:auto; margin-top:10px;}
#rc-sch .sch-mbtn{display:block; width:100%; background:var(--g); color:#fff; border:none;
  border-radius:12px; padding:13px; font-size:15px; font-weight:800; margin-top:12px;
  box-shadow:0 3px 0 var(--gd); text-decoration:none;}
#rc-sch .sch-mbtn.sch-sec{background:#fff; color:var(--coal); border:2px solid var(--line);
  box-shadow:none;}
/* Hand-over button on the kid screen: clearly a second action, not a third
   variant of «secondary» — it addresses the parent, so it looks different. */
#rc-sch .sch-mbtn.sch-eltbtn{background:#fff; color:var(--coal); border:2px dashed var(--g);
  box-shadow:none;}
/* Anything that is neither the reward nor the offer degrades to a text link,
   so the two real buttons stay the only buttons on screen. */
#rc-sch .sch-textlinks{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  margin-top:14px;}
#rc-sch .sch-textlinks button{background:none; border:none; padding:4px;
  font:inherit; font-size:var(--robbo-fs-sm); color:var(--muted); text-decoration:underline;
  cursor:pointer;}
#rc-sch .sch-textlinks button:hover{color:var(--coal);}
#rc-sch .sch-videobox{border:2px dashed #cfd4cd; border-radius:12px; padding:14px;
  color:var(--muted); font-size:var(--robbo-fs-sm); margin-top:10px;}
#rc-sch .sch-input{display:block; width:100%; border:2px solid var(--line); border-radius:10px;
  padding:11px 12px; font-size:var(--robbo-fs-base); font-family:inherit; color:var(--coal);
  background:#fff; margin-top:10px;}
#rc-sch .sch-input:focus{outline:none; border-color:var(--g);}
#rc-sch .sch-textarea{min-height:84px; resize:vertical;}
#rc-sch .sch-consent{font-size:var(--robbo-fs-legal); color:var(--muted); margin-top:10px; line-height:1.5;}
#rc-sch .sch-consent a{color:var(--g); text-decoration:underline;}
#rc-sch .sch-hpwrap{position:absolute; left:-9999px; top:-9999px; height:1px; width:1px;
  overflow:hidden;}

/* ---------- confetti ---------- */
.sch-cf{position:fixed; top:-14px; width:9px; height:13px; z-index:9995; border-radius:2px;
  animation:sch-fall 1.7s ease-in forwards; pointer-events:none;}
@keyframes sch-fall{to{transform:translateY(105vh) rotate(720deg); opacity:.9;}}

/* ---------- Urkunde (print only) ---------- */
#sch-diplom{display:none;}
@media print{
  body *{visibility:hidden;}
  #sch-diplom, #sch-diplom *{visibility:visible;}
  #sch-diplom{display:block; position:fixed; inset:0; background:#fff; padding:34px;
    text-align:center; font-family:'ProximaNova','Noto Sans',sans-serif; color:#383838;}
  #sch-diplom .sch-dframe{border:5px solid #00af41; outline:2px solid #00af41;
    outline-offset:5px; border-radius:18px; padding:34px 30px; height:92%;}
  #sch-diplom #sch-dip-robot{margin-bottom:6px;}
  #sch-diplom .sch-dbrand{color:#00af41; letter-spacing:.14em; font-size:18px; margin:0 0 2px; font-weight:800;}
  #sch-diplom h2{font-size:44px; margin:8px 0 4px; letter-spacing:.06em;}
  #sch-diplom .sch-dname{font-size:17px; margin:22px 0 2px; color:#989898;}
  #sch-diplom .sch-dnameval{font-size:34px; font-weight:800; margin:2px 0 8px;
    color:#00af41;}
  #sch-diplom .sch-dline{border-bottom:2px dotted #999; width:60%; margin:6px auto 12px;
    height:30px;}
  #sch-diplom p{font-size:15px; line-height:1.6; margin:6px 0;}
  #sch-diplom .sch-dbig{font-size:24px; margin:12px 0; font-weight:700;}
}

@media (prefers-reduced-motion: reduce){
  #rc-sch *, .sch-cf{animation:none!important; transition:none!important;}
}