/* Stufe 3: warme Flächen, Cormorant und Spectral, wenige große Bewegungen. Nur transform, opacity und clip-path; Gesichter werden nicht verzerrt. */
:root{/* Farben aus Inkas 74 Instagram-Beiträgen der letzten 365 Tage */--wand:#f8f6f4;--flaeche:#ece8e4;--linie:#dbd4cf;--rose:#e6dcd8;--mauve:#937869;--tuer:#615046;--tuer-hell:#7d6558;--kiefer:#a59489;--taupe:#937869;--taupe-dunkel:#615046;--nacht:#211c19;--tinte:#211c19;--text:#3d3531;--text-2:#615046;
 --head:"Cormorant","Cormorant Ersatz",Georgia,serif;--sans:"Spectral","Spectral Ersatz",Georgia,serif;--basis:clamp(1.08rem,1.04rem + .18vw,1.2rem);
 --h1:clamp(3.3rem,2.1rem + 5vw,7.2rem);--h2:clamp(2.6rem,1.9rem + 2.8vw,4.8rem);--h3-g:clamp(1.6rem,1.4rem + .7vw,2.15rem);--kopf:74px}
@font-face{font-family:"Cormorant";src:url(../fonts/Cormorant-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Cormorant";src:url(../fonts/Cormorant-300i.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant";src:url(../fonts/Cormorant-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cormorant";src:url(../fonts/Cormorant-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Beauty Signature Strich";src:url(../fonts/BeautySignatureStrich.woff2) format("woff2");font-display:block}
@font-face{font-family:"Spectral";src:url(../fonts/Spectral-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Spectral";src:url(../fonts/Spectral-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Spectral";src:url(../fonts/Spectral-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Spectral";src:url(../fonts/Spectral-600.woff2) format("woff2");font-weight:600;font-display:swap}
/* Ersatz mit gleichen Maßen, damit beim Laden nichts verrutscht */
@font-face{font-family:"Cormorant Ersatz";src:local("Georgia");size-adjust:87.8%;ascent-override:104.8%;descent-override:33%;line-gap-override:0%}
@font-face{font-family:"Beauty Signature";src:url(../fonts/BeautySignature.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Signatur Ersatz";src:local("Georgia Italic");size-adjust:54.3%;ascent-override:180%;descent-override:72%;line-gap-override:0%}
@font-face{font-family:"Spectral Ersatz";src:local("Georgia");size-adjust:100.2%;ascent-override:105.7%;descent-override:45.9%;line-gap-override:0%}
html,body{background:var(--wand)!important;color:var(--text)!important;font-family:var(--sans)!important}
h1,h2{font-family:var(--head)!important;font-weight:300;word-spacing:normal;letter-spacing:-.008em;line-height:1.03;color:var(--tinte)}
h3{font:400 var(--h3-g)/1.15 var(--head);margin:0 0 .4em;color:var(--tinte)}
.fuss h3{font:600 var(--klein)/1.3 var(--sans)}
.preisliste strong{font-size:1.04em}
.ton{background:var(--flaeche)}.fuss{background:var(--flaeche)}.hinweiszeile{background:var(--rose)}
main,section{overflow-x:clip}
.strecke figure a,.album a{display:block}
.strecke figure,.moment-bild,.raster a{overflow:hidden}.randlos figure{margin:0}

/* Kopf. Lokal .kopf, in WordPress der Blocksy-Header: über dem Vollbild durchsichtig, beim Scrollen fest */
.kopf,#header{position:fixed!important;top:0;left:0;right:0;z-index:60;background:color-mix(in srgb,var(--wand) 96%,transparent);border-bottom:1px solid var(--linie);transition:background .35s,border-color .35s,box-shadow .35s}
.kopf .wrap{min-height:var(--kopf)}
main{padding-top:var(--kopf)}
body.hat-vollbild main{padding-top:0}
body.hat-vollbild:not(.gescrollt) .kopf,body.hat-vollbild:not(.gescrollt) #header{background:transparent;border-color:transparent}
body.hat-vollbild:not(.gescrollt) .logo img,body.hat-vollbild:not(.gescrollt) #header .site-logo-container img,body.hat-vollbild:not(.gescrollt) #header .site-logo img{filter:brightness(0) invert(1) drop-shadow(0 1px 8px rgba(0,0,0,.3))}
body.hat-vollbild:not(.gescrollt) .nav a,body.hat-vollbild:not(.gescrollt) #header .ct-menu-link{color:#fff!important;text-shadow:0 1px 10px rgba(0,0,0,.35)}
body.hat-vollbild:not(.gescrollt) .burger,body.hat-vollbild:not(.gescrollt) #header .ct-header-trigger{color:#fff!important;--theme-icon-color:#fff}
body.hat-vollbild:not(.gescrollt) .kopf .btn,body.hat-vollbild:not(.gescrollt) #header .ct-button{background:rgba(255,255,255,.14)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.logo img{width:clamp(150px,15vw,205px);height:auto;transition:filter .35s}
.nav a{position:relative;border:0!important;color:var(--text)}
.nav a::after,#header .ct-menu-link::after{content:"";position:absolute;left:0;right:0;bottom:.3rem;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ruhig)}
.nav a:hover::after,.nav a[aria-current]::after,#header .ct-menu-link:hover::after,#header .current-menu-item>.ct-menu-link::after{transform:scaleX(1)}
.kopf .btn,#header .ct-button{background:var(--tuer)!important;color:#fff!important;border-radius:0!important}
.burger{position:relative;z-index:2;color:var(--tinte)}
@media(max-width:1280px){.burger{display:block}.kopf .btn{display:none}.nav{position:fixed;inset:0;background:var(--wand);padding:calc(var(--kopf) + 1rem) var(--rand) 2rem;transform:translateY(-105%);visibility:hidden;transition:transform .5s var(--ruhig),visibility 0s .5s;overflow:auto;z-index:-1}.nav.offen{transform:none;visibility:visible;transition:transform .5s var(--ruhig)}.nav ul{flex-direction:column;gap:0}.nav li{border-bottom:1px solid var(--linie)}.nav a{display:block;font:400 clamp(1.7rem,6vw,2.4rem)/1.2 var(--head);padding:.6rem 0;color:var(--tinte)!important;text-shadow:none!important}.nav a::after{display:none}}
@media(min-width:1281px){.nav ul{gap:clamp(.7rem,1.2vw,1.3rem)}.nav a{font-size:.95rem}.nur-mobil{display:none}}
.ct-footer{display:none!important}

/* ===== Anker 1: Das Bild hängt sich an die Wand ===== */
.buehne{position:relative;background:linear-gradient(180deg,var(--wand),var(--flaeche))}
.buehne-klebe{position:relative;display:flex;flex-direction:column;min-height:100svh;padding-top:calc(var(--kopf) + 1rem);overflow:hidden}
.buehne-wand{flex:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(1rem,2.4vh,2rem);padding-bottom:1.4rem}
.buehne .wand-reihe{width:100%;display:flex;gap:clamp(.7rem,1.5vw,1.5rem);align-items:flex-start;max-width:min(100%,calc((100svh - 350px)*2.6));margin-inline:auto}
.bild-rahmen{flex:calc(var(--ar)*100) 1 0;margin:0;background:#fff;padding:clamp(5px,.75vw,11px);border:4px solid #e6e3e1;outline:1px solid #c0aa9d;box-shadow:0 1px 2px rgba(50,38,30,.14),0 18px 30px -16px rgba(50,38,30,.42);min-width:0;cursor:default}
.bild-rahmen>span{display:block;aspect-ratio:var(--ar);background-size:cover}.bild-rahmen img{width:100%;height:100%;object-fit:cover}
.wand-reihe .bild-rahmen:nth-child(2){border-color:#615046;outline-color:#211c19}
.buehne-text{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--spalt);align-items:center}
.buehne-text .aktionen{margin-top:0;justify-content:flex-end}
.buehne .boden{flex:none;height:clamp(54px,9vh,96px);position:relative;background:url(../img/dielen.webp) center/cover}
.buehne .boden::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px;background:#fff;border-top:1px solid #ddd5c8;box-shadow:0 2px 3px rgba(60,40,20,.18)}
@media(max-width:860px){.buehne .wand-reihe{flex-wrap:wrap;max-width:none}.wand-reihe .bild-rahmen:first-child{flex:1 0 100%}.buehne-text{grid-template-columns:1fr;gap:.9rem}.buehne-text .aktionen{justify-content:flex-start}.buehne-text .lead{font-size:1.02rem}}
.buehne-titel{display:none}
.buehne.laeuft{height:260vh;overflow-anchor:none}
/* 100vh ist die Höhe ohne Adressleiste und bleibt beim Scrollen gleich */
.buehne.laeuft .buehne-klebe{position:sticky;top:0;height:100vh}
.buehne.misst .bild-rahmen,.buehne.misst .boden,.buehne.misst .buehne-unten{animation:none!important;transform:none!important}
.buehne.laeuft .bild-rahmen:first-child{position:relative;z-index:5;transform-origin:0 0;animation:hb-haupt linear both;animation-timeline:scroll(root);animation-range:0 150vh}
@keyframes hb-haupt{0%,8%{transform:translate(var(--dx),var(--dy)) scale(var(--sk))}100%{transform:none}}
.buehne.laeuft .bild-rahmen:nth-child(2){animation:hb-b linear both;animation-timeline:scroll(root);animation-range:55vh 150vh}
.buehne.laeuft .bild-rahmen:nth-child(3){animation:hb-c linear both;animation-timeline:scroll(root);animation-range:70vh 160vh}
@keyframes hb-b{from{opacity:0;transform:translateY(46vh)}to{opacity:1;transform:none}}
@keyframes hb-c{from{opacity:0;transform:translateY(70vh)}to{opacity:1;transform:none}}
.buehne.laeuft .boden{animation:hb-boden linear both;animation-timeline:scroll(root);animation-range:60vh 150vh}
@keyframes hb-boden{from{transform:translateY(110%)}to{transform:none}}
.buehne.laeuft .buehne-unten{animation:hb-text linear both;animation-timeline:scroll(root);animation-range:115vh 165vh}
@keyframes hb-text{from{opacity:0;transform:translateY(5vh)}to{opacity:1;transform:none}}
.buehne.laeuft .buehne-titel{display:block;position:absolute;z-index:6;left:var(--rand);right:var(--rand);bottom:clamp(2rem,7vh,5rem);color:#fff;max-width:13ch;font-weight:400;font-size:clamp(3.6rem,2.3rem + 6.6vw,9rem);text-shadow:0 2px 26px rgba(0,0,0,.42);pointer-events:none;animation:hb-titel linear both;animation-timeline:scroll(root);animation-range:0 55vh}
@keyframes hb-titel{to{opacity:0;transform:translateY(-26vh)}}
.buehne.laeuft .buehne-h1-still{display:none}
.scroll-hinweis{display:none}
.buehne.laeuft .scroll-hinweis{display:block;position:absolute;z-index:6;right:var(--rand);bottom:clamp(2rem,7vh,5rem);width:1px;height:64px;background:rgba(255,255,255,.75);animation:hb-titel linear both;animation-timeline:scroll(root);animation-range:0 30vh}

/* ===== Vollbild-Kopf der Unterseiten: große, ruhige Parallaxe ===== */
.vollbild{position:relative;height:clamp(460px,92svh,1000px);overflow:hidden;background:var(--nacht);display:flex;align-items:flex-end}
.vollbild>img{position:absolute;inset:0;width:100%;height:118%;max-width:none;object-fit:cover;object-position:var(--pos,50% 40%)}
.vollbild::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(180deg,rgba(25,15,10,0),rgba(25,15,10,.58))}
.vollbild .wrap{position:relative;z-index:2;padding-bottom:clamp(2rem,7vh,5rem)}
.vollbild h1{color:#fff;font-weight:400;font-size:clamp(3.5rem,2.3rem + 6vw,8.2rem);text-shadow:0 2px 26px rgba(0,0,0,.36);max-width:16ch}
.nacht-kopf{padding-top:calc(var(--kopf) + 1.5rem)!important}

/* ===== Ausrufflächen ===== */
.ausruf{position:relative;isolation:isolate;overflow:hidden}
.ausruf-seide{background:#e9e4e0}
.ausruf-seide::before{content:"";position:absolute;inset:-14% 0;z-index:-2;background:url(../img/seide-2400.webp) center/cover}
.ausruf-seide::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(248,246,244,.74),rgba(248,246,244,.2) 62%,rgba(248,246,244,0))}
.ausruf-seide .wrap{padding-block:clamp(5rem,12vw,11rem);min-height:min(82vh,760px);display:flex;flex-direction:column;justify-content:center}
.ausruf-seide h2{font-size:clamp(3.1rem,2rem + 5vw,7.4rem);max-width:13ch}
.ausruf-seide .lead{margin-top:1em;max-width:36ch}
.ausruf-seide .blume{right:4vw;bottom:-4%;height:96%;opacity:.8}
@media(max-width:860px){.ausruf-seide::before{background-image:url(../img/seide-1200.webp)}.ausruf-seide::after{background:rgba(248,246,244,.55)}.ausruf-seide .wrap{padding-bottom:13rem}.ausruf-seide .blume{right:-6vw;height:200px;opacity:.65;bottom:0}}
.ausruf-nacht{background:var(--nacht);color:#efe8df;padding-block:clamp(6rem,16vw,15rem)}
.ausruf-nacht blockquote{position:relative;z-index:3;margin:0 auto;font:300 clamp(2.7rem,1.7rem + 4.3vw,6.6rem)/1.08 var(--head);max-width:17ch;text-align:center;color:#fff;letter-spacing:-.01em}
.ausruf-nacht cite{display:block;margin-top:1.4rem;font:400 var(--basis)/1.4 var(--sans);letter-spacing:0;color:#cdbfb2}
.ausruf-nacht figure{position:absolute;margin:0;z-index:1}
.ausruf-nacht .eb-a{left:clamp(.5rem,3vw,3.5rem);top:6%;width:clamp(130px,21vw,380px)}
.ausruf-nacht .eb-b{right:clamp(.5rem,3vw,3.5rem);bottom:5%;width:clamp(130px,23vw,410px)}
.ausruf-nacht figure img{width:100%;height:auto}
@media(max-width:860px){.ausruf-nacht{padding-block:0}.ausruf-nacht .inner{display:flex;flex-direction:column;gap:2.4rem;padding-block:3.5rem}.ausruf-nacht figure{position:static;width:64%!important}.ausruf-nacht .eb-b{align-self:flex-end}.ausruf-nacht blockquote{text-align:left;padding-inline:var(--rand)}}

/* Blumen: nur auf freien Flächen, wachsen beim Scrollen von unten */
.hat-blume{position:relative;isolation:isolate}
.blume{position:absolute;z-index:-1;pointer-events:none;height:clamp(240px,62%,620px);width:auto;max-width:none;right:1vw;bottom:0;opacity:.6}
.blume.oben{bottom:auto;top:clamp(.5rem,2vw,1.5rem);height:clamp(170px,23vw,340px)}
@media(max-width:860px){.blume.oben{height:150px;opacity:.42;right:-2vw;top:.4rem}}


/* Instagram */
.ig{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--eng);list-style:none;margin:0;padding:0}
.ig a{position:relative;display:block;overflow:hidden;background:var(--flaeche);text-decoration:none;aspect-ratio:4/5}
.ig img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ruhig)}
.ig a:hover img{transform:scale(1.04)}
.ig span{position:absolute;inset:auto 0 0;padding:2.6rem .9rem .8rem;color:#fff;font-size:var(--klein);line-height:1.35;background:linear-gradient(180deg,rgba(25,15,10,0),rgba(25,15,10,.66));opacity:0;transform:translateY(8px);transition:opacity .3s,transform .4s var(--ruhig)}
.ig a:hover span,.ig a:focus-visible span{opacity:1;transform:none}
@media(hover:none){.ig span{opacity:1;transform:none}}
.ig-kopf{display:flex;flex-wrap:wrap;gap:.5rem 2rem;align-items:baseline;justify-content:space-between;margin-bottom:clamp(1.2rem,2.5vw,2rem)}
@media(max-width:760px){.ig{grid-template-columns:1fr 1fr}.ig span{font-size:.86rem;padding:2rem .6rem .55rem}}

/* Album und Stimmen */
.album{display:flex;gap:clamp(.6rem,1.4vw,1.2rem);list-style:none;margin:0;padding:.4rem var(--rand) 1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-color:var(--kiefer) transparent}
.album li{flex:none;width:min(88vw,1020px);scroll-snap-align:center;background:#fff;box-shadow:0 12px 22px -14px rgba(50,38,30,.55)}.album img{width:100%;height:auto}
.eine-stimme{font:400 clamp(1.7rem,1.4rem + 1.3vw,2.9rem)/1.12 var(--head);max-width:26ch}
.eine-stimme cite{font-family:var(--sans)}
.reihe{display:flex;gap:var(--eng)}
@media(max-width:640px){.reihe{flex-wrap:wrap}.reihe figure{flex:1 1 44%}.reihe figure:first-child:nth-last-child(3),.reihe figure:first-child:nth-last-child(1){flex-basis:100%}}
.siegel-hp{display:block;margin-top:1rem;width:150px;height:auto;background:#fff;padding:4px}

/* Große Bewegungen: wenige Elemente, weite Wege */
@media(prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
 .vollbild>img{animation:vb linear both;animation-timeline:scroll(root);animation-range:0 100vh}
 @keyframes vb{from{transform:translateY(0) scale(1.08)}to{transform:translateY(-15%) scale(1)}}
 .vollbild h1{animation:vbt linear both;animation-timeline:scroll(root);animation-range:0 70vh}
 @keyframes vbt{to{opacity:0;transform:translateY(-18vh)}}
 .ausruf-nacht .eb-a{animation:eb-a linear both;animation-timeline:view();animation-range:cover}
 .ausruf-nacht .eb-b{animation:eb-b linear both;animation-timeline:view();animation-range:cover}
 @keyframes eb-a{from{transform:translateY(34vh)}to{transform:translateY(-34vh)}}
 @keyframes eb-b{from{transform:translateY(-22vh)}to{transform:translateY(46vh)}}
 .ausruf-seide::before{animation:seide linear both;animation-timeline:view();animation-range:cover}
 @keyframes seide{from{transform:translateY(-9%)}to{transform:translateY(9%)}}
 .blume{animation:wachsen linear both;animation-timeline:view();animation-range:entry 10% cover 55%}
 @keyframes wachsen{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
 @media(max-width:860px){.ausruf-nacht .eb-a,.ausruf-nacht .eb-b{animation:none}}
}}
