:root{
  --meadow:#f2f1e4;
  --meadow-deep:#e8e6d2;
  --barn-red:#b3402a;
  --barn-red-dark:#8f2f1d;
  --forest:#33482f;
  --forest-deep:#22301f;
  --wheat:#dc9f2e;
  --ink:#2b2a22;
  --paper:#fffdf7;
  --line: rgba(43,42,34,0.12);
  --radius-lg: 28px;
  --radius-md: 16px;
  --shadow: 0 14px 40px -18px rgba(34,48,31,0.35);
  --display: "Fraunces", serif;
  --hand: "Caveat", cursive;
  --body: "Work Sans", system-ui, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--body);
  background:var(--meadow);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0 0 .4em;line-height:1.08;color:var(--forest-deep);}
p{margin:0 0 1em;}
.container{max-width:1160px;margin:0 auto;padding:0 24px;}
.skip-link{position:absolute;left:-999px;top:0;background:var(--forest);color:#fff;padding:10px 18px;border-radius:0 0 10px 0;z-index:200;}
.skip-link:focus{left:0;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--body);font-weight:600;font-size:.95rem;
  padding:13px 26px;border-radius:100px;text-decoration:none;
  border:2px solid transparent;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  cursor:pointer;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--barn-red);color:#fff;box-shadow:0 10px 24px -10px rgba(179,64,42,.6);}
