/* Scoped to the photographic opening; the existing story and its renderer follow. */
body.opening-active{background:#101210}.opening-active #visual{opacity:1!important}.opening-transition #visual{opacity:1!important}
#opening-stage{position:fixed;inset:68px 0 0;background:transparent;z-index:0;pointer-events:none;font-family:Outfit,Arial,sans-serif}
.opening-viewport{position:relative;height:clamp(680px,calc(46.7vw + 80px),980px);max-height:calc(100svh - 110px);min-height:520px;overflow:hidden;isolation:isolate}
.opening-terrain,.opening-wash{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.opening-wash{background:linear-gradient(180deg,#101210 0%,#101210f5 17%,#101210a8 29%,#10121014 49%,transparent 65%);z-index:1}
.opening-scene{position:absolute;bottom:0;width:83%;left:calc(50% - 83% * 1085 / 1673);z-index:2;will-change:transform}.opening-rig{position:relative;will-change:transform}.opening-photo{display:block;width:100%;height:auto;aspect-ratio:1673/941}
.opening-active #besoins .copy{position:fixed;inset:0;max-width:none;pointer-events:none;z-index:3;visibility:visible!important}.opening-active #besoins .heading{position:absolute;top:100px;left:0;right:0;text-align:center;max-width:none}.opening-active #besoins .heading h1{font:400 clamp(80px,8.4vw,112px)/1.02 Outfit,Arial,sans-serif;letter-spacing:-.065em;transform:scale(var(--opening-title-scale,1));transform-origin:50% 0}.opening-active #besoins .chapter-kicker{font:400 10px Outfit,Arial,sans-serif;letter-spacing:.22em;margin-bottom:12px;color:#d2bc91}.opening-active #besoins .detail{position:absolute;top:245px;bottom:auto;left:5%;right:5%;max-width:640px;margin:auto;text-align:center;padding:0;background:none;opacity:1!important;transform:translateY(var(--opening-detail-y,0))!important}.opening-active #besoins .detail .lead{font:400 16px/1.4 Outfit,Arial,sans-serif}.opening-active #besoins .detail>p:not(.lead){font:400 13px/1.5 Outfit,Arial,sans-serif;margin:auto}.opening-active #besoins .chapter-actions,.opening-active .scroll-cue,.opening-active .reveal-hint{display:none!important}.opening-transition #besoins .copy{opacity:0!important;transition:opacity .35s}
.opening-pause,.opening-skip{position:absolute;top:26px;z-index:5;pointer-events:auto;background:none;color:#f0eee5;border:0;border-bottom:1px solid #d2bc9199;padding:8px 0;min-height:44px;font:400 12px Outfit,Arial,sans-serif;cursor:pointer}.opening-pause{left:5%}.opening-skip{right:5%}.opening-cue{position:absolute;z-index:5;left:50%;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;gap:8px;min-width:140px;min-height:88px;padding:8px 16px;pointer-events:auto;background:radial-gradient(ellipse,#10121099 10%,#10121066 45%,transparent 72%);color:#f0eee5;border:0;font:400 12px Outfit,Arial,sans-serif;cursor:pointer;text-shadow:0 1px 4px #000}.opening-cue svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;animation:opening-invite 1.8s ease-in-out infinite}@keyframes opening-invite{0%,100%{transform:translateY(-3px)}50%{transform:translateY(5px)}}
.opening-active .masthead{background:linear-gradient(#101210,#101210e6,transparent)}.opening-active .reading-tools{background:none}.opening-active .reading-tools #colors{display:none}
@media(max-width:800px){#opening-stage{top:60px}.opening-viewport{height:calc(250px + 91.7vw);min-height:0;max-height:calc(100svh - 110px)}.opening-scene{width:163%;left:calc(50% - 163% * 1085 / 1673)}.opening-active #besoins .heading{position:absolute;top:88px}.opening-active #besoins .heading h1{font-size:clamp(46px,15vw,64px)}.opening-active #besoins .detail{position:absolute;top:200px;left:7%;right:7%}.opening-active #besoins .detail .lead{font-size:16px}.opening-active #besoins .detail>p:not(.lead){font-size:13px}.opening-active #besoins .chapter-kicker{font-size:9px}.opening-pause,.opening-skip{top:218px;font-size:11px}.opening-pause{left:24%}.opening-skip{right:24%;transform:translateX(42%)}.opening-cue{font-size:11px;max-width:65%;min-height:78px;padding:6px 10px}.opening-cue svg{width:30px;height:44px}}
@media(max-height:650px) and (min-width:801px){.opening-viewport{min-height:0;height:calc(100svh - 110px)}.opening-active #besoins .heading{position:absolute;top:85px}.opening-active #besoins .heading h1{font-size:64px}.opening-active #besoins .detail{position:absolute;top:188px}.opening-scene{width:64%;left:calc(50% - 64% * 1085 / 1673)}}
@media(prefers-reduced-motion:reduce){.opening-cue svg{animation:none}.opening-transition #besoins .copy{transition:none}}.opening-still .opening-cue svg{animation:none}

.opening-transition #opening-stage{background:transparent}.reading-mode body.opening-active .chapter:not(#besoins),.reading-mode body.opening-active footer{visibility:hidden}:root{--ground:#101210}body{background:#101210}

.opening-active .reading-image,.opening-active .reading-intro{display:none!important}.opening-active #besoins .copy{width:100%;max-width:none;text-align:center}

body.opening-active main{pointer-events:none}

/* Shared typography and seamless lower edge across the three localized entries. */
h1,h2{font-family:Outfit,Arial,sans-serif}
.opening-viewport::after{content:"";position:absolute;inset:auto 0 0;height:clamp(85px,13svh,150px);z-index:3;background:linear-gradient(0deg,#101210 0%,#101210e6 24%,#10121066 62%,transparent 100%);pointer-events:none}
.opening-transition .opening-viewport::after{opacity:0;transition:opacity .55s}
/* Reading mode shows chapter photographs only, without the GPU placeholder. */
.reading-mode #visual,.reading-mode .reading-tools{display:none!important}
.reading-mode .chapter{scroll-margin-top:85px}
.reading-mode .copy{margin-inline:auto}
@media(max-width:800px){
 .opening-pause{left:7%;right:auto;transform:none}.opening-skip{right:7%;transform:none}
 html[lang=de] .opening-active #besoins .heading h1{font-size:clamp(36px,10vw,60px)}
 .opening-active #besoins .heading{padding-inline:5%}
}

/* Fit the opening to the actual viewport, including ultrawide/zoomed layouts. */
.masthead{padding:14px 4vw;min-height:100px}
.identity{font-size:20px;gap:16px}.identity img{width:88px;height:71px}
.header-nav{gap:20px}.header-nav button{font-size:17px}.languages a{font-size:15px;min-width:36px}
#opening-stage{top:100px}.opening-viewport{height:100%;max-height:none;min-height:0}
.opening-scene{bottom:auto}
.opening-active #besoins .heading{top:clamp(118px,12svh,170px)}
.opening-active #besoins .heading h1{font-size:clamp(64px,7vw,116px)}
.opening-active #besoins .chapter-kicker{font-size:14px;margin-bottom:14px}
.opening-active #besoins .detail{top:calc(clamp(118px,12svh,170px) + clamp(64px,7vw,116px) * 1.02 + 48px);max-width:820px}
.opening-active #besoins .detail .lead{font-size:clamp(18px,1.35vw,24px)}
.opening-active #besoins .detail>p:not(.lead){font-size:16px;max-width:700px}
.opening-pause,.opening-skip,.opening-cue{font-size:15px}
.opening-viewport::after{height:clamp(55px,8svh,100px)}
@media(max-width:800px){
 .masthead{min-height:80px;padding:8px 5vw;gap:8px}.identity{font-size:15px;gap:8px}.identity img{width:58px;height:47px}
 .header-nav{gap:4px}.header-nav button{font-size:14px;padding:6px}
 #opening-stage{top:80px}.opening-viewport{height:100%;max-height:none;min-height:0}
 .opening-active #besoins .heading{top:108px}.opening-active #besoins .heading h1{font-size:clamp(42px,12vw,64px)}
 html[lang=de] .opening-active #besoins .heading h1{font-size:clamp(32px,9vw,54px)}
 .opening-active #besoins .chapter-kicker{font-size:11px;margin-bottom:10px}
 .opening-active #besoins .detail{top:206px}.opening-active #besoins .detail .lead{font-size:17px}
 .opening-active #besoins .detail>p:not(.lead){font-size:14px}
 .opening-pause,.opening-skip{top:218px;font-size:12px}.opening-cue{font-size:13px}
}
@media(max-height:650px) and (min-width:801px){
 .masthead{min-height:76px;padding-block:8px}.identity img{width:66px;height:53px}
 #opening-stage{top:76px}.opening-active #besoins .heading{top:90px}.opening-active #besoins .heading h1{font-size:56px}
 .opening-active #besoins .chapter-kicker{font-size:11px}.opening-active #besoins .detail{top:192px}
 .opening-active #besoins .detail .lead{font-size:17px}.opening-active #besoins .detail>p:not(.lead){font-size:13px}
}

/* The photographic opening replaces the old first scroll chapter. */
body.opening-complete #besoins{display:none!important}
body.opening-complete .scroll-cue{display:none!important}

/* A material detail closes the story, without repeating the collective scene. */
footer .closing-brand{width:min(100%,440px);justify-self:end}
footer .closing-brand img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:1;object-fit:contain;border-radius:22px}
@media(max-width:800px){footer .closing-brand{width:min(100%,380px);justify-self:start}footer .closing-brand img{border-radius:16px}}

/* A quiet typographic reveal, preserving native words, line wrapping and accents. */
.type-mask{display:inline-block;overflow:clip;vertical-align:bottom;white-space:nowrap;padding:.14em .06em .2em;margin:-.14em -.06em -.2em}
.type-ink{display:inline-block;transform-origin:50% 100%}
.opening-active .heading h1 .line{overflow:visible}
@media(prefers-reduced-motion:reduce){.type-ink{transform:none!important;opacity:1!important}}

/* Smoked liquid glass: readable surfaces, fine highlights and restrained depth. */
:root{--glass-fill:linear-gradient(145deg,#ffffff1f 0%,#ffffff07 44%,#d7c6ad12 100%),#191c1bb8;--glass-edge:#ffffff36;--glass-shadow:inset 0 1px 0 #ffffff40,inset 0 -1px 0 #ffffff0d,0 6px 22px #0003}
:is(.header-nav button,.opening-pause,.opening-skip,.opening-cue,.reading-tools button,#motion,.action,.next,.return-story,.cancel-loading,.direct-visit){
 background:var(--glass-fill);color:#f6f3ec;border:1px solid var(--glass-edge);border-radius:999px;
 box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(18px) saturate(135%);backdrop-filter:blur(18px) saturate(135%);
 text-shadow:0 1px 3px #0005;transition:background .2s,border-color .2s,box-shadow .2s;
}
.header-nav{gap:12px}.header-nav button{padding:10px 20px}
.opening-pause,.opening-skip{padding:10px 18px;min-height:44px}
.opening-cue{padding:10px 22px;border-radius:28px;min-height:88px;max-width:240px}
.action,.next{padding:11px 20px}.action.primary{background:linear-gradient(145deg,#ffffff24,#ffffff00 60%),#613b50d9;border-color:#e9b5c28c;color:#fff}
.reading-tools button[aria-pressed=true]{background:linear-gradient(145deg,#ffffff24,#ffffff00 60%),#613b50d9;border-color:#e9b5c28c}
.header-nav .languages{padding:3px;gap:2px;background:var(--glass-fill);border:1px solid var(--glass-edge);border-radius:999px;box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.header-nav .languages a{border:0;border-radius:50%;min-width:40px;color:#ddd9d2}
.header-nav .languages a[aria-current]{background:#ffffff21;color:#fff;box-shadow:inset 0 1px 0 #ffffff3d}
@media(hover:hover){
 :is(.header-nav button,.opening-pause,.opening-skip,.opening-cue,.reading-tools button,#motion,.action,.next,.return-story,.cancel-loading,.direct-visit):hover{background:linear-gradient(145deg,#ffffff2e,#ffffff0a 60%),#2c302de0;border-color:#ffffff70;box-shadow:inset 0 1px 0 #ffffff65,inset 0 -1px 0 #ffffff19,0 8px 26px #0004;color:#fff}
 .action.primary:hover{background:linear-gradient(145deg,#ffffff30,#ffffff08 60%),#70455de8}
 .header-nav .languages a:hover{background:#ffffff18;color:#fff}
}
:is(.header-nav button,.opening-pause,.opening-skip,.opening-cue,.reading-tools button,#motion,.action,.next):active{box-shadow:inset 0 2px 6px #0005,inset 0 1px 0 #ffffff24}
.story-dialog .close{background:linear-gradient(145deg,#ffffffa6,#ffffff33);border-color:#773b5b40;box-shadow:inset 0 1px 0 #fff,0 4px 14px #34202c14}
.story-dialog .action.primary{color:#fff;background:linear-gradient(145deg,#ffffff22,transparent),#773b5b}
.masthead{padding-block:5px}.identity img{width:112px;height:90px;flex-shrink:0}
@media(max-width:800px){
 .masthead{padding-block:8px}.identity img{width:76px;height:61px}.identity{font-size:14px}
 .header-nav{gap:6px}.header-nav button{padding:8px 12px;font-size:13px}
 .opening-pause,.opening-skip{padding:9px 14px}.opening-cue{padding:8px 18px;min-height:82px}
}
@media(max-width:380px){.masthead{padding-inline:4vw;gap:6px}.identity{gap:6px;font-size:12px}.identity img{width:68px;height:55px}.header-nav button{padding-inline:10px;font-size:12px}}
@media(max-height:650px) and (min-width:801px){.identity img{width:84px;height:68px}.masthead{padding-block:4px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 :is(.header-nav button,.opening-pause,.opening-skip,.opening-cue,.reading-tools button,#motion,.action,.next,.return-story,.cancel-loading,.direct-visit),.header-nav .languages{background-color:#252925}
}
@media(prefers-reduced-transparency:reduce){
 :is(.header-nav button,.opening-pause,.opening-skip,.opening-cue,.reading-tools button,#motion,.action,.next,.return-story,.cancel-loading,.direct-visit),.header-nav .languages{backdrop-filter:none;-webkit-backdrop-filter:none;background-color:#252925}
}
@media(prefers-reduced-motion:reduce){:is(.header-nav button,.opening-pause,.opening-skip,.opening-cue,.reading-tools button,#motion,.action,.next){transition:none}}