
:root{--bg:#f4f1e8;--paper:#fffdf8;--ink:#172016;--muted:#5d685a;--green:#224c35;--green2:#3d7450;--honey:#c89532;--rust:#8b492f;--line:#d9d5c8;--shadow:0 18px 48px rgba(24,39,28,.12);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;line-height:1.65;background:radial-gradient(circle at 10% 0,#fff 0,transparent 30%),var(--bg)}img{max-width:100%;display:block}a{color:var(--green);text-decoration-thickness:.08em;text-underline-offset:.18em}.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.7rem;z-index:99}.nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:1rem;padding:.65rem clamp(1rem,4vw,4rem);background:rgba(255,253,248,.93);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.brand{text-decoration:none;display:flex;align-items:baseline;gap:.55rem;font-weight:900}.brand span{font-size:1.5rem}.brand small{font-weight:600;color:var(--muted)}.menu{margin-left:auto;display:flex;gap:.85rem;flex-wrap:wrap}.menu a{text-decoration:none;font-weight:700;font-size:.92rem}.menu-btn{display:none;margin-left:auto;border:1px solid var(--line);background:#fff;padding:.6rem .85rem;border-radius:999px}main{min-height:65vh}.hero{min-height:78vh;display:grid;place-items:end start;padding:clamp(2rem,8vw,7rem);position:relative;overflow:hidden;background:#173523}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,20,13,.86),rgba(9,20,13,.35) 55%,rgba(9,20,13,.12)),url('../img/tiergarten.png') center/cover}.hero-content{position:relative;max-width:850px;color:#fff}.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-weight:800;color:#f4cf78}.hero h1{font-size:clamp(3rem,8vw,7rem);line-height:.95;margin:.3rem 0 1.2rem}.hero .lead{font-size:clamp(1.2rem,2.3vw,1.75rem);max-width:780px}.actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}.btn{display:inline-block;padding:.8rem 1.1rem;border-radius:999px;background:var(--honey);color:#1c241c;text-decoration:none;font-weight:900}.btn.alt{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6)}.section{padding:clamp(3rem,7vw,6.5rem) clamp(1rem,6vw,6rem)}.section.narrow{max-width:1000px;margin:auto}.section h1,.section h2{line-height:1.1}.section h1{font-size:clamp(2.3rem,6vw,5rem)}.section h2{font-size:clamp(1.8rem,4vw,3.1rem)}.intro{font-size:1.2rem;color:#364336;max-width:800px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}.card{background:var(--paper);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}.card-body{padding:1.25rem}.card h3{margin:.1rem 0 .5rem}.card img{aspect-ratio:4/3;object-fit:cover}.kicker{color:var(--rust);font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}.quote{font-size:clamp(1.3rem,3vw,2rem);font-weight:800;border-left:6px solid var(--honey);padding:1.2rem 1.5rem;background:#fff8e8;border-radius:0 18px 18px 0}.split{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;gap:.8rem}.gallery img{width:100%;height:100%;object-fit:cover;border-radius:18px}.timeline{border-left:3px solid var(--green2);padding-left:1.6rem}.timeline article{margin:0 0 2rem;position:relative}.timeline article:before{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:var(--honey);left:-2.05rem;top:.45rem}.map-wrap{position:relative;max-width:1536px;margin:auto;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);background:#111}.map-wrap img{width:100%}.hotspot{position:absolute;transform:translate(-50%,-50%);border:none;background:transparent;border-radius:50%;cursor:pointer}.hotspot:hover{background:transparent}.hotspot:focus{outline:none}.hotspot:focus-visible{outline:3px solid rgba(255,255,255,.95);outline-offset:2px}.legend{font-size:.92rem;color:var(--muted);text-align:center}.filterbar{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0 2rem}.filterbar button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:.55rem .9rem;font-weight:800}.filterbar button.active{background:var(--green);color:white}.animal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.animal-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:inherit}.animal-card img{aspect-ratio:4/3;object-fit:cover}.animal-card div{padding:1rem}.animal-card small{color:var(--muted);font-style:italic}.profile-hero{display:grid;grid-template-columns:1fr 1fr;min-height:60vh}.profile-hero img{width:100%;height:100%;object-fit:cover}.profile-copy{padding:clamp(2rem,6vw,6rem);display:flex;flex-direction:column;justify-content:center}.badge{display:inline-flex;align-self:flex-start;background:#e8f0e7;border-radius:999px;padding:.35rem .7rem;font-weight:800}.notice{border:2px solid #c66;padding:1rem;background:#fff1f1;border-radius:12px}.legal h2{margin-top:2.4rem}.placeholder{background:#fff1cc;border:2px dashed #be7d12;padding:.9rem;border-radius:10px;font-weight:800}.credits{font-size:.88rem;color:var(--muted)}footer{padding:3rem clamp(1rem,6vw,6rem);background:#15291d;color:#eef3ed;display:grid;grid-template-columns:2fr 1fr;gap:2rem}footer a{color:#fff}.footer-links{display:grid;gap:.4rem}.copyright{grid-column:1/-1;color:#b9c6ba;font-size:.9rem}@media(max-width:950px){.grid,.animal-grid{grid-template-columns:repeat(2,1fr)}.split,.profile-hero{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr}.gallery img:first-child{grid-column:1/-1}.menu-btn{display:block}.menu{display:none;position:absolute;top:100%;left:0;right:0;padding:1rem;background:#fff;box-shadow:var(--shadow);flex-direction:column}.menu.open{display:flex}}@media(max-width:600px){.grid,.animal-grid{grid-template-columns:1fr}.hero{min-height:72vh}.hero h1{font-size:3.5rem}footer{grid-template-columns:1fr}.copyright{grid-column:1}.section{padding-left:1rem;padding-right:1rem}}

/* Lesbarkeit langer Überschriften und ausführlicher Tierprofile */
.section h1,.section h2,.profile-copy h1{text-wrap:balance;overflow-wrap:normal;word-break:normal;hyphens:auto}
.section h2{font-size:clamp(1.55rem,3.3vw,2.65rem);max-width:24ch}
.nowrap{white-space:nowrap}
.animal-profile h2{margin-top:2.6rem;margin-bottom:.55rem}
.animal-profile p{font-size:1.08rem;max-width:75ch}
.profile-note{padding:1rem 1.2rem;background:#eef4ed;border-left:4px solid var(--green2);border-radius:0 12px 12px 0;color:#425043}
.shift-section{max-width:900px;margin:2.2rem 0 1.2rem}
.shift-section h2{margin-bottom:.4rem}
.shift-grid{grid-template-columns:repeat(3,1fr)}
.shift-grid .animal-card div{padding:1.1rem}
.shift-grid .animal-card p{color:#3f4b40}
@media(max-width:950px){.shift-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.section h2{font-size:clamp(1.45rem,7vw,2rem);max-width:none}.shift-grid{grid-template-columns:1fr}.profile-copy h1{font-size:clamp(2.3rem,12vw,4.2rem)}}

.balance{text-wrap:balance}
.section h2.balance{max-width:18ch}
.role-tag{display:block;margin:.7rem 0 .45rem;font-weight:900;color:var(--rust);font-size:.79rem;letter-spacing:.07em;text-transform:uppercase}
.animal-card .role-tag{margin:.75rem 0 .35rem}
.profile-copy .role-tag{margin:.8rem 0 .55rem}
.shift-section{margin:2rem 0 1rem}
.shift-section h2{margin-bottom:.2rem}

/* Tierbilder: Seitenverhältnis erhalten, keine Verzerrung */
/* Tierbilder: unverzerrt, groß und einheitlich */
.animal-card img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#1f271f}
.profile-hero{min-height:0;align-items:center}
.profile-hero img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:transparent}
@media(max-width:950px){.profile-hero img{width:100%;max-height:none;aspect-ratio:4/3}}

.profile-hero img.isolated-animal{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:transparent;padding:clamp(.7rem,2vw,1.4rem)}
@media(max-width:950px){.profile-hero img.isolated-animal{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:transparent;padding:clamp(.7rem,2vw,1.4rem)}}

.animal-card img.isolated-animal{object-fit:contain;background:transparent;padding:.55rem}.profile-hero img.isolated-animal{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:transparent;padding:clamp(.7rem,2vw,1.4rem)}

.profile-hero{background:transparent}.profile-hero > img, .profile-hero > picture{background:var(--bg)}.animal-card picture, .animal-card img{background:transparent}

.long-title{font-size:clamp(2rem,4.3vw,3.8rem)!important;line-height:1.04;max-width:24ch;text-wrap:balance;letter-spacing:-.01em}
@media(max-width:600px){.long-title{font-size:clamp(1.85rem,8.2vw,3rem)!important;max-width:22ch}}

.animal-card img.isolated-animal{object-fit:contain;background:var(--bg);padding:.55rem}


/* Einheitlicher Hintergrund für sämtliche Tierbilder */
.animal-card img,
.animal-card img.isolated-animal,
.profile-hero > img,
.profile-hero img.isolated-animal {
  background-color: var(--bg) !important;
  background-image: none !important;
  object-fit: contain !important;
}
.animal-card img,
.animal-card img.isolated-animal {
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: .55rem;
}
.profile-hero,
.profile-hero > img,
.profile-hero img.isolated-animal {
  background-color: var(--bg) !important;
}
.profile-hero > img,
.profile-hero img.isolated-animal {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  padding: clamp(.7rem,2vw,1.4rem);
}


/* Einheitliche Tierbildflächen */
.animal-card img.isolated-animal,
.profile-hero img.isolated-animal {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center;
  background: var(--bg) !important;
  padding: clamp(.6rem, 1.8vw, 1.25rem);
}
.animal-card, .profile-hero { background: var(--bg); }

/* Lange Seitentitel */
.long-title {
  font-size: clamp(2rem, 4.05vw, 3.65rem) !important;
  line-height: 1.04;
  max-width: 31ch;
  text-wrap: balance;
  letter-spacing: -.015em;
}
@media (max-width: 600px) {
  .long-title { max-width: 27ch; }
}


/* WordPress-Anpassungen */
.menu ul,.menu{list-style:none}.menu-item{display:block}.menu-item a{display:block}
.admin-bar .nav{top:32px}
.entry-content>*{max-width:75ch}.entry-content img{border-radius:18px}
.wp-post-image{max-width:100%;height:auto}
@media(max-width:782px){.admin-bar .nav{top:46px}}
