/* Laborsimulator: alles unter .sim, damit es sich nicht mit den Stilen der Seite beißt */
.sim { --grund: #1a120e; --text: #efe7d6; --leise: #a49c8c; --knopf: #24306e; --knopf-rand: #7d8fd8; --gelb: #fad65a; }
.sim, .sim * { box-sizing: border-box; }
.sim [hidden] { display: none !important; }
.sim { color: var(--text); font: 15px/1.45 system-ui, sans-serif; }
.sim { max-width: 100vw; min-height: 100dvh; padding: 80px 12px 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.sim-buehne { position: relative; line-height: 0; touch-action: manipulation; }
.sim canvas { image-rendering: pixelated; image-rendering: crisp-edges; display: block; cursor: default; }
.sim canvas.zeigt { cursor: pointer; }
.sim #tip { position: absolute; pointer-events: none; background: rgba(20,18,26,.92); color: var(--text); border: 1px solid #5a5470;
       padding: 3px 7px; font-size: 13px; line-height: 1.3; white-space: nowrap; border-radius: 3px; transform: translate(12px, 14px); z-index: 5; }
.sim #menu { position: absolute; background: #1e1b28; border: 1px solid var(--knopf-rand); border-radius: 6px; padding: 8px; display: flex;
        flex-direction: column; gap: 6px; line-height: 1.3; z-index: 6; }
.sim #tafel { position: absolute; top: 4%; right: 3%; width: 50%; max-height: 92%; overflow: auto; line-height: 1.45; font-size: 14px;
         background: rgba(30,27,40,.96); border: 1px solid #5a5470; border-radius: 6px; padding: 12px 14px; z-index: 4; }
.sim #tafel h2 { font-size: 16px; margin: 0 0 6px; }
.sim #tafel ul { margin: 0 0 10px; padding-left: 18px; }
.sim #tafel li { margin: 2px 0; }
.sim #tafel .gut { color: #a8dc8a; } .sim #tafel .halb { color: var(--gelb); } .sim #tafel .schlecht { color: #f08a70; }
@media (max-width: 700px) { .sim #tafel { position: static; width: auto; max-height: none; margin-top: 8px; line-height: 1.45; } }

/* Leiste im Stil des Menüs: oben mittig, am Telefon unten */
.sim-orte { left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; }
.sim-orte button, .sim-orte label { font: inherit; color: var(--rand); background: none; border: 0; padding: .35rem .7rem; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; }
.sim-orte button:hover, .sim-orte label:hover, .sim-orte button:focus-visible { background: rgb(255 255 255 / .12); outline: none; }
.sim-orte button[aria-pressed="true"] { background: rgb(255 255 255 / .2); }
.sim-orte input { accent-color: var(--rand); margin: 0; }
.sim-orte [hidden] { display: none !important; }
@media (max-width: 900px) { .sim-orte { top: auto; bottom: 14px; } }
/* Hinweis: die eine Zeile unter dem Bild */
.sim #hinweis { margin: 0; min-height: 1.45em; color: #fad65a; text-align: center; max-width: 60em; font-size: 14px; }
.sim #hinweis:empty { display: none; }
.sim #hinweis.meldung { color: var(--text); }
/* Trittstein zurück ins Labor, wie der Ausgang in den Innenansichten */
.sim-ausgang { position: relative; display: block; line-height: 0; margin-top: -2px; }
.sim-ausgang img { width: 100%; image-rendering: pixelated; display: block; }
.sim-ausgang:hover img, .sim-ausgang:focus-visible img { filter: brightness(1.25); }
.sim-ausgang .tafel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px; white-space: nowrap; line-height: 1.3;
  font-size: 13px; padding: 2px 8px; color: var(--text); background: rgb(20 18 26 / .9); border-radius: 3px; opacity: 0; pointer-events: none; }
.sim-ausgang:hover .tafel, .sim-ausgang:focus-visible .tafel { opacity: 1; }

/* Knöpfe in der Laborbuch-Tafel */
.sim #tafel button { font: inherit; font-size: 13px; color: var(--text); background: var(--knopf); border: 1px solid var(--knopf-rand); border-radius: 999px; padding: 3px 12px; cursor: pointer; margin-top: 4px; }
.sim #tafel button:hover { background: #31408c; }