/* ==========================================================================
   ByteBuddy Robo-Lab — eingebettete Version für die BitBiber-Website
   Alles unter .robolab-embed gescopet, damit nichts auf der übrigen Seite
   überschrieben wird. Keine externen Font-CDNs: Schriften kommen aus dem
   Theme (--font-sans / --font-mono, aus assets/css/main.css).
   ========================================================================== */

.robolab-embed{
  --ink:var(--color-ink); --ink-soft:var(--color-muted); --paper:var(--color-surface); --panel:var(--color-bg); --line:var(--color-border);
  --accent:var(--color-primary); --accent-2:#136B77; --blue:#2D6CB0; --green:var(--color-success); --red:#C63C3C;
  background:var(--paper); color:var(--ink); font-family:var(--font-sans);
  border-radius:var(--radius-lg); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  padding:var(--space-6);
}
.robolab-embed *{box-sizing:border-box;}
.robolab-embed h1, .robolab-embed h2, .robolab-embed h3{font-family:var(--font-sans); text-wrap:balance; margin:0;}
.robolab-embed p{margin:0;}
.robolab-embed button{font-family:inherit; cursor:pointer;}
.robolab-embed button:focus-visible, .robolab-embed [tabindex]:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px;}

.robolab-embed .level-switch{display:flex; gap:8px; flex-wrap:wrap;}
.robolab-embed .level-btn{display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink-soft); font-weight:600; font-size:13px; transition:background .15s,color .15s,border-color .15s;}
.robolab-embed .level-btn .level-dot{width:9px; height:9px; border-radius:50%; display:inline-block; flex:none;}
.robolab-embed .dot-grund{background:#E8622C;} .robolab-embed .dot-mittel{background:#2D6CB0;} .robolab-embed .dot-ober{background:#136B77;}
.robolab-embed .level-btn.is-active{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.robolab-embed .level-btn.is-active .level-dot{outline:2px solid var(--panel);}

.robolab-embed .level-panel{display:none;}
.robolab-embed .level-panel.is-active{display:block;}

.robolab-embed .lab{border-radius:var(--radius,14px); background:var(--panel); border:1px solid var(--line); padding:20px; --font-op: var(--font-mono); margin-top:18px;}
.robolab-embed .theme-grund{ --radius:20px; --gap:14px; --pad:12px 18px; --fs-base:16px; --font-display-local:var(--font-sans); --font-op:var(--font-sans); }
.robolab-embed .theme-mittel{ --radius:12px; --gap:10px; --pad:9px 15px; --fs-base:14px; --font-display-local:var(--font-sans); --font-op:var(--font-mono); }
.robolab-embed .theme-ober{
  --radius:8px; --gap:8px; --pad:6px 11px; --fs-base:13px; --font-display-local:var(--font-sans); --font-op:var(--font-mono);
  --ink:#E7ECF1; --ink-soft:#93A6B8; --paper:#121821; --panel:#1A2430; --line:#2C3A48;
  --accent:#FF7A45; --accent-2:#3FC1CF; --blue:#5B9FE0; --green:#39C17A; --red:#FF6B6B;
  background:var(--panel); color:var(--ink);
}
.robolab-embed .lab h2{font-family:var(--font-display-local); font-size:clamp(19px,3vw,24px);}
.robolab-embed .lab-intro{margin-bottom:16px; display:flex; flex-direction:column; gap:4px;}
.robolab-embed .lab-intro p{color:var(--ink-soft); font-size:13.5px; max-width:62ch;}

.robolab-embed .lab-grid{display:grid; grid-template-columns:minmax(240px,320px) 1fr; gap:22px; align-items:start;}
@media (max-width:720px){ .robolab-embed .lab-grid{grid-template-columns:1fr;} }

.robolab-embed .palette-heading{font-family:var(--font-display-local); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:8px;}

.robolab-embed .mode-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;}
.robolab-embed .mode-btn{border-radius:var(--radius); border:1px solid var(--line); background:var(--paper); color:var(--ink);
  padding:var(--pad); font-size:calc(var(--fs-base) - 1px); font-weight:600; font-family:var(--font-op);}
.robolab-embed .theme-ober .mode-btn{background:var(--paper);}
.robolab-embed .mode-btn.is-active{background:var(--accent); border-color:var(--accent); color:#fff;}
.robolab-embed .ghost-btn{border-radius:var(--radius); border:1px dashed var(--line); background:transparent; color:var(--ink-soft);
  padding:var(--pad); font-size:calc(var(--fs-base) - 1px); font-weight:600; font-family:var(--font-op);}
.robolab-embed .ghost-btn:hover{color:var(--ink); border-color:var(--ink-soft);}

.robolab-embed .palette{margin-bottom:16px;}
.robolab-embed .cat-group{margin-bottom:12px;}
.robolab-embed .cat-title{font-family:var(--font-op); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:6px;}
.robolab-embed .cat-ops{display:flex; flex-wrap:wrap; gap:6px;}
.robolab-embed .op-btn{border-radius:calc(var(--radius) * 0.6); border:1px solid; padding:var(--pad); font-family:var(--font-op);
  font-size:calc(var(--fs-base) - 1px); font-weight:600; letter-spacing:.01em;}
.robolab-embed .op-move{ background:color-mix(in srgb, var(--green) 14%, var(--panel)); border-color:color-mix(in srgb, var(--green) 45%, var(--panel)); color:var(--green); }
.robolab-embed .op-loop{ background:color-mix(in srgb, var(--blue) 14%, var(--panel)); border-color:color-mix(in srgb, var(--blue) 45%, var(--panel)); color:var(--blue); }
.robolab-embed .op-cond{ background:color-mix(in srgb, var(--accent) 14%, var(--panel)); border-color:color-mix(in srgb, var(--accent) 45%, var(--panel)); color:var(--accent); }
.robolab-embed .op-end{ background:color-mix(in srgb, var(--ink) 12%, var(--panel)); border-color:color-mix(in srgb, var(--ink) 45%, var(--panel)); color:var(--ink); }
.robolab-embed .op-btn:hover{filter:brightness(0.97);}

.robolab-embed .program-block{margin-bottom:16px;}
.robolab-embed .program-strip{display:flex; flex-wrap:wrap; gap:6px; min-height:44px; padding:10px; border:1px dashed var(--line); border-radius:var(--radius); align-content:flex-start;}
.robolab-embed .chip{display:inline-flex; align-items:center; gap:6px; border-radius:999px; border:1px solid; padding:5px 6px 5px 12px;
  font-family:var(--font-op); font-size:calc(var(--fs-base) - 2px); font-weight:600;}
.robolab-embed .chip button{border:none; background:transparent; color:inherit; opacity:.6; font-size:12px; border-radius:50%; width:18px; height:18px; line-height:1;}
.robolab-embed .chip button:hover{opacity:1;}
.robolab-embed .chip.depth-1{margin-left:14px;} .robolab-embed .chip.depth-2{margin-left:28px;} .robolab-embed .chip.depth-3{margin-left:42px;}
.robolab-embed .empty-hint{color:var(--ink-soft); font-size:13px; padding:2px 4px;}

.robolab-embed .mission-row{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px;}
.robolab-embed .mission-row .row-label{font-family:var(--font-op); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); width:100%; margin-bottom:2px;}
.robolab-embed .mission-btn{border-radius:calc(var(--radius) * 0.6); border:1px solid var(--line); background:var(--paper); color:var(--ink);
  padding:6px 10px; font-size:calc(var(--fs-base) - 2px); font-weight:600; font-family:var(--font-op); text-align:left;}
.robolab-embed .mission-btn.task-btn{border-style:dashed;}
.robolab-embed .mission-btn.is-active{background:var(--accent-2); border-color:var(--accent-2); color:#fff;}
.robolab-embed .task-hint{display:flex; gap:8px; align-items:flex-start; background:color-mix(in srgb, var(--accent-2) 12%, var(--panel));
  border:1px solid color-mix(in srgb, var(--accent-2) 40%, var(--panel)); border-radius:var(--radius);
  padding:10px 12px; font-size:calc(var(--fs-base) - 1px); color:var(--ink); margin-bottom:14px;}
.robolab-embed .task-hint[hidden]{display:none;}

.robolab-embed .run-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px;}
.robolab-embed .run-btn{border-radius:var(--radius); border:1px solid var(--line); background:var(--paper); color:var(--ink); padding:var(--pad);
  font-weight:700; font-family:var(--font-op); font-size:calc(var(--fs-base) - 1px);}
.robolab-embed .run-btn.primary{background:var(--accent); border-color:var(--accent); color:#fff;}
.robolab-embed .run-btn:disabled, .robolab-embed .op-btn:disabled, .robolab-embed .mode-btn:disabled, .robolab-embed .ghost-btn:disabled{opacity:.45; cursor:not-allowed;}

.robolab-embed .lab-msg{min-height:20px; font-size:13.5px; font-weight:600; color:var(--ink-soft);}
.robolab-embed .lab-msg.ok{color:var(--green);} .robolab-embed .lab-msg.error{color:var(--red);}

.robolab-embed .lab-board-wrap{display:flex; flex-direction:column; gap:10px; align-items:flex-start;}
.robolab-embed .board{position:relative; border-radius:calc(var(--radius) * 0.7); overflow:hidden; border:1px solid var(--line); background:var(--paper); flex:none;}
.robolab-embed .cell{position:absolute; display:flex; align-items:center; justify-content:center; border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  font-size:16px; user-select:none;}
.robolab-embed .cell.wall{background:color-mix(in srgb, var(--ink) 16%, var(--panel));}
.robolab-embed .cell.goal{background:color-mix(in srgb, var(--green) 18%, var(--panel));}
.robolab-embed .cell.start-mark::after{content:''; position:absolute; inset:5px; border:2px dashed color-mix(in srgb, var(--accent) 60%, transparent); border-radius:6px;}
.robolab-embed .robot{position:absolute; display:flex; align-items:center; justify-content:center; transition:transform .32s ease; pointer-events:none; z-index:3;}
.robolab-embed .robot .glyph{transition:transform .1s;}
.robolab-embed .robot.blocked-flash .glyph{animation:bbShake .28s;}
@keyframes bbShake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-3px);} 75%{transform:translateX(3px);} }

