/* ===================================================================
   Dschungel-Camp Bürstadt — kindlich-verspieltes Design
=================================================================== */
:root{
  --leaf:       #3DA35D;
  --leaf-dark:  #2B8049;
  --sun:        #FFC93C;
  --mango:      #FF9F1C;
  --coral:      #FF6B6B;
  --sky:        #4ECDC4;
  --grape:      #8E7CFF;
  --cream:      #FFFBF2;
  --ink:        #2B3A2F;
  --ink-soft:   #4A5B4E;

  --font-display: ui-rounded, "SF Pro Rounded", "Segoe UI Rounded", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --pattern-on-color: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20220%20220%22%3E%3Cg%20fill%3D%22%23FFFFFF%22%3E%3Cpath%20d%3D%22M20%2040c14-18%2034-18%2044-4-10%2016-30%2020-44%204z%22/%3E%3Cpath%20d%3D%22M170%2020c10-14%2026-12%2032%202-8%2012-24%2016-32-2z%22/%3E%3Cpath%20d%3D%22M60%20130c0-22%2010-38%2010-38s10%2016%2010%2038c0%2010-4%2016-10%2016s-10-6-10-16z%22/%3E%3Cpath%20d%3D%22M70%2092%20L70%20146%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M150%20150c-4-16%204-30%204-30s16%206%2020%2022c2%2010-2%2016-10%2018s-12-2-14-10z%22/%3E%3Ccircle%20cx%3D%2235%22%20cy%3D%22150%22%20r%3D%224%22/%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%2260%22%20r%3D%223.5%22/%3E%3Ccircle%20cx%3D%22190%22%20cy%3D%22110%22%20r%3D%224.5%22/%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22190%22%20r%3D%223.5%22/%3E%3Cpath%20d%3D%22M0%20185c8-10%2020-10%2026%200-6%208-18%2010-26%200z%22/%3E%3Cpath%20d%3D%22M195%20185c6-10%2018-10%2024%200-6%208-18%2010-24%200z%22/%3E%3C/g%3E%3C/svg%3E");
  --pattern-on-cream: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20220%20220%22%3E%3Cg%20fill%3D%22%233DA35D%22%3E%3Cpath%20d%3D%22M20%2040c14-18%2034-18%2044-4-10%2016-30%2020-44%204z%22/%3E%3Cpath%20d%3D%22M170%2020c10-14%2026-12%2032%202-8%2012-24%2016-32-2z%22/%3E%3Cpath%20d%3D%22M60%20130c0-22%2010-38%2010-38s10%2016%2010%2038c0%2010-4%2016-10%2016s-10-6-10-16z%22/%3E%3Cpath%20d%3D%22M70%2092%20L70%20146%22%20stroke%3D%22%233DA35D%22%20stroke-width%3D%222%22%20fill%3D%22none%22/%3E%3Cpath%20d%3D%22M150%20150c-4-16%204-30%204-30s16%206%2020%2022c2%2010-2%2016-10%2018s-12-2-14-10z%22/%3E%3Ccircle%20cx%3D%2235%22%20cy%3D%22150%22%20r%3D%224%22/%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%2260%22%20r%3D%223.5%22/%3E%3Ccircle%20cx%3D%22190%22%20cy%3D%22110%22%20r%3D%224.5%22/%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22190%22%20r%3D%223.5%22/%3E%3Cpath%20d%3D%22M0%20185c8-10%2020-10%2026%200-6%208-18%2010-26%200z%22/%3E%3Cpath%20d%3D%22M195%20185c6-10%2018-10%2024%200-6%208-18%2010-24%200z%22/%3E%3C/g%3E%3C/svg%3E");

  --max: 1120px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 74px; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 500;
  overflow-x: clip;
}
img,svg{ max-width:100%; display:block; }
a{ color: inherit; }
h1,h2,h3{ font-family: var(--font-display); font-weight: 700; margin: 0 0 .5em; line-height: 1.1; }
p{ margin: 0 0 1em; max-width: 62ch; }
.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 24px; position:relative; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ===================================================================
   Reveal-on-scroll (bouncy pop-in)
   NOTE: .reveal-item is visible by default (no JS = fully visible content).
   JS opts elements into the hidden pre-state via .reveal-pending, so a
   failed/blocked/slow observer can never leave content stuck invisible.