.btn-primary:hover{background:var(--barn-red-dark);}
.btn-outline{background:transparent;border-color:var(--forest-deep);color:var(--forest-deep);}
.btn-outline:hover{background:var(--forest-deep);color:#fff;}

/* Header */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(242,241,228,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:10px 24px;max-width:1160px;margin:0 auto;gap:20px;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none;}
.brand img{height:56px;width:auto;}
nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0;font-weight:600;font-size:.92rem;}
nav a{text-decoration:none;color:var(--ink);position:relative;padding:4px 0;white-space:nowrap;}
nav a::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;background:var(--barn-red);transition:width .2s ease;}
nav a:hover::after{width:100%;}
nav a.active{color:var(--barn-red-dark);}
nav a.active::after{width:100%;}
.burger{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.burger span{display:block;width:24px;height:2px;background:var(--forest-deep);margin:5px 0;border-radius:2px;}

/* Minimal text-only hero (Startseite, Beitritt & Kontakt) */
.mini-hero{padding:64px 0 12px;}
.logo-large{height:220px;width:auto;margin:0 auto 20px;}
@media (max-width:600px){.logo-large{height:150px;}}
.mini-hero h1{font-size:clamp(1.9rem,4vw,2.8rem);}
.mini-hero .hero-sub{font-size:1.08rem;color:#4b4a3e;max-width:52ch;}
.mini-hero .eyebrow{color:var(--barn-red);}
.mini-hero .eyebrow svg{stroke:var(--barn-red);}

/* Page hero (used on every page) */
.page-hero{position:relative;overflow:hidden;}
.page-hero .hero-media{width:100%;aspect-ratio:16/6;overflow:hidden;}
.page-hero .hero-media img{width:100%;height:100%;object-fit:cover;}
.page-hero .hero-text{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(0deg, rgba(34,48,31,.82) 10%, rgba(34,48,31,0) 100%);
  color:#fff;padding:70px 0 26px;
}
.page-hero .hero-text .container{max-width:900px;}
.page-hero h1{color:#fff;font-size:clamp(1.9rem,4vw,3rem);margin-bottom:.2em;}
.page-hero p{color:#efeade;max-width:60ch;margin:0;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--wheat);
  margin-bottom:10px;
}
.eyebrow svg{width:16px;height:16px;stroke:var(--wheat);}

/* Home hero variant (bigger, with CTAs) */
.home-hero{position:relative;overflow:hidden;}
.home-hero .hero-media{width:100%;aspect-ratio:16/8;overflow:hidden;}
.home-hero .hero-media img{width:100%;height:100%;object-fit:cover;}
.home-hero .hero-text{
  position:absolute;left:0;right:0;bottom:0;top:0;display:flex;align-items:flex-end;
  background:linear-gradient(0deg, rgba(34,48,31,.88) 20%, rgba(34,48,31,.15) 65%, rgba(34,48,31,0) 100%);
  color:#fff;padding-bottom:44px;
}
.home-hero h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.6rem);max-width:16ch;}
.home-hero .hero-sub{color:#efeade;max-width:52ch;font-size:1.08rem;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px;}

/* quote banner */
.quote-band{
  background:var(--forest);color:#fbf7ea;
  padding:44px 24px 50px;text-align:center;
}
.quote-band blockquote{
  font-family:var(--hand);font-size:clamp(1.5rem,3vw,2.1rem);
  max-width:820px;margin:0 auto;line-height:1.35;font-weight:600;
}
.quote-band cite{display:block;margin-top:10px;font-family:var(--body);font-style:normal;font-weight:600;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;color:var(--wheat);}
.divider{display:block;width:100%;line-height:0;}
.divider svg{width:100%;height:auto;display:block;}

/* Sections */
section{padding:76px 0;}
.section-head{max-width:640px;margin:0 0 40px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:clamp(1.7rem,3vw,2.3rem);}
.icon-badge{
  width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--paper);box-shadow:var(--shadow);margin-bottom:16px;
}
.icon-badge svg{width:24px;height:24px;stroke:var(--barn-red);fill:none;}
.band-alt{background:var(--paper);}

/* two card grid */
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.card{
  background:var(--paper);border-radius:var(--radius-lg);padding:34px 30px;
  box-shadow:var(--shadow);border:1px solid var(--line);
}
.card h3{font-size:1.25rem;}
.card ul{margin:0;padding-left:1.1em;}
.card li{margin-bottom:.4em;}

/* two-col layout with photo */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.split img{border-radius:var(--radius-lg);box-shadow:var(--shadow);width:100%;height:100%;object-fit:cover;}
.split.reverse .text-col{order:2;}
.split.reverse .img-col{order:1;}

.feature-list{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.feature-list li{
  display:flex;align-items:center;gap:10px;background:var(--paper);
  border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:.92rem;font-weight:500;
}
.feature-list li svg{width:18px;height:18px;stroke:var(--forest);flex:none;}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.gallery figure{margin:0;border-radius:16px;overflow:hidden;box-shadow:0 10px 24px -14px rgba(0,0,0,.4);}
.gallery img{width:100%;height:230px;object-fit:cover;transition:transform .3s ease;}
.gallery a:hover img{transform:scale(1.04);}
.gallery figcaption{
  background:var(--paper);padding:10px 14px;font-size:.85rem;font-weight:600;color:var(--forest-deep);
}

/* Tiere */
.animal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 34px;}
.animal-card{
  background:var(--forest);color:#fbf7ea;border-radius:var(--radius-md);padding:22px 18px;text-align:center;
}
.animal-card .count{display:block;font-family:var(--display);font-size:1.9rem;font-weight:600;color:var(--wheat);}
.animal-card .label{font-size:.85rem;color:#e6e3d3;}

/* Familie / Beitritt */
.familie-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;}
.info-block{background:var(--paper);border-radius:var(--radius-lg);border:1px solid var(--line);padding:30px 28px;box-shadow:var(--shadow);margin-bottom:22px;}
.info-block h3{font-size:1.15rem;color:var(--barn-red-dark);}
.download-list{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:10px;}
.download-list a{
  display:flex;align-items:center;gap:10px;background:var(--forest);color:#fff;text-decoration:none;
  padding:12px 16px;border-radius:12px;font-weight:600;font-size:.92rem;transition:background .15s ease;
}
.download-list a:hover{background:var(--forest-deep);}
.download-list svg{width:18px;height:18px;stroke:#fff;flex:none;}

/* Termine */
.termine-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.termine-card{
  background:var(--paper);border-radius:var(--radius-md);padding:24px 22px;border-left:5px solid var(--wheat);box-shadow:var(--shadow);
}
.termine-card .date{font-family:var(--display);font-weight:600;font-size:1.15rem;color:var(--forest-deep);display:block;margin-bottom:4px;}
.termine-card .label{font-size:.88rem;color:#6b6a5b;}

/* Kontakt */
.kontakt-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;}
.kontakt-main{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.kontakt-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:26px 24px;box-shadow:var(--shadow);}
.kontakt-card h3{font-size:1.05rem;color:var(--barn-red-dark);}
.kontakt-card a.link-line{display:inline-flex;align-items:center;gap:8px;margin-top:6px;text-decoration:none;font-weight:600;color:var(--forest-deep);}
.kontakt-card a.link-line svg{width:16px;height:16px;stroke:var(--forest-deep);}
.map-card{border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);text-decoration:none;position:relative;display:block;}
.map-card iframe{width:100%;height:100%;min-height:280px;border:0;display:block;}
.map-card .map-tag{position:absolute;left:14px;bottom:14px;background:#fff;padding:8px 14px;border-radius:100px;font-weight:700;font-size:.82rem;display:inline-flex;gap:6px;align-items:center;z-index:2;}

/* Footer */
footer{background:var(--forest-deep);color:#dcdcc9;padding:38px 0;text-align:center;font-size:.88rem;}
footer a{color:#fff;text-decoration:underline;}
.footer-brand{font-family:var(--display);font-size:1.1rem;color:#fff;margin-bottom:6px;}
.socials{margin-top:14px;display:flex;justify-content:center;gap:14px;}
.socials a{display:flex;align-items:center;gap:6px;color:#dcdcc9;text-decoration:none;font-weight:600;}
.socials svg{width:18px;height:18px;stroke:#dcdcc9;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}

/* Responsive */
@media (max-width: 980px){
  .card-grid{grid-template-columns:1fr;}
  .split{grid-template-columns:1fr;}
  .split.reverse .text-col, .split.reverse .img-col{order:initial;}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .animal-grid{grid-template-columns:repeat(2,1fr);}
  .familie-grid{grid-template-columns:1fr;}
  .termine-list{grid-template-columns:1fr;}
  .kontakt-grid{grid-template-columns:1fr;}
  .kontakt-main{grid-template-columns:1fr;}
  .home-hero .hero-media, .page-hero .hero-media{aspect-ratio:4/5;}
}
@media (max-width: 720px){
  nav ul{
    position:fixed;top:76px;left:0;right:0;background:var(--meadow);
    flex-direction:column;gap:0;padding:10px 24px 20px;
    border-bottom:1px solid var(--line);
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:all .2s ease;
  }
  nav ul.open{transform:translateY(0);opacity:1;pointer-events:auto;}
  nav li{border-top:1px solid var(--line);}
  nav a{display:block;padding:14px 0;}
  .burger{display:block;}
  section{padding:56px 0;}
  .gallery{grid-template-columns:1fr 1fr;}
  .gallery img{height:150px;}
  .animal-grid{grid-template-columns:repeat(2,1fr);}
  .quote-band{padding:34px 20px 42px;}
}