/* Olmoland: Intro, Übergänge und Feinschliff (liegt über style.css) */
@font-face{font-family:'Young Serif';src:url('assets/young-serif.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{--serif:'Young Serif',Georgia,serif;--weich:cubic-bezier(.22,.8,.24,1);--himmel-o:#e4efe0;--himmel-m:#fbeccd;--himmel-u:#f8d9aa;--fern:#b7cfa6;--fern-2:#93b483;--mitte:#6f9a62;--mitte-tier:#3b6643;--vorn:#315b3c;--vorn-tier:#1c3826;--radius:14px}

/* Typo und Grundelemente */
h1,h2{letter-spacing:-.02em;line-height:1.08}
h1 em,h2 em{font-style:normal;color:var(--ochre)}
.button{border-radius:999px;padding:13px 26px;transition:background .2s,color .2s,transform .25s var(--weich),box-shadow .25s}
.button:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px #23432e80}
.button.outline{background:#ffffffb0}
.text-link{transition:color .2s}
.experience,.animal,.price-card,.date-card,.inquiry,.location-card,.small-panel,.included,.donkey-names{border-radius:var(--radius)}
.experience>img,.landscape,.intro-image,.mini-gallery img,.feature-photo>img,.esel-teaser>div:first-child,.team-wide,.hof-feature img{border-radius:var(--radius)}

/* Kopf: auf der Startseite durchsichtig über dem Intro */
.site-header{transition:background .35s,border-color .35s,box-shadow .35s;view-transition-name:kopf}
body:has(.buehne) .site-header{position:fixed;left:0;right:0;background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
body:has(.buehne) .site-header.linie{background:#eef5e0ee;border-color:var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 24px -18px #23432e70}
.page-index .header-contact{border-radius:999px}
.header-contact{border-radius:999px}

/* Intro (Bühne) */
.buehne{position:relative;height:100vh;height:100svh;min-height:600px;max-height:1100px;overflow:hidden;overflow:clip;background:linear-gradient(180deg,var(--himmel-o) 0%,var(--himmel-m) 52%,var(--himmel-u) 78%,#f3c98f 100%);isolation:isolate}
.himmel{position:absolute;inset:0;background:radial-gradient(60% 50% at 72% 64%,#fff1cf 0%,#fff1cf00 70%);animation:himmel-ein 2.4s ease both}
.ebene{position:absolute;left:0;top:0;width:100%;height:100%;will-change:transform}
.e-fern .sonne{animation:sonne-auf 3.2s var(--weich) .2s both}
.e-fern .baeume-fern{fill:var(--fern);opacity:.85}
.e-fern .baeume-nah{fill:var(--fern-2)}
.huegel-mitte{fill:var(--mitte)}
.e-mitte .zaun{fill:#55834c;stroke:#55834c}
.e-mitte .herde{fill:var(--mitte-tier)}
.tipi-stoff{fill:#dcaaa4}.tipi-tuer{fill:#9a6560}.tipi-stangen{stroke:#7c5a4c;stroke-width:3;stroke-linecap:round}
.huegel-vorn{fill:var(--vorn)}
.e-vorn .esel-gruppe,.e-vorn .pony-gruppe{fill:var(--vorn-tier)}
.gans{fill:#fffdf6}.gans .bein-a,.gans .bein-b{fill:#e8913f}
.gras-vorn{fill:#25472f}
.e-flug .voegel{fill:none;stroke:#3c5f45;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.samen{fill:none;stroke:#fffaf0;opacity:.9}

/* Aufbau beim Laden: Ebenen steigen nacheinander auf */
.e-fern{animation:ebene-auf 1.6s var(--weich) .25s both}
.e-mitte{animation:ebene-auf 1.6s var(--weich) .45s both}
.e-vorn{animation:ebene-auf 1.6s var(--weich) .65s both}
.e-flug{animation:himmel-ein 1s ease 2s both}
.tipi-gruppe,.herde,.esel-gruppe,.pony-gruppe{transform-box:fill-box;transform-origin:50% 100%;animation:tier-auf 1.1s var(--weich) both}
.tipi-gruppe{animation-delay:1.05s}.herde{animation-delay:1.25s}.esel-gruppe{animation-delay:1.45s}.pony-gruppe{animation-delay:1.6s}
.zaun{animation:himmel-ein 1s ease 1s both}
@keyframes himmel-ein{from{opacity:0}}
@keyframes sonne-auf{from{transform:translateY(180px);opacity:.2}}
@keyframes ebene-auf{from{transform:translateY(90px);opacity:0}}
@keyframes tier-auf{from{transform:translateY(24px) scaleY(.9);opacity:0}}

/* Kleine Bewegungen im Bild */
.esel .ohren,.esel-gruppe .ohren{transform-box:fill-box;transform-origin:50% 100%;animation:ohr 7s ease-in-out 3s infinite}
@keyframes ohr{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-9deg)}92%{transform:rotate(4deg)}95%{transform:rotate(-5deg)}}
.kopfnicken{transform-box:fill-box;transform-origin:30% 100%;animation:nicken 6s ease-in-out 2.6s infinite}
.kopfnicken.b{animation-duration:7.4s;animation-delay:4s}
@keyframes nicken{0%,100%{transform:rotate(0)}50%{transform:rotate(-1.6deg)}}
.gans{transform-box:fill-box;transform-origin:50% 100%;animation:watscheln .7s ease-in-out infinite alternate}
@keyframes watscheln{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
.halm{transform-box:fill-box;transform-origin:50% 100%;animation:wiegen 5s ease-in-out infinite alternate}
.halm.h1{animation-duration:6.2s;animation-delay:-2s}.halm.h2{animation-duration:4.4s;animation-delay:-1s}
@keyframes wiegen{from{transform:skewX(-3deg)}to{transform:skewX(3deg)}}
.voegel{animation:voegel 34s linear 2.2s infinite}
@keyframes voegel{from{transform:translate(1700px,330px)}to{transform:translate(-200px,250px)}}
.samen{transform-box:fill-box;animation:samen 18s linear infinite}
.samen.s1{animation-duration:23s;animation-delay:-6s}.samen.s2{animation-duration:20s;animation-delay:-12s}.samen.s3{animation-duration:26s;animation-delay:-3s}.samen.s4{animation-duration:21s;animation-delay:-15s}.samen.s5{animation-duration:24s;animation-delay:-9s}
@keyframes samen{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:.9}50%{transform:translate(-160px,-260px) rotate(16deg)}90%{opacity:.8}100%{transform:translate(-340px,-520px) rotate(-8deg);opacity:0}}

/* Text im Intro */
.buehne-inhalt{position:relative;z-index:3;padding-top:clamp(112px,16vh,190px)}
.buehne-inhalt>*{animation:text-auf 1.1s var(--weich) both}
.buehne-inhalt>*:nth-child(1){animation-delay:.5s}.buehne-inhalt>*:nth-child(2){animation-delay:.65s}.buehne-inhalt>*:nth-child(3){animation-delay:.8s}.buehne-inhalt>*:nth-child(4){animation-delay:.95s}
@keyframes text-auf{from{opacity:0;transform:translateY(26px)}}
.buehne h1{font-size:clamp(46px,min(7vw,10.5vh),104px);margin-bottom:22px;max-width:9.5em}
.buehne .lead{max-width:470px;color:#2f3d33}
.buehne .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.buehne-kante{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(28px,4vw,60px);fill:var(--paper);z-index:2}
.weiter{position:absolute;left:50%;bottom:clamp(46px,7vh,80px);z-index:3;width:30px;height:48px;margin-left:-15px;border:2px solid #ffffffcc;border-radius:20px;animation:himmel-ein 1s ease 2.4s both}
.weiter span{position:absolute;left:50%;top:9px;width:4px;height:9px;margin-left:-2px;border-radius:2px;background:#fff;animation:maus 2s ease-in-out 3s infinite}
@keyframes maus{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* Schnellleiste als Karte über der Kante */
.page-index .quick-bar{background:transparent;color:var(--ink);position:relative;z-index:4;margin-top:-34px}
.page-index .quick-bar>.wrap{background:#fffef9;border-radius:18px;box-shadow:0 22px 50px -28px #1c382680,0 0 0 1px #d8e0d2;padding:22px 34px}
.page-index .quick-bar a{border-color:var(--line);transition:transform .25s var(--weich)}
.page-index .quick-bar a:hover{transform:translateY(-2px)}
.page-index .quick-bar strong{color:var(--forest)}
.page-index .quick-bar span{color:var(--muted)}
.hof-feature .team-photo img{border-radius:var(--radius)}

/* Seitenköpfe der Unterseiten */
.page-intro{position:relative;overflow:hidden;overflow:clip;padding-bottom:clamp(110px,12vw,190px);background:linear-gradient(180deg,#eef5e3,#f8efd9)}
.page-intro .intro-grid>*{position:relative;z-index:2}
.page-intro .intro-grid>div>*{animation:text-auf .9s var(--weich) both}
.page-intro .intro-grid>div>*:nth-child(2){animation-delay:.08s}.page-intro .intro-grid>div>*:nth-child(3){animation-delay:.16s}
.intro-image{animation:bild-auf 1.2s var(--weich) .15s both;box-shadow:0 30px 60px -36px #1c382690}
@keyframes bild-auf{from{opacity:0;transform:translateY(18px) scale(.98);clip-path:inset(12% 0 0 0 round 14px)}to{clip-path:inset(0 0 0 0 round 14px)}}
.kopf-szene{position:absolute;left:0;bottom:-1px;width:100%;height:clamp(90px,13vw,220px);z-index:1}
.k-fern{fill:#d5e4c3;animation:ebene-auf 1.3s var(--weich) .1s both}
.k-mitte{fill:#a6c493;animation:ebene-auf 1.3s var(--weich) .25s both}
.k-tiere{fill:#55804f;animation:ebene-auf 1.2s var(--weich) .5s both}
.k-tiere .tipi-stoff{fill:#dcaaa4}
.k-tiere .laeuft{transform-box:fill-box;transform-origin:50% 100%;animation:watscheln .8s ease-in-out infinite alternate}
.k-vorn{fill:var(--paper)}
.page-intro:not(.with-image) .kopf-szene{height:clamp(90px,11vw,180px)}

/* Weiche Hügelkanten zwischen den Abschnitten */
.tinted,.camp-feature,.cta-band,.memorial,.site-footer{position:relative}
.tinted::before,.camp-feature::before,.cta-band::before,.memorial::before,.site-footer::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:clamp(22px,3.4vw,52px);background:inherit;pointer-events:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60L0 30C260 4 520 0 760 20C1000 40 1220 44 1440 12L1440 60Z'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60L0 30C260 4 520 0 760 20C1000 40 1220 44 1440 12L1440 60Z'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat}
.camp-feature::before,.cta-band::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60L0 14C300 40 560 46 820 26C1080 6 1260 2 1440 28L1440 60Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60L0 14C300 40 560 46 820 26C1080 6 1260 2 1440 28L1440 60Z'/%3E%3C/svg%3E")}
.tinted:not(:has(+ .tinted,+ .cta-band,+ .memorial,+ .camp-feature))::after,.camp-feature:not(:has(+ .tinted,+ .cta-band,+ .memorial))::after,.memorial:not(:has(+ .cta-band,+ .tinted))::after{content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:clamp(22px,3.4vw,52px);background:inherit;z-index:1;pointer-events:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0L1440 0L1440 26C1200 52 940 56 700 36C460 16 240 14 0 42Z'/%3E%3C/svg%3E") center top/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0L1440 0L1440 26C1200 52 940 56 700 36C460 16 240 14 0 42Z'/%3E%3C/svg%3E") center top/100% 100% no-repeat}
.cta-band{background:var(--forest)}
.site-footer{background:var(--deep)}
.cta-band+.site-footer::before{display:none}
.cta-band+.site-footer{border-top:1px solid #ffffff14}

/* Einblenden beim Scrollen */
.js .r{opacity:0;transform:translateY(34px);transition:opacity .9s var(--weich),transform .9s var(--weich);transition-delay:calc(var(--d,0) * 90ms)}
.js .r.da{opacity:1;transform:none}
.js img.r{transform:translateY(24px) scale(.97)}
.js img.r.da{transform:none}

/* Karten und Bilder */
.experience,.animal,.price-card,.date-card{transition:transform .45s var(--weich),box-shadow .45s var(--weich)}
.experience:hover,.animal:hover,.price-card:hover,.date-card:hover{transform:translateY(-4px)}
.animal:hover,.price-card:hover,.date-card:hover{box-shadow:0 26px 50px -34px #1c382690}
.experience{overflow:hidden}
.experience>img,.animal>img{transition:transform 1.1s var(--weich),filter .6s}
.experience:hover>img,.animal:hover>img{transform:scale(1.04)}
.animal{overflow:hidden}
.photo-strip img{cursor:zoom-in;transition:transform .5s var(--weich),filter .4s,box-shadow .4s;border-radius:12px}
.photo-strip img:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 20px 40px -26px #1c382699}
.memorial-grid img{filter:grayscale(.35) sepia(.12);transition:filter .6s}
.memorial-grid article:hover img{filter:none}

/* Fortschrittslinie */
.scroll-linie{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;background:linear-gradient(90deg,var(--forest),#9cc06b);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* Großansicht der Fotos */
.lupe{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:#122318e6;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:himmel-ein .3s ease both}
.lupe[hidden]{display:none}
.lupe figure{margin:0;max-width:min(92vw,1200px);max-height:86vh;display:flex;flex-direction:column;align-items:center;gap:12px}
.lupe img{max-height:78vh;width:auto;max-width:100%;border-radius:12px;box-shadow:0 30px 80px -30px #000;animation:lupe-bild .45s var(--weich) both}
@keyframes lupe-bild{from{opacity:0;transform:scale(.96)}}
.lupe figcaption{color:#eef3e4;font-size:15px}
.lupe button{position:absolute;border:0;background:#ffffff1f;color:#fff;width:52px;height:52px;border-radius:50%;font-size:26px;line-height:1;cursor:pointer;transition:background .2s}
.lupe button:hover,.lupe button:focus-visible{background:#ffffff40}
.lupe .zu{top:18px;right:18px}.lupe .zurueck{left:18px;top:50%;margin-top:-26px}.lupe .vor{right:18px;top:50%;margin-top:-26px}

/* Seitenwechsel weich überblenden */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.28s var(--weich) both seite-raus}
::view-transition-new(root){animation:.5s var(--weich) both seite-rein}
@keyframes seite-raus{to{opacity:0;transform:translateY(-6px)}}
@keyframes seite-rein{from{opacity:0;transform:translateY(10px)}}

@media(max-width:850px){
 body:has(.buehne) .site-header nav{background:#fffef9}
 .buehne .lead{font-size:18px}
}
@media(max-width:620px){
 .buehne{min-height:640px}
 .buehne-inhalt{padding-top:118px}
 .buehne h1{font-size:clamp(46px,13.5vw,62px)}
 .buehne .lead{font-size:17px;max-width:330px}
 .buehne .actions .button{font-size:15px;padding:12px 20px}
 .weiter{display:none}
 .page-index .quick-bar{margin-top:-22px}
 .page-index .quick-bar>.wrap{padding:6px 22px}
 .page-intro{padding-bottom:96px}
 .lupe .zurueck,.lupe .vor{top:auto;bottom:18px;margin:0}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none !important;transition:none !important}
 .js .r{opacity:1;transform:none}
 .gans-weg{display:none}
}

/* ===== Unterseiten mit eigener Szene ===== */
.buehne.seite{height:84vh;height:84svh;min-height:560px;max-height:840px}
.buehne.seite .buehne-inhalt>*{max-width:min(620px,54vw)}
.buehne.seite h1{font-size:clamp(42px,min(5.8vw,9.5vh),86px)}
.sonnenscheibe{fill:#fff6dc}
.art-erlebnisse{--himmel-o:#d3e8ee;--himmel-m:#eef5e4;--himmel-u:#f6ecd2}
.art-esel{--himmel-o:#e4ecdf;--himmel-m:#f7e7cc;--himmel-u:#f2d1a8}
.art-feiern-gruppen{--himmel-o:#e6efe7;--himmel-m:#fbe8da;--himmel-u:#f5d3c3}
.art-ferien-termine{--himmel-o:#e7c9cc;--himmel-m:#f6cf9e;--himmel-u:#f0a965;--fern:#c9c297;--fern-2:#a8a574;--mitte:#6d8c55;--vorn:#2f4f33}
.art-ferien-termine .sonnenscheibe{fill:#ffe3a6}
.art-ferien-termine .buehne-inhalt h1,.art-ferien-termine .eyebrow{color:#2b4a33}
.art-hof-tiere{--himmel-o:#e2eedf;--himmel-m:#f8ebd0;--himmel-u:#f3d6a9}
.art-kontakt{--himmel-o:#d9e8ea;--himmel-m:#f0f3e3;--himmel-u:#f4e5c3}
.feldweg{fill:#c7b48c;opacity:.9}
.plattenweg path:not(.fuge),path.plattenweg{fill:#c9c1ae}
.plattenweg .fuge{stroke:#9d937c;stroke-width:2;fill:none}
.e-mitte .herde{fill:var(--mitte-tier)}
.e-mitte .tipi-gruppe>use[href="#s-stall"]{fill:#3f6744}
.e-vorn .tier{fill:var(--vorn-tier)}
.schritt{transform-box:fill-box;transform-origin:50% 100%;animation:schritt 1.6s ease-in-out infinite alternate}
.schritt.b{animation-delay:-.4s}.schritt.c{animation-delay:-.8s}.schritt.d{animation-delay:-1.2s}
@keyframes schritt{from{transform:translateY(0) rotate(-.6deg)}to{transform:translateY(-3px) rotate(.6deg)}}
.pickt{transform-box:fill-box;transform-origin:30% 100%;animation:picken 2.6s ease-in-out infinite}
.pickt.b{animation-delay:-.9s}.pickt.c{animation-delay:-1.7s}
@keyframes picken{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(24deg)}78%{transform:rotate(4deg)}85%{transform:rotate(22deg)}}
.hund .schwanz{transform-box:fill-box;transform-origin:100% 100%;animation:wedeln .35s ease-in-out infinite alternate}
@keyframes wedeln{from{transform:rotate(-14deg)}to{transform:rotate(12deg)}}
.ballon{transform-box:fill-box;transform-origin:50% 100%;animation:ballon 5s ease-in-out infinite alternate}
.ballon.b{animation-duration:6.2s;animation-delay:-2s}.ballon.c{animation-duration:4.6s;animation-delay:-1s}.ballon.d{animation-duration:5.6s;animation-delay:-3s}
@keyframes ballon{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.wi{transform-box:fill-box;transform-origin:50% 0;animation:wimpel 3s ease-in-out infinite alternate}
.wi.w1{animation-delay:-1s}.wi.w2{animation-delay:-2s}
@keyframes wimpel{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
.fl{transform-box:fill-box;transform-origin:50% 100%;animation:flackern .5s ease-in-out infinite alternate}
.fl.b{animation-duration:.37s}
@keyframes flackern{from{transform:scale(1,1) skewX(-2deg)}to{transform:scale(.92,1.12) skewX(3deg)}}
.feuerschein{animation:schein 1.4s ease-in-out infinite alternate}
@keyframes schein{to{opacity:.4}}
.funke{animation:funke 2.4s linear infinite;opacity:0}
.funke.f1{animation-delay:-.6s}.funke.f2{animation-delay:-1.2s}.funke.f3{animation-delay:-1.8s}
@keyframes funke{0%{transform:translate(0,0);opacity:0}15%{opacity:1}100%{transform:translate(14px,-120px);opacity:0}}
.gluehw{fill:#ffe9a3;animation:gluehen 3s ease-in-out infinite;opacity:0}
.gluehw.g1{animation-delay:-1s}.gluehw.g2{animation-delay:-2s}.gluehw.g3{animation-delay:-.5s}.gluehw.g4{animation-delay:-1.6s}
@keyframes gluehen{0%,100%{opacity:0;transform:translate(0,0)}50%{opacity:.95;transform:translate(10px,-14px)}}

/* Angeheftetes Foto im Himmel */
.kopf-foto{position:absolute;z-index:3;margin:0;right:max(28px,calc((100% - 1220px)/2));top:clamp(118px,17vh,170px);width:clamp(230px,23vw,330px);padding:10px 10px 30px;background:#fffef9;border-radius:4px;box-shadow:0 26px 50px -26px #1c3826a0,0 2px 6px #1c382620;rotate:3deg;animation:foto-rein 1.2s var(--weich) 1s both;transition:rotate .5s var(--weich),scale .5s var(--weich)}
.kopf-foto::before{content:"";position:absolute;left:50%;top:-12px;width:92px;height:26px;margin-left:-46px;background:#dfe9b8cc;rotate:-4deg;border-radius:2px}
.kopf-foto img{aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.kopf-foto:hover{rotate:0deg;scale:1.03}
@keyframes foto-rein{from{opacity:0;transform:translateY(-40px) rotate(9deg)}}
.kopf-foto-mobil{display:none}
@media(max-width:999px),(max-height:620px){.kopf-foto{display:none}}
@media(max-width:999px){.kopf-foto-mobil{display:block;position:relative;z-index:4;margin-top:-26px}.kopf-foto-mobil img{aspect-ratio:16/10;object-fit:cover;border-radius:16px;border:6px solid #fffef9;box-shadow:0 24px 50px -28px #1c3826a0}.buehne.seite .buehne-inhalt>*{max-width:600px}}

/* ===== Menü ===== */
.site-header nav .nav-links{display:flex;align-items:center;gap:4px}
.site-header nav .nav-links a{position:relative;padding:9px 15px;border-radius:999px;text-decoration:none;font-weight:750;font-size:15px;transition:background .25s,color .25s}
.site-header nav .nav-links a:hover{background:#ffffffa6;text-decoration:none;color:var(--deep)}
.site-header nav .nav-links a[aria-current]{background:var(--forest);color:#fff;text-decoration:none}
.nav-sub,.nav-extra,.nav-szene{display:none}
.header-contact{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;transition:transform .25s var(--weich),box-shadow .25s,background .2s}
.header-contact::after{content:"→";transition:transform .25s var(--weich)}
.header-contact:hover{transform:translateY(-1px);box-shadow:0 10px 20px -12px #23432e90;background:var(--deep)}
.header-contact:hover::after{transform:translateX(3px)}
.header-inner{transition:min-height .35s var(--weich)}
.brand img{transition:height .35s var(--weich)}
.site-header.linie .header-inner{min-height:76px}
.site-header.linie .brand img{height:64px}
@media(max-width:1120px){.site-header nav .nav-links a{padding:8px 11px;font-size:14px}}
@media(max-width:850px){
 .menu-toggle{display:flex;align-items:center;gap:12px;padding:9px 12px 9px 18px;border:1px solid #315b3c40;border-radius:999px;background:#fffef9d9;color:var(--forest);font-weight:800;font-size:15px;position:relative;z-index:2;transition:background .3s}
 .burger{position:relative;width:20px;height:14px;display:block}
 .burger i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;transition:transform .4s var(--weich),opacity .25s,top .4s var(--weich)}
 .burger i:nth-child(1){top:0}.burger i:nth-child(2){top:6px}.burger i:nth-child(3){top:12px}
 .menu-toggle[aria-expanded="true"]{background:#fff}
 .menu-toggle[aria-expanded="true"] .burger i:nth-child(1){top:6px;transform:rotate(45deg)}
 .menu-toggle[aria-expanded="true"] .burger i:nth-child(2){opacity:0}
 .menu-toggle[aria-expanded="true"] .burger i:nth-child(3){top:6px;transform:rotate(-45deg)}
 .brand{position:relative;z-index:2}
 .site-header nav,.site-header nav.open{display:flex;position:fixed;inset:0;z-index:1;flex-direction:column;justify-content:flex-start;gap:26px;padding:112px 28px 0;margin:0;border:0;box-shadow:none;overflow:auto;background:linear-gradient(180deg,#e4efe0 0%,#fbeccd 70%,#f8d9aa 100%);visibility:hidden;clip-path:circle(0 at calc(100% - 64px) 44px);transition:clip-path .55s var(--weich),visibility 0s .55s}
 .site-header nav.open{visibility:visible;clip-path:circle(150% at calc(100% - 64px) 44px);transition:clip-path .75s var(--weich)}
 .site-header nav .nav-links{flex-direction:column;align-items:stretch;gap:0}
 .site-header nav .nav-links a,.site-header nav .nav-links a:first-child{display:flex;flex-direction:column;padding:13px 4px;border-radius:0;border:0;border-bottom:1px solid #315b3c26;background:none;color:var(--forest);opacity:0;transform:translateY(18px);transition:opacity .5s var(--weich),transform .5s var(--weich)}
 .site-header nav.open .nav-links a{opacity:1;transform:none;transition-delay:calc(.18s + var(--i) * .06s)}
 .site-header nav .nav-links a[aria-current]{background:none;color:var(--ochre)}
 .site-header nav .nav-links a:hover{background:none}
 .nav-wort{font-family:var(--serif);font-size:clamp(30px,8.4vw,40px);font-weight:400;line-height:1.15;letter-spacing:-.01em}
 .nav-sub{display:block;font-size:14px;font-weight:600;color:var(--muted)}
 .nav-extra{display:flex;flex-direction:column;gap:16px;opacity:0;transform:translateY(14px);transition:opacity .5s var(--weich),transform .5s var(--weich)}
 .site-header nav.open .nav-extra{opacity:1;transform:none;transition-delay:.5s}
 .nav-extra .button{align-self:flex-start}
 .nav-wege{display:flex;flex-wrap:wrap;gap:8px}
 .nav-wege a{padding:8px 15px;border:1px solid #315b3c40;border-radius:999px;background:#fffef9b0;font-size:14px;font-weight:750;color:var(--forest);text-decoration:none}
 .nav-extra p{font-size:13px;color:var(--muted);margin:0}
 .nav-szene{display:block;position:relative;margin-top:auto;flex-shrink:0;left:auto;bottom:auto;width:calc(100% + 56px);margin-left:-28px;height:110px}
 .nav-szene .k-vorn{fill:var(--forest)}
 html.menu-offen{overflow:hidden}
 html.menu-offen .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:transparent;border-color:transparent;box-shadow:none}
}

/* ===== Logo baut sich im Startbild auf ===== */
.unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.buehne:not(.seite) .buehne-inhalt>*{animation:none}
.logo-titel{margin:0 0 18px;max-width:none!important}
.willkommen{display:block;font-size:clamp(34px,min(4.4vw,7vh),60px);line-height:1.05;margin-bottom:clamp(4px,1vh,12px);animation:text-auf 1s var(--weich) 6.1s both}
.logo-bau{position:relative;display:block;width:min(560px,46vw,calc(33vh * 1.6));aspect-ratio:1466/916}
@media(min-width:851px) and (max-height:760px){.buehne:not(.seite) .lead{display:none}}
.lt{position:absolute;inset:0;background:var(--forest);-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.lt.pferd{--m:url('assets/logo-pferd.webp');background:var(--deep);transform-origin:41% 58%;animation:pferd-kommt 2.6s cubic-bezier(.25,.7,.3,1) 1.2s both,trab .32s ease-in-out 1.2s 8 alternate}
.lt.alpaka{--m:url('assets/logo-alpaka.webp');background:var(--deep);transform-origin:68% 58%;animation:alpaka-kommt 2.4s cubic-bezier(.25,.7,.3,1) 2.5s both,trab .36s ease-in-out 2.5s 6 alternate}
.lt.ente{--m:url('assets/logo-ente.webp');background:var(--deep);transform-origin:37.4% 16%;animation:ente-huepft 1.5s ease-in-out 4.3s both}
.lt.schrift{--m:url('assets/logo-schrift.webp');animation:schrift-ein 1.3s cubic-bezier(.6,.1,.2,1) 5.4s both}
.lt.ort{--m:url('assets/logo-ort.webp');background:var(--ochre);animation:text-auf .9s var(--weich) 6.2s both}
.boden{position:absolute;left:18%;right:14%;top:56%;height:6%;border-radius:50%;background:radial-gradient(closest-side,#23432e33,#23432e00);animation:boden 6.4s linear 1.2s both}
@keyframes boden{0%{opacity:0}20%{opacity:1}68%{opacity:1}80%{opacity:0}100%{opacity:0}}
@keyframes pferd-kommt{from{translate:-110vw 0}}
@keyframes alpaka-kommt{from{translate:110vw 0}}
@keyframes trab{from{transform:translateY(0) rotate(0)}to{transform:translateY(-1.6%) rotate(-.8deg)}}
@keyframes ente-huepft{
 0%{translate:22% 41%;opacity:0;transform:scale(1,1)}
 10%{opacity:1;translate:22% 41%;transform:scale(1.08,.88)}
 28%{translate:15% 26%;transform:scale(.94,1.08)}
 44%{translate:9% 38%;transform:scale(1.1,.86)}
 50%{translate:9% 38%;transform:scale(1.1,.86)}
 74%{translate:3% -9%;transform:scale(.94,1.1)}
 90%{translate:0 0;transform:scale(1.12,.86)}
 100%{translate:0 0;transform:none;opacity:1}}
@keyframes schrift-ein{from{clip-path:inset(0 100% 0 0);translate:0 3%}to{clip-path:inset(0 0 0 0);translate:0 0}}
.buehne:not(.seite) .lead{animation:text-auf 1s var(--weich) 6.5s both}
.buehne:not(.seite) .actions{animation:text-auf 1s var(--weich) 6.7s both}
.buehne:not(.seite) .weiter{animation-delay:7.2s}
/* Kopf-Logo erst nach dem Intro bzw. beim Scrollen */
.page-index .site-header .brand{transition:opacity .5s,translate .5s var(--weich)}
.page-index .site-header:not(.linie) .brand{opacity:0;translate:0 -8px;pointer-events:none}
/* Wiederholter Besuch oder Klick: Intro sofort fertig */
.buehne.fertig .lt,.buehne.fertig .boden,.buehne.fertig .willkommen,.buehne.fertig .lead,.buehne.fertig .actions,.buehne.fertig .ebene,.buehne.fertig .tipi-gruppe,.buehne.fertig .herde,.buehne.fertig .esel-gruppe,.buehne.fertig .zaun,.buehne.fertig .sonne,.buehne.fertig .weiter{animation-delay:0s!important;animation-duration:.45s!important;animation-iteration-count:1!important}
.buehne.fertig .boden{display:none}
@media(max-width:850px){.logo-bau{width:min(560px,100%)}}
@media(prefers-reduced-motion:reduce){.boden{display:none}}
.buehne.seite{height:92vh;height:92svh;max-height:920px}
.buehne.seite h1{font-size:clamp(40px,min(4.8vw,8.4vh),74px)}
.buehne.seite .buehne-inhalt>*{max-width:min(700px,56vw)}
.buehne .lead,.buehne .eyebrow{text-shadow:0 0 18px #fbf1dc,0 0 6px #fbf1dc}
@media(max-width:999px){.buehne.seite .buehne-inhalt>*{max-width:600px}}
@media(max-width:1120px){.header-contact{display:none}}
@media(max-width:850px){.site-header nav,.site-header nav.open{gap:16px;padding-top:100px}.site-header nav .nav-links a,.site-header nav .nav-links a:first-child{padding:9px 4px}.nav-szene{height:96px}}
/* Unschärfe auf eigener Ebene, sonst sperrt backdrop-filter das Vollbild-Menü in den Kopf ein */
.site-header,body:has(.buehne) .site-header.linie{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);pointer-events:none}
body:has(.buehne) .site-header:not(.linie)::before{display:none}
.esel-geb{display:block;font-family:var(--sans);font-size:15px;color:var(--muted);letter-spacing:0;margin-top:4px}
/* Pferd: glatter Rücken, bis die Ente landet; dann Originalform mit freigestelltem Rand um die Entenfüße */
.lt.pferd.kerbe{--m:url('assets/logo-pferd-kerbe.webp');opacity:0}
.lt.pferd{animation:pferd-kommt 2.6s cubic-bezier(.25,.7,.3,1) 1.2s both,trab .32s ease-in-out 1.2s 8 alternate,kerbe-aus .15s linear 5.65s forwards}
.lt.pferd.kerbe{animation:pferd-kommt 2.6s cubic-bezier(.25,.7,.3,1) 1.2s both,trab .32s ease-in-out 1.2s 8 alternate,kerbe-ein .15s linear 5.65s forwards}
@keyframes kerbe-aus{to{opacity:0}}
@keyframes kerbe-ein{to{opacity:1}}
@media(prefers-reduced-motion:reduce){.lt.pferd{opacity:0}.lt.pferd.kerbe{opacity:1}}
.site-header .nav-extra .button,.site-header .nav-extra .button[aria-current]{color:#fff;text-decoration:none}
.donkey-names h3{display:flex;align-items:center;gap:16px}.esel-foto{width:76px;height:76px;border-radius:50%;object-fit:cover;flex-shrink:0;border:3px solid #fff;box-shadow:0 8px 18px -10px #1c382680}.esel-foto.platzhalter{background:#e6efd9;fill:#7a9c6b;padding:12px 10px 8px}.esel-name{display:flex;flex-direction:column}

/* Lange Seitentitel nur an der vorgesehenen Stelle trennen (Datenschutz-hinweise) */
.page-intro h1{hyphens:manual;-webkit-hyphens:manual}

/* Überschriften auf größeren Bildschirmen nicht mitten im Wort trennen (Hofrund-gang) */
@media(min-width:700px){h1,h2,h3{hyphens:manual;-webkit-hyphens:manual}}

/* Fußzeile: Design-Hinweis, auf dem Handy umbrechen */
.footer-bottom>div{flex-wrap:wrap;row-gap:8px}
.footer-bottom .credit{opacity:.8}
.footer-bottom .credit:hover{opacity:1}