.robolab-embed .legend{display:flex; flex-wrap:wrap; gap:14px; font-size:12.5px; color:var(--ink-soft);}
.robolab-embed .legend span{display:inline-flex; align-items:center; gap:6px;}
.robolab-embed .legend-logo{width:16px; height:16px; object-fit:contain; flex:none;}

/* ---------- Segmentierter Stufen-Umschalter mit Slider ---------- */
.robolab-embed .level-switch{position:relative; display:flex; gap:2px; padding:4px; border-radius:999px; background:color-mix(in srgb, var(--ink) 6%, var(--panel)); border:1px solid var(--line);}
.robolab-embed .level-slider{position:absolute; top:4px; left:4px; height:calc(100% - 8px); border-radius:999px; z-index:0;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 3px 10px color-mix(in srgb, var(--accent) 40%, transparent);
  transition:transform .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1);}
.robolab-embed .level-btn{position:relative; z-index:1; background:transparent; border:1px solid transparent;}
.robolab-embed .level-btn.is-active{background:transparent; color:#fff; border-color:transparent;}
.robolab-embed .level-btn.is-active .level-dot{outline:2px solid rgba(255,255,255,.7);}

/* ---------- Hover-Politur für alle Buttons ---------- */
.robolab-embed .mode-btn, .robolab-embed .op-btn, .robolab-embed .run-btn, .robolab-embed .ghost-btn, .robolab-embed .mission-btn, .robolab-embed .level-btn{
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.robolab-embed .mode-btn:hover:not(:disabled), .robolab-embed .op-btn:hover:not(:disabled), .robolab-embed .run-btn:hover:not(:disabled),
.robolab-embed .ghost-btn:hover:not(:disabled), .robolab-embed .mission-btn:hover:not(:disabled){
  transform:translateY(-1px); box-shadow:0 4px 12px color-mix(in srgb, var(--ink) 14%, transparent);
}
.robolab-embed .run-btn.primary{box-shadow:0 3px 10px color-mix(in srgb, var(--accent) 35%, transparent);}

/* ---------- Roboter-Maskottchen (echtes ByteBuddy-Logo) ---------- */
.robolab-embed .robot .glyph{display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:50%;}
.robolab-embed .robot .glyph img{width:78%; height:78%; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.28));}
.robolab-embed .theme-ober .robot .glyph{background:radial-gradient(circle, rgba(255,255,255,.92) 58%, transparent 80%);}

