.lebensbaum {
  --lb-size: 110px;
  --lb-size-mobile: 110px;
  --lb-gold: #c1962e;
  --lb-gold-hi: #e0c36a;
  --lb-gold-lo: #8a6918;
  --lb-bottom: 1.5rem;
  --lb-bottom-mobile: 5.5rem;
  --lb-left: 1.25rem;
  --lb-z-index: 80;
  --lb-ink: #2a261c;
  --lb-muted: #4f4a3e;
  --lb-card: #fffefc;
  --lb-line: rgba(193, 150, 46, 0.22);

  position: fixed;
  z-index: var(--lb-z-index);
  right: auto;
  bottom: calc(var(--lb-bottom) + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  width: max-content;
  max-width: calc(100vw - 2rem);
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  pointer-events: none;
}

.lebensbaum *,
.lebensbaum *::before,
.lebensbaum *::after {
  box-sizing: border-box;
}

.lebensbaum__trigger {
  pointer-events: auto;
  appearance: none;
  display: grid;
  place-items: center;
  width: var(--lb-size);
  height: var(--lb-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--lb-gold);
  cursor: pointer;
  line-height: 0;
  box-shadow: none;
}

.lebensbaum__tree-wrap {
  position: relative;
  display: block;
  width: var(--lb-size);
  height: var(--lb-size);
  opacity: 0;
  animation: tree-fade-in 0.7s ease-out 2.5s forwards;
}


.lebensbaum__tree {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.22));
}

.leaf-clip {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  clip-path: inset(15% 10% 42% 10%);
}

.leaf-glow,
.leaf-gold {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  mix-blend-mode: soft-light;
  animation-fill-mode: both;
  opacity: 0;
}

.leaf-glow {
  animation: leaf-bright 3s ease-in-out 3.2s infinite;
}

.leaf-gold {
  animation: leaf-gold 3s ease-in-out 3.2s infinite;
}

.lebensbaum__trigger:focus {
  outline: none;
}

.lebensbaum__trigger:focus-visible {
  outline: 2px solid var(--lb-gold-lo);
  outline-offset: 3px;
}


.lebensbaum__card {
  pointer-events: auto;
  position: relative;
  display: none;
  width: min(18.5rem, calc(100vw - 2.25rem));
  margin: 0;
  padding: 1.55rem 2.5rem 1.5rem;
  border: 1px solid var(--lb-line);
  border-radius: 16px;
  background: var(--lb-card);
  color: var(--lb-ink);
  box-shadow: 0 10px 26px rgba(42, 38, 28, 0.05);
  text-align: center;
}

.lebensbaum__card.is-open {
  display: block;
}

.lebensbaum__title {
  margin: 0 0 0.65rem;
  font-size: 1rem;
  font-weight: 520;
  letter-spacing: 0.015em;
  line-height: 1.3;
  color: var(--lb-ink);
  text-align: center;
  overflow-wrap: anywhere;
}

.lebensbaum__body {
  margin: 0 0 1.05rem;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.6;
  color: #5c564c;
  text-align: center;
  overflow-wrap: anywhere;
}

.lebensbaum__link {
  display: inline-block;
  font-size: 0.84rem;
  font-weight: 520;
  line-height: 1.4;
  color: #7a6424;
  text-decoration: none;
  border-bottom: 1px solid rgba(193, 150, 46, 0.32);
}

.lebensbaum__link:hover {
  color: #534010;
  border-bottom-color: #8a6918;
}

.lebensbaum__link:focus {
  outline: none;
}

.lebensbaum__link:focus-visible {
  outline: 2px solid var(--lb-gold-lo);
  outline-offset: 3px;
  border-radius: 2px;
}

.lebensbaum__close {
  pointer-events: auto;
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #7a7568;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}

.lebensbaum__close:hover {
  background: rgba(193, 150, 46, 0.08);
}

.lebensbaum__close:focus {
  outline: none;
}

.lebensbaum__close:focus-visible {
  outline: 2px solid var(--lb-gold-lo);
  outline-offset: 2px;
}

.lebensbaum__close-icon {
  display: block;
  width: 0.85rem;
  height: 0.85rem;
}

@media (max-width: 640px) {
  .lebensbaum {
    --lb-size: var(--lb-size-mobile);
    --lb-bottom: var(--lb-bottom-mobile);
  }

  .lebensbaum__card {
    width: min(17.5rem, calc(100vw - 1.75rem));
    padding: 1.4rem 2.4rem 1.35rem;
  }

  .lebensbaum__title {
    font-size: 1.05rem;
  }

  .lebensbaum__body {
    font-size: 0.92rem;
    line-height: 1.62;
    color: #4f4a3e;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lebensbaum__tree-wrap {
    animation: none;
    opacity: 1;
  }

  .leaf-glow,
  .leaf-gold {
    animation: none;
  }

  .leaf-glow {
    opacity: 0.55;
    filter: brightness(1.35) saturate(1.4);
  }

  .leaf-gold {
    opacity: 0.45;
    filter: sepia(0.6) saturate(2.4) brightness(1.25) hue-rotate(-10deg);
  }
}

@keyframes tree-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes leaf-bright {
  0%,
  100% {
    opacity: 0.38;
    filter: brightness(1.2) saturate(1.25);
  }
  48% {
    opacity: 1;
    filter: brightness(2.55) saturate(2.15);
  }
}

@keyframes leaf-gold {
  0%,
  100% {
    opacity: 0.2;
    filter: sepia(0.48) saturate(2.1) brightness(1.12) hue-rotate(-9deg);
  }
  48% {
    opacity: 1;
    filter: sepia(0.82) saturate(3.05) brightness(1.62) hue-rotate(-12deg);
  }
}