/* Weiß & Kollegen Kleintierpraxis — Design aus Figma "Desktop_1440 – Home" */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --cream: #ECE9E5;
  --cream-bright: #F4F1EC;
  --orange: #C86B34;
  --orange-deep: #A85526;
  --yellow: #D99A3E;
  --green: #70712E;
  --ink: #2E2A26;
  --hairline: rgba(200, 107, 52, 0.45);
  --hairline-cream: rgba(244, 241, 236, 0.55);
  --shell-gap: 6px;
  --radius-panel: 20px;
  --radius-card: 12px;
  --radius-btn: 10px;
  --content-x: clamp(20px, 4vw, 56px);
  --measure-wide: 1440px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Mikrotypografie: ausgeglichene Headline-Zeilen, keine Hurenkinder,
   deutsche Silbentrennung im Fließtext, Tabellenziffern bei Zeitangaben */
h1, h2, h3, .section-title { text-wrap: balance; }
p, li, figcaption, summary { text-wrap: pretty; }
.prose p, .prose li, .faq .answer, .review-card blockquote,
.panel-claim p, .team-member p, .contact-card p, .small-note {
  -webkit-hyphens: auto;
  hyphens: auto;
}
.hours-table, .infobar-inner, .emergency-call .number, .contact-card .value {
  font-variant-numeric: tabular-nums;
}
.no-hyph { -webkit-hyphens: none; hyphens: none; }

/* E-Mail-Adressen nie umbrechen — außer in den schmalen Kontaktkarten,
   wo sonst Überlauf droht (dort greift overflow-wrap) */
