/* MINT-Material · Python-Turtle-Seiten (Informatik): Code-Schrift, Code-Applets, Ausprobieren-Knopf */
.erklaer-text code,.stichliste code,.dbox code,.hinweis-card code,.applet-lead code,.applet-note code,.applet-readout code,
.aufgabe code,.aufgabe-text code,.teilaufgaben code,.ta-body code,.ux code{font-family:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;font-size:.92em;background:#f4ede0;border:1px solid #e6dcc9;border-radius:6px;padding:1px 6px;white-space:nowrap;color:#2b241d}
.dbox code{background:#fff}
  .aufgabe-text code,.ta-body code,.teilaufgaben code,.ux-note code{white-space:normal;overflow-wrap:anywhere}
pre.tt-listing{margin:12px 0 4px;padding:12px 16px;background:#fffdf8;border:1px solid var(--rule,#d9cdb8);border-left:3px solid var(--fach-strong);border-radius:10px;font:15px/1.65 ui-monospace,'SF Mono',Menlo,Consolas,monospace;color:#2b241d;overflow-x:auto;counter-reset:ln}
pre.tt-listing span{display:block;counter-increment:ln}
pre.tt-listing span::before{content:counter(ln);display:inline-block;width:1.8em;margin-right:12px;text-align:right;color:#b3a591}

/* Code-Applet: Code links, Zeichenfläche rechts */
.tt-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:16px;align-items:stretch}
.tt-grid.tt-wide{grid-template-columns:1fr}
.tt-code{display:flex;flex-direction:column;background:#fffdf8;border:1px solid var(--rule,#d9cdb8);border-radius:12px;overflow:hidden;min-height:0}
.tt-code-head{padding:7px 12px;font:600 12.5px 'Fredoka',Inter,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#6b5f53;background:#f1e8d8;border-bottom:1px solid var(--rule,#d9cdb8)}
.tt-lines{margin:0;padding:10px 0;list-style:none;overflow-x:auto;font:15px/1.7 ui-monospace,'SF Mono',Menlo,Consolas,monospace;color:#2b241d;flex:1}
.tt-lines li{display:flex;align-items:center;gap:10px;padding:0 12px;min-height:26px}
.tt-lines li .ln{flex:0 0 1.6em;text-align:right;color:#b3a591;user-select:none}
.tt-lines li .tx{white-space:pre}
.tt-lines li{width:max-content;min-width:100%;box-sizing:border-box}
.tt-lines li.live{background:rgba(196,122,58,.12)}
.tt-lines li.err{background:#fbeeec}
.tt-lines li.err .ln{color:#e2574c;font-weight:700}
.tt-lines li.done .tx{color:#6b5f53}
.tt-kw{color:#2c5fb5;font-weight:700}.tt-fn{color:#7c5fb5;font-weight:600}.tt-num{color:#c47a3a}
.tt-console{margin:0;padding:9px 12px;min-height:44px;border-top:1px solid var(--rule,#d9cdb8);background:#faf6ee;font:13.5px/1.5 ui-monospace,'SF Mono',Menlo,Consolas,monospace;color:#6b5f53;white-space:pre-wrap}
.tt-console.bad{color:#b3261e;background:#fbeeec}
.tt-console.ok{color:#4a7530}
.tt-stage{min-width:0}
.tt-stage svg{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--rule,#d9cdb8);border-radius:12px;touch-action:none;user-select:none;-webkit-user-select:none}
.tt-handle{cursor:grab}.tt-handle:active{cursor:grabbing}
.tt-stage svg .tt-handle:focus,.tt-stage svg .tt-handle:focus-visible{outline:none!important;box-shadow:none!important}
.tt-handle:focus-visible .tt-ring{stroke:var(--fach-strong);stroke-width:3;opacity:1}
.tt-ring{fill:none;stroke:transparent;opacity:0}

/* Wahl-Knöpfe (Varianten, Vorhersage) */
.tt-pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;align-items:center}
.tt-pick-label{font:600 14px 'Fredoka',Inter,sans-serif;color:#6b5f53;margin-right:4px}
.tt-pick button{min-height:40px;padding:6px 12px;border-radius:10px;border:1.5px solid var(--rule,#d9cdb8);background:#fff;color:#2b241d;cursor:pointer;font:500 14.5px 'Fredoka',Inter,sans-serif;transition:border-color .15s,background .15s}
.tt-pick button.code{font:14px ui-monospace,'SF Mono',Menlo,Consolas,monospace}
.tt-pick button:hover{border-color:var(--fach-strong)}
.tt-pick button[aria-pressed="true"]{border-color:var(--fach-strong);background:var(--fach,#f7dcc4);box-shadow:inset 0 0 0 1px var(--fach-strong)}
.tt-pick button.seen::after{content:' ✓';color:#4a7530;font-weight:700}
.tt-pick button:focus-visible{outline:3px solid var(--fach-strong);outline-offset:2px}

/* runder Start-Knopf ▶ ganz links in der Applet-Leiste */
.applet-lab .applet-toolbar button.tt-play{order:-1;display:inline-flex;align-items:center;justify-content:center;width:40px;min-width:40px;height:34px;min-height:34px;padding:0;border-radius:999px;border:1.5px solid #fff;background:#fff;color:var(--fach-strong)}
.applet-lab .applet-toolbar button.tt-play:hover{background:#f4d03f;border-color:#f4d03f;color:#3a230f}
.applet-lab .applet-toolbar button.tt-play svg{width:18px;height:18px;margin-left:2px;display:block}
.applet-lab .applet-toolbar button.tt-play:disabled{opacity:.5;background:#fff}
.applet-lab .applet-toolbar button.tt-play:focus-visible{outline:3px solid #f4d03f;outline-offset:2px}

/* Knopf „In der Python-Umgebung ausprobieren“ */
.tt-try{display:inline-flex;align-items:center;gap:10px;margin:18px 0 4px;padding:10px 18px 10px 12px;border:0;border-radius:999px;background:var(--fach-ink);color:#fff;font:600 15px 'Fredoka',Inter,sans-serif;cursor:pointer;box-shadow:0 4px 14px rgba(58,35,15,.18);transition:transform .15s,background .15s}
.tt-try i{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#4a7530;font-style:normal}
.tt-try i svg{width:14px;height:14px;margin-left:2px}
.tt-try:hover{background:var(--fach-strong);transform:translateY(-1px)}
.tt-try:focus-visible{outline:3px solid var(--fach-strong);outline-offset:3px}

@media(max-width:760px){.tt-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.tt-try,.tt-pick button{transition:none}.tt-try:hover{transform:none}}
@media print{.tt-try,.tt-pick,.applet-toolbar .tt-play{display:none}}

/* TurtleLab (Code-Applets) */
.tt-str{color:#4a7530}.tt-com{color:#9a8e80}
.tt-lines li.tl-ord{padding-right:6px}
.tl-mv{margin-left:auto;display:inline-flex;gap:4px;flex-shrink:0}
.applet-lab .tl-mv button{min-height:28px;width:30px;padding:0;border-radius:7px;font-size:12px;line-height:1;color:#6b3a14}
.applet-lab .tl-mv button:focus-visible{outline:3px solid var(--fach-strong);outline-offset:1px}
.tl-controls{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.tl-controls input[type=range]{width:100%;accent-color:var(--fach-strong)}
.tl-controls output{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-weight:600;color:var(--fach-ink)}
.tl-select{width:100%;min-height:40px;margin-top:6px;padding:6px 10px;border:1.5px solid var(--rule,#d9cdb8);border-radius:10px;background:#fff;font:14.5px ui-monospace,'SF Mono',Menlo,Consolas,monospace;color:#2b241d}
.tl-select:focus-visible{outline:3px solid var(--fach-strong);outline-offset:2px}
/* lange Code-Stücke dürfen umbrechen, damit nichts über den Rand ragt */
.ux code,.ux-face code,.ux-chip code,.ux-node code{white-space:normal;overflow-wrap:anywhere}
.ux-face,.ux-chip,.ux-node,.ux-opt span,.ux-line span{overflow-wrap:anywhere}
@media(max-width:700px){.aufgabe code,.erklaer-text code,.stichliste code,.dbox code,.hinweis-card code,.applet-lead code,.applet-note code,.applet-readout code{white-space:normal;overflow-wrap:anywhere}}
