/* Testseite: Bereiche als Vollbild-Kapitel, die beim Wischen nach oben übereinander gleiten. */
.bereiche{position:relative;margin-top:70px}
.bereich-snap{display:block;height:0}
html.im-bereich .bg-switch{opacity:0;pointer-events:none}
.bereich{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0c0e12;color:#f6efe2;box-shadow:0 -24px 60px #000a}
.bereich-hg{position:absolute;inset:-60px;width:calc(100% + 120px);height:calc(100% + 120px);max-width:none;object-fit:cover;filter:blur(34px) brightness(.5) saturate(1.1)}
.bereich-bild{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;transform:scale(1.06);transition:transform 7s cubic-bezier(.2,.6,.2,1)}
.bereich::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,#000000cc 0%,#00000094 22%,#00000033 40%,#0000 52%,#0000 58%,#00000080 76%,#000000d9 100%)}
.bereich-kopf,.bereich-text{position:absolute;left:0;right:0;z-index:2;padding-inline:max(26px,calc(50% - 340px));text-align:center}.bereich-kopf{top:0;padding-top:max(48px,7svh)}.bereich-text{bottom:0;padding-bottom:max(54px,8svh)}
.bereich-mark{width:46px;margin:0 auto 14px;opacity:.9}
.bereich-caps{margin:0 0 6px;font:600 11px/1.4 'Jost','Helvetica Neue',Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#efe6d6cc}
.bereich-titel{text-wrap:balance;margin:0;font:italic 400 clamp(44px,6vw,84px)/1.02 'Cormorant Garamond',Garamond,Georgia,serif;letter-spacing:-.01em;text-shadow:0 2px 18px #000a}
.bereich-copy{text-wrap:balance;margin:0 auto;max-width:600px;font:400 clamp(19px,1.6vw,23px)/1.5 'Cormorant Garamond',Garamond,Georgia,serif;color:#f6efe2;text-shadow:0 1px 10px #000c}
/* Einblenden: Zeichen, Titel und Text nacheinander, aus der Unschärfe. */
.bereich-kopf>*,.bereich-text>*{opacity:0;transform:translateY(26px);filter:blur(10px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1),filter 1.1s ease}
.bereich.sichtbar :is(.bereich-kopf,.bereich-text)>*{opacity:1;transform:none;filter:none}
.bereich.sichtbar .bereich-ebene.an .bereich-bild{transform:scale(1)}
.bereich-kopf>:nth-child(2){transition-delay:.12s}.bereich-kopf>:nth-child(3){transition-delay:.28s}.bereich-kopf>:nth-child(4){transition-delay:.5s}.bereich-text>*{transition-delay:.6s}
.bereich-weiter{position:fixed;right:22px;top:50%;z-index:20;display:flex;flex-direction:column;gap:7px;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .5s}
html.im-bereich .bereich-weiter{opacity:1}
.bereich-weiter span{display:block;width:2px;height:14px;background:#f6efe24d;transition:background .4s,height .4s}
.bereich-weiter span.an{background:#f6efe2;height:26px}
@media(max-width:800px){.bereich-bild{object-fit:cover}.bereich-hg{display:none}.bereich-text{padding-bottom:max(40px,6svh)}.bereich-kopf{padding-top:max(40px,6svh)}.bereich-titel{font-size:42px}.bereich-copy{font-size:19px}.bereich-weiter{right:12px}}
@media(prefers-reduced-motion:reduce){.bereich-kopf>*,.bereich-text>*,.bereich-bild{transition:opacity .5s ease;transform:none!important;filter:none!important}}
@media(max-width:800px){.bereich-bild-rechts{object-position:72% center}}
/* Mehrere Bilder je Bereich: weiche Überblendung, nur im aktuellen Bereich. */
.bereich-ebene{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease}.bereich-ebene.an{opacity:1}
.bereich-unterzeile{margin:14px auto 0;max-width:560px;text-wrap:balance;font:400 clamp(21px,2vw,28px)/1.35 'Cormorant Garamond',Garamond,Georgia,serif;color:#f6efe2;text-shadow:0 1px 12px #000c}
@media(max-width:800px){.bereich-unterzeile{font-size:21px;margin-top:10px}}
/* Unterzeile steht unten statt des Fließtexts */
.bereich-text .bereich-unterzeile{margin:0 auto;max-width:600px;font-size:clamp(24px,2.2vw,31px);line-height:1.32}
@media(max-width:800px){.bereich-text .bereich-unterzeile{font-size:24px}}
.bereich-nb{white-space:nowrap}