/* ===== Maschinenbauer - Styles (PWA-Paket, GUI 3.13 Typ 2) =====
   Die JUPI-Basis (Farben, Container, Leiste, Buttons, Footer, Dark Mode)
   kommt aus den Paket-Kopien colors.css und jupi.css. Hier stehen nur die
   Spiel-eigenen Regeln.

   WELT: "Zahnrad-Werkstatt" (Stil-Pass 06.11.2026, AGENTS.md 3.13.6/3.13.7).
   Im Spiel baut das Kind auf einem Konstruktionsblatt eine Maschine aus
   Zahnraedern, Foerderbaendern und Schaltrad zusammen und startet den Motor.
   Der Ort ist deshalb die Werkstatt: verzinkte Blechwand mit Werkzeugtafel
   (links), Antriebsgruppe mit Riemen und Schwungrad (Mitte), Zahnradwand mit
   Steuerkasten (rechts), Werkbank mit Schraubstock und Schubladen (unten).
   Die Leiste ist die Maschinenkonsole, die Buehne das eingespannte
   Konstruktionsblatt, Karten sind Papier (bleiben in beiden Themes hell),
   HUD und Palette sind Stahlblech mit Messingkante.
   Dark Mode = dieselbe Werkstatt bei Nacht (Kulisse per CSS gedimmt).

   Aufbau: 1 Welt/Seite - 2 Leiste - 3 Auftrag - 4 HUD - 5 Status -
   6 Buehne - 7 Start - 8 Ergebnis - 9 Palette - 10 Level - 11 Dialoge -
   12 Fuss - 13 Dark - 14 Responsive - 15 Fokus/40 px. */

/* ---------- 1. Farben der Welt ---------- */
:root {
  --mb-stahl-1: #3e4c58;        /* Blech hell */
  --mb-stahl-2: #2b3640;        /* Blech */
  --mb-stahl-3: #1b232b;        /* Blech tief */
  --mb-kante: #4c5b68;
  --mb-messing: #c8a24a;
  --mb-messing-hell: #efd79a;
  --mb-messing-tief: #8a6a24;
  --mb-bernstein: #ffb300;
  --mb-papier: #f6eeda;         /* Auftrag/Protokoll - bleibt hell */
  --mb-papier-2: #ece1c8;
  --mb-papier-kante: #c9b992;
  --mb-tinte: #1e2830;
  --mb-tinte-2: #4d5b66;
  --mb-gruen: #2f7d3f;
  --mb-gruen-hell: #45a457;
  --mb-rot: #b3261e;
  --mb-schatten: 0 12px 26px rgba(0, 0, 0, .35);
}

/* ---------- 2. Seite und Leisten-Lage (3.13.2a) ---------- */
body.jupi.mb_body {
  /* EINE gestreckte Szene (3.13.7 Weg A), kein Kachelmuster */
  background-color: #5a6672;
  background-image: url("kulisse.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  color: var(--mb-tinte);
  /* Die Plattform setzt overflow-x:hidden am Body - das macht ihn zum
     Scroll-Container, und die sticky Leiste scrollt dann mit weg. */
  overflow-x: visible;
}

/* Container als Flex-Spalte: Kopf buendig oben, Fuss am Dokumentende */
body.jupi.mb_body .jupi_container {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  width: 100%;
  background: transparent;
}
body.jupi.mb_body .jupi_container > .jupi_main,
html[data-theme="dark"] body.jupi.mb_body .jupi_container > .jupi_main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 1rem .9rem 1.2rem;
  background: transparent;
  color: var(--mb-tinte);
}

/* ---------- 3. Kopfzeile: Maschinenkonsole (3.13.2) ----------
   Drei Zonen: links zurueck, mittig Messing-Typenschild mit Logo + Name,
   rechts Sprache + Dark-Mode-Pille. Kein Schul-/jupi-Logo, keine zweite
   Titelzeile. */
