/* Systemchen · strom · Experimentierkasten */
:root {
  --green-dark: #2d5016; --green: #4a7c23; --green-light: #7ab648; --sage: #6c8a5a; --sage-d: #4d6a3f;
  --cream: #faf6ee; --cream-d: #f0e8d8; --paper: #fbf6e8; --ink: #2c2c2c; --ink-l: #5a5a5a;
  --wood: #8a5a32; --wood-d: #5a3a20; --brass: #c9a03a; --red: #c0392b; --amber: #e8a33a;
  --r: 14px; --shadow: 0 10px 30px rgba(30, 18, 6, .35);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Nunito', system-ui, sans-serif; color: var(--ink); font-size: 17px;
  background: #3b2716 radial-gradient(ellipse at 30% 20%, #6e4a2c 0%, #4a301a 55%, #2e1d0f 100%);
  -webkit-tap-highlight-color: transparent; overflow: hidden;
}
body::before { /* Holzmaserung des Tisches */
  content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .22;
  background: repeating-linear-gradient(92deg, rgba(255, 220, 170, .10) 0 2px, transparent 2px 9px, rgba(0, 0, 0, .10) 9px 10px, transparent 10px 23px);
}
button { font: inherit; color: inherit; cursor: pointer; }
.ic { width: 1.15em; height: 1.15em; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }

/* ---------- Kopfleiste ---------- */
.top {
  position: relative; z-index: 5; height: 58px; display: flex; align-items: center; gap: 12px; padding: 0 14px;
  background: linear-gradient(#35591d, #2a4716); color: #fff; box-shadow: 0 3px 12px rgba(0, 0, 0, .35);
}
.brand { margin: 0; display: flex; align-items: center; gap: 10px; font: 400 1.25rem 'Lora', Georgia, serif; min-width: 0; flex: 1; }
.brand-mark { width: 34px; height: 34px; border-radius: 50%; background: #f3c74a; color: #5a3a00; display: grid; place-items: center; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); flex: none; }
.brand-mark svg { width: 20px; height: 20px; }
.brand-t { white-space: nowrap; }
.brand-sub { font: 700 .95rem 'Nunito', sans-serif; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-sub:not(:empty)::before { content: '·'; margin: 0 8px 0 2px; opacity: .6; }
body:not([data-screen="work"]) .brand-sub { display: none; }
.tools { display: flex; gap: 6px; }
.tb {
  display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 12px; border-radius: 21px; border: 0;
  background: rgba(255, 255, 255, .12); color: #fff; font-weight: 700; font-size: .92rem;
}
.tb:hover { background: rgba(255, 255, 255, .22); }
.tb.on { background: #f3c74a; color: #3a2a00; }
.tb:disabled { opacity: .4; cursor: default; }
.tb.icon-only { width: 42px; padding: 0; justify-content: center; }
.tb .off-only { display: none; }
.tb.off .on-only { display: none; }
.tb.off .off-only { display: inline; }
.tb.off { opacity: .65; }
body:not([data-screen="work"]) .work-only { display: none; }

.screen { height: calc(100vh - 58px); height: calc(100dvh - 58px); }

/* ---------- Start ---------- */
#scr-start { display: flex; flex-direction: column; }
.hero { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 60%; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 12, 4, 0) 40%, rgba(20, 12, 4, .55) 75%); pointer-events: none; }
.hero-card {
  position: absolute; z-index: 2; right: 3%; top: 50%; transform: translateY(-50%); width: min(430px, 92vw);
  background: var(--paper); border-radius: 18px; padding: 22px 22px 18px; box-shadow: var(--shadow);
  background-image: linear-gradient(transparent 31px, rgba(108, 138, 90, .14) 32px); background-size: 100% 32px;
}
.hero-card h2 { margin: 0 0 4px; font: 400 1.7rem 'Lora', serif; color: var(--green-dark); }
.hero-card > p { margin: 0 0 14px; color: var(--ink-l); }
.levels { display: grid; gap: 10px; }
.lvl {
  display: flex; align-items: center; gap: 12px; text-align: left; border: 0; border-radius: 14px; padding: 10px 14px; min-height: 64px;
  background: #fff; box-shadow: 0 2px 0 #d8ccb0, 0 4px 12px rgba(0, 0, 0, .08); transition: transform .15s;
}
.lvl:hover { transform: translateY(-2px); }
.lvl-num { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font: 800 1.3rem 'Nunito'; color: #fff; flex: none; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
.lvl-1 .lvl-num { background: #7ab648; } .lvl-2 .lvl-num { background: #e8a33a; } .lvl-3 .lvl-num { background: #c8372d; }
.lvl-txt { flex: 1; display: flex; flex-direction: column; } .lvl-txt small { color: var(--ink-l); font-size: .85rem; }
.lvl-prog { font-weight: 800; color: var(--sage-d); font-size: .9rem; }
.lvl.locked { opacity: .55; } .lvl.locked .lvl-num { background: #9b9b9b; }
/* drei Arten: Bauteile kennenlernen, Freier Kasten, Abenteuer */
.modes { display: grid; gap: 10px; }
.mode {
  display: flex; align-items: center; gap: 12px; text-align: left; border: 0; border-radius: 14px; padding: 8px 14px 8px 8px; min-height: 76px; width: 100%;
  background: #fff; color: var(--ink); box-shadow: 0 2px 0 #d8ccb0, 0 4px 12px rgba(0, 0, 0, .08); transition: transform .15s; font: inherit;
}
.mode:hover { transform: translateY(-2px); background: #fff; }
.mode-img { width: 60px; height: 60px; border-radius: 12px; overflow: hidden; flex: none; background: #f0e8d8; display: grid; place-items: center; }
.mode-img img { width: 100%; height: 100%; object-fit: cover; }
.mode-ob .mode-img img { object-fit: contain; padding: 6px; }
.mode-t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mode-t b { font-size: 1.08rem; color: var(--green-dark); }
.mode-t small { color: var(--ink-l); font-size: .86rem; font-weight: 400; }
.mode .ob-entry-n { flex: none; }
.mode-adv { box-shadow: 0 2px 0 #c99a1c, 0 4px 12px rgba(0, 0, 0, .08); outline: 3px solid #f3c74a; }
.back-link { border: 0; background: transparent; color: var(--sage-d); font-weight: 800; display: inline-flex; gap: 6px; align-items: center; padding: 4px 0; margin: 0 0 6px; min-height: 36px; }
.back-link .ic { width: 18px; height: 18px; }
.demo-note { margin: 10px 0 0; font-size: .82rem; color: var(--ink-l); text-align: center; }
.safety-line { margin: 0; padding: 9px 16px; background: #2a1a0c; color: #ffe3a8; font-size: .92rem; display: flex; gap: 8px; align-items: center; justify-content: center; }
.safety-line.small { background: transparent; color: #ffe3a8; font-size: .82rem; padding: 4px 8px 0; }

/* ---------- Heft ---------- */
#scr-heft { overflow: auto; padding: 24px 16px; }
.heft {
  max-width: 1040px; margin: 0 auto; background: var(--paper); border-radius: 6px 18px 18px 6px; padding: 26px 30px 30px 46px; box-shadow: var(--shadow); position: relative;
  background-image: linear-gradient(90deg, rgba(200, 55, 45, .35) 0 2px, transparent 2px), linear-gradient(transparent 31px, rgba(80, 120, 160, .12) 32px);
  background-size: 2px 100%, 100% 32px; background-position: 30px 0, 0 0; background-repeat: no-repeat, repeat;
}
.heft::before { content: ''; position: absolute; left: -8px; top: 40px; bottom: 40px; width: 16px; background: repeating-linear-gradient(#b9bfc5 0 10px, transparent 10px 60px); border-radius: 3px; }
.heft-kicker { margin: 0; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--sage-d); font-weight: 800; }
.heft-head h2 { margin: 2px 0 2px; font: 400 2rem 'Lora', serif; color: var(--green-dark); }
.heft-head p:last-child { margin: 0 0 18px; color: var(--ink-l); }
.heft-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.hp {
  position: relative; width: 100%; border: 0; padding: 0 0 12px; border-radius: 14px; background: #fff; text-align: left; overflow: hidden;
  box-shadow: 0 2px 0 #d8ccb0, 0 6px 16px rgba(0, 0, 0, .1); display: flex; flex-direction: column; transition: transform .15s;
}
.hp:hover { transform: translateY(-3px) rotate(-.4deg); }
.hp-img { display: block; aspect-ratio: 3 / 2; background: #333 center / cover; }
.hp-nr { padding: 9px 12px 0; font-size: .8rem; font-weight: 800; color: var(--sage-d); text-transform: uppercase; letter-spacing: .06em; display: flex; gap: 4px; align-items: center; }
.hp.star .hp-nr { color: #b8860b; }
.hp.star .hp-nr .ic { fill: #f3c74a; stroke: #b8860b; }
.hp-t { padding: 2px 12px 0; font: 400 1.12rem 'Lora', serif; }
.stamp-sm { position: absolute; top: 8px; right: 8px; width: 46px; height: 46px; border-radius: 50%; border: 3px solid #c8372d; color: #c8372d; display: grid; place-items: center; background: rgba(255, 255, 255, .85); transform: rotate(-12deg); }
.stamp-sm .ic { width: 26px; height: 26px; stroke-width: 3.2; }

/* ---------- Arbeitsbereich ---------- */
#scr-work { display: grid; grid-template-columns: 156px minmax(0, 1fr) 340px; gap: 12px; padding: 12px; }
.tray {
  min-height: 0; border-radius: 16px; padding: 8px; overflow: hidden;
  background: linear-gradient(#a5774a, #7c522c); box-shadow: inset 0 0 0 2px rgba(255, 230, 190, .25), var(--shadow);
}
.tray-in {
  height: 100%; overflow-y: auto; border-radius: 10px; padding: 8px 6px;
  background: #5b7a49 radial-gradient(circle at 30% 20%, #6f8f5c, #4f6c3f); box-shadow: inset 0 3px 10px rgba(0, 0, 0, .45);
}
.tray-sec h3 { margin: 2px 4px 6px; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: #e8f0d8; }
.tray-pocket { margin-top: 10px; padding-top: 8px; border-top: 2px dashed rgba(255, 255, 255, .25); }
.ti {
  position: relative; width: 100%; border: 0; background: rgba(255, 255, 255, .08); border-radius: 10px; margin-bottom: 6px; padding: 6px 4px 6px;
  display: flex; flex-direction: column; align-items: center; color: #fff; touch-action: none; min-height: 76px;
}
.ti:hover { background: rgba(255, 255, 255, .16); }
.ti-img { height: 50px; width: 100%; display: flex; align-items: center; justify-content: center; filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, .45)); pointer-events: none; }
.ti-img img { max-height: 50px; max-width: 110px; }
.ti-img svg { max-height: 46px; max-width: 110px; }
.ti-obj .ti-img img { max-height: 44px; max-width: 70px; }
.hue-g { filter: hue-rotate(110deg); } .hue-y { filter: hue-rotate(48deg) saturate(1.4); } .old { filter: saturate(.3) brightness(.85); }
.ti-l { font-size: .78rem; font-weight: 700; line-height: 1.15; text-align: center; margin-top: 3px; pointer-events: none; }
.ti-n { position: absolute; top: 4px; right: 6px; min-width: 22px; height: 22px; border-radius: 11px; background: #f3c74a; color: #3a2a00; font-weight: 800; font-size: .8rem; display: grid; place-items: center; }
.ti.empty { opacity: .35; }
.ti.lifting { opacity: .5; }
.tray-wire { font-size: .75rem; color: #e8f0d8; margin: 10px 4px 2px; line-height: 1.3; }

.kitwrap { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.kitbox {
  position: relative; flex: 1; min-height: 0; border-radius: 22px; padding: 14px;
  background: linear-gradient(145deg, #c99a62, #9a6a3a 60%, #7c522c); box-shadow: inset 0 2px 0 rgba(255, 240, 210, .5), inset 0 -4px 0 rgba(0, 0, 0, .25), var(--shadow);
}
.kitbox::before { /* Maserung der Kastenwand */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(178deg, rgba(255, 230, 190, .2) 0 2px, transparent 2px 7px, rgba(60, 30, 10, .18) 7px 8px, transparent 8px 19px);
}
#kit { position: relative; display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 10px; }
.kit-notes { position: absolute; left: 50%; top: 46px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; width: min(560px, 86%); pointer-events: none; z-index: 3; }
.note { pointer-events: auto; display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 12px; font-weight: 700; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); animation: notein .3s ease; }
.note-warn { background: #fff1e6; border: 3px solid #e25b2a; color: #7a2a08; }
.note-info { background: #eef6ff; border: 3px solid #4a86c8; color: #173f6a; }
.note .ic { width: 26px; height: 26px; }
@keyframes notein { from { transform: translateY(-8px); opacity: 0; } }
.flow-note { position: absolute; left: 50%; transform: translateX(-50%); top: 2px; width: min(640px, 90%); margin: 0; background: rgba(255, 248, 225, .95); border-radius: 10px; padding: 6px 10px; font-size: .82rem; display: flex; gap: 6px; z-index: 3; pointer-events: none; }

/* SVG-Teile */
.k-spring .k-coil { transform-box: fill-box; transform-origin: 50% 100%; }
.k-coil.bend { animation: bend .42s ease-out; }
@keyframes bend { 0% { transform: skewX(0) scaleY(1); } 25% { transform: skewX(-24deg) scaleY(.82); } 55% { transform: skewX(10deg) scaleY(1.05); } 80% { transform: skewX(-4deg); } 100% { transform: none; } }
.k-spring.k-target circle:nth-of-type(1) { stroke: #f3c74a; stroke-width: 4; }
.k-part { cursor: grab; }
.k-ghost { opacity: .75; pointer-events: none; }
.k-ghost.k-bad { opacity: .45; filter: saturate(.3) sepia(.4) hue-rotate(-30deg); }
.k-ghost.k-out { opacity: .3; }
.k-clip { transition: transform .18s ease-out; }
.k-shaking { animation: shake .06s linear infinite; }
@keyframes shake { 0% { translate: 0 0; } 50% { translate: .8px -.6px; } 100% { translate: -.6px .6px; } }
.k-buzzing image { animation: shake .05s linear infinite; }
.k-croc-jaw { transition: transform .2s; transform-origin: 0 0; }
.k-slot-hot { fill: rgba(243, 199, 74, .45); stroke: #e2b21c; stroke-dasharray: none; stroke-width: 3; }
.k-engrave { font: 800 15px 'Nunito', sans-serif; fill: #3f5a32; letter-spacing: .04em; }
.k-engrave.k-small { font-size: 12px; font-weight: 700; fill: #57734a; }
.k-engrave.k-pol { font-size: 18px; fill: #6b3a2a; }
.k-pol-part { font: 900 15px 'Nunito', sans-serif; fill: #6b2a1a; paint-order: stroke; stroke: #fff6e0; stroke-width: 3px; }
.k-pol-part.k-small { font-size: 12px; }
.k-volt { font: 900 13px 'Nunito', sans-serif; fill: #fff; paint-order: stroke; stroke: rgba(80, 20, 10, .6); stroke-width: 2.5px; pointer-events: none; }
.k-pole { font: 900 20px 'Nunito', sans-serif; fill: #fff; pointer-events: none; }
.k-inst.k-off { opacity: .6; filter: grayscale(.45); }
.k-hit-inst { cursor: pointer; }
.k-dots { stroke: #ffe066; stroke-width: 5.5; stroke-linecap: round; stroke-dasharray: 0 17; filter: drop-shadow(0 0 3px #ffb300); }
.k-dots-part { stroke-width: 6.5; }
.k-plan { transition: opacity .3s; }
.k-plan.k-slide > g { animation: slidein .55s cubic-bezier(.2, .8, .3, 1); }
@keyframes slidein { from { transform: translateY(600px); } }
.k-plan-title { font: 400 22px 'Lora', serif; fill: #3f5a32; }
.k-plan-num { font: 900 13px 'Nunito', sans-serif; fill: #333; }
.k-sym-t { font: 900 20px 'Nunito', sans-serif; fill: #2b2b2b; }
.k-plan-panel { animation: blinkp 1.6s ease-in-out infinite; }
@keyframes blinkp { 50% { opacity: .35; } }
.k-sel-btn { cursor: pointer; }

/* ---------- Heftseite ---------- */
.page {
  min-height: 0; overflow-y: auto; border-radius: 6px 16px 16px 6px; padding: 14px 16px 18px 22px; position: relative;
  background: var(--paper); box-shadow: var(--shadow);
  background-image: linear-gradient(90deg, rgba(200, 55, 45, .3) 0 2px, transparent 2px); background-size: 2px 100%; background-position: 10px 0; background-repeat: no-repeat;
}
.scene { position: relative; overflow: hidden; border-radius: 12px; background: #222; aspect-ratio: 3 / 2; }
.scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene .scene-fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.pg-scene { box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.pg-goal { font: 400 1.12rem/1.4 'Lora', serif; margin: 12px 0 10px; }
.pg-card { background: #fff; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; box-shadow: 0 2px 0 #e4d9bf; }
.pg-card h3 { margin: 0 0 6px; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sage-d); display: flex; gap: 6px; align-items: center; }
.pg-card p { margin: 0 0 8px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { flex: 1 1 120px; min-height: 48px; border-radius: 12px; border: 2px solid #d8ccb0; background: #fffdf6; font-weight: 700; padding: 6px 10px; }
.opt:hover:not(:disabled) { border-color: var(--green); }
.opt.chosen { background: #f3c74a; border-color: #c99a1c; color: #3a2a00; }
.opt:disabled:not(.chosen) { opacity: .5; }
/* Randspalte: eigene Vermutung, Häkchen-Reihe, nur der jetzige Schritt als Text */
.pg-guess { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: #fff4d6; font-size: .95rem; }
.pg-guess .ic { width: 20px; height: 20px; flex: none; color: #b8860b; }
.pg-ticks { list-style: none; margin: 0 0 8px; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.pg-ticks li { display: block; }
.chk { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #c9bfa6; display: grid; place-items: center; flex: none; color: transparent; background: #fff; }
.chk b { grid-area: 1 / 1; font-size: .85rem; color: #9a8f74; }
.chk .ic { grid-area: 1 / 1; width: 18px; height: 18px; stroke-width: 3.5; }
.pg-steps li.cur .chk { border-color: #c99a1c; background: #f3c74a; box-shadow: 0 0 0 4px rgba(243, 199, 74, .3); }
.pg-steps li.cur .chk b { color: #3a2a00; }
.pg-steps li.ok .chk { background: var(--green-light); border-color: var(--green); color: #fff; }
.pg-steps li.ok .chk b { visibility: hidden; }
.pg-steps li.pop .chk { animation: pop .45s; }
@keyframes pop { 40% { transform: scale(1.4); } }
.pg-step { margin: 0 !important; line-height: 1.4; }
.pg-step b { color: var(--sage-d); margin-right: 2px; }
.pg-book summary { cursor: pointer; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sage-d); font-weight: 800; display: flex; gap: 6px; align-items: center; min-height: 36px; list-style: none; }
.pg-book summary::-webkit-details-marker { display: none; }
.pg-book summary::after { content: '▸'; margin-left: auto; font-size: 1rem; }
.pg-book[open] summary::after { content: '▾'; }
.pg-book p { margin: 4px 0 8px; font-size: .92rem; }
/* gerade vorgelesen: der Lautsprecher daneben leuchtet (statt Untertitel, wenn der Text schon dasteht) */
.say.playing { color: #b8860b; background: rgba(243, 199, 74, .28); }
.pg-hint { margin-top: 4px; }
.btn-hint { border: 0; border-radius: 22px; min-height: 44px; padding: 0 16px; background: #f3c74a; color: #3a2a00; font-weight: 800; display: inline-flex; gap: 6px; align-items: center; box-shadow: 0 3px 0 #c99a1c; }
.btn-hint:disabled { opacity: .45; }
.pg-hint .hint { animation: fadein .25s; }
.hint { background: #fff8e0; border-left: 4px solid #f3c74a; padding: 8px 10px; border-radius: 0 10px 10px 0; margin: 8px 0 0; }
.say { border: 0; background: transparent; color: var(--sage-d); padding: 2px 4px; vertical-align: middle; border-radius: 8px; min-width: 32px; min-height: 30px; }
.say:hover { background: rgba(108, 138, 90, .14); }
.say .ic { width: 20px; height: 20px; stroke: none; }
.say .ic path[fill="none"] { stroke: currentColor; }
.book { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.book button { width: 100%; text-align: left; border: 0; background: #faf3e0; border-radius: 8px; padding: 8px 10px; min-height: 40px; }
.book button.on { background: #f3c74a; }
.book b { display: inline-block; min-width: 24px; color: var(--sage-d); }
.objres { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.objres li { display: grid; grid-template-columns: 34px 1fr auto; gap: 2px 8px; align-items: center; padding: 3px 6px; border-radius: 8px; }
.objres li.yes { background: #fff4c8; } .objres li.no { background: #eceae4; }
.objres img { width: 30px; height: 30px; object-fit: contain; grid-row: span 2; }
.objres b { font-size: .82rem; }
.objres em { grid-column: 2 / 4; font-size: .78rem; color: var(--ink-l); }
.pg-morse { background: #1f2a1a; color: #e8f0d8; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.pg-morse h3 { margin: 0 0 8px; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.morse-goal, .morse-you { display: flex; gap: 6px; align-items: center; min-height: 18px; margin-bottom: 6px; flex-wrap: wrap; }
.morse-goal i, .morse-you i { display: block; height: 12px; border-radius: 6px; background: #f3c74a; }
.morse-goal i { background: rgba(243, 199, 74, .4); }
i.dot { width: 12px; } i.dash { width: 36px; }

/* ---------- Dialoge ---------- */
.dlg { position: fixed; inset: 0; z-index: 20; background: rgba(20, 12, 4, .6); display: grid; place-items: center; padding: 16px; animation: fadein .25s; }
@keyframes fadein { from { opacity: 0; } }
.dlg-in { background: var(--paper); border-radius: 18px; box-shadow: var(--shadow); max-height: 94vh; overflow: auto; position: relative; }
/* Aufgabe im Overlay: unter der Kopfleiste, damit „Zurück“ erreichbar bleibt */
.dlg-task { top: 58px; z-index: 22; }
.dlg-in.task { width: min(860px, 96vw); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; max-height: calc(100vh - 90px); }
.tk-left { display: flex; flex-direction: column; min-height: 0; background: #f3ead6; }
.tk-scene { aspect-ratio: auto; flex: 1 1 auto; min-height: 180px; border-radius: 0; }
/* Was liegt bereit: Bauteile groß, damit man die Frage (z. B. wie viele Kabel) beantworten kann */
.tk-parts { padding: 10px 14px 12px; }
.tk-board { flex: 1 1 auto; display: flex; flex-direction: column; padding: 10px 12px; min-height: 240px; background: #efe5cf; }
.tk-board h4 { margin: 0 0 6px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sage-d); }
.tk-snap { display: block; width: 100%; flex: 1 1 auto; min-height: 200px; max-height: 420px; border-radius: 10px; background: #f6efdf; pointer-events: none; }
.tk-parts h4 { margin: 0 0 6px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sage-d); }
.tk-parts-row { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.tk-part { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 92px; }
.tk-part-img { width: 92px; height: 64px; display: grid; place-items: center; background: #fffaf0; border-radius: 10px; box-shadow: inset 0 0 0 1px #e2d6bc; }
.tk-part-img img, .tk-part-img svg { max-width: 84px; max-height: 56px; }
.tk-part-l { font-size: .78rem; font-weight: 700; text-align: center; line-height: 1.15; }
.tk-body { padding: 20px 22px 18px; overflow-y: auto; }
.tk-kicker { margin: 0 0 6px; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sage-d); display: flex; gap: 4px; align-items: center; }
.tk-kicker .ic { width: 16px; height: 16px; fill: #f3c74a; stroke: #b8860b; }
.tk-goal { font: 400 1.3rem/1.4 'Lora', serif; margin: 0 0 12px; }
.tk-pro { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; background: #fff8e0; border-radius: 10px; padding: 8px 10px; margin: 0 0 12px; }
.tk-pro .ic { width: 18px; height: 18px; flex: none; fill: #f3c74a; stroke: #b8860b; margin-top: 2px; }
.tk-q { border: 3px solid #f3c74a; border-radius: 14px; padding: 12px 12px 10px; background: #fff; }
.tk-q h3 { margin: 0 0 6px; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sage-d); display: flex; gap: 6px; align-items: center; }
.tk-q p { margin: 0 0 10px; font-size: 1.05rem; }
.tk-q .opts { flex-direction: column; }
.tk-q .opt { flex: none; min-height: 52px; font-size: 1.05rem; }
.tk-now { margin: 10px 0 0 !important; font-weight: 800; color: var(--green); animation: fadein .25s; }
.dlg-in.task-new { display: block; width: min(480px, 94vw); padding: 22px 24px 20px; text-align: center; }
.tk-new-img { width: 120px; height: 100px; margin: 4px auto 8px; display: grid; place-items: center; }
.tk-new-img img, .tk-new-img svg { max-width: 120px; max-height: 100px; }
.tk-new h2 { margin: 0 0 6px; font: 400 1.5rem 'Lora', serif; color: var(--green-dark); }
.tk-new.risk h2 { color: #8a2a12; }
.tk-new p { margin: 0 0 6px; color: var(--ink-l); }
.tk-more { font-size: .88rem; }
.tk-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.task-new .tk-kicker { justify-content: center; }
@media (max-width: 760px) {
  .dlg-in.task { grid-template-columns: 1fr; }
  .tk-scene { aspect-ratio: 3 / 2; min-height: 0; flex: none; }
}
.guess { padding: 20px; width: min(420px, 94vw); text-align: center; }
.guess img { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(3px 4px 3px rgba(0, 0, 0, .35)); }
.guess p { font: 400 1.25rem 'Lora', serif; margin: 10px 0 14px; }
.success { width: min(1060px, 96vw); display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; overflow: hidden; }
.sx-scene { aspect-ratio: 3 / 2; align-self: start; border-radius: 0 0 18px 0; }
.success { align-items: stretch; }
.sx-left { background: #3b2716 radial-gradient(ellipse at 30% 0%, #6e4a2c, #3b2716); padding-bottom: 14px; }
.sx-left .sx-real { margin: 14px 14px 0; }
.sx-text { padding: 20px 22px; overflow-y: auto; max-height: 92vh; }
.sx-text h2 { margin: 0 0 6px; font: 400 2rem 'Lora', serif; color: var(--green-dark); }
.sx-succ { font: 400 1.15rem 'Lora', serif; margin: 0 0 8px; }
.sx-pred { padding: 8px 10px; border-radius: 10px; margin: 0 0 10px; }
.sx-pred.right { background: #e7f4d8; } .sx-pred.other { background: #fff4d6; }
.sx-card { background: #fff; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; box-shadow: 0 2px 0 #e4d9bf; }
.sx-card h3 { margin: 0 0 6px; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sage-d); display: flex; gap: 6px; align-items: center; }
.sx-card p { margin: 0 0 6px; }
.sx-real { background: #fff8e0; }
.cur { font-size: .8rem; color: var(--ink-l); }
.safety { font-size: .85rem; color: #7a2a08; font-weight: 700; display: flex; gap: 6px; align-items: flex-start; }
.sx-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }
.btn-main, .btn-sec { min-height: 50px; border-radius: 25px; padding: 0 22px; font-weight: 800; border: 0; display: inline-flex; gap: 8px; align-items: center; }
.btn-main { background: var(--green); color: #fff; box-shadow: 0 3px 0 var(--green-dark); }
.btn-sec { background: #efe6d2; color: var(--ink); }
.stamp {
  position: absolute; top: 18px; left: 18px; width: 128px; height: 128px; border-radius: 50%; border: 6px double #c8372d; color: #c8372d;
  display: flex; flex-direction: column; align-items: center; justify-content: center; font: 900 1rem 'Nunito'; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255, 250, 235, .82); transform: scale(3) rotate(-30deg); opacity: 0; pointer-events: none;
}
.stamp .ic { width: 52px; height: 52px; stroke-width: 3.5; }
.stamp.in { animation: stamp .35s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes stamp { to { transform: scale(1) rotate(-14deg); opacity: .92; } }

.toast { position: fixed; z-index: 30; left: 50%; bottom: 26px; transform: translate(-50%, 20px); background: #2a1a0c; color: #ffe3a8; padding: 12px 18px; border-radius: 14px; font-weight: 700; opacity: 0; transition: .3s; max-width: 90vw; box-shadow: var(--shadow); }
.toast.in { opacity: 1; transform: translate(-50%, 0); }

/* ---------- kleinere Bildschirme ---------- */
@media (max-width: 1180px) { #scr-work { grid-template-columns: 132px minmax(0, 1fr) 290px; } .tb span:not(.sr) { display: none; } .tb { width: 42px; padding: 0; justify-content: center; } }
@media (max-width: 860px) {
  body { overflow: auto; }
  .screen { height: auto; min-height: calc(100vh - 58px); }
  #scr-work { grid-template-columns: 1fr; }
  .tray { order: 2; } .tray-in { display: flex; overflow-x: auto; gap: 6px; } .tray-sec { display: flex; gap: 6px; } .tray-sec h3, .tray-wire { display: none; } .ti { width: 92px; flex: none; }
  .kitbox { aspect-ratio: 960 / 860; flex: none; }
  .page { order: 3; }
  .success { grid-template-columns: 1fr; } .sx-scene { aspect-ratio: 3 / 2; min-height: 0; }
  .hero { min-height: 680px; } .hero-card { position: relative; right: auto; top: auto; transform: none; margin: 280px auto 20px; }
  .brand-t { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.k-polt { font: 900 13px 'Nunito', sans-serif; fill: #fff; }
.brand-sub .ic { margin-right: 5px; fill: #f3c74a; stroke: #f3c74a; }
@media (max-width: 1100px) and (min-width: 861px) {
  #scr-work { grid-template-columns: 100px minmax(0, 1fr) 264px; gap: 8px; padding: 8px; }
  .kitbox { padding: 8px; }
  .ti-l { font-size: .7rem; } .tray-wire, .tray-sec h3 { font-size: .66rem; }
  .page { padding: 10px 10px 14px 16px; }
  .pg-goal { font-size: 1rem; }
}

/* ---------- Hinweise (Tooltips, ../../js/tooltip.js) ---------- */
:root { --tip-bg: #2d5016; --tip-fg: #fff; --tip-border: #1f3a0e; --tip-font: 'Nunito', system-ui, sans-serif; --tip-size: 15px; --tip-radius: 10px; }

/* Vermutung: Antwort + eigener Lautsprecher */
.opt.opt-pic { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.opt.opt-pic .ic { width: 26px; height: 26px; flex: none; }

/* Spielstand: Level zurücksetzen, Weiterbauen-Dialog */
.lvl-wrap { position: relative; display: grid; }
.lvl-reset { position: absolute; top: -8px; right: -8px; width: 38px; height: 38px; border-radius: 50%; border: 2px solid #fff; background: #efe6d2; color: var(--ink); display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.2); cursor: pointer; }
.lvl-reset .ic { width: 20px; height: 20px; }
.lvl-reset:hover { background: #f3c74a; }
.heft-reset { min-height: 42px; margin: 0 0 14px; }
.heft-reset .ic { width: 18px; height: 18px; }
.dlg-save { z-index: 40; }
.dlg-in.save { width: min(460px, 100%); padding: 22px 22px 18px; text-align: center; }
.dlg-in.save h2 { margin: 6px 0 4px; font: 400 1.7rem 'Lora', serif; color: var(--green-dark); }
.dlg-in.save p { margin: 4px 0; }
.sv-img { height: 140px; border-radius: 12px; background: center / cover no-repeat; margin-bottom: 6px; }
.sv-what b { color: var(--green-dark); }
.sv-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }
.sv-btns .ic { width: 20px; height: 20px; }
/* fest eingebaute Teile (Prüfstrecke): kein Ziehen, Schloss beim Darüberfahren */
.k-part.k-fixed { cursor: pointer; }
.k-part .k-lock { opacity: 0; transition: opacity .15s; }
.k-part.k-fixed:hover .k-lock, .k-part.k-fixed:focus .k-lock { opacity: 1; }
.note-restore { align-items: center; flex-wrap: wrap; }
.note-restore .btn-sec { min-height: 40px; padding: 0 14px; margin-left: auto; font-size: .9rem; }
/* Drehen: Tipp unter "So geht es", Hinweis-Puls am Drehpfeil */
.pg-rot { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: #f3f7ec; color: var(--sage-d); font-size: .92rem; }
.pg-rot .ic { width: 20px; height: 20px; margin-top: 1px; }
.k-sel-btn { cursor: pointer; }
.k-sel-hint .k-sel-rot circle { animation: kRotHint 1s ease-in-out 4; transform-box: fill-box; transform-origin: center; }
@keyframes kRotHint { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .k-sel-hint .k-sel-rot circle { animation: none; } }

/* Untertitel zu jedem gesprochenen Satz (audio.js): unten mittig, über allem, nimmt keine Tipps weg */
.sc-sub { position: fixed; left: 50%; bottom: calc(var(--sc-sub-bottom, 18px) + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 8px); z-index: 9000;
  width: max-content; max-width: min(46rem, calc(100vw - 32px)); pointer-events: none; opacity: 0; transition: opacity .25s, transform .25s; }
.sc-sub.on { opacity: 1; transform: translate(-50%, 0); }
.sc-sub-in { display: block; padding: 10px 18px; border-radius: 14px; background: rgba(28, 32, 26, .86); color: #fff;
  font: 700 1.12rem/1.4 'Nunito', system-ui, sans-serif; text-align: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); text-wrap: balance; }
@media (max-width: 600px) { .sc-sub-in { font-size: 1rem; padding: 8px 14px; } }
@media (prefers-reduced-motion: reduce) { .sc-sub { transition: none; } }

/* Strahlen um leuchtende Lämpchen (kit.js rays) */
.k-rays { animation: k-rays 14s linear infinite; transform-box: view-box; transform-origin: 0 0; }
@keyframes k-rays { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .k-rays { animation: none; } }

/* Voltmeter-Skala und Zettel „alt“ auf der alten Flachbatterie */
.k-scale { font: 800 10px 'Nunito', sans-serif; fill: #2a2a2a; pointer-events: none; }
.k-scale-u { font-size: 17px; }
.k-oldtag { font: 800 13px 'Nunito', sans-serif; fill: #6b5a1c; pointer-events: none; }

/* Magnet: Feldlinien (Modell) und Pole am angezogenen Nagel */
.k-field { opacity: .55; transition: opacity .2s; }
.k-field.drag { opacity: 1; }
.k-fline { fill: none; stroke: #4f6fb8; stroke-width: 1.6; stroke-dasharray: 5 6; stroke-linecap: round; opacity: .7; animation: kFlow 1.6s linear infinite; }
@keyframes kFlow { to { stroke-dashoffset: -22; } }
@media (prefers-reduced-motion: reduce) { .k-fline { animation: none; } }
.k-ipole { font: 900 11px 'Nunito', sans-serif; fill: #fff; paint-order: stroke; stroke: #2d3a66; stroke-width: 3px; pointer-events: none; }