/* ---------- Konfetti (Grundschule) ---------- */
.robolab-embed .confetti-piece{position:absolute; font-size:18px; pointer-events:none; z-index:6; animation:bbConfetti .9s ease-out forwards;}
@keyframes bbConfetti{ 0%{transform:translateY(0) scale(1) rotate(0deg); opacity:1;} 100%{transform:translateY(-48px) scale(.5) rotate(40deg); opacity:0;} }

/* ---------- Oberstufe: echter Code-Editor-Look ---------- */
.robolab-embed .theme-ober{
  --tok-kw:#C586C0; --tok-fn:#DCDCAA; --tok-num:#B5CEA8; --tok-var:#9CDCFE; --tok-punc:#D4D4D4; --tok-comment:#6A9955;
}
.robolab-embed .code-editor{border-radius:8px; overflow:hidden; border:1px solid var(--line); background:#1E1E2E;}
.robolab-embed .code-tabbar{display:flex; align-items:center; gap:6px; padding:8px 10px; background:#161622; border-bottom:1px solid #2C3A48;}
.robolab-embed .code-dot{width:9px; height:9px; border-radius:50%; display:inline-block; flex:none;}
.robolab-embed .code-dot.red{background:#FF5F56;} .robolab-embed .code-dot.yellow{background:#FFBD2E;} .robolab-embed .code-dot.green{background:#27C93F;}
.robolab-embed .code-tab{margin-left:6px; font-family:var(--font-mono); font-size:11px; color:#8A96A3;}
.robolab-embed .code-editor .program-strip{display:block; border:none; padding:10px 6px; min-height:130px; background:#1E1E2E; border-radius:0;}
.robolab-embed .code-line{display:flex; align-items:center; gap:8px; padding:1px 8px; border-radius:4px; white-space:pre;
  font-family:var(--font-mono); font-size:12.5px; line-height:1.7;}
.robolab-embed .code-line:hover{background:rgba(255,255,255,.05);}
.robolab-embed .code-line .ln{color:#5A6472; width:2.2ch; text-align:right; user-select:none; flex:none;}
.robolab-embed .code-indent{white-space:pre; flex:none;}
.robolab-embed .code-text{flex:1; color:var(--tok-punc);}
.robolab-embed .tok-kw{color:var(--tok-kw); font-weight:600;}
.robolab-embed .tok-fn{color:var(--tok-fn);}
.robolab-embed .tok-num{color:var(--tok-num);}
.robolab-embed .tok-var{color:var(--tok-var);}
.robolab-embed .tok-p{color:var(--tok-punc);}
.robolab-embed .code-comment{color:var(--tok-comment); font-style:italic;}
.robolab-embed .code-del{border:none; background:transparent; color:#FF6B6B; opacity:0; font-size:11px; flex:none; transition:opacity .15s; cursor:pointer;}
.robolab-embed .code-line:hover .code-del{opacity:.85;}
.robolab-embed .cursor-line .blink-cursor{color:var(--accent); animation:bbBlink 1s steps(1) infinite;}
@keyframes bbBlink{ 50%{opacity:0;} }
.robolab-embed .theme-ober .cell.wall{background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 55%, var(--panel)) 0 4px, color-mix(in srgb, var(--ink) 40%, var(--panel)) 4px 8px);}
.robolab-embed .theme-ober .cell.goal{background:var(--panel); box-shadow:inset 0 0 0 2px var(--accent), 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);}
.robolab-embed .theme-ober .board{background:#161C26;}

@media (max-width:480px){
  .robolab-embed{padding:var(--space-4);}
  .robolab-embed .lab{padding:16px;}
}