/* A full-width gallery moment. The photograph supplies all material and light. */
.value-story{position:relative;isolation:isolate;display:flex;align-items:center;min-height:100svh;overflow:clip;background:var(--deep);color:var(--cream);padding:128px var(--gutter) 86px;outline:none;border-block:1px solid #b6a27a66}
.value-image-window{position:absolute;inset:0;z-index:-2;overflow:hidden;clip-path:inset(0);background:var(--deep)}
.value-image-drift{position:absolute;inset:-85px 0;transform:translate3d(0,0,0)}
.value-image-drift picture,.value-image-drift img{display:block;width:100%;height:100%}
.value-image-drift img{object-fit:cover;object-position:50% 50%}
.value-exposure{position:absolute;inset:0;background:var(--deep);opacity:0;pointer-events:none}
.value-copy{position:relative;width:100%;max-width:740px;padding-left:clamp(0px,2.6vw,42px)}
.value-eyebrow{display:flex;align-items:center;gap:18px;margin:0 0 30px;font:500 10px/1.5 Archivo,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.value-eyebrow::before{content:'';width:42px;height:1px;background:currentColor;transform-origin:left}
.value-story h2{font:350 clamp(54px,5.2vw,80px)/1.055 'Luxus Serif',Georgia,serif;font-variation-settings:normal;letter-spacing:-.045em;margin:0;text-wrap:initial}
.value-line{display:block;overflow:clip;padding-bottom:.12em;margin-bottom:-.12em}
.value-line>span{display:block}
.value-line:last-child{color:#c7b58e}
.value-description{font:350 15px/1.85 Archivo,sans-serif;font-variation-settings:'wdth' 100,'wght' 350;color:#d4cdbf;max-width:405px;margin:30px 0 0;text-wrap:pretty}
.value-quill-anchor{position:absolute;right:clamp(54px,8vw,140px);top:42%;width:1px;height:1px;pointer-events:none}
.masthead[data-value='true']{background:var(--deep)}
.value-story[data-entered='true'][data-motion='full'] .value-line>span{animation:value-type-enter 1100ms cubic-bezier(.2,.7,.18,1) both}
.value-story[data-entered='true'][data-motion='full'] .value-line:nth-child(2)>span{animation-delay:95ms}
.value-story[data-entered='true'][data-motion='full'] .value-line:nth-child(3)>span{animation-delay:190ms}
.value-story[data-entered='true'][data-motion='full'] .value-description{animation:value-copy-enter 900ms 260ms ease-out both}
.value-story[data-entered='true'][data-motion='full'] .value-eyebrow::before{animation:value-rule-enter 1000ms cubic-bezier(.2,.7,.18,1) both}
@keyframes value-type-enter{from{transform:translate3d(0,105%,0);opacity:.1}to{transform:translate3d(0,0,0);opacity:1}}
@keyframes value-copy-enter{from{transform:translate3d(0,16px,0);opacity:0}to{transform:translate3d(0,0,0);opacity:1}}
@keyframes value-rule-enter{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(min-width:701px) and (max-width:1100px){.value-copy{padding-left:0;max-width:610px}.value-story h2{font-size:clamp(48px,5.2vw,62px)}.value-description{max-width:340px;font-size:14px}.value-image-drift img{object-position:55% 50%}}
@media(min-width:701px) and (max-height:700px){.value-story{padding-top:115px;padding-bottom:58px}.value-story h2{font-size:clamp(51px,5vw,70px)}.value-eyebrow{margin-bottom:22px}.value-description{margin-top:23px}}
@media(max-width:700px){
 .value-story{align-items:flex-start;min-height:100svh;padding:111px 28px 46px}
 .value-copy{padding:0;max-width:100%}.value-eyebrow{font-size:9px;letter-spacing:.1em;gap:13px;margin-bottom:23px}.value-eyebrow::before{width:26px}
 .value-story h2{font-size:clamp(35px,9.55vw,55px);line-height:1.09;letter-spacing:-.045em}
 .value-description{font-size:12px;line-height:1.8;max-width:305px;margin-top:23px}
 .value-image-drift{inset:-34px 0}.value-image-drift img{object-position:78% 50%}
 .value-quill-anchor{right:26px;top:57%}
}
@media(max-width:700px) and (max-height:720px){.value-story{min-height:760px;padding-top:105px}}
@media(prefers-reduced-motion:reduce){.value-story *{animation:none!important}.value-image-window{clip-path:none!important}.value-image-drift{transform:none!important}.value-exposure{opacity:0!important}}
/* Feedback 29.9.: Wert, Häuser und Sichtbarkeit liegen wie Blätter übereinander. Die nächste Sektion schiebt sich von unten über die vorige.
   --stapel-oben setzt kopf.js, damit eine höhere Sektion erst mit ihrer Unterkante stehen bleibt. Hier, weil diese Datei nach houses.css lädt.
   Reihenfolge seit 29.9. abends: Wert, Häuser, Sichtbarkeit, Leistungen, Auswahl. Die Häuser bleiben bis zum Seitenende stehen,
   darum braucht jede spätere Sektion Ebene 3, sonst liegt sie darunter (Leistungen standen früher vor dem Stapel). */
@media(min-width:701px){
 .value-story,.houses{position:sticky;top:var(--stapel-oben,0px)}
 .value-story{z-index:1}.houses{z-index:2}
 .services,.selection,.visibility,.inquiry,.site-footer{z-index:3}
 .houses,.visibility{box-shadow:0 -34px 70px -38px #000c}
}