.mb_leiste {
  position: sticky;
  top: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
  padding: .5rem .9rem .55rem;
  background-color: #2a353f;
  background-image:
    radial-gradient(circle at 50% 50%, #94a4b1 0 2px, #0d1419 2.6px 3.6px, transparent 4px),
    linear-gradient(180deg, #47555f 0%, #2e3a45 46%, #1c252d 100%);
  background-size: 72px 18px, 100% 100%;
  background-position: 0 0, 0 0;
  background-repeat: repeat-x, no-repeat;
  border-bottom: 3px solid var(--mb-messing);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.mb_brand {
  display: flex; align-items: center; justify-self: center; gap: .55rem; min-width: 0;
  padding: .2rem .85rem .22rem .3rem;
  border-radius: .5rem;
  background: linear-gradient(180deg, #f7e7ba 0%, #d9b665 46%, #b08a33 100%);
  border: 1px solid #7a5a18;
  box-shadow: inset 0 1px 0 #fff8db, inset 0 -2px 0 #7a5a18, 0 3px 10px rgba(0, 0, 0, .45);
}
.mb_brand img {
  display: block; flex: none; width: 38px; height: 38px; object-fit: contain; aspect-ratio: 1;
  border-radius: 8px; box-shadow: 0 0 0 2px #2a2010, 0 2px 6px rgba(0, 0, 0, .45);
}
.mb_brand h1 {
  margin: 0; color: #241a06; font-size: 1.22rem; font-weight: 900; line-height: 1.2;
  letter-spacing: .01em; white-space: nowrap; text-shadow: 0 1px 0 rgba(255, 248, 219, .6);
}
.mb_leiste .jupi_nav_back {
  position: static; justify-self: start; display: inline-flex; align-items: center;
  min-height: 40px; padding: .4rem .85rem; line-height: 1.2; white-space: nowrap;
  border-radius: .45rem; font-size: .87rem; font-weight: 800;
  color: #17212a; text-decoration: none;
  background: linear-gradient(180deg, #cfd8df 0%, #94a1ac 58%, #78848f 100%);
  border: 1px solid #5c6873;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 2px 6px rgba(0, 0, 0, .4);
}
.mb_leiste .jupi_nav_back:hover {
  background: linear-gradient(180deg, #ffe9b4 0%, #d9b25c 55%, #b58c35 100%);
  color: #241a06; border-color: #7a5a18; transform: none;
}
.mb_leiste .jupi_werkzeuge { position: static; justify-self: end; display: flex; align-items: center; gap: .4rem; }
.mb_leiste #jupi_sprachen_wahl { display: inline-flex; align-items: center; gap: .3rem; }
.mb_leiste .jupi_sprachen_select {
  background: rgba(10, 17, 23, .55);
  color: #eef4f8;
  border: 1px solid var(--mb-messing-tief);
  border-radius: .4rem;
}
.mb_leiste .jupi_sprachen_select option { color: #1b2530; background: #f2f6f8; }
.mb_leiste .jupi_theme_switch {
  width: 74px; height: 40px; min-width: 74px; padding: 0;
  background: #141c23;
  border: 1.5px solid var(--mb-messing-tief);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6);
}
.mb_leiste .jts_thumb {
  top: 3px; bottom: auto; left: 4px; width: 32px; height: 32px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffe9b4 0%, #c8a24a 55%, #8a6a24 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .mb_leiste .jts_thumb { left: calc(100% - 36px); background: radial-gradient(circle at 34% 30%, #e8eef3 0%, #aab7c2 55%, #6d7a86 100%); }
.mb_leiste .jts_sun { left: 9px; } .mb_leiste .jts_moon { right: 9px; }

/* ---------- 4. Auftrag: angeklemmter Papierzettel ---------- */
.mb-task {
  position: relative;
  display: flex; align-items: center; gap: .85rem;
  margin: 0 0 .85rem; padding: .75rem 1.1rem .75rem .85rem;
  background: var(--mb-papier);
  color: var(--mb-tinte);
  border: 1.5px solid var(--mb-papier-kante);
  border-radius: .35rem;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .16), 0 10px 22px rgba(0, 0, 0, .22);
}
.mb-task::before {                     /* Messingklammer an der Oberkante */
  content: ""; position: absolute; top: -9px; left: 2.2rem;
  width: 52px; height: 13px; border-radius: 4px;
  background: linear-gradient(180deg, #e8cd8a, #a9832f);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.mb-task-badge {
  flex: none; display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffe9b4 0%, #d3ac4d 52%, #8a6a24 100%);
  color: #241a06; font-size: 1.3rem; font-weight: 900;
  box-shadow: inset 0 0 0 2px #6f531a, inset 0 0 0 5px rgba(255, 255, 255, .22), 0 2px 6px rgba(0, 0, 0, .3);
}
.mb-task-text { min-width: 0; }
.mb-task h2 { margin: 0 0 .15rem; font-size: 1.12rem; font-weight: 900; color: #17222b; }
.mb-task p { margin: 0; font-size: .94rem; line-height: 1.45; color: var(--mb-tinte-2); }

/* ---------- 5. HUD: Bedienpult (Typ 2) ---------- */
.mb-hud {
  display: flex; flex-wrap: wrap; gap: .55rem .6rem; align-items: stretch;
  margin-bottom: .85rem; padding: .6rem;
  background-color: #2a353f;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .16) 42%, rgba(0, 0, 0, .34)),
    linear-gradient(180deg, #3b4955 0%, #232d36 100%);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  border: 1px solid var(--mb-kante);
  border-top: 3px solid var(--mb-messing-tief);
  border-radius: .55rem;
  box-shadow: var(--mb-schatten), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.mb-hud-box {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-width: 5.2rem; padding: .3rem .75rem .35rem 2.3rem;
  background: linear-gradient(180deg, #131c23, #0a1016);
  border: 1px solid #5a6874;
  border-radius: .4rem;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 255, 255, .1);
}
.mb-hud-box label {
  font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #b4c3d6;
}
.mb-hud-box span {
  font-size: 1.22rem; font-weight: 900; line-height: 1.25;
  color: #ffc94d; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(255, 190, 40, .4);
}
#mb-rpm { font-size: .94rem; white-space: normal; min-width: 11rem; color: #8ef0b0; text-shadow: 0 0 12px rgba(80, 220, 130, .35); }
.mb-hud-box:nth-child(4) { flex: 1 1 14rem; }

/* HUD-Symbole (als Maske, damit sie die Textfarbe uebernehmen) */
.mb-hud-box::before {
  content: ""; position: absolute; left: .7rem; top: 50%; width: 1.1rem; height: 1.1rem;
  transform: translateY(-50%);
  background: #9fb0c0;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.mb-hud-box:nth-child(1) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8a4 4 0 100 8 4 4 0 000-8zm9 5v-2l-2.2-.5a7 7 0 00-.9-2.1l1.2-1.9-1.4-1.4-1.9 1.2a7 7 0 00-2.1-.9L13 3h-2l-.5 2.2a7 7 0 00-2.1.9L6.5 4.9 5.1 6.3l1.2 1.9a7 7 0 00-.9 2.1L3 11v2l2.4.5a7 7 0 00.9 2.1l-1.2 1.9 1.4 1.4 1.9-1.2c.7.4 1.4.7 2.1.9L11 21h2l.5-2.4a7 7 0 002.1-.9l1.9 1.2 1.4-1.4-1.2-1.9c.4-.7.7-1.4.9-2.1z'/%3E%3C/svg%3E"); }
.mb-hud-box:nth-child(2) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.5 7 .9-5.2 4.9 1.4 7L12 17.8 5.8 21.3l1.4-7L2 9.4l7-.9z'/%3E%3C/svg%3E"); }
.mb-hud-box:nth-child(3) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l9 5v10l-9 5-9-5V7zm0 2.3L5.5 8 12 11.7 18.5 8zM5 9.7v6.1l6 3.4v-6.1zm14 0l-6 3.4v6.1l6-3.4z'/%3E%3C/svg%3E"); }
.mb-hud-box:nth-child(4) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a9 9 0 00-9 9c0 2 .6 3.800 1.700 5.300l1.600-1.200A7 7 0 015 13a7 7 0 1114 0c0 1.500-.5 2.900-1.300 4.100l1.600 1.200A9 9 0 0012 4zm4.200 3.300l-4.500 5.300a1.700 1.700 0 102.400 2.100z'/%3E%3C/svg%3E"); }

.mb-hud-tools { margin-left: auto; display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.mb-hud-tools button {
  font: inherit; font-weight: 800; font-size: .97rem; line-height: 1;
  min-width: 2.9rem; min-height: 2.9rem; padding: .4rem .8rem;
  border-radius: .4rem; cursor: pointer; color: #f2f6fa;
  border: 1px solid #7d8a95;
  background: linear-gradient(180deg, #5d6c78 0%, #3a4650 55%, #2c363f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 6px rgba(0, 0, 0, .45);
  letter-spacing: .01em;
  transition: transform .12s, background .12s, box-shadow .12s;
}
.mb-hud-tools button:hover { background: linear-gradient(180deg, #6d7d8a 0%, #48555f 55%, #38424c 100%); transform: translateY(-1px); }
.mb-hud-tools button:active { transform: translateY(1px); }
.mb-hud-tools #mb-btn-start.jupi_btn,
.mb-hud-tools #mb-btn-start.jupi_btn_alt {
  min-width: 7.4rem; padding-inline: 1.2rem; font-size: 1.04rem;
  color: #fff; border: 1px solid #7fcb8c; border-radius: .45rem;
  background: linear-gradient(180deg, #5fb56b 0%, #2f7d3f 55%, #235f2f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 14px rgba(21, 90, 40, .55);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}
.mb-hud-tools #mb-btn-start.jupi_btn_alt {
  background: linear-gradient(180deg, #ffcb4d 0%, #e0a020 55%, #b87c12 100%);
  border-color: #8a6a24; color: #241a06; text-shadow: none;
}
.mb-hud-tools #mb-btn-start.jupi_btn:hover,
.mb-hud-tools #mb-btn-start.jupi_btn_alt:hover { filter: brightness(1.07); transform: translateY(-1px); }
.mb-hud-tools #mb-btn-help {
  color: #ffe0a3; border-color: var(--mb-messing-tief);
  background: linear-gradient(180deg, #55492e 0%, #352c18 60%, #241d10 100%);
}
.mb-hud-tools #mb-btn-help:hover { background: linear-gradient(180deg, #6a5a38 0%, #453a20 60%, #2e2614 100%); }

/* ---------- 6. Status: Warnleuchte am Pult ---------- */
.mb-status {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 .75rem; padding: .55rem .9rem;
  font-size: .93rem; font-weight: 700; line-height: 1.4;
  color: #ffd77a;
  background: linear-gradient(180deg, #2f2716, #1d1810);
  border: 1px solid var(--mb-messing-tief);
  border-radius: .45rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 12px rgba(0, 0, 0, .3);
}
.mb-status::before {
  content: ""; flex: none; width: 11px; height: 11px; border-radius: 50%;
  background: var(--mb-bernstein); box-shadow: 0 0 10px rgba(255, 179, 0, .85);
}
.mb-status[hidden] { display: none; }

/* ---------- 7. Buehne: eingespanntes Konstruktionsblatt ---------- */
.mb-stage {
  position: relative; overflow: hidden;
  display: flex; justify-content: center; align-items: center;
  width: fit-content; max-width: calc(100% - 30px);
  margin: 0 auto 1.15rem;
  border-radius: .4rem;
  background: #0d1419;
  box-shadow:
    0 0 0 3px var(--mb-messing-tief),
    0 0 0 4px #0a1015,
    0 0 0 12px #3a4752,
    0 0 0 13px #0a1015,
    0 18px 34px rgba(0, 0, 0, .5);
}
.mb-stage::after {                    /* weiche Fassung ueber dem Blattrand */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 26px rgba(0, 0, 0, .45);
}
#mb-canvas { display: block; max-width: 100%; cursor: crosshair; touch-action: none; }
.mb-fx { position: absolute; left: 0; top: 0; z-index: 9; pointer-events: none; }
.mb-fx[hidden] { display: none; }

/* Legende am Feldrand (echtes Element, uebersetzbar) */
.mb-feld-legende {
  position: absolute; bottom: .55rem; left: 50%; transform: translateX(-50%);
  z-index: 2;
  margin: 0; padding: .2rem .8rem; border-radius: .3rem;
  font-size: .72rem; font-weight: 700; white-space: nowrap; pointer-events: none;
  background: var(--mb-papier); color: #1f2d3a;
  border: 1px solid var(--mb-messing-tief);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}

/* ---------- 8. Start: Auftragsblatt auf der Werkbank ---------- */
.mb_start {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  gap: .6rem; text-align: center; padding: .8rem;
  background: radial-gradient(ellipse at 50% 45%, rgba(10, 16, 22, .55), rgba(5, 9, 13, .9) 78%);
  color: #fff;
}
.mb_start[hidden] { display: none; }
.mb_start_gears {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: min(40rem, 118%); height: auto;
  transform: translate(-50%, -50%); opacity: .3; pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .5));
}
.mb_start_sheet {
  position: relative; z-index: 2;
  width: min(30rem, 100%); max-height: 100%; overflow: auto;
  padding: 1.1rem 1.3rem 1.2rem;
  background: var(--mb-papier);
  color: var(--mb-tinte);
  border-radius: .35rem;
  border-top: 5px solid var(--mb-messing);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.mb_spin_a { animation: mb-dreh-a 7s linear infinite; }
.mb_spin_b { animation: mb-dreh-b 11.2s linear infinite; }
@keyframes mb-dreh-a { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes mb-dreh-b { from { transform: rotate(168.75deg); } to { transform: rotate(-191.25deg); } }
@media (prefers-reduced-motion: reduce) { .mb_spin_a, .mb_spin_b { animation: none; } .mb_spin_b { transform: rotate(168.75deg); } }
.mb_start h2 {
  margin: 0 0 .35rem; font-size: clamp(1.3rem, 4vw, 1.9rem); font-weight: 900; letter-spacing: .01em;
  color: #17222b;
}
.mb_start p { margin: 0 auto .75rem; max-width: 24rem; font-size: .98rem; line-height: 1.5; color: var(--mb-tinte-2); }
.mb_start .jupi_btn {
  padding: .65rem 1.9rem; font-size: 1.08rem; border-radius: .45rem;
  color: #fff; border: 1px solid #7fcb8c;
  background: linear-gradient(180deg, #5fb56b 0%, #2f7d3f 55%, #235f2f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 18px rgba(21, 90, 40, .45);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}
.mb_start .jupi_btn:hover { filter: brightness(1.07); }

/* ---------- 9. Ergebnis: Pruefprotokoll ---------- */
.mb-overlay {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(5, 9, 13, .58); backdrop-filter: blur(2px);
}
.mb-overlay.hidden { display: none; }
.mb-overlay-card {
  display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center;
  max-width: 30rem; width: 100%; padding: 1.2rem 1.4rem 1.2rem;
  background: var(--mb-papier); color: var(--mb-tinte);
  border-radius: .4rem;
  border-top: 6px solid var(--mb-gruen);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.mb-overlay-card::before {             /* Protokollkopf */
  content: ""; width: 100%; height: 3px; margin: -.2rem 0 .35rem;
  background: repeating-linear-gradient(90deg, var(--mb-papier-kante) 0 12px, transparent 12px 18px);
}
.mb-overlay h3 { margin: 0; font-size: clamp(1.3rem, 3.6vw, 1.8rem); font-weight: 900; color: #17222b; }
.mb-overlay p { margin: 0; color: var(--mb-tinte-2); font-size: .98rem; }
.mb-overlay-stars { font-size: 2.5rem; letter-spacing: .22rem; line-height: 1.1; color: #c9971f; text-shadow: 0 2px 8px rgba(201, 151, 31, .35); }
.mb-overlay-learn {
  margin: .2rem 0 .1rem; padding: .65rem .9rem; font-size: .94rem; line-height: 1.5; text-align: left;
  background: #e4efdc; color: #173a1f;
  border: 1.5px solid var(--mb-gruen); border-radius: .35rem;
}
.mb-overlay-learn:empty { display: none; }
.mb-overlay .jupi_btn {
  margin-top: .35rem; padding: .6rem 1.7rem; font-size: 1.02rem; border-radius: .45rem;
  color: #fff; border: 1px solid #7fcb8c;
  background: linear-gradient(180deg, #5fb56b 0%, #2f7d3f 55%, #235f2f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 14px rgba(21, 90, 40, .4);
}
.mb-overlay:not(.hidden) .mb-overlay-card { animation: mb-pop .36s cubic-bezier(.2, 1.3, .4, 1) both; }
.mb-overlay:not(.hidden) .mb-overlay-stars { animation: mb-pop .5s ease .12s both; }
@keyframes mb-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .mb-overlay:not(.hidden) .mb-overlay-card, .mb-overlay:not(.hidden) .mb-overlay-stars { animation: none; }
}

/* ---------- 10. Palette: Teilekasten mit Filz und Blechschildern ---------- */
.mb-palette {
  margin-bottom: .85rem; padding: .7rem .9rem .85rem;
  background-color: #2a353f;
  background-image: linear-gradient(180deg, #3b4955 0%, #232d36 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid var(--mb-kante);
  border-top: 3px solid var(--mb-messing-tief);
  border-radius: .55rem;
  box-shadow: var(--mb-schatten), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.mb-palette h3 {
  margin: 0 0 .55rem; font-size: .76rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mb-messing-hell);
}
.mb-parts-list {
  display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center;
  padding: .65rem;
  color: #e8eef2;
  background-color: #121a21;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .022) 0 2px, rgba(0, 0, 0, 0) 2px 5px),
    linear-gradient(180deg, #121a21, #1a232b);
  background-size: 100% 100%, 100% 100%;
  background-repeat: repeat, no-repeat;
  border-radius: .4rem;
  box-shadow: inset 0 3px 12px rgba(0, 0, 0, .7), inset 0 0 0 1px #0c1218;
}
.mb-part-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem;
  min-width: 6.2rem; min-height: 44px; padding: 1.35rem .7rem .55rem;
  background: linear-gradient(180deg, #f3f7f9 0%, #d3dde3 58%, #b7c3cb 100%);
  color: #1b2530;
  border: 1.5px solid #78848f; border-radius: .4rem; cursor: pointer;
  font: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 3px 8px rgba(0, 0, 0, .4);
  transition: transform .14s, box-shadow .14s, border-color .14s, background .14s;
}
.mb-part-btn:hover { border-color: var(--mb-messing); transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 16px rgba(0, 0, 0, .45); }
.mb-part-btn.selected {
  background: linear-gradient(180deg, #ffe9b4 0%, #e7c269 60%, #d0a746 100%);
  border-color: #7a5a18;
  box-shadow: 0 0 0 3px rgba(200, 162, 74, .6), 0 8px 16px rgba(0, 0, 0, .45);
  transform: translateY(-3px);
}
.mb-part-btn canvas { width: 54px; height: 54px; }
.mb-part-btn span { font-size: .78rem; font-weight: 800; color: #1b2530; text-align: center; }

/* Kategorie-Pillen je Bauteil (game.js setzt data-kat je Kategorie) */
.mb-part-btn::before {
  position: absolute; top: .3rem; left: 50%; transform: translateX(-50%);
  font-size: .58rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  padding: .06rem .5rem; border-radius: 999px; white-space: nowrap; pointer-events: none;
}
.mb-part-btn[data-kat="antrieb"]   { order: 1; border-bottom: 4px solid #e53935; }
.mb-part-btn[data-kat="antrieb"]::before   { content: "Antrieb";   background: #ffebee; color: #b71c1c; }
.mb-part-btn[data-kat="getriebe"]  { order: 2; border-bottom: 4px solid #1e88e5; }
.mb-part-btn[data-kat="getriebe"]::before  { content: "Getriebe";  background: #e3f2fd; color: #0d47a1; }
.mb-part-btn[data-kat="transport"] { order: 3; border-bottom: 4px solid #fb8c00; }
.mb-part-btn[data-kat="transport"]::before { content: "Transport"; background: #fff3e0; color: #8f4300; }
.mb-part-btn[data-kat="steuerung"] { order: 4; border-bottom: 4px solid #43a047; }
.mb-part-btn[data-kat="steuerung"]::before { content: "Steuerung"; background: #e8f5e9; color: #1b5e20; }
.mb-part-btn[data-kat="ziel"]      { order: 5; border-bottom: 4px solid #fdd835; }
.mb-part-btn[data-kat="ziel"]::before      { content: "Ziel";      background: #fffde7; color: #6f5900; }
.mb-part-btn[data-kat="objekt"]    { order: 6; border-bottom: 4px solid #8d6e63; }
.mb-part-btn[data-kat="objekt"]::before    { content: "Fracht";    background: #efebe9; color: #4e342e; }

.mb-legende { display: block; margin: .6rem 0 0; font-size: .77rem; text-align: center; color: #bcc9d3; }

/* ---------- 11. Level: gestanzte Blechschilder ---------- */
.mb-levels {
  display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: center;
  padding: .65rem .9rem;
  background-color: #2a353f;
  background-image: linear-gradient(180deg, #3b4955 0%, #232d36 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid var(--mb-kante);
  border-top: 3px solid var(--mb-messing-tief);
  border-radius: .55rem;
  box-shadow: var(--mb-schatten), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.mb-levels-label { font-size: .76rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--mb-messing-hell); }
.mb-level-btns { display: flex; flex-wrap: wrap; gap: .45rem; }
.mb-lvl-btn {
  position: relative; min-width: 2.8rem; min-height: 2.8rem; padding: .2rem .5rem .55rem;
  border-radius: .35rem; border: 1.5px solid #6f7c87;
  background: linear-gradient(180deg, #e3eaee 0%, #bcc8d0 60%, #a3b0b9 100%);
  color: #1b2530;
  font: inherit; font-weight: 900; font-size: 1rem; line-height: 1; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 2px 5px rgba(0, 0, 0, .35);
  transition: transform .14s, border-color .14s, background .14s, box-shadow .14s;
}
.mb-lvl-btn:hover:not(:disabled) { border-color: var(--mb-messing); transform: translateY(-2px); }
.mb-lvl-btn::after {                 /* Sterne unter der Zahl */
  content: attr(data-stars); position: absolute; left: 0; right: 0; bottom: .12rem;
  font-size: .56rem; letter-spacing: .02em; line-height: 1; color: #7a5a18;
}
.mb-lvl-btn.is_active {
  background: linear-gradient(180deg, #ffdf8f 0%, #e7b747 58%, #cc9a26 100%);
  border-color: #7a5a18; color: #241a06;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 14px rgba(200, 162, 74, .45);
}
.mb-lvl-btn.is_active::after { color: #4a360c; }
.mb-lvl-btn.is_done:not(.is_active) { background: linear-gradient(180deg, #cbe6cd 0%, #9fd0a6 60%, #86bd90 100%); border-color: #3f7a4a; color: #10331a; }
.mb-lvl-btn.is_done:not(.is_active)::after { color: #1e5a2c; }
.mb-lvl-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- 12. Dialoge: Loeschen (Zettel) und Hilfe (Betriebsanleitung) ---------- */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(4, 8, 12, .6); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal[hidden] { display: none; }
.modal-card {
  position: relative; width: 100%; max-width: 24rem; padding: 1.3rem 1.4rem;
  background: var(--mb-papier); color: var(--mb-tinte);
  border-radius: .4rem; border-top: 6px solid var(--mb-rot); box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.modal-card h3 { margin: 0 0 .5rem; font-size: 1.12rem; font-weight: 900; color: #17222b; }
.modal-card p { margin: 0 0 .75rem; color: var(--mb-tinte-2); line-height: 1.5; }
.modal-buttons { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }
.modal-buttons .jupi_btn { background: linear-gradient(180deg, #c0453c, #8f1f18); color: #fff; box-shadow: 0 3px 10px rgba(143, 31, 24, .4); border: 1px solid #7c1d17; }
.modal-buttons .jupi_btn_alt { background: linear-gradient(180deg, #dfe7ec, #a9b5bd); color: #1b2530; border: 1px solid #6f7c87; }

.mb_dialog {
  width: min(46rem, calc(100% - 2rem)); max-height: 86dvh; overflow: auto; padding: 0;
  background: var(--mb-papier); color: var(--mb-tinte);
  border: 0; border-top: 6px solid var(--mb-messing); border-radius: .4rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.mb_dialog::backdrop { background: rgba(4, 8, 12, .66); backdrop-filter: blur(2px); }
.mb_dialog_kopf {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem;
  background-color: #2a353f;
  background-image: linear-gradient(180deg, #404e59, #1e272f);
  color: #fff; border-bottom: 3px solid var(--mb-messing);
}
.mb_dialog_kopf img { flex: none; border-radius: 6px; box-shadow: 0 0 0 2px #2a2010; }
.mb_dialog_kopf h2 { margin: 0; font-size: 1.12rem; font-weight: 900; flex: 1; color: #fff; }
.mb_dialog_kopf form { display: flex; justify-content: flex-end; margin: 0; }
.mb_dialog_zu {
  cursor: pointer; border-radius: .35rem; border: 1.5px solid rgba(200, 162, 74, .75);
  background: rgba(255, 255, 255, .08); color: #ffe6b0; font-weight: 900; padding: .35rem .7rem;
}
.mb_dialog_zu:hover { background: var(--mb-messing); color: #241a06; }
.mb_dialog_inhalt { padding: .4rem 1.2rem 1.1rem; }
.mb_dialog_inhalt h3 { margin: 1.1rem 0 .3rem; font-size: .82rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #7a5a18; }
.mb_dialog_inhalt ol, .mb_dialog_inhalt ul { margin: .2rem 0 .4rem 1.2rem; padding: 0; }
.mb_dialog_inhalt li { margin: .4rem 0; line-height: 1.55; }
.mb_lernsatz {
  margin: .8rem 0 0; padding: .7rem .9rem; line-height: 1.55;
  background: #efe2c4; color: #1b2a20;
  border-left: 5px solid var(--mb-gruen); border-radius: .25rem;
}
.mb_dialog_inhalt .hint {
  margin: 1rem 0 0; padding: .7rem 1rem; font-size: .94rem;
  background: #e4efdc; color: #173a1f; border: 1.5px solid var(--mb-gruen); border-radius: .35rem;
}
.mb_dialog_fuss { display: flex; justify-content: flex-end; margin-top: .9rem; }
.mb_dialog_fuss form { margin: 0; }
.mb_dialog_fuss .jupi_btn {
  color: #fff; border: 1px solid #7fcb8c;
  background: linear-gradient(180deg, #5fb56b 0%, #2f7d3f 55%, #235f2f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 12px rgba(21, 90, 40, .35);
}

/* ---------- 13. Fuss: Werkbank-Abschluss ---------- */
body.jupi.mb_body .jupi_container > .jupi_footer,
html[data-theme="dark"] body.jupi.mb_body .jupi_container > .jupi_footer {
  flex: 0 0 auto;
  margin: 0;
  width: 100%;
  max-width: none;
  border-radius: 0;
  border: 0;
  border-top: 3px solid var(--mb-messing-tief);
  background-color: #1b232b;
  background-image: linear-gradient(180deg, #2b3641 0%, #151c23 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: .85rem 1rem .95rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
body.jupi.mb_body .jupi_footer p { margin: 0; text-align: center; font-size: .8rem; color: #b9c6cf; }
body.jupi.mb_body .jupi_footer a { color: var(--mb-messing-hell); font-weight: 700; text-decoration: none; }
body.jupi.mb_body .jupi_footer a:hover { text-decoration: underline; }

/* ---------- 14. Dark Mode: dieselbe Werkstatt bei Nacht ---------- */
html[data-theme="dark"] body.jupi.mb_body {
  background-color: #0b1016;
  background-image:
    radial-gradient(58% 42% at 14% 6%, rgba(255, 196, 122, .16), rgba(255, 196, 122, 0) 62%),
    radial-gradient(48% 36% at 86% 10%, rgba(255, 178, 90, .10), rgba(255, 178, 90, 0) 60%),
    linear-gradient(rgba(7, 11, 16, .72), rgba(7, 11, 16, .84)),
    url("kulisse.svg");
  background-size: cover, cover, cover, cover;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: center top, center top, center top, center top;
  background-attachment: fixed, fixed, fixed, fixed;
}
html[data-theme="dark"] .mb_leiste {
  background-color: #1d262e;
  background-image:
    radial-gradient(circle at 50% 50%, #8b9aa7 0 2px, #0a1015 2.6px 3.6px, transparent 4px),
    linear-gradient(180deg, #39454f 0%, #232c34 46%, #151c22 100%);
  background-size: 72px 18px, 100% 100%;
  background-position: 0 0, 0 0;
  background-repeat: repeat-x, no-repeat;
}
html[data-theme="dark"] .mb_leiste .jupi_nav_back {
  background: linear-gradient(180deg, #b9c4cc 0%, #89959f 58%, #6f7b86 100%);
  color: #17212a; border-color: #5c6873;
}
html[data-theme="dark"] .mb_leiste .jupi_nav_back:hover {
  background: linear-gradient(180deg, #ffe9b4 0%, #d9b25c 55%, #b58c35 100%);
  color: #241a06; border-color: #7a5a18;
}
/* Papiere bleiben hell - nur eine Spur gedaempft, damit sie nicht blenden. */
html[data-theme="dark"] body.jupi.mb_body .mb-task,
html[data-theme="dark"] body.jupi.mb_body .mb-overlay-card,
html[data-theme="dark"] body.jupi.mb_body .modal-card,
html[data-theme="dark"] body.jupi.mb_body .mb_dialog,
html[data-theme="dark"] body.jupi.mb_body .mb_start_sheet {
  background: #e9dfc7;
}
html[data-theme="dark"] body.jupi.mb_body .mb_lernsatz { background: #e4d8ba; }
html[data-theme="dark"] body.jupi.mb_body .mb_dialog_kopf { background-image: linear-gradient(180deg, #37333c, #1a1f25); }
/* Die Plattform faerbt .jupi_btn im Dunkelmodus bernstein - hier bleiben die
   Knoepfe ihr Material (gruen = los, rot = loeschen, Stahl = abbrechen). */
html[data-theme="dark"] .mb_start .jupi_btn,
html[data-theme="dark"] .mb-overlay .jupi_btn,
html[data-theme="dark"] .mb_dialog_fuss .jupi_btn,
html[data-theme="dark"] .modal-buttons .jupi_btn {
  color: #fff; border: 1px solid #7fcb8c;
  background: linear-gradient(180deg, #5fb56b 0%, #2f7d3f 55%, #235f2f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 14px rgba(21, 90, 40, .45);
}
html[data-theme="dark"] .modal-buttons .jupi_btn {
  background: linear-gradient(180deg, #c0453c, #8f1f18);
  border-color: #7c1d17; color: #fff;
}
html[data-theme="dark"] .modal-buttons .jupi_btn_alt {
  background: linear-gradient(180deg, #dfe7ec, #a9b5bd);
  border-color: #6f7c87; color: #1b2530;
}

/* ---------- 15. Responsive ---------- */
@media (max-width: 800px) {
  .mb_leiste { grid-template-columns: minmax(0, 1fr) auto; gap: .4rem .6rem; padding: .45rem .6rem .5rem; }
  .mb_brand { grid-row: 1; grid-column: 1 / -1; }
  .mb_brand img { width: 34px; height: 34px; }
  .mb_brand h1 { font-size: 1.1rem; }
  .mb_leiste .jupi_nav_back { grid-row: 2; grid-column: 1; font-size: .82rem; }
  .mb_leiste .jupi_werkzeuge { grid-row: 2; grid-column: 2; }
}
@media (max-width: 360px) {
  .mb_leiste .jupi_nav_back { grid-row: 2; grid-column: 1 / -1; justify-self: center; }
  .mb_leiste .jupi_werkzeuge { grid-row: 3; grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 38rem) {
  body.jupi.mb_body .jupi_container > .jupi_main { padding: .8rem .65rem 1rem; }
  .mb-task { padding: .6rem .8rem .6rem .6rem; gap: .6rem; }
  .mb-task::before { left: 1.6rem; width: 40px; }
  .mb-task-badge { width: 2.45rem; height: 2.45rem; font-size: 1.1rem; }
  .mb-task h2 { font-size: 1rem; }
  .mb-task p { font-size: .87rem; }
  .mb-hud { padding: .5rem; gap: .45rem; }
  .mb-hud-box { flex: 1 1 calc(33% - .3rem); min-width: 0; padding: .3rem .4rem .3rem 1.9rem; }
  .mb-hud-box::before { left: .5rem; width: .9rem; height: .9rem; }
  .mb-hud-box span { font-size: 1.05rem; }
  .mb-hud-box:nth-child(4) { flex: 1 1 100%; }
  #mb-rpm { min-width: 0; }
  .mb-hud-tools { width: 100%; margin-left: 0; justify-content: center; }
  .mb-hud-tools #mb-btn-start.jupi_btn, .mb-hud-tools #mb-btn-start.jupi_btn_alt { flex: 1 1 auto; }
  .mb-stage { max-width: calc(100% - 24px); }
  .mb-parts-list { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: .55rem .5rem; -webkit-overflow-scrolling: touch; }
  .mb-part-btn { flex: 0 0 auto; min-width: 5.2rem; padding-inline: .5rem; }
  .mb-feld-legende { font-size: .6rem; padding: .15rem .6rem; }
  .mb_start { padding: .5rem; }
  .mb_start_sheet { padding: .8rem .9rem .9rem; }
  .mb_start_gears { width: 92%; opacity: .2; }
  .mb_start h2 { font-size: 1.2rem; margin-bottom: .2rem; }
  .mb_start p { font-size: .86rem; margin-bottom: .55rem; }
  .mb_start .jupi_btn { padding: .55rem 1.3rem; font-size: 1rem; }
  .mb-overlay-card { padding: 1rem 1rem .9rem; }
  .mb-overlay-stars { font-size: 2rem; }
}

/* ---------- 16. Tastatur-Fokus gut sichtbar ---------- */
.mb-part-btn:focus-visible, .mb-lvl-btn:focus-visible, .jupi_btn:focus-visible,
.jupi_btn_alt:focus-visible, .mb_dialog_zu:focus-visible, .mb-hud-tools button:focus-visible,
.mb_leiste .jupi_nav_back:focus-visible {
  outline: 3px solid #7fd4ff; outline-offset: 2px;
}

/* ---------- 17. Bedienziele: mindestens 40 x 40 px (Regel 3.13.5) ----------
   Steht absichtlich am Ende, damit keine fruehere Regel es ueberstimmt. */
.mb-hud button, #mb-btn-los, #mb-btn-next, .mb-part-btn,
.mb-lvl-btn, .mb_leiste .jupi_nav_back, .mb_leiste .jupi_theme_switch,
.mb_leiste .jupi_sprachen_select,
.mb_dialog_zu, .mb_dialog_fuss .jupi_btn, .modal-buttons .jupi_btn, .modal-buttons .jupi_btn_alt {
  min-width: 40px; min-height: 40px;
}