.observation-selection{width:min(900px,calc(100vw - 16px))}
.observation-table{border:5px solid #34435a;border-radius:9px;background:#0c2442;color:#f5e7cb;overflow:hidden}
.observation-row{display:grid;grid-template-columns:15% 46% 14% 25%;align-items:center;text-align:left;gap:0;padding:12px;width:100%;border:0;border-radius:0;border-bottom:1px solid #67809d;background:#0c2442;color:#f5e7cb;min-height:54px}
.observation-columns{background:#173a64;font-weight:bold}
.observation-row:hover:not(:disabled){background:#294e72}
.observation-row.correct{background:#d4e8bf;color:#243b3d}
.observation-row span{padding:0 5px;overflow-wrap:anywhere}
.observation-notice{font-size:12px;margin:6px 0;color:#49606c}
#hotspots .hotspot[aria-label^="Wegweiser "]{opacity:1;background:#102f50;color:white;border:1px solid #aec6db;border-radius:4px;font-size:clamp(9px,1.5vw,20px);padding:2px;min-height:0;display:grid;place-items:center}
#hotspots .hotspot[aria-label^="Wegweiser "]::after{content:attr(aria-label);font-size:inherit}
#hotspots .hotspot[aria-label="Gate A18 erreichen"],#hotspots .hotspot[aria-label="Weiterreise nach Mallorca ansehen"]{opacity:1;background:#f5e7cb;color:#102f50;border:2px solid #102f50;min-height:0;font-size:clamp(9px,1.4vw,20px);padding:1px}
#hotspots .hotspot[aria-label="Gate A18 erreichen"]::after,#hotspots .hotspot[aria-label="Weiterreise nach Mallorca ansehen"]::after{content:'A18'}
.dialogue[data-dialog="3-boarded"]{animation:boarding-in .65s ease-out}
@keyframes boarding-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.dialogue[data-dialog="3-boarded"]{animation:none}}
@media(max-width:600px){.observation-row{padding:6px 3px;min-height:56px;font-size:12px}.observation-row span{padding:0 3px}}
@media(max-height:500px){.observation-row{padding:5px;min-height:36px}.observation-selection{padding:8px}.observation-selection h2{font-size:18px}.observation-selection>p{font-size:12px;margin:5px 0}.observation-selection>button{min-height:36px;padding:5px}.observation-selection .observation-notice{font-size:10px;margin:3px 0}}

#hotspots .hotspot[aria-label="Wegweiser A1–A10"]::after{content:'↑ A1–A10'}#hotspots .hotspot[aria-label="Wegweiser A11–A20"]::after{content:'↑ A11–A20'}#hotspots .hotspot[aria-label="Wegweiser B1–B15"]::after{content:'↑ B1–B15'}#hotspots .hotspot[aria-label="Wegweiser C1–C10"]::after{content:'↑ C1–C10'}
@media(max-height:500px){.observation-selection{display:flex;flex-direction:column;gap:4px}.observation-selection:not([open]){display:none}.observation-selection h2{margin:0;font-size:18px}.observation-selection>p{margin:0;font-size:11px;line-height:1.2}.observation-selection .simple-task-body{gap:0}.observation-selection .observation-columns{min-height:24px;padding:3px}.observation-selection .observation-notice{margin:3px 0;font-size:10px;line-height:1.1}.observation-selection .task-feedback{min-height:14px}.observation-selection>button{min-height:32px}}