/* Zauberland Alpakas — static site styles.
Design tokens first, then components. Mobile-first with
breakpoints at 576px (mobile), 992px (tablet/iPad) and 1200px (desktop). */
/* ---------- 1. Tokens ---------- */
:root{
/* Brand */
--gold-500:#c4a671; --gold-600:#a8874f; --gold-700:#8a6c3a;
--gold-300:#dcc79c; --gold-100:#f0e4cb;
--amber-500:#feaa49; --amber-600:#e08c2a; --amber-200:#ffd9ab;
--night-900:#141f3f; --night-800:#1b2a56; --night-700:#26386c;
--meadow-500:#6b8f4e;--meadow-100:#dceac9;--meadow-800:#2f4a22;
/* Warm neutrals */
--cream-50:#fefbf5; --cream-100:#fdf7ec; --sand-200:#f4ead8; --sand-300:#e8dac1;
--ink-500:#6d6353; --ink-700:#403a30; --ink-900:#231f19;
--success-500:#4f7d43;
/* Semantic aliases — always use these */
--text-strong:var(--night-900); --text-body:var(--ink-700);
--text-muted:var(--ink-500); --text-invert:var(--cream-50);
--surface-page:var(--cream-100); --surface-card:#fffdf8; --surface-sunken:var(--sand-200);
--border-hairline:rgba(35,31,25,.12);
--border-gold:rgba(196,166,113,.55);
--focus-ring:0 0 0 3px rgba(254,170,73,.55);
--gradient-sun:radial-gradient(120% 120% at 50% 0%,var(--amber-200) 0%,var(--gold-300) 38%,transparent 72%);
--gradient-protect:linear-gradient(to top,rgba(20,31,63,.82) 0%,rgba(20,31,63,.45) 42%,rgba(20,31,63,0) 100%);
--gradient-night:linear-gradient(160deg,var(--night-800) 0%,var(--night-900) 60%,#0e1730 100%);
/* Type */
--font-display:"Marcellus",'Times New Roman',serif;
--font-serif:"Cormorant Garamond",Georgia,serif;
--font-body:"Source Sans 3",'Segoe UI',sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,monospace;
--step--1:clamp(.82rem,.8rem + .1vw,.9rem);
--step-0:clamp(1rem,.97rem + .15vw,1.075rem);
--step-1:clamp(1.18rem,1.1rem + .35vw,1.35rem);
--step-2:clamp(1.45rem,1.3rem + .7vw,1.85rem);
--step-3:clamp(1.8rem,1.5rem + 1.4vw,2.6rem);
--step-4:clamp(2.2rem,1.7rem + 2.4vw,3.6rem);
--step-5:clamp(2.7rem,1.8rem + 4.2vw,5.2rem);
--leading-tight:1.06; --leading-body:1.62;
--tracking-eyebrow:.22em;
--weight-medium:600;
--measure:66ch;
/* Space & shape */
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;
--radius-sm:6px;--radius-md:10px;--radius-lg:18px;--radius-xl:28px;--radius-pill:999px;
--container:1240px; --gutter:clamp(20px,5vw,64px);
--section-y:clamp(28px,4vw,64px); --border-w:1px;
--header-h:108px;
/* Elevation & motion */
--shadow-1:0 1px 2px rgba(35,31,25,.06),0 1px 3px rgba(35,31,25,.05);
--shadow-2:0 2px 6px rgba(35,31,25,.07),0 8px 20px -8px rgba(35,31,25,.12);
--shadow-3:0 6px 14px rgba(35,31,25,.08),0 22px 48px -18px rgba(20,31,63,.22);
--shadow-gold:0 10px 30px -12px rgba(168,135,79,.45);
--ease-out:cubic-bezier(.22,.86,.32,1);
--dur-2:220ms; --dur-3:380ms; --dur-4:640ms; --dur-5:1100ms;
}
/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-body);
font-family:var(--font-body);font-size:var(--step-0);line-height:var(--leading-body);
-webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-strong);font-weight:400;
line-height:var(--leading-tight);margin:0 0 var(--space-4)}
h1{font-size:var(--step-5)} h2{font-size:var(--step-3)} h3{font-size:var(--step-2)} h4{font-size:var(--step-1)}
p{margin:0 0 var(--space-4);max-width:var(--measure)}
a{color:var(--gold-700);text-decoration:none;border-bottom:1px solid var(--border-gold);
transition:color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
a:hover{color:var(--amber-600);border-color:var(--amber-500)}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
::selection{background:var(--amber-200);color:var(--night-900)}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font-size:var(--step--1);font-weight:var(--weight-medium);letter-spacing:var(--tracking-eyebrow);
text-transform:uppercase;color:var(--gold-700);margin-bottom:var(--space-3)}
.eyebrow--light{color:var(--gold-300)}
.lead{font-family:var(--font-serif);font-size:var(--step-2);line-height:1.35;color:var(--text-body);max-width:52ch}
.lead--light{color:rgba(254,251,245,.9)}
.section{padding-block:var(--section-y)}
.section--sunken{background:var(--surface-sunken)}
.section--night{background:var(--gradient-night)}
.section--sun{background:var(--gradient-sun),var(--gold-300)}
.section--sun h1,.section--sun h2,.section--sun h3,.section--sun strong{color:var(--night-900)}
.section--sun p,.section--sun .eyebrow{color:var(--night-800)}
.section--sun a:not(.btn){color:var(--night-900);border-bottom-color:rgba(20,31,63,.4)}
.section--sun a:not(.btn):hover{color:var(--night-900);border-bottom-color:var(--night-900)}
.section--sun .btn--night{color:var(--cream-50)}
.section--sun .kontakt-liste svg{color:var(--night-900)}
.section--night h1,.section--night h2,.section--night h3{color:var(--cream-50)}
.section-head{margin-bottom:var(--space-6)}
.section-head--center{text-align:center;margin-inline:auto;max-width:60ch}
.section-head--center .lead{margin-inline:auto}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- 3. Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
min-height:48px;padding:12px 26px;border-radius:var(--radius-pill);border:1px solid transparent;
background:var(--gold-500);color:var(--night-900);font-family:var(--font-body);
font-size:var(--step-0);font-weight:var(--weight-medium);cursor:pointer;text-align:center;
transition:transform var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.btn:hover{background:var(--amber-500);transform:translateY(-3px);box-shadow:var(--shadow-gold);color:var(--night-900)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn--night{background:var(--night-900);color:var(--cream-50)}
.btn--night:hover{background:var(--night-700);color:var(--cream-50)}
.btn--ghost{background:transparent;border-color:var(--border-gold);color:var(--gold-700)}
.btn--ghost:hover{background:var(--gold-100);color:var(--gold-700)}
.btn--sm{min-height:42px;padding:9px 18px;font-size:var(--step--1)}
.btn--lg{min-height:56px;padding:16px 32px;font-size:var(--step-1)}
.btn--block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-3)}
/* ---------- 4. Header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:transparent;
transition:background var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out)}
.site-header.is-scrolled{background:rgba(253,247,236,.92);backdrop-filter:saturate(1.1) blur(14px);
border-bottom:var(--border-w) solid var(--border-hairline);box-shadow:var(--shadow-1)}
.header-inner{max-width:none;margin-inline:0;padding:14px var(--gutter);
display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:var(--space-4)}
@media (min-width:1200px){.header-inner{padding-inline:clamp(32px,4vw,100px)}}
.logo{border:none;display:inline-flex;align-items:center}
.logo{flex-shrink:0}
.logo img{height:52px;width:auto;flex-shrink:0;transition:height var(--dur-3) var(--ease-out)}
.site-header.is-scrolled .logo img{height:42px}
.nav{display:flex;justify-content:center;grid-column:2}
.header-inner .btn--sm{grid-column:3;justify-self:end}
.nav-list{display:flex;align-items:center;gap:var(--space-5);list-style:none;margin:0;padding:0}
.nav-list a{border:none;padding:6px 0;font-size:var(--step-0);color:var(--night-800);
border-bottom:2px solid transparent}
.nav-list a:hover,.nav-list a[aria-current="page"]{color:var(--gold-700);border-bottom-color:var(--gold-500)}
.nav-list .has-sub{position:relative}
.nav-parent{display:inline-flex;align-items:center;gap:4px}
.nav-parent.is-current > a{color:var(--gold-700);border-bottom-color:var(--gold-500)}
.nav-sub-toggle{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
padding:0;border:none;background:none;cursor:pointer;color:var(--night-800);
transition:transform var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
.has-sub:hover .nav-sub-toggle,.has-sub.is-open .nav-sub-toggle{color:var(--gold-700)}
.has-sub.is-open .nav-sub-toggle{transform:rotate(180deg)}
.subnav{position:absolute;top:100%;left:50%;transform:translate(-50%,8px);z-index:70;
display:grid;min-width:230px;margin:0;padding:var(--space-2);list-style:none;
background:var(--surface-card);border:var(--border-w) solid var(--border-gold);
border-radius:var(--radius-md);box-shadow:var(--shadow-3);
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),visibility var(--dur-2)}
.subnav::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.has-sub::after{content:"";position:absolute;left:-12px;right:-12px;top:100%;height:16px}
.has-sub:hover .subnav,.has-sub:focus-within .subnav,.has-sub.is-open .subnav{
opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.subnav a{display:block;padding:10px 14px;border-radius:var(--radius-sm);border-bottom:none;
font-size:var(--step--1);white-space:nowrap}
.subnav a:hover,.subnav a[aria-current="page"]{background:var(--gold-100);border-bottom:none;color:var(--gold-700)}
.lang-switch{display:flex;align-items:center;gap:2px;justify-self:end;grid-column:4}
.lang-switch a{border:none;padding:6px 8px;border-radius:var(--radius-sm);
font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.06em;color:var(--text-muted);
transition:color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out)}
.lang-switch a:hover{color:var(--gold-700);background:var(--gold-100)}
.lang-switch a[aria-current="true"]{color:var(--night-900);background:var(--gold-200,var(--gold-100))}
.nav-toggle{display:none;align-items:center;justify-content:center;width:48px;height:48px;
border:1px solid var(--border-gold);border-radius:var(--radius-pill);background:var(--surface-card);cursor:pointer}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--night-900);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--night-900)}
.nav-toggle span::before{top:-6px} .nav-toggle span::after{top:6px}
.header-veil{position:fixed;top:0;left:0;right:0;height:112px;z-index:50;pointer-events:none;
background:linear-gradient(180deg,rgba(253,247,236,.96) 0%,rgba(253,247,236,.92) 62%,rgba(253,247,236,.42) 86%,rgba(253,247,236,0) 100%)}
/* ---------- 5. Hero ---------- */
.hero{position:relative;margin-top:calc(-1 * var(--header-h));min-height:680px;height:86vh;
display:flex;align-items:flex-end;overflow:hidden;background:var(--night-900)}
.hero--short{height:58vh;min-height:460px}
.hero__media{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;will-change:transform}
.hero::after{content:"";position:absolute;inset:0;background:var(--gradient-protect)}
.hero__inner{position:relative;z-index:1;width:100%;padding-top:calc(var(--header-h) + var(--space-6));
padding-bottom:var(--space-9)}
.hero h1{color:var(--cream-50);max-width:20ch}
.hero--base{height:calc(100vh - var(--header-h));height:calc(100dvh - var(--header-h));min-height:420px;margin-top:0;
background:var(--surface-sunken)}
.hero--base .hero__inner{padding-top:var(--space-5)}
.hero--base .hero__media{inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.hero--base::after{background:linear-gradient(180deg,rgba(20,31,63,.42) 0%,rgba(20,31,63,.14) 26%,rgba(20,31,63,.22) 46%,rgba(20,31,63,.82) 100%)}
.hero--base .hero__inner{padding-bottom:var(--space-6);text-align:left}
.hero--base h1{font-size:var(--step-4);max-width:22ch;margin-inline:0}
.hero--base .lead{margin-inline:0;max-width:56ch}
/* ---------- 6. Contact band ---------- */
.contact-band{background:var(--surface-sunken);border-bottom:var(--border-w) solid var(--border-hairline)}
.contact-band .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
text-align:center;gap:var(--space-6) var(--space-8);padding-block:var(--space-5)}
.contact-line{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:var(--space-4)}
.contact-line__label{font-family:var(--font-display);font-size:var(--step-2);letter-spacing:.06em;
text-transform:uppercase;color:var(--text-strong)}
.contact-line__tel{font-family:var(--font-mono);font-size:var(--step-3);color:var(--gold-700);border:none}
.contact-note{margin:var(--space-2) auto 0;font-size:var(--step--1);letter-spacing:.06em;
text-transform:uppercase;color:var(--text-muted)}
.contact-plate{display:flex;align-items:stretch;border:none;border-radius:var(--radius-md);overflow:hidden;
box-shadow:var(--shadow-2);background:var(--gradient-sun),var(--gold-300);text-align:left}
.contact-plate:hover{box-shadow:var(--shadow-3)}
.contact-plate__text{padding:var(--space-4) var(--space-5)}
.contact-plate__title{display:block;font-family:var(--font-display);font-size:var(--step-1);text-transform:uppercase;
letter-spacing:.04em;color:var(--night-800)}
.contact-plate__sub{display:block;font-size:var(--step--1);text-transform:uppercase;letter-spacing:.1em;color:var(--night-800)}
.contact-plate{align-items:stretch}
.contact-plate img{flex:0 0 118px;width:118px;height:auto;align-self:stretch;object-fit:cover;object-position:50% 40%}
/* ---------- 7. Layout helpers ---------- */
.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--space-8);align-items:start}
.split--even{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:center}
.figure{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-3)}
.figure--sm{max-width:340px;margin-inline:auto}
.figure img{width:100%;height:auto}
.figure--crop img{aspect-ratio:4/3;height:auto;max-height:520px;object-fit:cover;object-position:50% 30%}
.stats{display:flex;flex-wrap:wrap;gap:var(--space-6);margin-top:var(--space-6)}
.stat__value{font-family:var(--font-display);font-size:var(--step-4);line-height:1;color:var(--gold-700)}
.stat__label{font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.pullquote{border-left:2px solid var(--gold-500);padding-left:var(--space-5)}
.pullquote blockquote{margin:0;font-family:var(--font-serif);font-style:italic;font-size:var(--step-2);
line-height:1.4;color:var(--text-body)}
.pullquote figcaption{margin-top:var(--space-3);font-size:var(--step--1);letter-spacing:.1em;
text-transform:uppercase;color:var(--gold-700)}
/* ---------- 8. Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-5)}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:991px){.cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.cards--3{grid-template-columns:1fr}}
@media (max-width:767px){.cards--2{grid-template-columns:1fr}}
.figure video{display:block;width:100%;height:auto}
.figure--video{aspect-ratio:608/721;overflow:hidden}
.figure--video-soft{aspect-ratio:608/900;overflow:hidden}
.figure--video-soft video{height:100%;object-fit:cover;object-position:50% 0}
.figure--video video{height:100%;object-fit:cover;object-position:50% 0}
.card{display:flex;flex-direction:column;height:100%;background:var(--surface-card);border-radius:var(--radius-lg);
border:var(--border-w) solid var(--border-hairline);box-shadow:var(--shadow-1);overflow:hidden;
transition:transform var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-3)}
.card__media{overflow:hidden;aspect-ratio:4/3}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-5) var(--ease-out)}
.card:hover .card__media img{transform:scale(1.045)}
.card__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.card__body h3{margin:0}
.card__body p{margin:0;font-size:var(--step-0);color:var(--text-muted)}
.card__link{margin-top:auto;font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase;
color:var(--gold-700);border:none}
.card--night{background:var(--gradient-night);border-color:transparent}
.card--night h3{color:var(--cream-50)} .card--night p{color:rgba(254,251,245,.72)}
.card--night .eyebrow{color:var(--gold-300)} .card--night .card__link{color:var(--gold-300)}
/* ---------- 9. Gallery rail ---------- */
.gallery{position:relative}
.gal-rail{display:flex;gap:var(--space-3);overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
.gal-rail::-webkit-scrollbar{display:none}
.gallery--auto{overflow:hidden;
mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.gallery--auto .gal-rail{overflow:visible;width:max-content;scroll-snap-type:none;
animation:zl-marquee 52s linear infinite}
.gallery--auto:hover .gal-rail{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.gallery--auto .gal-rail{animation:none}
.gallery--auto{overflow-x:auto}}
.gal-item{position:relative;flex:0 0 320px;width:320px;height:240px;scroll-snap-align:start;
border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-1);border:none}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-5) var(--ease-out)}
.gal-item:hover img{transform:scale(1.045)}
.gal-item__label{position:absolute;left:12px;bottom:12px;padding:4px 12px;border-radius:var(--radius-pill);
background:rgba(255,253,248,.88);font-size:var(--step--1);letter-spacing:.1em;
text-transform:uppercase;color:var(--night-800)}
.gal-btn{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;
border-radius:var(--radius-pill);border:var(--border-w) solid var(--border-gold);
background:var(--surface-card);box-shadow:var(--shadow-2);color:var(--night-800);
font-size:var(--step-1);line-height:1;cursor:pointer;z-index:2}
.gal-btn:hover{background:var(--gold-300)}
.gal-btn--prev{left:-18px} .gal-btn--next{right:-18px}
/* ---------- 10. Stimmen ---------- */
.stimmen{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-5)}
.stimme{height:100%;padding:var(--space-6);background:var(--surface-card);
border:var(--border-w) solid var(--border-gold);border-radius:var(--radius-lg);
box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:var(--space-4)}
.stimme__mark{font-family:var(--font-display);font-size:var(--step-4);line-height:.5;color:var(--gold-500)}
.stimme p{margin:0;font-family:var(--font-serif);font-size:var(--step-1);line-height:1.5}
.stimme__foot{margin-top:auto;padding-top:var(--space-4);border-top:var(--border-w) solid var(--border-hairline);
display:flex;align-items:center;gap:var(--space-4)}
.stimme__foot img{width:96px;height:96px;flex:0 0 56px;border-radius:var(--radius-pill);object-fit:cover}
.stimme__name{font-family:var(--font-display);font-size:var(--step-0);color:var(--text-strong)}
.stimme__role{font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-700)}
/* ---------- 11. CTA banner ---------- */
.cta-banner{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:center;justify-content:center;
text-align:center;padding:var(--space-7);border-radius:var(--radius-xl);
background:var(--gradient-sun),var(--gold-300);box-shadow:var(--shadow-2)}
.cta-banner h2{margin:var(--space-2) 0 0}
/* ---------- 12. Verkaufstiere ---------- */
.page-head{background:var(--surface-sunken);padding-top:calc(var(--header-h) + var(--space-6));
padding-bottom:var(--space-7)}
.breadcrumb{display:flex;gap:var(--space-2);list-style:none;margin:0 0 var(--space-5);padding:0;
font-size:var(--step--1);color:var(--text-muted)}
.breadcrumb a{border:none}
.notice{display:flex;gap:var(--space-2);align-items:center;padding:var(--space-3) var(--space-4);
background:var(--surface-card);border:var(--border-w) solid var(--border-gold);
border-radius:var(--radius-md);max-width:var(--measure);font-size:var(--step--1)}
.notice svg{flex:0 0 auto;color:var(--gold-700)}
.toolbar{display:flex;gap:var(--space-5);align-items:flex-end;justify-content:space-between;
flex-wrap:wrap;margin-bottom:var(--space-6)}
.chips{display:flex;gap:var(--space-2);flex-wrap:wrap}
.chip{min-height:40px;padding:8px 16px;border-radius:var(--radius-pill);
border:var(--border-w) solid var(--border-gold);background:transparent;color:var(--text-body);
font-family:var(--font-body);font-size:var(--step--1);cursor:pointer;
transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
.chip:hover{background:var(--gold-100)}
.chip[aria-pressed="true"]{background:var(--gold-500);border-color:var(--gold-500);color:var(--night-900);font-weight:var(--weight-medium)}
.chip__count{opacity:.65;margin-left:6px}
.animals{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:var(--space-5)}
.animal{position:relative;display:flex;flex-direction:column;background:var(--surface-card);
border:var(--border-w) solid var(--border-hairline);border-radius:var(--radius-lg);overflow:hidden;
box-shadow:var(--shadow-1);transition:transform var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out)}
.animal:hover{transform:translateY(-3px);box-shadow:var(--shadow-3)}
.animal__media{position:relative;aspect-ratio:3/2;overflow:hidden}
.slides{display:flex;width:100%;height:100%;transition:transform var(--dur-4) var(--ease-out)}
.animal__media img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-5) var(--ease-out)}
.animal:hover .animal__media img{transform:scale(1.045)}
.slide-btn{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;padding:0;
display:grid;place-items:center;border:none;border-radius:var(--radius-pill);cursor:pointer;
background:rgba(255,253,248,.88);color:var(--night-900);box-shadow:var(--shadow-1);
opacity:0;transition:opacity var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out)}
.slide-btn:hover{background:var(--amber-500)}
.slide-btn--prev{left:10px}
.slide-btn--next{right:10px}
.animal:hover .slide-btn,.slide-btn:focus-visible{opacity:1}
.dots{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:6px;justify-content:center}
.dot{width:7px;height:7px;padding:0;border:none;border-radius:var(--radius-pill);cursor:pointer;
background:rgba(255,253,248,.6);box-shadow:0 1px 3px rgba(20,31,63,.35);
transition:width var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out)}
.dot.is-active{width:20px;background:var(--gold-500)}
.animal__toggle{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
width:100%;min-height:44px;margin-top:var(--space-1);padding:var(--space-3) 0 0;cursor:pointer;
background:none;border:none;border-top:var(--border-w) solid var(--border-hairline);
font-family:var(--font-body);font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;
color:var(--gold-700);text-align:left}
.animal__toggle-sign{font-size:var(--step-2);line-height:1}
.animal__desc{display:none;margin:0;font-size:var(--step--1);color:var(--text-muted)}
.animal.is-open .animal__desc{display:block;animation:zl-rise var(--dur-3) var(--ease-out) both}
.animal__body{padding:var(--space-5);display:grid;gap:var(--space-2)}
.animal__cat{font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-700)}
.animal__name{font-family:var(--font-display);font-size:var(--step-1);color:var(--text-strong)}
.animal__meta{font-family:var(--font-mono);font-size:var(--step--1);color:var(--text-muted)}
.animal__price{font-family:var(--font-mono);font-size:var(--step-1);color:var(--night-900)}
.badge{display:inline-block;padding:3px 12px;border-radius:var(--radius-pill);font-size:var(--step--1);
letter-spacing:.08em;text-transform:uppercase;background:var(--gold-100);color:var(--gold-700)}
.badge--amber{background:var(--amber-200);color:var(--night-900)}
.badge--meadow{background:var(--meadow-100);color:var(--meadow-800)}
.badge--sold{position:absolute;top:14px;right:14px;background:var(--night-900);color:var(--cream-50)}
.helper-card{margin-top:var(--space-8);padding:var(--space-7);border-radius:var(--radius-lg);
background:var(--surface-card);border:var(--border-w) solid var(--border-hairline);box-shadow:var(--shadow-1);
display:flex;gap:var(--space-5);justify-content:space-between;align-items:center;flex-wrap:wrap}
.select{min-height:48px;padding:10px 40px 10px 14px;border-radius:var(--radius-sm);
border:var(--border-w) solid var(--border-hairline);background:var(--surface-card);
font-family:var(--font-body);font-size:var(--step-0);color:var(--text-body);appearance:none;
background-image:linear-gradient(45deg,transparent 50%,var(--gold-700) 50%),linear-gradient(135deg,var(--gold-700) 50%,transparent 50%);
background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;
background-size:6px 6px,6px 6px;background-repeat:no-repeat}
/* ---------- 13. Timeline / facts / accordion ---------- */
.timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--gold-300)}
.timeline li{position:relative;padding:0 0 var(--space-6) var(--space-6)}
.timeline li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;
border-radius:var(--radius-pill);background:var(--gold-500)}
.timeline__year{font-family:var(--font-mono);font-size:var(--step-1);color:var(--gold-700)}
.timeline p{margin:var(--space-1) 0 0}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-5)}
.fact{height:100%;padding:var(--space-5);background:var(--surface-card);border-radius:var(--radius-lg);
border:var(--border-w) solid var(--border-hairline);box-shadow:var(--shadow-1)}
.fact svg{color:var(--gold-600)}
.fact h3{margin:var(--space-3) 0 var(--space-2);font-size:var(--step-1)}
.fact p{margin:0;font-size:var(--step--1);color:var(--text-muted)}
.accordion{border-top:var(--border-w) solid var(--border-hairline)}
.acc-item{border-bottom:var(--border-w) solid var(--border-hairline)}
.acc-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);
min-height:56px;padding:var(--space-4) 0;background:none;border:none;cursor:pointer;
font-family:var(--font-display);font-size:var(--step-1);color:var(--text-strong);text-align:left}
.acc-btn__sign{color:var(--gold-700);font-family:var(--font-body);font-size:var(--step-2);line-height:1}
.acc-panel{display:none;padding:0 0 var(--space-5)}
.acc-item.is-open .acc-panel{display:block;animation:zl-rise var(--dur-3) var(--ease-out) both}
.acc-panel p{margin:0;color:var(--text-muted)}
/* ---------- 14. Form ---------- */
.form-card{padding:var(--space-6);background:var(--surface-card);border-radius:var(--radius-lg);
border:var(--border-w) solid var(--border-hairline);box-shadow:var(--shadow-2)}
.field{display:grid;gap:var(--space-2);margin-bottom:var(--space-4)}
.field label{font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.field input,.field textarea,.field select{width:100%;min-height:48px;padding:12px 14px;
border-radius:var(--radius-sm);border:var(--border-w) solid var(--border-hairline);
background:var(--surface-card);box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
font-family:var(--font-body);font-size:var(--step-0);color:var(--text-body)}
.field textarea{min-height:96px;resize:vertical}
/* Native select: eigener Pfeil direkt am Element, kein Wrapper */
.field select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
padding-right:42px;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 14px center;background-size:14px 14px}
.field select::-ms-expand{display:none}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;box-shadow:var(--focus-ring);border-color:var(--gold-500)}
.check{display:flex;gap:var(--space-3);align-items:flex-start;margin-bottom:var(--space-5);font-size:var(--step--1)}
/* Native checkbox: eigenes Häkchen direkt am Element, kein Wrapper */
.check input[type="checkbox"]{appearance:none;-webkit-appearance:none;-moz-appearance:none;
width:22px;height:22px;flex:0 0 auto;margin:0;cursor:pointer;
border:var(--border-w) solid var(--border-hairline);border-radius:var(--radius-sm);
background:var(--surface-card);box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
background-repeat:no-repeat;background-position:center;background-size:14px 14px;
transition:background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.check input[type="checkbox"]:checked{background-color:var(--gold-600);border-color:var(--gold-600);
background-image:url("data:image/svg+xml;utf8,")}
.check input[type="checkbox"]:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.form-success{display:none;padding:var(--space-6);text-align:center}
.form-success svg{color:var(--success-500);margin-inline:auto}
.form-success p{margin-inline:auto;color:var(--text-muted)}
.is-sent .form-success{display:block}
.is-sent form{display:none}
/* ---------- 15. Footer ---------- */
.site-footer{background:var(--gradient-night);color:rgba(254,251,245,.76);padding-block:var(--space-8) var(--space-6)}
.footer-grid{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:var(--space-7)}
.site-footer img{height:56px;width:auto;margin-bottom:var(--space-4)}
.site-footer h3{font-size:var(--step-0);letter-spacing:.14em;text-transform:uppercase;
color:var(--gold-300);font-family:var(--font-body);margin-bottom:var(--space-3)}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.site-footer a{color:rgba(254,251,245,.8);border:none}
.site-footer a:hover{color:var(--amber-500)}
.footer-tel{font-family:var(--font-mono);color:var(--gold-300);display:block}
.footer-legal{margin-top:var(--space-7);padding-top:var(--space-4);
border-top:1px solid rgba(254,251,245,.16);display:flex;flex-wrap:wrap;gap:var(--space-4);
justify-content:space-between;font-size:var(--step--1)}
.footer-legal ul{display:flex;flex-wrap:wrap;gap:var(--space-4)}
/* ---------- 16. Motion utilities ---------- */
@keyframes zl-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(26px);
transition:opacity var(--dur-4) var(--ease-out),transform var(--dur-4) var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
.reveal{opacity:1;transform:none}
.hero__media{transform:none!important}
}
/* ---------- 18. Alpakawandern ---------- */
.booking{margin-top:var(--space-6);padding:var(--space-6);border-radius:var(--radius-lg);
background:var(--surface-card);border:var(--border-w) solid var(--border-gold);box-shadow:var(--shadow-2)}
.booking__slot{display:grid;gap:var(--space-2);place-content:center;text-align:center;min-height:260px;
padding:var(--space-6);border-radius:var(--radius-md);border:1px dashed var(--border-gold);
background:var(--surface-sunken)}
.booking__slot p:last-child{margin:0;max-width:52ch;margin-inline:auto;color:var(--text-muted)}
.booking__note{margin:var(--space-4) 0 0;text-align:center;font-size:var(--step--1);color:var(--text-muted)}
.preis-card{padding:var(--space-6);background:var(--surface-card);border-radius:var(--radius-lg);
border:var(--border-w) solid var(--border-gold);box-shadow:var(--shadow-1);height:100%}
.preis-card__sub{margin:0;font-family:var(--font-serif);font-style:italic;font-size:var(--step-1);color:var(--text-muted)}
.preis-list{list-style:none;margin:var(--space-5) 0 0;padding:0}
.preis-list li{display:flex;gap:var(--space-4);justify-content:space-between;align-items:baseline;
padding:10px 0;border-bottom:var(--border-w) solid var(--border-hairline);font-size:var(--step-0)}
.preis-list li:last-child{border-bottom:none}
.preis-list b{font-family:var(--font-mono);font-weight:var(--weight-regular,400);color:var(--night-900);white-space:nowrap}
.preis-card__foot{margin:var(--space-5) 0 0;font-size:var(--step--1);color:var(--text-muted)}
.regeln{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3);max-width:var(--measure)}
.regeln li{display:flex;gap:var(--space-3);align-items:flex-start}
.regeln li::before{content:"";flex:0 0 auto;width:8px;height:8px;margin-top:10px;
border-radius:var(--radius-pill);background:var(--gold-500)}
.kontakt-liste{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;gap:var(--space-3)}
.kontakt-liste li{display:flex;gap:var(--space-3);align-items:center}
.kontakt-liste svg{flex:0 0 auto;color:var(--gold-600)}
.adresse{margin:0;font-family:var(--font-mono);font-size:var(--step-0);color:var(--night-900)}
.marquee{overflow:hidden;margin-top:var(--space-6);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee__track{display:flex;gap:var(--space-3);width:max-content;animation:zl-marquee 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{flex:0 0 auto;width:340px;height:230px;margin:0;overflow:hidden;
border-radius:var(--radius-lg);box-shadow:var(--shadow-1)}
.marquee__item img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-5) var(--ease-out)}
.marquee__item:hover img{transform:scale(1.045)}
@keyframes zl-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - var(--space-3)/2))}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}.marquee{overflow-x:auto}}
@media (max-width:575px){.marquee__item{width:250px;height:175px}}
/* ---------- 19. Über Alpakas ---------- */
.themen{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5)}
.themen a{padding:8px 16px;border-radius:var(--radius-pill);border:var(--border-w) solid var(--border-gold);
font-size:var(--step--1);color:var(--text-body);
transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
.themen a:hover{background:var(--gold-500);border-color:var(--gold-500);color:var(--night-900)}
.themen--hero{margin-top:var(--space-5)}
.themen--hero a{background:rgba(255,253,248,.14);border-color:rgba(255,253,248,.42);color:var(--cream-50);
backdrop-filter:blur(6px)}
.themen--hero a:hover{background:var(--gold-500);border-color:var(--gold-500);color:var(--night-900)}
.quelle{margin:0 0 var(--space-4);font-family:var(--font-mono);font-size:var(--step--1);color:var(--text-muted)}
.mehr{margin-top:var(--space-5);border-top:none}
.mehr .acc-btn{font-family:var(--font-body);font-size:var(--step--1);letter-spacing:.1em;
text-transform:uppercase;color:var(--gold-700);min-height:48px}
.mehr .acc-item{border-top:var(--border-w) solid var(--border-gold);border-bottom:none}
.mehr .acc-panel{max-width:var(--measure)}
.mehr .acc-panel p{margin:0 0 var(--space-4)}
.mehr .acc-panel h3{margin:var(--space-5) 0 var(--space-2);font-size:var(--step-1)}
.mehr .acc-panel h3:first-child{margin-top:0}
.mehr .acc-panel .regeln li{font-size:var(--step--1);color:var(--text-muted)}
.daten-liste{list-style:none;margin:0 0 var(--space-4);padding:0;max-width:var(--measure)}
.daten-liste li{display:flex;gap:var(--space-4);justify-content:space-between;align-items:baseline;
padding:8px 0;border-bottom:var(--border-w) solid var(--border-hairline);font-size:var(--step--1)}
.daten-liste li:last-child{border-bottom:none}
.btn-stack{display:grid;gap:var(--space-2);justify-items:start;max-width:340px;
margin-left:auto;padding-left:var(--space-6)}
.btn-stack .btn{justify-content:center;width:100%}
.daten-liste b{font-family:var(--font-mono);font-weight:400;color:var(--night-900);white-space:nowrap}
/* ---------- 20. Galerie & News ---------- */
.gal-grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.gal-card{margin:0;overflow:hidden;border-radius:var(--radius-lg);background:var(--surface-card);
box-shadow:var(--shadow-1);transition:transform var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out)}
.gal-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-3)}
.gal-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
transition:transform var(--dur-5) var(--ease-out)}
.gal-card:hover img{transform:scale(1.045)}
.gal-card figcaption{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:baseline;
padding:var(--space-3) var(--space-4);font-size:var(--step--1);color:var(--text-muted)}
.gal-card__tag{font-family:var(--font-body);font-size:var(--step--2,12px);letter-spacing:.14em;
text-transform:uppercase;color:var(--gold-700)}
.termin-grid{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
align-items:start}
.termin{max-width:none;padding:var(--space-6);border-radius:var(--radius-lg);
background:var(--surface-card);border:var(--border-w) solid var(--border-gold);box-shadow:var(--shadow-1)}
.termin h2{margin:var(--space-2) 0 var(--space-3);font-size:var(--step-2)}
.termin__daten{display:grid;gap:0;margin:var(--space-5) 0 0}
.termin__daten > div{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);gap:var(--space-4);
padding:10px 0;border-bottom:var(--border-w) solid var(--border-hairline)}
.termin__daten dt{font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-700)}
.termin__daten dd{margin:0;font-size:var(--step--1);color:var(--text-body)}
@media (max-width:575px){.termin__daten > div{grid-template-columns:1fr;gap:4px}}
.news-list{display:grid;gap:var(--space-6)}
.news-item{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:var(--space-6);
align-items:start;padding-bottom:var(--space-6);border-bottom:var(--border-w) solid var(--border-hairline)}
.news-item:last-child{border-bottom:none;padding-bottom:0}
.news-item__media{margin:0;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow-1)}
.news-item__media img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
transition:transform var(--dur-5) var(--ease-out)}
.news-item:hover .news-item__media img{transform:scale(1.045)}
.news-item h2{margin:var(--space-2) 0 var(--space-3);font-size:var(--step-2)}
.news-item p:last-child{margin:0;max-width:var(--measure)}
.news-meta{display:flex;gap:var(--space-3);align-items:center;margin:0}
.news-date{font-family:var(--font-mono);font-size:var(--step--1);color:var(--text-muted)}
@media (max-width:767px){.news-item{grid-template-columns:1fr;gap:var(--space-4)}}
/* ---------- 21. Tierpatenschaft ---------- */
.paten-grid{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.paten-card{overflow:hidden;background:var(--surface-card);border-radius:var(--radius-lg);
border:var(--border-w) solid var(--border-gold);box-shadow:var(--shadow-1);
transition:transform var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out)}
.paten-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-3)}
.paten-card__media{margin:0;overflow:hidden}
.paten-card__media img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;display:block;
transition:transform var(--dur-5) var(--ease-out)}
.paten-card:hover .paten-card__media img{transform:scale(1.045)}
.paten-card__body{padding:var(--space-5)}
.paten-card__body h3{margin:0}
.paten-card__sub{margin:4px 0 var(--space-3);font-family:var(--font-mono);
font-size:var(--step--1);color:var(--gold-700)}
.paten-card__body p:last-child{margin:0;color:var(--text-muted);font-size:var(--step--1)}
/* ---------- 22. Über uns ---------- */
.mitglied{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-3) var(--space-5);
margin-top:var(--space-7);padding:var(--space-5) var(--space-6);border-radius:var(--radius-lg);
background:var(--surface-card);border:var(--border-w) solid var(--border-gold);box-shadow:var(--shadow-1)}
.mitglied p:last-child{margin:0;flex:1 1 320px;color:var(--text-muted)}
.themen-layout{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:var(--space-8);
align-items:start}
.themen-rail{position:sticky;top:calc(var(--header-h) + var(--space-4))}
.themen-rail__title{margin:0 0 var(--space-3);font-family:var(--font-display);font-size:var(--step-1);
letter-spacing:.04em;text-transform:uppercase;color:var(--night-900);
padding-bottom:var(--space-3);border-bottom:var(--border-w) solid var(--border-gold)}
.themen-rail ul{list-style:none;margin:0;padding:0;display:grid}
.themen-rail li{border-bottom:var(--border-w) solid var(--border-hairline)}
.themen-rail a{display:block;padding:12px 0 12px 18px;position:relative;border:none;
font-size:var(--step--1);letter-spacing:.06em;text-transform:uppercase;color:var(--text-body);
transition:color var(--dur-2) var(--ease-out),padding-left var(--dur-2) var(--ease-out)}
.themen-rail a::before{content:"";position:absolute;left:0;top:calc(50% - 3px);width:6px;height:6px;
transform:rotate(45deg);background:var(--gold-500);opacity:.55;
transition:opacity var(--dur-2) var(--ease-out)}
.themen-rail a:hover{color:var(--gold-700);padding-left:24px}
.themen-rail a[aria-current="page"]{color:var(--gold-700)}
.themen-rail a[aria-current="page"]::before{opacity:1}
.themen-body{max-width:78ch}
.themen-body > .figure{margin:0 0 var(--space-6)}
.themen-body h3{margin:var(--space-6) 0 var(--space-2);font-size:var(--step-1)}
.themen-teaser{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
@media (max-width:991px){.themen-layout{grid-template-columns:1fr;gap:var(--space-6)}
.themen-rail{position:static}}
.chronik{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.chronik li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--space-4);align-items:baseline;
padding-bottom:var(--space-3);border-bottom:var(--border-w) solid var(--border-hairline)}
.chronik li:last-child{border-bottom:none}
.chronik__year{font-family:var(--font-mono);font-size:var(--step--1);color:var(--gold-700)}
.chronik p{margin:0;font-size:var(--step--1);color:var(--text-muted)}
.flyer{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:var(--space-5) 0}
.flyer img{width:100%;height:auto;border-radius:var(--radius-md);box-shadow:var(--shadow-1)}
.figure__caption{margin-top:var(--space-2);font-family:var(--font-mono);
font-size:var(--step--1);color:var(--text-muted)}
/* ---------- 23. Mitscrollender Buchen-Button ---------- */
.float-book{position:fixed;z-index:60;bottom:clamp(18px,4vh,40px);
right:max(16px,calc((100vw - var(--container)) / 2 - 92px));
display:flex;align-items:center;gap:0;padding:8px;border:none;
border-radius:999px;background:var(--night-900);color:var(--gold-300);
box-shadow:var(--shadow-3);text-decoration:none;
opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out),
visibility var(--dur-3) var(--ease-out),background var(--dur-2) var(--ease-out),
box-shadow var(--dur-2) var(--ease-out)}
.float-book.is-visible{opacity:1;visibility:visible;transform:none;animation:floatBook 3.2s var(--ease-out) infinite}
.float-book__icon{flex:none;display:grid;place-items:center;width:58px;height:58px;
border-radius:999px;background:var(--surface-card);overflow:hidden}
.float-book__icon img{width:100%;height:100%;object-fit:cover;display:block}
.float-book__label{display:flex;align-items:center;gap:10px;max-width:0;overflow:hidden;
white-space:nowrap;font-family:var(--font-body);font-size:var(--step--1);font-weight:600;
letter-spacing:.01em;opacity:0;
transition:max-width var(--dur-3) var(--ease-out),opacity var(--dur-2) var(--ease-out),
padding var(--dur-3) var(--ease-out)}
.float-book:hover,.float-book:focus-visible{background:var(--night-800);color:var(--amber-500);
box-shadow:var(--shadow-gold);animation-play-state:paused}
.float-book:hover .float-book__label,.float-book:focus-visible .float-book__label{
max-width:20rem;opacity:1;padding:0 14px 0 6px}
.float-book__arrow{font-size:1.1em;line-height:1}
@keyframes floatBook{0%,100%{transform:translateY(0) rotate(0)}
30%{transform:translateY(-7px) rotate(-2.5deg)}
60%{transform:translateY(-2px) rotate(1.5deg)}}
@media (prefers-reduced-motion:reduce){.float-book.is-visible{animation:none}}
@media (max-width:1439px){.float-book{right:clamp(16px,2.5vw,28px)}}
@media (max-width:1199px){.float-book{padding:6px}.float-book__icon{width:50px;height:50px}}
/* ---------- 17. Breakpoints ---------- */
/* iPad / small laptop: single-column splits, tighter header */
@media (max-width:1199px){
.split{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr 1fr}
.gal-btn--prev{left:6px} .gal-btn--next{right:6px}
}
@media (max-width:1199px){
:root{--header-h:88px}
.nav{display:none}
.nav-toggle{display:inline-flex}
.site-header{background:rgba(253,247,236,.94);backdrop-filter:saturate(1.1) blur(14px);
border-bottom:var(--border-w) solid var(--border-hairline)}
.header-inner{grid-template-columns:auto 1fr auto auto auto;padding-block:10px}
.lang-switch{grid-column:4}
.header-inner .btn--sm{grid-column:3;justify-self:end;width:auto}
.nav-toggle{grid-column:5}
.logo img{height:44px}
.header-veil{display:none}
.nav.is-open{display:block;position:absolute;top:100%;left:0;right:0;
background:var(--surface-card);box-shadow:var(--shadow-3);
border-top:var(--border-w) solid var(--border-hairline);padding:var(--space-4) var(--gutter)}
.nav.is-open .nav-list{flex-direction:column;align-items:stretch;gap:0}
.nav.is-open .nav-list a{display:block;min-height:52px;line-height:52px;
border-bottom:var(--border-w) solid var(--border-hairline)}
.nav.is-open .nav-parent{display:flex;justify-content:space-between;align-items:center}
.nav.is-open .nav-parent > a{flex:1}
.nav.is-open .nav-sub-toggle{width:52px;height:52px}
.nav.is-open .subnav{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
display:none;margin:0;padding:0 0 0 var(--space-4);border:none;box-shadow:none;background:none}
.nav.is-open .has-sub.is-open .subnav{display:grid}
.nav.is-open .subnav a{padding:0}
.nav.is-open .has-sub .nav-parent > a[aria-current="page"]{border-bottom-color:var(--border-hairline)}
.hero{height:auto;min-height:0}
.hero.hero--base{height:calc(100vh - var(--header-h));height:calc(100dvh - var(--header-h));min-height:420px}
.hero.hero--base .hero__inner{padding-top:var(--space-5);padding-bottom:var(--space-6)}
.hero__inner{padding-top:calc(var(--header-h) + var(--space-7));padding-bottom:var(--space-8)}
.hero__media{inset:0;height:100%}
.contact-plate{width:100%;max-width:420px;margin-inline:auto}
.cta-banner{padding:var(--space-6)}
.helper-card{justify-content:flex-start}
.toolbar{align-items:stretch}
.select{width:100%}
}
/* Below 1200px: only logo, language switch and hamburger */
@media (max-width:1199px){
.header-inner{grid-template-columns:auto 1fr auto}
.header-inner .btn--sm{display:none}
.lang-switch{grid-column:2;justify-self:center}
.nav-toggle{grid-column:3}
}
/* Phones */
@media (max-width:575px){
:root{--gutter:18px}
.hero__inner{padding-bottom:var(--space-7)}
.hero h1{font-size:var(--step-4)}
.btn{width:100%}
.header-inner .btn--sm{width:auto;padding:9px 14px;font-size:.78rem}
.btn-row{flex-direction:column;align-items:stretch}
.btn-row .btn{width:100%}
.contact-line{gap:var(--space-2)}
.contact-line__tel{font-size:var(--step-2)}
.contact-plate{flex-direction:column}
.contact-plate img{flex:0 0 auto;width:100%;height:150px}
.gal-item{flex-basis:78vw;width:78vw;height:200px}
.gal-btn{width:44px;height:44px}
.stats{gap:var(--space-5)}
.animals{grid-template-columns:1fr}
.cards{grid-template-columns:1fr}
.stimmen{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr;gap:var(--space-6)}
.footer-legal{flex-direction:column}
.figure--sm{max-width:100%}
}
@media (max-width:575px){
.float-book{bottom:16px;right:16px;padding:6px}
.float-book__icon{width:52px;height:52px}
.float-book:hover .float-book__label,.float-book:focus-visible .float-book__label{max-width:11rem;white-space:normal}
}
/* Lightbox */
.lightbox-overlay{position:fixed;inset:0;background:rgba(20,31,63,.92);display:flex;align-items:center;justify-content:center;
padding:40px;opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease-out);z-index:200}
.lightbox-overlay.is-open{opacity:1;pointer-events:auto}
.lightbox-overlay img{max-width:100%;max-height:100%;border-radius:var(--radius-md);box-shadow:var(--shadow-4)}
/* Bewertungen */
.bewertungen{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-5)}
.bewertung{background:var(--surface-card);border:var(--border-w) solid var(--border-hairline);border-radius:var(--radius-lg);
padding:var(--space-6);box-shadow:var(--shadow-1)}
.bewertung__stars{font-family:var(--font-mono);letter-spacing:.1em;color:var(--gold-600);font-size:var(--step--1);margin:0 0 var(--space-3)}
.bewertung p{margin:0 0 var(--space-4)}
.bewertung__name{font-family:var(--font-mono);font-size:var(--step--1);color:var(--text-muted)}
/* News-Teaser mit Thumbnails */
.news-teaser__thumbs{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.news-teaser__thumbs img{width:84px;height:84px;object-fit:cover;border-radius:var(--radius-sm);cursor:pointer;
border:var(--border-w) solid var(--border-hairline);transition:transform var(--dur-1) var(--ease-out)}
.news-teaser__thumbs img:hover{transform:scale(1.05)}
@media (max-width:767px){.news-teaser{grid-template-columns:1fr}}
.bewertung__meta{font-family:var(--font-mono);font-size:var(--step--1);color:var(--text-muted);margin:0 0 var(--space-2)}
.bewertung__meta strong{color:var(--text-body)}
.bewertungen-cta{display:flex;justify-content:center;margin-top:var(--space-6)}
/* Impressionen: ausklappbare Galerie + Auszeichnungen */
.gal-grid.is-collapsed .gal-card:nth-child(n+4){display:none}
.gal-more{display:flex;justify-content:center;margin-top:var(--space-6)}
.auszeichnungen{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4)}
.auszeichnungen img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius-md);
box-shadow:var(--shadow-1);cursor:pointer;transition:transform var(--dur-2) var(--ease-out)}
.auszeichnungen img:hover{transform:translateY(-3px);box-shadow:var(--shadow-3)}
/* ---------- Formularversand (Status, Honeypot, Spamschutz) ---------- */
/* Honeypot: für Menschen unsichtbar, für Bots ein ausfüllbares Feld.
display:none würde von manchen Bots erkannt, daher aus dem Bild geschoben. */
.form-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Spamschutz-Widget: an die Farbmarken des Hofes angeglichen. */
altcha-widget,.form-altcha{display:block;margin:2px 0 var(--space-4);--altcha-max-width:100%;
--altcha-color-base:var(--cream-100);--altcha-color-base-content:var(--text-body);
--altcha-border-color:var(--border-gold);--altcha-border-radius:var(--radius-sm);
--altcha-color-primary:var(--gold-600);--altcha-color-primary-content:var(--cream-50);
--altcha-color-neutral:var(--text-muted);--altcha-color-neutral-content:var(--text-body);
--altcha-color-success:var(--success-500);--altcha-color-error:#b4553a;
--altcha-checkbox-border-color:var(--border-gold);--altcha-checkbox-outline-color:var(--amber-500);
--altcha-spinner-color:var(--gold-600)}
/* Rückmeldung nach dem Absenden. Erst sichtbar, wenn das Skript sie füllt. */
.form-status{display:none;margin-top:var(--space-4);padding:12px 14px;
border-radius:var(--radius-sm);border:var(--border-w) solid var(--border-hairline);
font-size:var(--step--1);line-height:1.5}
.form-status.is-visible{display:block}
.form-status.is-note{background:var(--sand-200);color:var(--text-body)}
.form-status.is-ok{background:var(--meadow-100);border-color:rgba(79,125,67,.4);color:var(--meadow-800)}
.form-status.is-error{background:#fbe9e4;border-color:rgba(150,54,32,.35);color:#8c3a22}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#b4553a}
/* Utility: honour the hidden attribute over component display rules */
[hidden]{display:none!important}