.arenal-comparison .map-task-body{gap:12px;align-items:center}
.hotspot:is([aria-label="Mit Elena sprechen"],[aria-label="Mit Ralf sprechen"],[aria-label="Mit Marcos sprechen"],[aria-label="Mit Clara sprechen"]){min-width:44px;min-height:44px;opacity:1;background:transparent!important;box-shadow:none!important}
.hotspot:is([aria-label="Mit Elena sprechen"],[aria-label="Mit Ralf sprechen"],[aria-label="Mit Marcos sprechen"],[aria-label="Mit Clara sprechen"])::after{position:absolute;top:0;left:50%;transform:translate(-50%,-100%);background:#f5e7cbee;color:#243b3d;border-radius:5px;padding:2px 5px;font-size:12px;white-space:nowrap}
.hotspot[aria-label="Mit Elena sprechen"]::after{content:'Elena'}
.hotspot[aria-label="Mit Ralf sprechen"]::after{content:'Ralf'}
.hotspot[aria-label="Mit Marcos sprechen"]::after{content:'Marcos'}
.hotspot[aria-label="Mit Clara sprechen"]::after{content:'Clara'}
.arenal-comparison .map-task-board,.arenal-comparison .old-map{width:min(48%,calc(100dvh - 245px))!important;height:auto!important;aspect-ratio:1;flex:0 0 auto!important}
.old-map img{display:block;width:100%;height:100%;object-fit:contain}
.arenal-legend{font-size:14px!important;line-height:1.35!important;color:#273442}
.chart-source{font-size:12px!important;line-height:1.3!important;color:#394b60}
.task-dialog[data-task="5a-years"] .drop-zone{display:flex;flex-direction:column;gap:4px;padding:4px;overflow:hidden}
.task-dialog[data-task="5a-years"] .drop-target,.task-dialog[data-task="5a-years"] .term-card.matched{height:auto;min-height:34px;flex:0 0 auto;font-size:14px}
.dialogue[data-dialog="5-next"]{animation:boarding-in .65s ease-out}
@media(max-width:760px){.arenal-legend{font-size:12px!important}}
@media(max-height:500px){.arenal-comparison .map-task-board,.arenal-comparison .old-map{width:min(48%,calc(100dvh - 160px))!important}.arenal-legend{font-size:11px!important;margin:2px 0!important}.chart-source{font-size:10px!important;margin:2px 0!important}}
@media(prefers-reduced-motion:reduce){.dialogue[data-dialog="5-next"]{animation:none}}
/* Keep both years visible together, including on small screens. */
.arenal-comparison .map-task-board,.arenal-comparison .old-map{display:block!important;width:min(48%,calc(100dvh - 245px))!important}
.arenal-first-look .map-task-body{flex-direction:column;gap:12px}
.promenade-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;min-height:0;flex:1;align-items:center}
.promenade-pair figure{margin:0;min-width:0;text-align:center}
.promenade-pair img{width:100%;display:block;aspect-ratio:1672/941;object-fit:contain}
.promenade-pair .map-task-board{width:100%!important;height:auto!important;aspect-ratio:1672/941;flex:none!important}
.promenade-pair figcaption{font-size:16px;font-weight:bold;margin-top:6px}
.arenal-first-look .simple-task-body{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.arenal-first-look .simple-task-body button{font-size:15px;min-height:54px}
@media(max-width:760px){.arenal-comparison .map-task-body{gap:6px}.arenal-first-look .simple-task-body{grid-template-columns:1fr}.promenade-pair{gap:6px}.promenade-pair figcaption{font-size:12px}.arenal-first-look .simple-task-body button{font-size:14px}}
@media(max-height:500px){.arenal-comparison .map-task-board,.arenal-comparison .old-map{width:min(48%,calc(100dvh - 170px))!important}.arenal-first-look .map-task-body{gap:4px}.arenal-first-look .simple-task-body button{font-size:12px;min-height:36px}.promenade-pair{flex:0 1 auto;width:min(100%,620px)}.promenade-pair figcaption{font-size:12px;margin:2px}}
.task-dialog[data-task="6b"] .drop-zone,.task-dialog[data-task="6c"] .drop-zone{display:flex;flex-direction:column;gap:4px;padding:4px;overflow:hidden}
.task-dialog[data-task="6b"] .drop-target,.task-dialog[data-task="6c"] .drop-target,.task-dialog[data-task="6b"] .term-card.matched,.task-dialog[data-task="6c"] .term-card.matched{height:auto;min-height:30px;flex:0 0 auto;font-size:14px}
.dialogue[data-dialog="6-next"]{animation:boarding-in .6s ease-out}
@media(max-height:500px){.task-dialog[data-task="6b"] .drop-target,.task-dialog[data-task="6c"] .drop-target,.task-dialog[data-task="6b"] .term-card.matched,.task-dialog[data-task="6c"] .term-card.matched{font-size:11px;min-height:25px}}
@media(prefers-reduced-motion:reduce){.dialogue[data-dialog="6-next"]{animation:none}}
/* Four pictures form one cause-and-effect chain using the existing sequence task. */
.visual-development .task-content{grid-template-columns:1fr!important;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:12px}
.visual-development .task-graphic{display:flex;align-items:stretch;justify-content:space-between;gap:32px;aspect-ratio:auto}
.visual-development .drop-zone{position:relative!important;left:auto!important;top:auto!important;width:auto!important;height:100%!important;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;padding:5px;overflow:visible}
.visual-development .drop-zone:not(:last-child)::after{content:'→';position:absolute;right:-30px;top:45%;font-size:30px;line-height:1;color:#17466c;font-weight:bold}
.visual-development .drop-target{height:auto!important;min-height:44px;font-size:18px;font-weight:bold}
.visual-development .task-cards{grid-template-columns:repeat(4,minmax(0,1fr))!important;align-content:center;gap:12px}
.visual-development .term-card{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:15px;padding:5px 22px 5px 5px;gap:5px}
.visual-development .term-card img,.visual-development .term-card.matched img{display:block;width:auto;max-width:100%;height:min(18dvh,155px);max-height:none;object-fit:contain}
.visual-development .term-card.matched{height:auto;min-height:0;flex:1;width:100%;font-size:15px;padding:4px}
.visual-development[data-tray-empty="true"] .task-content{grid-template-rows:minmax(0,1fr) 0}
.visual-development:has(.task-done:not([hidden])) .drop-zone::after{color:#3c732e}
@media(max-width:700px){.visual-development .task-graphic{gap:16px}.visual-development .drop-zone:not(:last-child)::after{right:-17px;font-size:20px}.visual-development .task-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px}.visual-development .term-card,.visual-development .term-card.matched{font-size:11px;padding:3px}.visual-development .term-card img{height:min(13dvh,100px)}.visual-development .term-card.matched img{height:min(12dvh,85px)}.visual-development .drop-zone{padding:2px}.visual-development .drop-target{font-size:15px}.visual-development .task-header p{font-size:12px}}
@media(max-height:500px){.visual-development .task-graphic{gap:24px}.visual-development .drop-zone:not(:last-child)::after{right:-24px;font-size:24px}.visual-development .term-card,.visual-development .term-card.matched{font-size:11px}.visual-development .term-card img,.visual-development .term-card.matched img{height:75px}.visual-development .drop-target{min-height:28px;font-size:15px}.visual-development .task-content{gap:6px}.visual-development .task-header p{display:block;font-size:11px;margin:2px}}
.visual-development .drop-zone:not(:last-child)::after{content:'';width:30px;height:22px;background:#17466c;clip-path:polygon(0 35%,60% 35%,60% 0,100% 50%,60% 100%,60% 65%,0 65%);right:-31px;transform:translateY(-50%)}
.visual-development:has(.task-done:not([hidden])) .drop-zone::after{background:#3c732e}
.visual-development[data-tray-empty="true"] .term-card.matched img{height:min(30dvh,240px)}
@media(max-width:700px){.visual-development .drop-zone:not(:last-child)::after{width:16px;height:16px;right:-17px}.visual-development[data-tray-empty="true"] .term-card.matched img{height:min(12dvh,85px)}}
@media(max-height:500px){.visual-development .drop-zone:not(:last-child)::after{width:24px;height:20px;right:-25px}.visual-development[data-tray-empty="true"] .term-card.matched img{height:110px}}
.dialogue.hotel-board{width:min(1000px,96vw);max-width:1000px}
@media(pointer:coarse){.hotspot.hotel-hotspot{min-width:36px;min-height:36px}}
.hotel-board .dialog-options{grid-template-columns:repeat(3,minmax(0,1fr))}
.hotel-board .dialog-options button{min-height:130px;font-weight:bold;padding:16px}
.hotel-board .dialog-options button small{font-weight:normal;line-height:1.5}
.hotel-board .dialog-options button:last-child{min-height:44px;grid-column:1/-1}
@media(max-width:700px){.hotel-board .dialog-options{grid-template-columns:1fr}.hotel-board .dialog-options button{min-height:90px;padding:12px}.dialogue.hotel-board{max-height:94dvh}}
.bike-route-status{position:absolute;inset:0;pointer-events:none}
.bike-marker{position:absolute;transform:translate(-50%,-50%);display:grid;place-content:center;width:32px;height:32px;border:3px solid #fff;border-radius:50%;background:#50615b;color:white;box-shadow:0 2px 4px #0008;font-size:16px;font-weight:bold}
.bike-marker.active{background:#db601a;outline:3px solid #ffe681}
.bike-marker.explored{background:#38783d}
.bike-photo-flash{position:absolute;inset:0;pointer-events:none;background:#fff;opacity:0;z-index:3}
.hotspot.bike-next{opacity:1;background:#f5e7cb;border:1px solid #9a7951;color:#243b3d;min-height:44px;min-width:105px;font-size:13px;top:auto!important;bottom:8px}
.hotspot.bike-motif:hover,.hotspot.bike-motif:focus-visible{opacity:.22;border:2px dashed #ffe99b;background:#fff}
.hotspot.bike-photo{opacity:.2;border:2px dashed #fff4ae;background:#eac03c}
.hotspot.bike-plants,.hotspot.bike-optional{opacity:1;background:#f5e7cb;color:#243b3d;border:1px solid #9a7951;min-height:44px;font-size:12px;top:auto!important}
.hotspot.bike-plants{left:8px!important;bottom:60px;width:155px!important}
.hotspot.bike-optional{left:auto!important;right:8px;bottom:8px;width:170px!important}
.hotspot.bike-plants:hover,.hotspot.bike-optional:hover{opacity:1;background:#fff4d9}
.bike-station-counter{position:absolute;top:8px;right:8px;background:#fff7dc;color:#263c43;padding:5px 10px;border-radius:8px;pointer-events:none;font-size:13px;font-weight:bold}
.task-dialog[data-task="7b"] .drop-zone{background:#fff8;min-height:44px}
.task-dialog[data-task="7b"] .drop-zone{overflow:hidden}
.task-dialog[data-task="perspective-environment"] .simple-task-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.task-dialog[data-task="6b"] .simple-task-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.task-dialog[data-task="6b"] .simple-task-body button{min-height:150px;border:2px solid #b49b63;border-radius:14px}
.beach-recall{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:15px 0}.beach-recall article{background:#fff8e5;border:1px solid #b49b63;border-radius:12px;padding:14px}
.task-dialog.map-choice-task{width:min(1250px,96vw);height:auto;max-height:96dvh;overflow:auto}
.map-choice-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.map-choice-pair figure{margin:0;min-width:0}.map-choice-pair img{display:block;width:100%;height:min(48dvh,490px);object-fit:contain;background:#fff}.map-choice-pair button{width:100%;min-height:44px}
.map-choice-task .simple-task-body{display:grid;grid-template-columns:1fr 1fr;gap:12px}.map-choice-task .simple-task-body button{min-height:48px;font-weight:bold}.map-choice-progress{font-size:14px}.map-choice-statement{font-weight:bold;font-size:19px}
.revision-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}.revision-pair figure{margin:0;min-width:0}.revision-pair img{width:100%;height:160px;object-fit:contain;background:#fff}.revision-pair button{width:100%;min-height:44px;font-size:13px}.dialogue:has(.revision-pair){width:min(940px,96vw);max-width:940px}
@media(max-width:700px){.revision-pair{gap:6px}.revision-pair img{height:110px}.revision-pair button{font-size:11px;padding:5px}}
@media(max-width:700px){.map-choice-pair{gap:6px}.map-choice-pair img{height:210px}.map-choice-pair button{font-size:12px;padding:6px}.map-choice-statement{font-size:16px}}
@media(max-width:700px){.task-dialog[data-task="6b"] .simple-task-body,.beach-recall{grid-template-columns:1fr}.task-dialog[data-task="6b"] .simple-task-body button{min-height:85px}}
.task-dialog[data-task="perspective-environment"] .simple-task-body button{min-height:140px;border:2px solid #b49b63;border-radius:14px;white-space:normal}
.task-dialog[data-task="perspective-environment"] .choice-icon{display:block;font-size:32px;margin-bottom:10px}
.dialogue:has(.bike-recall){width:min(980px,96vw);max-width:980px}
.bike-recall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:15px 0}
.bike-recall article{background:#fff8e5;border:1px solid #b49b63;border-radius:10px;overflow:hidden;padding:10px}
.bike-recall img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px}.bike-recall h3{font-size:17px}.bike-recall p{font-size:15px}
@media(max-width:700px){.bike-recall{grid-template-columns:1fr}.bike-recall img{max-height:110px}.task-dialog[data-task="perspective-environment"] .simple-task-body{grid-template-columns:1fr}.task-dialog[data-task="perspective-environment"] .simple-task-body button{min-height:90px}}
.task-dialog[data-task="7b"] .drop-zone.filled .drop-target{display:none}
.revision-housing-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.revision-housing-results>span{border:1px solid #b49b63;border-radius:8px;padding:12px;background:#fff8e5}@media(max-width:700px){.revision-housing-results{grid-template-columns:1fr}}
.task-dialog[data-task="7b"] .term-card.matched{position:absolute;top:0;left:0;width:100%;height:auto;max-height:100%;min-height:0;margin:0;padding:5px;overflow:auto;font-size:clamp(11px,1.2vw,16px);background:#fff9d9}
.task-dialog:is([data-task="7a"],[data-task="7c"],[data-task="7e"],[data-task="7f"],[data-task="7-plant-adaptations"]) .drop-zone{display:flex;flex-direction:column;gap:5px;padding:6px;overflow:auto}
.task-dialog:is([data-task="7a"],[data-task="7c"],[data-task="7e"],[data-task="7f"],[data-task="7-plant-adaptations"]) .drop-target{height:auto;min-height:44px;flex:0 0 auto;font-weight:bold}
.task-dialog:is([data-task="7a"],[data-task="7c"],[data-task="7e"],[data-task="7f"],[data-task="7-plant-adaptations"]) .term-card.matched{height:auto;min-height:32px;flex:0 0 auto;padding:6px;font-size:14px}
@media(pointer:coarse){.hotspot.bike-motif{min-width:44px;min-height:44px}}
@media(max-width:700px){.bike-marker{width:24px;height:24px;font-size:12px;border-width:2px}}
.task-dialog[data-task="8a"] .drop-zone{display:flex;flex-direction:column;gap:5px;padding:6px;overflow:auto}
.task-dialog[data-task="8a"] .drop-target{height:auto;min-height:44px;flex:0 0 auto;font-weight:bold}
.task-dialog[data-task="8a"] .term-card.matched{height:auto;min-height:32px;flex:0 0 auto;padding:6px;font-size:14px}