a[href^="mailto:"] { white-space: nowrap; }
.contact-card .value a[href^="mailto:"] { white-space: normal; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  background: var(--cream);
  color: var(--orange);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

.wrap {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding-left: var(--content-x);
  padding-right: var(--content-x);
}

/* ---------- Hinweis-Banner (Praxis geschlossen) ---------- */

.notice-banner {
  background: var(--green);
  color: var(--cream-bright);
  padding: 14px var(--content-x);
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  text-align: center;
  font-size: 16px;
}
.notice-banner strong { font-weight: 700; }

/* ---------- Header ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 28px;
  padding-bottom: 28px;
}
.site-header .logo img { width: 165px; height: auto; }

.site-nav { display: flex; gap: 16px; flex-wrap: wrap; }
.site-nav a {
  display: inline-block;
  border: 1.5px solid var(--orange);
  border-radius: var(--radius-btn);
  padding: 11px 24px;
  font-size: 16px;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.site-nav a:hover { background: var(--orange); color: var(--cream-bright); }
.site-nav a.active { background: var(--orange); color: var(--cream-bright); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-btn);
  padding: 14px 28px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  color: var(--orange);
  background: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn:hover { background: var(--orange); color: var(--cream-bright); }
.btn .arrow { font-weight: 700; }

.btn--cream { color: var(--cream-bright); }
.btn--cream:hover { background: var(--cream-bright); color: var(--orange); }

/* ---------- Hero ---------- */

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding-top: clamp(56px, 11vw, 165px);
  padding-bottom: clamp(56px, 11vw, 165px);
}
.br-desktop { display: none; }
@media (min-width: 1081px) { .br-desktop { display: inline; } }
.hero-copy h1 {
  font-size: clamp(40px, 4.6vw, 66px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  max-width: 12em;
}
.hero-copy .sub {
  margin-top: 24px;
  font-size: clamp(16px, 1.32vw, 19px);
  line-height: 1.5;
  max-width: 44em;
}
.hero-signs { flex-shrink: 0; width: clamp(260px, 44vw, 640px); }
.hero-signs img, .hero-signs svg { width: 100%; height: auto; }
.hero-signs svg { overflow: visible; }

/* ---------- Infoleiste ---------- */

.infobar { padding-bottom: 34px; }
.infobar-inner {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  align-items: center;
  gap: 8px 32px;
}
.infobar-inner > * {
  padding: 5px 0;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.infobar-inner > * + * {
  border-left: 1px solid var(--orange);
  padding-left: 32px;
}

/* ---------- Panels (orange Flächen) ---------- */

.shell { padding: 0 var(--shell-gap); }

.panel {
  background: var(--orange);
  color: var(--cream-bright);
  border-radius: var(--radius-panel);
}
.panel-services { padding: clamp(48px, 6vw, 88px) 0 clamp(40px, 5vw, 72px); }
.panel-services .lede {
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.5;
  max-width: 42em;
}

.service-grid {
  margin-top: clamp(36px, 4vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(24px, 3vw, 56px);
}
.service-grid ul { list-style: none; }
.service-grid li {
  border-top: 1px solid var(--hairline-cream);
  padding: 11px 2px 12px;
  font-size: 17px;
}
.service-grid li:last-child { border-bottom: 1px solid var(--hairline-cream); }

.panel-services .btn-row { margin-top: clamp(36px, 4vw, 64px); }

/* ---------- Sektionen ---------- */

.section { padding-top: clamp(56px, 8vw, 120px); padding-bottom: clamp(56px, 8vw, 120px); }

.section-title {
  font-size: clamp(30px, 2.9vw, 42px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.005em;
  max-width: 24em;
}

/* Team */
.team-photo { margin-top: clamp(28px, 3.5vw, 52px); }
.team-photo img { width: 100%; height: auto; border-radius: var(--radius-card); }
.team-signs { margin: clamp(36px, 5vw, 72px) auto 0; width: min(760px, 78%); }
.team-map { margin-top: clamp(28px, 3.5vw, 52px); border: 1px solid var(--orange); border-radius: var(--radius-card); overflow: hidden; }
.team-map { position: relative; }
.team-map svg { display: block; width: 100%; height: auto; aspect-ratio: 1359 / 762; cursor: grab; touch-action: none; user-select: none; --z: 1; }
.team-map svg.grab { cursor: grabbing; }
.team-map svg:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* Beschriftungen und Marker bleiben beim Zoomen gleich groß */
.anfahrt .lbl { font-weight: 700; letter-spacing: .08em; }
.anfahrt .lbl-town { font-size: calc(19px / var(--z)); stroke-width: calc(5px / var(--z)); }
.anfahrt .lbl-village { font-size: calc(15px / var(--z)); stroke-width: calc(5px / var(--z)); }
.anfahrt .lbl-hamlet { font-size: calc(12px / var(--z)); stroke-width: calc(4px / var(--z)); }
.anfahrt .lbl-water { font-size: calc(19px / var(--z)); font-weight: 400; letter-spacing: .18em; stroke-width: calc(5px / var(--z)); }
.anfahrt[data-zoom="far"] .pin text, .anfahrt[data-zoom="far"] .l-minor, .anfahrt[data-zoom="far"] .lbl-hamlet, .anfahrt[data-zoom="far"] .stn text:last-child, .anfahrt[data-zoom="far"] .l-res { display: none; }
.anfahrt[data-zoom="far"] .lbl-village { font-size: calc(12px / var(--z)); letter-spacing: .05em; }
.anfahrt[data-zoom="far"] .lbl-town { font-size: calc(15px / var(--z)); }
.anfahrt[data-zoom="near"] .lbl-town, .anfahrt[data-zoom="near"] .lbl-water { opacity: .55; }
.map-ctl { position: absolute; right: 14px; top: 14px; display: flex; flex-direction: column; gap: 6px; }
.map-ctl button { width: 40px; height: 40px; border: 1px solid var(--orange); border-radius: 10px; background: var(--cream-bright); color: var(--orange); font: 700 20px/1 Geist, system-ui, sans-serif; cursor: pointer; }
.map-ctl button:hover { background: var(--orange); color: var(--cream-bright); }
.map-hint { position: absolute; left: 14px; bottom: 12px; font-size: 12px; color: var(--orange); opacity: .75; pointer-events: none; }
@media (max-width: 760px) {
  .map-hint { display: none; }
  .anfahrt .lbl-town { font-size: calc(13px / var(--z)); } .anfahrt .lbl-village { font-size: calc(11px / var(--z)); letter-spacing: .04em; }
  .anfahrt .lbl-hamlet { font-size: calc(9px / var(--z)); } .anfahrt .lbl-water { font-size: calc(12px / var(--z)); letter-spacing: .12em; }
  .anfahrt .lbl { stroke-width: calc(4px / var(--z)); }
  .anfahrt[data-zoom="far"] .lbl-village { font-size: calc(10px / var(--z)); }
  .map-ctl { right: 8px; top: 8px; gap: 4px; } .map-ctl button { width: 34px; height: 34px; font-size: 17px; }
}
.anfahrt-map { margin-top: clamp(28px, 3.5vw, 48px); }
.anfahrt-note { margin-top: 14px; font-size: 15px; line-height: 1.55; }
.team-signs svg { width: 100%; height: auto; overflow: visible; }
.team-note { margin: clamp(22px, 2.5vw, 36px) auto 0; max-width: 52ch; text-align: center; font-size: 17px; line-height: 1.55; }
.team .btn-row { margin-top: clamp(28px, 3.5vw, 52px); }

/* ---------- Hinweise / FAQ + Öffnungszeiten ---------- */

.visit-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}
.visit-left h2 {
  font-size: clamp(34px, 3.4vw, 50px);
  font-weight: 400;
  line-height: 1.15;
}
.visit-left .intro { margin-top: 28px; font-size: 17px; max-width: 30em; }

.hours-table { margin-top: clamp(32px, 4vw, 56px); }
.hours-table .row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 17px;
}
.hours-table .row:last-child { border-bottom: 0; }

.hours-note { margin-top: 18px; font-size: 15px; line-height: 1.55; max-width: 34em; }
.hours-note a { text-decoration: none; font-weight: 700; }
.hours-note a:hover { text-decoration: underline; }

.visit-signs { margin-top: clamp(36px, 5vw, 72px); width: 200px; }

.faq { display: grid; gap: 18px; }
.faq details {
  border: 1px solid var(--orange);
  border-radius: var(--radius-card);
  padding: 0 30px;
  background: transparent;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.3;
  padding: 26px 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq details .answer {
  padding: 0 0 26px;
  font-size: 17px;
  line-height: 1.6;
  max-width: 38em;
}
.faq details[open] summary { padding-bottom: 14px; }

/* ---------- Orange Band (Drei Jahrzehnte) ---------- */

.panel-claim {
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.panel-claim h2 {
  font-size: clamp(28px, 2.7vw, 38px);
  font-weight: 400;
  line-height: 1.3;
  max-width: 18em;
}
.panel-claim p { font-size: 17px; line-height: 1.6; max-width: 34em; }

/* ---------- Bewertungen ---------- */

.reviews-grid {
  margin-top: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.review-card {
  border: 1px solid var(--orange);
  border-radius: var(--radius-card);
  padding: clamp(28px, 3vw, 44px) clamp(28px, 3.5vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  font-size: 17px;
  line-height: 1.6;
}
.review-card .who { font-weight: 700; }
.review-card .stars { display: flex; gap: 5px; color: var(--orange); }
.reviews .btn-row { margin-top: clamp(28px, 3.5vw, 48px); }

/* ---------- Pilsensee-Abschluss + Footer ---------- */

.lake {
  position: relative;
  min-height: clamp(340px, 37vw, 540px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-image: linear-gradient(rgba(30, 30, 28, 0.32), rgba(30, 30, 28, 0.32)), url('../assets/img/pilsensee.jpg');
  background-image: linear-gradient(rgba(30, 30, 28, 0.32), rgba(30, 30, 28, 0.32)), image-set(url('../assets/img/pilsensee.avif') type('image/avif'), url('../assets/img/pilsensee.webp') type('image/webp'), url('../assets/img/pilsensee.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center;
  color: var(--cream-bright);
  text-align: center;
  padding: 48px var(--content-x);
}
.lake .claim {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.1;
}
.lake .claim img { width: clamp(48px, 5vw, 72px); height: auto; }
.lake .subclaim { font-size: clamp(17px, 1.6vw, 23px); font-style: italic; }

.site-footer {
  background: var(--orange);
  color: var(--cream-bright);
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: 32px;
}
.site-footer .logo img { width: 180px; height: auto; }
.site-footer .foot-row {
  margin-top: clamp(48px, 7vw, 120px);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 15px;
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .foot-links { display: flex; gap: 10px; }

/* ---------- Unterseiten ---------- */

.eyebrow { font-size: 16px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.section .eyebrow, .panel .eyebrow { margin-bottom: 18px; }

.page-head { padding-top: clamp(40px, 6vw, 90px); padding-bottom: clamp(32px, 5vw, 70px); }
.page-head h1 {
  margin-top: 14px;
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  max-width: 16em;
}
.page-head .lede { margin-top: 22px; font-size: clamp(17px, 1.5vw, 20px); max-width: 38em; line-height: 1.55; }

.prose { max-width: 46em; font-size: 17px; line-height: 1.65; }
.prose h2 { font-size: clamp(24px, 2.3vw, 32px); font-weight: 400; margin: 44px 0 14px; }
.prose h3 { font-size: 19px; font-weight: 700; margin: 28px 0 8px; }
.prose p + p { margin-top: 14px; }
.prose ul { margin: 12px 0 12px 22px; }
.prose li { margin: 6px 0; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* Leistungen */
.service-blocks { display: grid; gap: 22px; }
.service-block {
  border: 1px solid var(--orange);
  border-radius: var(--radius-card);
  padding: clamp(28px, 3vw, 44px) clamp(28px, 3.5vw, 52px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px clamp(28px, 4vw, 72px);
}
.service-block .cat { font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.service-block h2 { font-size: clamp(24px, 2.4vw, 33px); font-weight: 400; line-height: 1.2; margin-top: 10px; }
.service-block .desc { margin-top: 16px; font-size: 17px; line-height: 1.6; max-width: 30em; }
.service-block ul { list-style: none; align-self: center; }
.service-block li {
  border-top: 1px solid var(--hairline);
  padding: 11px 2px 12px;
  font-size: 17px;
}
.service-block li:last-child { border-bottom: 1px solid var(--hairline); }

/* Team-Liste (Praxis-Seite) */
.team-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: clamp(28px, 3.5vw, 48px); }
.team-member {
  border: 1px solid var(--orange);
  border-radius: var(--radius-card);
  padding: clamp(26px, 3vw, 40px);
}
.team-member .role { font-size: 15px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.team-member h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 400; margin-top: 10px; }
.team-member .role-sub { margin-top: 4px; font-size: 15px; opacity: 0.8; }
.team-member p { margin-top: 12px; font-size: 16px; line-height: 1.6; }

/* Kontakt-Karten */
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: clamp(28px, 3.5vw, 48px); }
.contact-card {
  border: 1px solid var(--orange);
  border-radius: var(--radius-card);
  padding: clamp(26px, 3vw, 40px);
}
.contact-card .label { font-size: 15px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.contact-card .value { margin-top: 12px; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.3; overflow-wrap: anywhere; }
.contact-card .value a { text-decoration: none; }
.contact-card .value a:hover { text-decoration: underline; }
.contact-card p { margin-top: 10px; font-size: 16px; line-height: 1.55; }

/* Notfall */
.emergency-call {
  margin-top: clamp(28px, 3.5vw, 48px);
  background: var(--orange);
  color: var(--cream-bright);
  border-radius: var(--radius-panel);
  padding: clamp(32px, 4vw, 56px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.emergency-call .label { font-size: 17px; }
.emergency-call .number { font-size: clamp(32px, 4vw, 54px); line-height: 1.1; text-decoration: none; font-weight: 700; }

.clinic-list { list-style: none; margin-top: 18px; }
.clinic-list li { border-top: 1px solid var(--hairline); }
.clinic-list li:last-child { border-bottom: 1px solid var(--hairline); }
.clinic-list a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 2px;
  font-size: 17px;
  text-decoration: none;
}
.clinic-list a:hover { background: rgba(200, 107, 52, 0.07); }
.small-note { margin-top: 16px; font-size: 14px; opacity: 0.8; max-width: 44em; }

/* Karten ohne Label-Zeile: kein Leerraum oben */
.team-member h3:first-child,
.contact-card .value:first-child { margin-top: 0; }

/* ---------- Seiten-Themes: Grün (Praxis / Kaninchen), Gelb (Leistungen / Hund) ---------- */

.page-green .panel,
.page-green .site-footer { background: var(--green); }

.page-yellow .panel,
.page-yellow .site-footer { background: var(--yellow); color: #4A3110; }
.page-yellow .site-footer { color: #4A3110; }

/* Bilder-Galerie (grüne Section auf der Praxis-Seite) */
.panel-gallery { padding: clamp(48px, 6vw, 84px) 0; }
.panel-gallery h2 {
  font-size: clamp(28px, 2.7vw, 38px);
  font-weight: 400;
  line-height: 1.3;
  max-width: 20em;
}
.panel-gallery .gallery-intro { margin-top: 16px; font-size: 17px; line-height: 1.6; max-width: 38em; }
.gallery-grid {
  margin-top: clamp(28px, 3.5vw, 48px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.gallery-item { margin: 0; }
.gallery-item .frame {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: rgba(244, 241, 236, 0.12);
  display: grid;
  place-items: center;
}
.gallery-item .frame img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item .frame.placeholder {
  border: 1px dashed rgba(244, 241, 236, 0.55);
  background: transparent;
  font-size: 14px;
  opacity: 0.85;
}
.gallery-item figcaption { margin-top: 10px; font-size: 15px; }

@media (max-width: 1080px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Mikroanimationen ---------- */

:root { interpolate-size: allow-keywords; }

/* Button-Pfeile schieben beim Hover nach rechts */
.btn .arrow { display: inline-block; transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* Hero-Ampersands: gestaffelter Auftritt, danach Hover-Lift */
.hero-signs .amp {
  opacity: 0;
  transform: translateY(16px);
  animation: amp-in 0.6s cubic-bezier(0.22, 0.8, 0.36, 1) forwards;
}
.hero-signs .amp-cat { animation-delay: 0.1s; }
.hero-signs .amp-dog { animation-delay: 0.25s; }
.hero-signs .amp-rabbit { animation-delay: 0.4s; }
@keyframes amp-in { to { opacity: 1; transform: none; } }
.hero-signs .amp-done {
  animation: none;
  opacity: 1;
  transform: none;
  cursor: pointer;
  pointer-events: bounding-box;
}

/* Klick: Cartoon-Hüpfer — ducken, abspringen, gestreckt fliegen, gestaucht landen, nachfedern */
.hero-signs .amp {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

/* Charakter-Animationen der Einzelteile: Verformung per Scherung (skew),
   die Ansatzkante bleibt fest am Körper — kein Spalt, organisches Biegen. */
.hero-signs .tail, .hero-signs .ear, .hero-signs .pup,
.hero-signs .hopper, .hero-signs .cross { transform-box: fill-box; }

.hero-signs .amp-cat .tail { transform-origin: 10% 100%; animation: tail-sway 3.4s ease-in-out infinite; }
@keyframes tail-sway {
  0%, 100% { transform: skewY(0deg) scaleY(1); }
  30%      { transform: skewY(8deg) scaleY(1.05); }
  65%      { transform: skewY(-5deg) scaleY(0.97); }
}
.hero-signs .amp-cat .ear { transform-origin: 50% 100%; animation: ear-twitch 5s ease-in-out infinite; }
.hero-signs .amp-cat .ear-l { animation-delay: 2.4s; }
@keyframes ear-twitch {
  0%, 86%, 96%, 100% { transform: skewX(0deg) scaleY(1); }
  89% { transform: skewX(-12deg) scaleY(0.94); }
  92% { transform: skewX(6deg) scaleY(1.02); }
}

.hero-signs .pup { transform-origin: 50% 100%; animation: dog-bob 1.6s ease-in-out infinite; }
@keyframes dog-bob {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.006, 0.985); }
}
.hero-signs .amp-dog .ear { animation-duration: 1.6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.hero-signs .amp-dog .ear-l { transform-origin: 90% 8%; animation-name: ear-flop-l; }
.hero-signs .amp-dog .ear-r { transform-origin: 10% 8%; animation-name: ear-flop-r; }
@keyframes ear-flop-l {
  0%, 100% { transform: skewX(0deg) scaleY(1); }
  50%      { transform: skewX(10deg) scaleY(1.06); }
}
@keyframes ear-flop-r {
  0%, 100% { transform: skewX(0deg) scaleY(1); }
  50%      { transform: skewX(-10deg) scaleY(1.06); }
}

.hero-signs .hopper { transform-origin: 50% 100%; animation: hop 2.8s ease-in-out infinite; }
@keyframes hop {
  0%, 46%, 100% { transform: none; }
  52% { transform: scale(1.06, 0.9); }
  62% { transform: translateY(-30px) scale(0.96, 1.08); }
  72% { transform: translateY(0) scale(1.08, 0.9); }
  80% { transform: translateY(-7px) scale(0.99, 1.03); }
  88% { transform: none; }
}
.hero-signs .amp-rabbit .ear { transform-origin: 50% 100%; animation: ear-spring 2.8s ease-in-out infinite; }
@keyframes ear-spring {
  0%, 46%, 100% { transform: skewX(0deg) scaleY(1); }
  56% { transform: skewX(5deg) scaleY(0.96); }
  64% { transform: skewX(-9deg) scaleY(1.07); }
  74% { transform: skewX(7deg) scaleY(1.02); }
  84% { transform: skewX(-3deg) scaleY(1); }
}

.hero-signs .cross { transform-origin: 50% 50%; animation: heartbeat 3s ease-in-out infinite; }
@keyframes heartbeat {
  0%, 62%, 100% { transform: scale(1); }
  70% { transform: scale(1.16); }
  76% { transform: scale(1); }
  82% { transform: scale(1.1); }
  88% { transform: scale(1); }
}
.hero-signs .amp-jump { animation: amp-jump 1s ease; }
@keyframes amp-jump {
  0%   { transform: none; }
  14%  { transform: scale(1.08, 0.86); }
  38%  { transform: translateY(-26px) scale(0.94, 1.1); }
  56%  { transform: translateY(0) scale(1.1, 0.88); }
  72%  { transform: translateY(-8px) scale(0.98, 1.04); }
  86%  { transform: translateY(0) scale(1.03, 0.97); }
  100% { transform: none; }
}

/* Scroll-Reveal (Klasse wird per JS nur unterhalb des Folds vergeben) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease-out, transform 0.55s ease-out; }
.reveal.in-view { opacity: 1; transform: none; }

/* FAQ gleitet auf und zu (moderne Browser; sonst normales Springen) */
.faq details::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }

/* Geschlossen-Banner gleitet einmal sanft herein */
.notice-banner { animation: banner-in 0.5s ease-out both; }
@keyframes banner-in { from { opacity: 0; transform: translateY(-10px); } }

@media (prefers-reduced-motion: reduce) {
  .hero-signs .amp, .notice-banner { animation: none; opacity: 1; transform: none; }
  .hero-signs .tail, .hero-signs .ear, .hero-signs .pup,
  .hero-signs .hopper, .hero-signs .cross { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn .arrow, .faq details::details-content { transition: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .hero { flex-direction: column; align-items: flex-start; }
  .hero-signs { width: min(480px, 80%); }
  .infobar-inner { grid-template-columns: repeat(2, auto); justify-content: start; }
  .infobar-inner > * + * { border-left: 0; padding-left: 0; }
  .visit-grid { grid-template-columns: 1fr; }
  .panel-claim { grid-template-columns: 1fr; }
  .service-block { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .site-header { flex-direction: column; align-items: flex-start; }
  .site-nav a { padding: 10px 18px; font-size: 15px; }
  .reviews-grid { grid-template-columns: 1fr; }
  .team-list { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr; }
  .service-grid li:last-child { border-bottom: 0; }
  .service-grid ul:last-child li:last-child { border-bottom: 1px solid var(--hairline-cream); }
  .infobar-inner { grid-template-columns: 1fr; }
  .infobar-inner > * { padding: 10px 0; white-space: normal; }
  .lake .claim { flex-direction: column; gap: 14px; }
}