=================================================================== */
.reveal{ }
.reveal-item{ opacity: 1; }
.reveal-item.reveal-pending{
  opacity: 0;
  transform: translateY(26px) scale(.96);
}
.reveal-item.reveal-pending.is-visible{
  animation: pop-in .6s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes pop-in{
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* ===================================================================
   Floating / swinging / wiggling motion library
   (scale(var(--tier-scale,1)) is a no-op everywhere except the mobile
   tier-deco rule below, which sets --tier-scale — keeping it inside
   these shared keyframes is what lets a running animation and a
   responsive size-reduction coexist instead of one silently
   overwriting the other's `transform`.)
=================================================================== */
@keyframes float-y{
  0%,100%{ transform: scale(var(--tier-scale,1)) translateY(0) rotate(0deg); }
  50%{ transform: scale(var(--tier-scale,1)) translateY(-18px) rotate(6deg); }
}
.float-slow{ animation: float-y 7s ease-in-out infinite; }
.float-med{ animation: float-y 5s ease-in-out infinite; }
.float-fast{ animation: float-y 3.6s ease-in-out infinite; }

@keyframes swing{
  0%,100%{ transform: scale(var(--tier-scale,1)) rotate(-14deg); }
  50%{ transform: scale(var(--tier-scale,1)) rotate(14deg); }
}
.swing{ animation: swing 3.2s ease-in-out infinite; transform-origin: top center; }

@keyframes sway{
  0%,100%{ transform: scale(var(--tier-scale,1)) rotate(-4deg); }
  50%{ transform: scale(var(--tier-scale,1)) rotate(4deg); }
}
.sway{ animation: sway 4.5s ease-in-out infinite; transform-origin: bottom center; }
.sway-rev{ animation: sway 4.5s ease-in-out infinite reverse; transform-origin: bottom center; }

@keyframes wiggle{
  0%,100%{ transform: rotate(0deg) scale(1); }
  25%{ transform: rotate(-8deg) scale(1.05); }
  75%{ transform: rotate(8deg) scale(1.05); }
}
.wiggle-hover:hover{ animation: wiggle .5s ease-in-out; }

@keyframes pulse{
  0%,100%{ opacity:1; box-shadow: 0 0 18px rgba(61,163,93,.7); }
  50%{ opacity:.75; box-shadow: 0 0 6px rgba(61,163,93,.4); }
}
.pulse{ animation: pulse 1.8s ease-in-out infinite; }

.wiggle-text{
  display:inline-block;
  color: #AFC50C;
  -webkit-text-stroke: 2px var(--ink);
  animation: wiggle-text 3s ease-in-out infinite;
}
@keyframes wiggle-text{
  0%,100%{ transform: rotate(-2deg); }
  50%{ transform: rotate(2deg); }
}

/* ===================================================================
   Buttons — bouncy, squishy
=================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding: .9em 1.7em;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration:none;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
  box-shadow: 0 6px 0 rgba(0,0,0,.15);
}
.btn:hover{ transform: translateY(-3px) rotate(-1deg); }
.btn:active{ transform: translateY(2px) scale(.96); box-shadow: 0 2px 0 rgba(0,0,0,.15); }
.btn--sun{ background: var(--mango); color: var(--ink); box-shadow: 0 6px 0 var(--sun-600, #CE8A28); }
.btn--leaf{ background: var(--leaf); color: #fff; box-shadow: 0 6px 0 var(--leaf-dark); }
.btn--outline{ border-color: #fff; color: #fff; background: rgba(255,255,255,.12); box-shadow:none; }
.btn--outline:hover{ background: rgba(255,255,255,.22); }
.btn--outline-dark{ border-color: var(--ink); color: var(--ink); background: transparent; box-shadow:none; }
.btn--outline-dark:hover{ background: var(--ink); color: var(--cream); }

/* ===================================================================
   Ticker
=================================================================== */
.ticker{
  background: var(--ink);
  color: var(--cream);
  overflow:hidden;
  white-space:nowrap;
  /* The real cause of segments appearing at different visible sizes
     was never the font: it was Safari/WebKit's automatic text-size
     inflation ("text autosizing"), which boosts font size per text
     block using its own heuristics (roughly: how much text sits in
     how wide a box) — so two spans with identical font-size can still
     render at different visible sizes if WebKit decides one "needs"
     more boosting than the other. That's exactly why a longer segment
     like the opening hours grew relative to a short one like
     "Vollklimatisiert", and why swapping font-family alone never
     fully fixed it. text-size-adjust:100% switches that inflation off
     for this element, so every span is guaranteed to render at the
     literal declared size — regardless of how long its text is —
     with no possibility of drifting apart again as the ticker's
     wording changes over time. Scoped to the ticker only, as asked,
     rather than set on <html> for the whole page. */
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 9px 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.ticker__track{
  display:inline-flex;
  animation: ticker 42s linear infinite;
  /* font:inherit (rather than re-stating family/size/weight here)
     means there is only ever one place — .ticker above — where the
     ticker's typography is actually set. Future content edits inside
     the spans below can never accidentally end up on a different
     font-size, since there is no second value anywhere to drift out
     of sync with the first. */
  font: inherit;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.ticker__group{
  /* The whole sequence is duplicated into two of these — identical
     content, identical markup — so the loop has something to hand off
     to once the first one has scrolled fully past. Deliberately no
     gap or padding on .ticker__track itself: the old version put both
     the "gap between items" AND a padding-left (used to have the very
     first run start off-screen) directly on the animated element,
     which meant the -50% reset point wasn't actually the width of one
     group — it was thrown off by whatever that padding added, which
     is exactly what produced the visible jump. Here, the trailing
     gap between one group and the next lives on the group itself
     (padding-inline-end, matching the gap used between its own
     spans), so both groups always measure exactly the same width as
     each other — no matter how the text inside changes later — and
     .ticker__track's total width is always exactly twice that. A
     transform of -50% therefore always lands exactly on the second
     group's start position: pixel-perfect by construction, not by a
     tuned percentage. */
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  gap: 2.2em;
  padding-inline-end: 2.2em;
}
.ticker__group > span{
  font: inherit;
  font-size: 1em;
  font-weight: inherit;
  line-height: inherit;
  white-space: nowrap;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@keyframes ticker{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ===================================================================
   Header
=================================================================== */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(255,251,242,.9);
  backdrop-filter: blur(6px);
  border-bottom: 4px solid var(--sun);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 24px;
}
.brand{
  display:flex; align-items:center; gap: 10px;
  text-decoration:none; color: var(--ink);
}
.brand__mark{ flex:none; height:46px; width:auto; object-fit:contain; }
.brand__text{ font-family: var(--font-display); font-weight:700; font-size: 1.1rem; line-height:1.1; }
.brand__text em{ font-style: normal; color: #AFC50C; font-weight: 600; }

.nav__list{ list-style:none; display:flex; gap: 8px; margin:0; padding:0; }
.nav__list a{
  text-decoration:none; color: var(--ink-soft); font-weight:700; font-size: .92rem;
  font-family: var(--font-display);
  padding: 8px 14px; border-radius: 999px;
  transition: background .2s ease, color .2s ease, transform .15s ease;
  display:inline-block;
}
.nav__list a:hover{ background: var(--sun); color: var(--ink); transform: translateY(-2px) rotate(-1deg); }
.nav__list-highlight{
  background: var(--coral) !important;
  color: #fff !important;
  font-weight:800 !important;
  white-space: nowrap;
}
.nav__list-highlight:hover{ background: var(--mango) !important; color: var(--ink) !important; }
.nav__toggle{ display:none; }
.nav__checkbox{ position:fixed; top:0; left:0; opacity:0; width:1px; height:1px; pointer-events:none; }

@media (max-width: 900px){
  .nav__list{
    display:none;
    position:absolute; top: 100%; left:0; right:0;
    background: var(--cream);
    flex-direction: column; gap: 6px;
    padding: 10px 16px 16px;
    border-bottom: 4px solid var(--sun);
    z-index: 5;
  }
  /* Pure-CSS toggle: no JavaScript required for the menu to open/close.
     The checkbox is a sibling of the list, so :checked alone drives this. */
  .nav__checkbox:checked ~ .nav__list{ display:flex; }
  .nav__list a{ display:block; }
  .nav__toggle{
    display:flex; flex-direction:column; gap:5px;
    background: var(--sun); border: none; cursor:pointer; padding: 12px;
    border-radius: 12px;
    position: relative; z-index: 6;
  }
  .nav__toggle span{ width: 22px; height: 3px; border-radius: 2px; background: var(--ink); display:block; pointer-events:none; }
}

/* ===================================================================
   Hero
=================================================================== */
.hero{
  position: relative;
  background-image:
    linear-gradient(90deg, rgba(255,251,242,.95) 0%, rgba(255,251,242,.85) 34%, rgba(255,251,242,.35) 58%, rgba(255,251,242,0) 74%),
    url('assets/hero-background.jpg');
  background-size: cover;
  background-position: 62% 42%;
  background-repeat: no-repeat;
  padding: 44px 0 56px;
  min-height: 640px;
}
.hero__brand{
  position: relative; z-index: 2;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  margin: 0 0 14px;
}
.hero__tagline{
  font-family: var(--font-display); font-weight:800; text-transform:uppercase;
  font-size: 1.15rem; line-height:1.2; letter-spacing:.01em;
  color:#fff;
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 rgba(0,0,0,.25), 0 4px 14px rgba(0,0,0,.35);
  margin: 0;
  white-space: nowrap;
}
.hero__logo{
  display:block; width: 180px; height:auto;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.18));
}
@media (min-width: 900px){
  .hero__brand{
    position: absolute;
    top: 4px;
    left: calc(max(24px, (100vw - 1120px) / 2 + 24px) + 445px);
    margin: 0;
    z-index: 3;
  }
  .hero__tagline{ font-size: clamp(1.2rem, 0.5rem + 1.6vw, 2.1rem); white-space: nowrap; }
  .hero__logo{ width: clamp(200px, 130px + 7.5vw, 300px); }
}
.eyebrow{
  font-family: var(--font-display); font-weight:700; font-size: .85rem;
  color: var(--leaf-dark); margin-bottom: .35em;
  background: #fff; display:inline-block; padding: 5px 14px; border-radius: 999px;
}
.hero__title{
  font-size: clamp(2.6rem, 6.2vw, 4.4rem);
  max-width: 14ch;
  line-height: 1.05;
  margin-bottom: .15em;
  color: var(--ink);
}
.hero__lede{ font-size: 1.1rem; max-width: 46ch; color: var(--ink-soft); font-weight:600; margin-top: 8px; }
@media (min-width: 900px){
  .hero__lede{ max-width: 48ch; }
}
.hero__cta{ display:flex; gap: 16px; flex-wrap:wrap; margin: 16px 0 26px; }
.hero__cta .btn--outline{ border-color: var(--ink); color: var(--ink); background: #fff; }
.hero__cta .btn--outline:hover{ background: var(--sky); border-color: var(--sky); color: #fff; }

.hero__facts{ list-style:none; margin:0; padding:0; display:flex; gap: 34px; flex-wrap:wrap; }
.hero__facts li{ display:flex; flex-direction:column; gap: 2px; }
.hero__facts-emoji{ font-size: 1.4rem; }
.hero__facts strong{ font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); }
.hero__facts span:last-child{ font-size: .82rem; color: var(--ink-soft); }

@media (max-width: 1024px){
  .hero{
    background-image:
      linear-gradient(90deg, rgba(255,251,242,.95) 0%, rgba(255,251,242,.88) 46%, rgba(255,251,242,.4) 68%, rgba(255,251,242,0) 82%),
      url('assets/hero-background.jpg');
    background-position: 70% 42%;
    min-height: 560px;
    padding: 44px 0 48px;
  }
  .hero__facts{ gap: 20px; }
  .hero__facts-emoji{ font-size: 1.2rem; }
  .hero__facts strong{ font-size: 1rem; }
  .hero__facts span:last-child{ font-size: .78rem; }
}
@media (max-width: 760px){
  .lede-break{ display: none; }
  .hero{
    background-image:
      linear-gradient(180deg, rgba(255,251,242,.72) 0%, rgba(255,251,242,.62) 30%, rgba(255,251,242,.48) 58%, rgba(255,251,242,.4) 100%),
      url('assets/hero-background.jpg');
    background-size: auto 100%;
    background-position: 66% top;
    min-height: auto;
    padding: 16px 0 20px;
  }
  .hero__logo{ width: 260px; }
  .hero__brand{
    position: absolute; z-index: 3;
    top: 14px; left: 50%; transform: translateX(-50%);
    margin: 0;
    width: max-content; max-width: 94vw;
  }
  .hero__tagline{ font-size: 1.55rem; }
  .hero__inner{ margin-top: 280px; }
  .hero__title{ font-size: 2.3rem; margin-bottom: .1em; }
  .hero__lede{ font-size: 1rem; margin-top: 4px; color: var(--ink); text-shadow: 0 1px 3px rgba(255,255,255,.5); }
  .hero__cta{ margin: 10px 0 28px; gap: 10px; }

  /* compact per-line facts — no shared card, small translucent pill per line */
  .hero__facts{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 0;
  }
  .hero__facts li{
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    background: rgba(255,251,242,.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    padding: 4px 12px;
    border-radius: 999px;
  }
  .hero__facts-emoji{ font-size: 1rem; align-self: center; }
  .hero__facts strong{ font-size: .92rem; margin-right: 0; }
  .hero__facts span:last-child{ font-size: .78rem; }
  .hero__facts span:last-child::before{ content: "· "; }
}
@media (max-width: 340px){
  .hero__facts li{ flex-direction: column; align-items: flex-start; gap: 0; }
  .hero__facts span:last-child::before{ content: ""; }
}
@media (max-width: 460px){
  .hero{ background-position: 72% top; }
}

/* ===================================================================
   Section shells (bright color blocks)
=================================================================== */
.section{ padding: 80px 0; position:relative; overflow:hidden; }
.section--legal-page{ padding-top: 32px; }
.section::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--section-pattern, none);
  background-size: 240px 240px;
  opacity: .07;
  pointer-events:none;
  z-index:0;
}
.section > .wrap{ z-index:2; }
.corner-critter{ z-index:1; }
.jungle-floor{ z-index:1; }

.section--sky{ background: var(--sky); color: #fff; --section-pattern: var(--pattern-on-color); }
.section--sky p, .section--sky .fine-print{ color: rgba(255,255,255,.92); }
.section--sky h2{ color: #fff; }
.section--cream{ background: var(--cream); color: var(--ink); --section-pattern: var(--pattern-on-cream); }
.section--cream::before{ opacity: .05; }
.section--leaf{ background: var(--leaf); color: #fff; --section-pattern: var(--pattern-on-color); }
.section--leaf p, .section--leaf .fine-print--light{ color: rgba(255,255,255,.92); }
.section--leaf h2, .section--leaf h3{ color: #fff; }
.section--coral{ background: var(--coral); color: #fff; --section-pattern: var(--pattern-on-color); }
.section--coral p{ color: rgba(255,255,255,.92); }
.section--coral h2{ color: #fff; }
.section--sun{ background: var(--sun); color: var(--ink); --section-pattern: var(--pattern-on-cream); }

.section__head{ max-width: 60ch; margin-bottom: 34px; }
.section__lede{ font-size: 1.1rem; max-width: 58ch; font-weight:600; }
.section h2{ font-size: clamp(1.9rem, 3.6vw, 2.7rem); max-width: 18ch; }

.tag{
  display:inline-block; font-family: var(--font-display); font-weight:700;
  background: var(--mango); color: var(--ink); padding: 7px 20px; border-radius: 999px;
  margin-bottom: 16px; font-size: .92rem; letter-spacing: .01em;
}

/* corner critters peeking in */
.corner-critter{ position:absolute; width: 90px; opacity:.9; z-index:1; pointer-events:none; }
.corner-critter--left{ left: -10px; top: -10px; }
.corner-critter--right{ right: -6px; bottom: -6px; }

/* real-photo animal accents — small decorative touches, never a main motif */
.tier-deco{
  position:absolute; z-index:1; pointer-events:none;
  height:auto; display:block;
  filter: drop-shadow(0 14px 10px rgba(10,20,10,.35));
  --tier-scale: 1;
  transform: scale(var(--tier-scale,1));
}
@media (max-width: 600px){
  .tier-deco{ --tier-scale: .72; transform-origin: top right; }
}

/* Tiger + leaf perched on the Anaconda feature card: sits on the card's
   top edge on desktop/tablet (where the card is a wide side-by-side row,
   with plenty of clear space next to the heading), but on mobile the
   card stacks BELOW the heading, so the same "poke up above the card"
   offset would land on top of the heading text instead — there it sits
   at the card's own top-right corner rather than above it. */
.tier-anaconda-leaf{ top:-100px; }
.tier-anaconda-tiger{ top:-124px; }
@media (max-width: 860px){
  .tier-anaconda-leaf{ top:-25px; right:0% !important; }
  .tier-anaconda-tiger{ top:-17px; right:0% !important; }
}

/* soft contact shadow beneath each animal, suggesting it rests on the leaf */
.tier-shadow{
  position:absolute; z-index:0; pointer-events:none;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(15,25,15,.55) 0%, rgba(15,25,15,0) 70%);
  filter: blur(1.5px);
}
@media (max-width: 600px){
  .tier-shadow{ transform: scale(.72); transform-origin: top right; }
}

/* large layered leaf silhouettes for canopy depth */
.canopy-leaf{
  position:absolute; z-index:0; pointer-events:none;
  color: currentColor;
  opacity: .16;
}
.canopy-leaf svg{ width:100%; height:100%; display:block; fill: currentColor; }

/* jungle floor: grass silhouette along the bottom of a section */
.jungle-floor{
  position:absolute; left:0; right:0; bottom:0; height: 46px;
  pointer-events:none; z-index:1;
}
.jungle-floor svg{ width:100%; height:100%; display:block; }
.jungle-floor--light path{ fill: rgba(255,255,255,.16); }
.jungle-floor--dark path{ fill: rgba(43,58,47,.10); }

/* ===================================================================
   Check list
=================================================================== */
.check-list{ list-style:none; margin: 24px 0 0; padding:0; display:grid; gap: 14px; max-width: 640px; }
.check-list li{
  display:flex; align-items:center; gap: 12px;
  font-weight:700; font-family: var(--font-display); font-size: 1.02rem;
  background: rgba(255,255,255,.18);
  padding: 12px 18px; border-radius: 18px;
}
.check-list__icon{ font-size: 1.4rem; }

/* ===================================================================
   Split layout with sticker-framed illustrations
=================================================================== */
.split{ display:grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items:center; }
.split--reverse{ grid-template-columns: 1.2fr .8fr; }
.split--reverse .split__media{ order:2; }

.sticker-frame{
  background: #fff;
  border-radius: 28px;
  padding: 18px;
  box-shadow: 0 10px 0 rgba(0,0,0,.08);
  min-height: 60px;
}
.sticker-frame--tilt-l{ transform: rotate(-3deg); }
.sticker-frame--tilt-r{ transform: rotate(3deg); }
.sticker-frame svg{ width: 100%; height: auto; }
.video-frame{ padding: 12px; }
.welcome-video{
  display:block; width:100%; height:auto;
  border-radius: 16px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #000;
}

.zone{ fill: none; stroke-width: 3; }
.zone--a{ fill: #FFE1E1; stroke: var(--coral); }
.zone--b{ fill: #DFF6EE; stroke: var(--sky); }
.zone--c{ fill: #FFF3D2; stroke: var(--sun); }
.zone-label{ font-family: var(--font-display); font-size: 15px; font-weight:700; fill: var(--ink); text-anchor:middle; }
.zone-label--emoji{ font-size: 20px; }
.menu-card{ color: var(--ink); }
.menu-title{ font-family: var(--font-display); font-size: 22px; fill: var(--ink); }
.menu-note{ font-family: var(--font-display); font-size: 14px; fill: var(--coral); font-weight:700; }
.map-illustration{ filter: drop-shadow(0 6px 6px rgba(0,0,0,.15)); }

@media (max-width: 860px){
  .split, .split--reverse{ grid-template-columns: 1fr; gap: 30px; }
  .split--reverse .split__media{ order: 0; }
  .split__media{ max-width: 240px; margin: 0 auto; }
  .split__media:has(.video-frame){ max-width: 340px; }
}

/* ===================================================================
   Attraktionen
=================================================================== */
.feature--new{
  display:flex; gap: 24px; align-items:center;
  background: rgba(255,255,255,.14);
  border-radius: 28px;
  padding: 30px;
  margin: 20px 0 36px;
  border: 3px dashed rgba(255,255,255,.4);
  position: relative;
}
.feature__icon{ color: var(--sun); flex: none; width: 64px; cursor: default; }
.feature__photo{ flex: none; width: 46%; max-width: 480px; aspect-ratio: 4/3; border-radius: 18px; overflow:hidden; box-shadow: 0 6px 0 rgba(0,0,0,.12); }
.feature__photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.badge{
  display:inline-block; background: var(--coral); color: #fff;
  font-family: var(--font-display); font-size: .75rem; font-weight:800;
  padding: 4px 12px; border-radius: 999px; margin-bottom: 8px;
  transform: rotate(-4deg);
}
.feature__body h3{ font-size: 1.5rem; }
.coaster-word{
  display: inline-block;
  font-style: italic;
  font-weight: 900;
  font-size: 1.18em;
  color: var(--sun);
  text-shadow: 2px 2px 0 var(--coral), -1px -1px 0 rgba(0,0,0,.25);
  transform: translateY(-4px) rotate(-4deg) skewX(-6deg);
  letter-spacing: .02em;
}

.feature-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 20px;
}
.feature-grid > .feature-card{
  flex: 1 1 calc(33.333% - 13.334px);
  max-width: calc(33.333% - 13.334px);
}
.feature-card{
  background: rgba(255,255,255,.14);
  border-radius: 22px;
  padding: 26px;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.feature-card--photo{ padding: 0 0 22px; overflow:hidden; }
.feature-card__photo{ aspect-ratio: 4/3; overflow:hidden; margin-bottom: 16px; }
.feature-card__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.feature-card--photo h3, .feature-card--photo p{ padding: 0 22px; }
.feature-card:hover{ transform: translateY(-6px) rotate(-1deg); }
.feature-card__icon{ font-size: 2.6rem; margin-bottom: 10px; cursor: default; display:inline-block; }
.feature-card h3{ font-size: 1.1rem; margin-bottom: .4em; }
.feature-card p{ font-size: .92rem; margin:0; }

@media (max-width: 860px){
  .feature--new{ flex-direction:column; text-align:center; padding: 0 0 24px; }
  .feature__photo{ width:100%; max-width: none; aspect-ratio: 4/3; border-radius: 18px 18px 0 0; }
  .feature__body{ padding: 0 24px; }
  .feature-grid > .feature-card{ flex: 1 1 calc(50% - 10px); max-width: calc(50% - 10px); }
}
@media (max-width: 560px){
  .feature-grid > .feature-card{ flex: 1 1 100%; max-width: 100%; }
}

/* ===================================================================
   Ampel-Check
=================================================================== */
.ampel{ display:grid; grid-template-columns: 1.3fr .7fr; gap: 48px; align-items:center; }
.ampel__light{ display:flex; flex-direction:column; align-items:center; gap: 14px; }
.ampel__housing{
  background: var(--ink);
  border-radius: 24px;
  padding: 20px 16px;
  display:flex; flex-direction:column; gap: 16px;
  box-shadow: 0 8px 0 rgba(0,0,0,.15);
}
.ampel__item{ display:flex; flex-direction:column; align-items:center; gap: 6px; }
.ampel__label{ font-family: var(--font-display); font-size: .78rem; font-weight:700; color: #fff; }
.ampel__bulb{ width: 50px; height: 50px; border-radius:50%; display:block; }
.ampel__bulb--red{ background: #FF3B3B; animation: ampel-red 6s ease-in-out infinite; }
.ampel__bulb--yellow{ background: #FFDD00; animation: ampel-yellow 6s ease-in-out infinite; }
.ampel__bulb--green{ background: #2FEE6E; animation: ampel-green 6s ease-in-out infinite; }

@keyframes ampel-red{
  0%, 100%{ opacity:.25; box-shadow:none; }
  16%{ opacity:1; box-shadow: 0 0 12px 5px rgba(255,59,59,.85), 0 0 30px 12px rgba(255,59,59,.45); }
  33%{ opacity:.25; box-shadow:none; }
}
@keyframes ampel-yellow{
  0%, 33%, 100%{ opacity:.25; box-shadow:none; }
  50%{ opacity:1; box-shadow: 0 0 12px 5px rgba(255,221,0,.85), 0 0 30px 12px rgba(255,221,0,.45); }
  66%{ opacity:.25; box-shadow:none; }
}
@keyframes ampel-green{
  0%, 66%{ opacity:.25; box-shadow:none; }
  83%{ opacity:1; box-shadow: 0 0 12px 5px rgba(47,238,110,.85), 0 0 30px 12px rgba(47,238,110,.5); }
  100%{ opacity:.25; box-shadow:none; }
}
@media (prefers-reduced-motion: reduce){
  .ampel__bulb--red, .ampel__bulb--yellow{ opacity:.25; animation:none; }
  .ampel__bulb--green{ opacity:1; animation:none; box-shadow: 0 0 12px 5px rgba(47,238,110,.85), 0 0 30px 12px rgba(47,238,110,.5); }
}

@media (max-width: 760px){
  .ampel{ grid-template-columns: 1fr; }
  .ampel__housing{ flex-direction:row; }
}

/* ===================================================================
   Notice box
=================================================================== */
.notice-box{
  background: rgba(255,255,255,.9);
  color: var(--ink);
  border-radius: 22px;
  padding: 22px 24px;
  margin-top: 22px;
  border: 3px dashed var(--mango);
}
.notice-box h3{ font-size: 1.05rem; color: var(--mango); }
.notice-box p{ margin:0; font-size: .95rem; color: var(--ink-soft); }

/* Prominent "no outside food" callout — deliberately much stronger than
   the standard .notice-box, since this rule matters a lot to the operator. */
.food-alert{
  display:flex; align-items:flex-start; gap: 20px;
  background: #FFF1EE;
  border: 3px solid var(--coral);
  border-radius: 24px;
  padding: 26px 28px;
  margin-top: 26px;
  box-shadow: 0 6px 0 rgba(255,107,107,.15);
}
.food-alert__icon{ flex:none; width:72px; height:72px; border-radius:16px; }
.food-alert__text h3{ font-size:1.25rem; color: var(--coral); margin-bottom:.35em; }
.food-alert__text p{ margin:0; font-size:1rem; color: var(--ink); line-height:1.6; }
.food-alert__text strong{ font-weight:inherit; }
@media (max-width:600px){
  .food-alert{ flex-direction:column; align-items:center; text-align:center; gap:14px; padding: 24px 20px; }
}

.deposit-notice{
  background: #FFF7E0;
  border: 3px solid var(--mango);
  border-radius: 24px;
  padding: 26px 28px;
  margin: 8px 0 30px;
  box-shadow: 0 6px 0 rgba(255,159,28,.15);
}
.deposit-notice h3{ font-size:1.2rem; color: var(--mango); margin-bottom:.4em; }
.deposit-notice p{ margin:0; color:var(--ink); line-height:1.6; }

/* ===================================================================
   Geburtstag: intro photo + invitation download
=================================================================== */
.birthday-intro{
  display:grid; grid-template-columns: 1.3fr .9fr; gap: 44px; align-items:center;
  margin-bottom: 20px;
}
.birthday-intro__photo .sticker-frame{ padding: 12px; }
.birthday-intro__photo img{ border-radius: 16px; width:100%; height:auto; display:block; }

.invite-band{
  display:grid; grid-template-columns: .55fr 1.45fr; gap: 36px; align-items:center;
  background: #fff;
  border-radius: 28px;
  padding: 30px 36px;
  margin: 36px 0;
  box-shadow: 0 8px 0 rgba(0,0,0,.06);
}
.invite-band__preview .sticker-frame{ padding: 10px; max-width: 170px; margin: 0 auto; }
.invite-band__preview img{ border-radius: 10px; width:100%; height:auto; display:block; }
.invite-band__text h3{ font-size: 1.25rem; color: var(--ink); }
.invite-band__text p{ color: var(--ink-soft); }

@media (max-width: 860px){
  .birthday-intro{ grid-template-columns: 1fr; }
  .birthday-intro__photo{ max-width: 360px; margin: 0 auto; }
  .invite-band{ grid-template-columns: 1fr; text-align:center; }
  .invite-band__preview .sticker-frame{ max-width: 140px; }
}

/* ===================================================================
   Speisekarte (real menu)
=================================================================== */
.menu-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 28px;
}
.menu-panel{
  background: rgba(255,255,255,.94);
  color: var(--ink);
  border-radius: 24px;
  padding: 26px 28px;
  box-shadow: 0 8px 0 rgba(0,0,0,.08);
}
.menu-panel--wide{ grid-column: 1 / -1; }
.menu-panel__title{
  font-size: 1.2rem;
  color: var(--coral);
  margin-bottom: .6em;
}
.menu-panel__title--spaced{ margin-top: 1.1em; }
.menu-list{ list-style:none; margin:0; padding:0; display:grid; gap: 10px; }
.menu-list li{
  display:flex; justify-content:space-between; align-items:baseline; gap: 14px;
  border-bottom: 1px dotted #E4DAC0;
  padding-bottom: 8px;
}
.menu-list__name{ font-weight:600; font-size: .95rem; }
.menu-list__name small{ font-weight:500; color: var(--ink-soft); font-size: .82rem; }
.menu-list__name strong{
  font-family: var(--font-display); color: var(--leaf-dark); margin-right: .4em;
}
.menu-list__price{ font-family: var(--font-display); font-weight:700; color: var(--leaf-dark); white-space:nowrap; }
.menu-list--menu .menu-list__price{ color: var(--mango); }
.badge--inline{
  display:inline-block; transform: rotate(-4deg); margin-left: 6px;
  font-size: .62rem; padding: 2px 8px; vertical-align: middle;
}
.angus-stamp{
  display:inline-block; height: 50px; width:auto; vertical-align: middle;
  margin-left: 6px; transform: rotate(-4deg);
}
.menu-detail-small{ font-size: .78em; color: var(--ink-soft); }
@media (max-width: 600px){
  .angus-stamp{ height: 38px; margin-left: 3px; }
  .badge--inline{ font-size: .58rem; padding: 2px 7px; margin-left: 3px; }
  .menu-list__name strong{ margin-right: .25em; }
  .menu-list--menu .menu-list__name{ font-size: .86rem; }
}
.menu-list--cols{
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
}

@media (max-width: 860px){
  .menu-grid{ grid-template-columns: 1fr; }
  .menu-list--cols{ grid-template-columns: 1fr; }
}

/* ===================================================================
   Geburtstag
=================================================================== */
.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 26px; margin: 36px 0; }
.card-plain{
  background: #fff;
  border-radius: 26px;
  padding: 30px;
  box-shadow: 0 8px 0 rgba(0,0,0,.06);
  color: var(--ink);
}
.card-plain h3{ color: var(--ink); }
.card-plain p{ color: var(--ink-soft); }
.rule-card__icon{ width: 76px; height: 76px; border-radius: 18px; margin-bottom: 16px; }
.rule-band{ background: #fff; }
.rule-band .invite-band__preview .sticker-frame{ max-width: 220px; margin: 0 auto; }
.card-plain--warn{ background: #FFF0EE; }
.card-plain h3{ font-size: 1.2rem; }
.price-mini{ list-style:none; margin: 16px 0; padding:0; display:grid; gap: 10px; }
.price-mini li{
  display:flex; justify-content:space-between; gap: 12px;
  font-weight:700; font-size: .92rem;
  border-bottom: 2px dotted var(--ink-soft);
  padding-bottom: 8px;
}
.price-mini li span:last-child{ font-weight:700; color: var(--leaf-dark); white-space:nowrap; }
.fine-print{ font-size: .82rem; color: var(--ink-soft); margin:0; }
.fine-print--menu{ font-size: 1rem; font-weight:700; text-align:center; max-width:none; }
.fine-print--menu{ text-align:center; font-size: 1.05rem; font-weight:700; color: #fff; margin-left:auto; margin-right:auto; max-width:none; }
.rule-list{ margin:0; padding-left: 1.2em; display:grid; gap: 12px; font-size: .93rem; color: var(--ink-soft); }

.cta-band{
  background: var(--ink);
  color: #fff;
  border-radius: 28px;
  padding: 34px 38px;
  display:flex; justify-content:space-between; align-items:center; gap: 24px; flex-wrap:wrap;
}
.cta-band h3{ color: #fff; margin-bottom:.3em; }
.cta-band p{ margin:0; color: rgba(255,255,255,.85); }
.cta-band__actions{ display:flex; gap: 14px; flex-wrap:wrap; }
.cta-band .btn--outline-dark{ border-color: #fff; color: #fff; }
.cta-band .btn--outline-dark:hover{ background: #fff; color: var(--ink); }

/* ===================================================================
   Geburtstagsreservierung: form
=================================================================== */
.form-divider{
  display:flex; align-items:center; gap: 18px;
  margin: 40px 0 30px;
  color: var(--ink); font-family: var(--font-display); font-weight:800; font-size: 1.65rem;
}
.form-divider::before, .form-divider::after{
  content:""; flex:1; height: 2px; background: rgba(43,58,47,.25);
}
.form-divider span{ text-align:center; }

@media (max-width: 600px){
  .form-divider{ font-size: 1.2rem; gap: 10px; margin: 34px 0 26px; }
}
.form-intro{
  text-align:center; margin: 0 0 22px; font-weight:600; color: var(--ink-soft);
  max-width: 520px; margin-left:auto; margin-right:auto;
}

.reservation-form{
  background: #fff;
  border-radius: 28px;
  padding: 40px;
  box-shadow: 0 8px 0 rgba(0,0,0,.06);
  max-width: 620px;
  margin: 0 auto;
}
.form-columns{ display:block; }
.form-col{ min-width:0; }
.form-section{
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 2px dashed #E4DAC0;
}
.form-section:last-of-type,
.form-section--last{
  padding-bottom: 0;
  margin-bottom: 22px;
  border-bottom: none;
}
.form-section__title{
  font-size: 1.05rem;
  color: var(--coral);
  margin-bottom: 18px;
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.form-row:last-child{ margin-bottom: 0; }
.form-field{ display:flex; flex-direction:column; gap: 6px; }
.form-field label{
  font-family: var(--font-display); font-weight:700; font-size: .88rem; color: var(--ink);
}
.form-field input{
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  padding: .75em .9em;
  border: 2px solid #E4DAC0;
  border-radius: 14px;
  background: var(--cream);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form-field input:focus{
  outline: none; border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(78,205,196,.25);
}
.reservation-form.was-validated .form-field input:invalid{ border-color: var(--coral); }

.form-check{
  display:flex; align-items:flex-start; gap: 10px;
  margin: 13px 0;
  font-size: .82rem; color: var(--ink-soft); font-weight:600;
  cursor: pointer;
}
.form-check input{
  flex: none; width: 18px; height: 18px; margin-top: 2px;
  accent-color: var(--leaf);
  cursor: pointer;
}

.form-warning{
  background: rgba(255,159,28,.1);
  border: 2px dashed var(--mango);
  border-radius: 18px;
  padding: 14px 18px;
  margin: 16px 0;
}
.form-warning strong{ display:block; margin-bottom: 6px; color: var(--mango); font-family: var(--font-display); font-size: .88rem; }
.form-warning p{ margin:0; font-size: .8rem; color: var(--ink-soft); }

.form-submit{ width: 100%; justify-content:center; font-size: 1.1rem; padding: 1em; }
.form-note{ text-align:center; font-size: .82rem; color: var(--ink-soft); margin: 14px auto 0; max-width: none; }

@media (min-width: 860px){
  .reservation-form{ max-width: 980px; padding: 46px; }
  .form-columns{
    display:grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 40px;
    align-items:start;
  }
  .form-col--confirm{
    background: var(--cream);
    border-radius: 22px;
    padding: 28px;
  }
  .form-col--confirm .form-section{ margin-bottom: 0; }
  .form-submit{ margin-top: 22px; }
}

@media (max-width: 640px){
  .form-row{ grid-template-columns: 1fr; }
  .reservation-form{ padding: 26px; }
}

@media (max-width: 760px){ .two-col{ grid-template-columns: 1fr; } }

/* ===================================================================
   Öffnungszeiten
=================================================================== */
.hours-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 18px 0 20px; }
.hours-grid--two{ grid-template-columns: repeat(2, 1fr); max-width: 560px; }
.hours-group-title{
  font-family: var(--font-display); font-weight:800; font-size: 1.05rem;
  margin: 30px 0 4px; color: #fff;
}
.hours-note{
  font-size: .88rem; color: rgba(255,255,255,.8); font-weight:600;
  margin: 0 0 14px;
}
.hours-card{
  background: rgba(255,255,255,.16);
  border-radius: 22px;
  padding: 26px;
  display:flex; flex-direction:column; gap: 6px;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.hours-card:hover{ transform: translateY(-5px) rotate(1deg); }
.hours-card__emoji{ font-size: 1.8rem; }
.hours-card--accent{ background: var(--sun); }
.hours-card--accent .hours-card__time,
.hours-card--accent .hours-card__label{ color: var(--ink); }
.hours-card--rest{ background: rgba(0,0,0,.18); }
.hours-card--rest .hours-card__time{ color: #fff; }
.hours-card__time{ font-family: var(--font-display); font-size: 1.35rem; font-weight:700; }
.hours-card__label{ font-size: .85rem; color: rgba(255,255,255,.85); }

@media (max-width: 760px){ .hours-grid{ grid-template-columns: 1fr; } }

/* ===================================================================
   Eintrittspreise
=================================================================== */
.price-table{ margin: 30px 0; max-width: 640px; }
.price-row{
  display:flex; justify-content:space-between; gap: 16px;
  padding: 13px 6px;
  border-bottom: 2px dotted #E4DAC0;
  font-weight:600;
}
.price-row--main{ font-weight:800; font-size: 1.12rem; }
.price-row__amt{ font-family: var(--font-display); font-weight:700; color: var(--leaf-dark); white-space:nowrap; }
.price-row__amt--free{ color: var(--leaf-dark); }
.access-note{ display:flex; align-items:center; gap: 14px; margin-top: 20px; }
.access-note__emoji{ font-size: 1.8rem; }
.access-note p{ margin:0; font-weight:700; }

/* ===================================================================
   Kontakt
=================================================================== */
.contact{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 50px; align-items:center; }
.contact-list{ list-style:none; margin: 26px 0; padding:0; display:grid; gap: 18px; }
.contact-list li{ display:flex; flex-direction:column; gap: 4px; }
.contact-list strong{ font-family: var(--font-display); font-size: .85rem; }
.contact-list a{ text-decoration: underline; text-underline-offset: 3px; font-weight:600; }
.contact__links{ display:flex; gap: 12px; flex-wrap:wrap; margin-top: 6px; }
.contact__links .btn--outline-dark{ border-color: #fff; color: #fff; }
.contact__links .btn--outline-dark:hover{ background:#fff; color: var(--sky); }
.contact__media{ max-width: 260px; margin: 0 auto; }

@media (max-width: 860px){
  .contact{ grid-template-columns: 1fr; }
}

/* ===================================================================
   Footer
=================================================================== */
.site-footer{ background: var(--ink); color: rgba(255,255,255,.85); padding: 26px 0; }
.site-footer__inner{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 10px;
  text-align:center;
  font-size: .85rem;
}
.site-footer nav{ display:flex; gap: 20px; }
.site-footer nav a{ text-decoration:none; color: rgba(255,255,255,.85); font-weight:600; }
.site-footer nav a:hover{ text-decoration: underline; color: #fff; }
.footer__social{ display:flex; align-items:center; gap:12px; }
.footer__social a{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.08);
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.footer__social a:hover{ background: var(--sun); color: var(--ink); transform: translateY(-2px); }
.footer__social svg{ width:18px; height:18px; fill: currentColor; }

/* ===================================================================
   Confetti burst
=================================================================== */
.confetti-layer{
  position: fixed; inset:0; pointer-events:none; z-index: 999; overflow:hidden;
}
.confetti-piece{
  position:absolute; top: -10px; width: 10px; height: 14px; opacity: 0;
  animation: confetti-fall 2.4s ease-in forwards;
}
@keyframes confetti-fall{
  0%{ opacity:1; transform: translateY(0) rotate(0deg); }
  100%{ opacity:0; transform: translateY(100vh) rotate(540deg); }
}

/* ===================================================================
   Floating Google review badge
=================================================================== */
.review-badge{
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 900;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  display: flex;
  align-items: center;
  transition: transform .2s ease, opacity .2s ease;
}
.review-badge.is-hidden{ opacity:0; transform: translateY(20px) scale(.9); pointer-events:none; }
.review-badge__link{
  display:flex; align-items:center; gap: 10px;
  padding: 10px 18px 10px 12px;
  text-decoration:none; color: var(--ink);
}
.review-badge__g{ width: 26px; height: 26px; flex:none; }
.review-badge__text{ display:flex; flex-direction:column; line-height:1.25; }
.review-badge__text strong{ font-family: var(--font-display); font-size: .95rem; display:flex; align-items:center; gap:5px; }
.review-badge__stars{ color: #FBBC05; font-size: .8rem; letter-spacing:1px; }
.review-badge__text small{ font-size: .72rem; color: var(--ink-soft); font-weight:600; }
.review-badge__close{
  position:absolute; top:-8px; right:-8px;
  width: 22px; height: 22px; border-radius:50%;
  background: var(--ink); color:#fff; border: 2px solid #fff;
  font-size: .85rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  padding:0;
}
/* Small hand cue: tucked into the pill's own rounded corner, away from the
   G icon and text so nothing overlaps — purely decorative, doesn't affect
   layout or the badge's own size. */
.review-badge__point{
  position:absolute; right: 1px; bottom: 18px;
  width: 16px; height: 16px;
  pointer-events:none;
  animation: badgePoint 1.6s ease-in-out infinite;
}
@keyframes badgePoint{
  0%,100%{ transform: translate(0,0) rotate(-6deg); }
  50%{ transform: translate(-2px,-2px) rotate(-6deg); }
}
@media (max-width: 600px){
  .review-badge{ left: 10px; bottom: 10px; }
  .review-badge__link{ padding: 8px 14px 8px 10px; }
}

/* ===================================================================
   Cookie consent banner
=================================================================== */
.cookie-banner{
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  max-width: 560px;
  margin: 0 auto;
  z-index: 950;
  background: var(--ink);
  color: #fff;
  border-radius: 22px;
  padding: 20px 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  display:flex; flex-wrap:wrap; align-items:center; gap: 16px;
  transition: transform .25s ease, opacity .25s ease;
}
.cookie-banner.is-hidden{ opacity:0; transform: translateY(30px); pointer-events:none; }
.cookie-banner p{ flex:1; min-width: 220px; margin:0; font-size: .88rem; color: rgba(255,255,255,.92); }
.cookie-banner a{ color: #fff; text-decoration: underline; }
.cookie-banner__btn{ flex:none; padding: .7em 1.4em; font-size: .95rem; cursor:pointer; }
.cookie-dismiss-checkbox{ position:fixed; top:0; left:0; opacity:0; width:1px; height:1px; pointer-events:none; }
/* Pure-CSS guarantee: the banner disappears the instant the checkbox is
   checked, with zero dependency on JavaScript running at all. */
.cookie-dismiss-checkbox:checked ~ .cookie-banner{ display:none !important; }
/* Second, earlier guarantee for repeat visits: a tiny synchronous
   script in <head> (see index.html) adds this class to <html> before
   the banner further down the page is ever parsed, if consent was
   already stored. That means this rule is already in effect at the
   banner's very first paint — unlike the checkbox above, whose
   "checked" state can only be restored once script.js runs after the
   DOM is ready, which is one frame too late and is exactly what
   caused the brief flash this rule exists to prevent. */
.cookie-consent-accepted .cookie-banner{ display:none !important; }
@media (max-width: 600px){
  .cookie-banner{ left:10px; right:10px; bottom:10px; padding: 18px 20px; }
}