.scene-photo{background:#f8f8f8;border-color:#d3d5d5;border-radius:16px;box-shadow:0 12px 35px rgba(0,0,0,0.034);top:99px;min-height:0;isolation:isolate}
.scene-photo-top{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;color:#3f565a;background:#f8f9f9;font:11px Plex;letter-spacing:.03em}
.scene-photo-top span:first-child{color:#587326}.scene-photo-top span:last-child{text-align:right}
.scene-photo-stage{position:relative;aspect-ratio:16/10;background:#cbd8dd;overflow:hidden}
.scene-panel.scene-photo .scene-photo-stage canvas{display:block;width:100%;height:100%;min-height:0;aspect-ratio:16/10}
.scene-photo-stage img{display:block;width:100%;height:100%;object-fit:contain;background:#f8f9f9}
.scene-photo[data-visual-status="loading"] .scene-photo-stage::after{content:'Henter situationen…';position:absolute;inset:0;display:grid;place-items:center;background:#f6f6f7;color:#2a3030;font:14px DM}
.scene-panel.scene-photo canvas[hidden],.scene-photo-stage img[hidden],.scene-photo-fallback[hidden]{display:none}
.scene-photo-fallback{width:100%;height:100%;padding:25px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;text-align:center;font:15px DM;line-height:1.5;color:#1e211f;background:#f4f5f5}.scene-photo-fallback button{min-height:44px;padding:9px 14px;border:1px solid #8aafb6;border-radius:7px;background:#eff0f0;color:#1a1a1a}
.scene-photo-bottom{display:flex;align-items:center;gap:15px;padding:13px 16px;border-top:1px solid #cbcdcd}
.scene-photo-bottom p{font:700 16px DM;line-height:1.4;margin:0;color:#4f6831;flex:1}
.scene-expand{font:12px DM;min-height:44px;padding:8px 11px;display:flex;align-items:center;gap:7px;border:1px solid #bbbdbd;border-radius:7px;background:#f4f4f4;white-space:nowrap;color:#376831}
.scene-expand:hover{background:#f0f1f1}.scene-expand:disabled{opacity:.55}.scene-expand svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
.scene-facts{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 13px}.scene-facts[hidden]{display:none}.scene-facts span{font:12px DM;line-height:1.45;background:#f3f4f4;border:1px solid #cacccd;padding:5px 8px;border-radius:5px;color:#232929}
.scene-photo-note{font:11px DM;color:#435556;margin:0;padding:0 16px 14px;line-height:1.5}
.exam-active .choice-btn.selected{background:#f3f4f4;color:#1c2020;border-color:#bfd3d7;box-shadow:inset 0 0 0 1px rgba(191,211,215,0.25)}
.exam-active .choice-btn.selected:focus-visible{outline-color:#bfd3d7}
.exam-selection-note{font:12px DM;line-height:1.6;color:#303434;margin:8px 0 14px}
.scene-lightbox{width:min(1260px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:1px solid #c4c6c6;border-radius:15px;background:#f7f8f8;color:#1e2321;overflow:auto}
.scene-lightbox::backdrop{background:rgba(252,252,252,0.875);backdrop-filter:blur(8px)}
.scene-lightbox header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 20px;border-bottom:1px solid #d0d2d3}.scene-lightbox header .mono{font-size:10px;color:#303535}.scene-lightbox h2{font:700 22px DM;line-height:1.3;margin:5px 0 0}.scene-lightbox-close{border:1px solid #b2b4b5;border-radius:7px;min-width:44px;min-height:44px;font:30px DM;line-height:1;color:#3a6a2f;background:#f1f2f2}
.scene-lightbox-stage{width:100%;height:65dvh;display:flex;justify-content:center;background:#cbd8dd}.scene-lightbox-stage canvas{display:block;width:100%;height:100%;min-height:0}
.scene-lightbox-stage img{display:block;width:100%;height:100%;object-fit:contain;background:#f8f9f9}
.scene-lightbox-controls{display:flex;align-items:center;gap:8px}.scene-lightbox-zoom{min-height:44px;min-width:92px;font:13px DM;border:1px solid #b2b4b5;border-radius:7px;padding:9px 11px;background:#f1f2f2;color:#3a6a2f}
.scene-lightbox-stage{overflow:hidden}.scene-lightbox-stage.is-zoomed{display:block;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y}.scene-lightbox-stage.is-zoomed img{max-width:none;object-fit:fill}
.scene-zoom-hint{font:12px DM;margin:0;padding:9px 20px;background:#f2f3f3;color:#242a2a}.scene-zoom-hint[hidden]{display:none}
.scene-lightbox-context{font:15px DM;line-height:1.7;margin:0;padding:16px 20px}
@media(min-width:951px){.exam-active .question-layout{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.exam-active .scene-photo-stage{aspect-ratio:16/11}.exam-active .scene-photo-stage canvas{aspect-ratio:16/11}}
@media(max-width:950px){.scene-photo{position:relative;top:auto}.scene-photo-stage{aspect-ratio:16/10}}
@media(max-width:700px){.scene-photo-top{padding:10px 12px;font-size:10px}.scene-photo-bottom{gap:8px;padding:11px 12px}.scene-photo-bottom p{font-size:14px}.scene-expand{font-size:11px;padding:6px 8px}.scene-facts{padding:0 12px 12px}.scene-facts span{font-size:12px}.scene-photo-note{padding:0 12px 12px}.scene-lightbox{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:10px}.scene-lightbox header{padding:12px;gap:10px}.scene-lightbox h2{font-size:16px}.scene-lightbox-context{font-size:14px;padding:12px}.scene-lightbox-stage{height:auto;aspect-ratio:16/11}.exam-active .screen-head h1{font-size:29px}.exam-active .question-layout{gap:18px}}
@media(max-width:700px){.scene-lightbox-stage{height:calc(68.75vw - 12.375px);aspect-ratio:auto}.scene-lightbox h2{font-size:15px}.scene-lightbox-controls{gap:6px}.scene-lightbox-zoom{font-size:12px;min-width:85px;padding:8px}}
@media(max-width:359px){.scene-photo-bottom{flex-wrap:wrap}.scene-photo-bottom p{min-width:100%}.scene-expand{width:100%;justify-content:center}}

/* Read the complete authored situation before its illustration on a narrow screen. */
@media(max-width:950px){
  .exam-active .question-layout{display:flex;flex-direction:column;gap:12px}
  .exam-active .question-panel{display:contents}
  .exam-active .question-panel>.eyebrow,
  .exam-active .question-panel>h2,
  .exam-active .question-panel>.question-context,
  .exam-active .question-panel>.voice-read{order:0}
  .exam-active .question-panel>.eyebrow{margin:0}
  .exam-active .question-panel>.question-context{margin:0}
  .exam-active .question-panel>.voice-read{align-self:flex-start}
  .exam-active .question-layout>.scene-photo{order:1}
  .exam-active .question-panel>.answer-note,
  .exam-active .question-panel>.exam-selection-note,
  .exam-active .question-panel>.statements,
  .exam-active .question-panel>.question-actions{order:2}
  .exam-active .question-panel>.answer-note{margin:8px 0 0}
  .exam-active .question-panel>.exam-selection-note{margin:0}
}