/* ===== Animierter Baum-Hero (Entwurf) =====
   Die Baum-Animation aus baum.html, als Hero in die Startseite eingebaut.
   Alle Positionen sind auf die Sektion bezogen (absolute statt fixed),
   damit der Rest der Seite normal weiterscrollt. */

.baum-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:calc(100svh - 72px);   /* 72px = Header-Höhe */
  min-height:600px;
  text-align:center;
  color:#e8e2d4;
  background:
    radial-gradient(1200px 520px at 50% 108%, rgba(31,84,74,.34), transparent 65%),
    radial-gradient(900px 700px at 50% 62%, rgba(46,84,52,.14), transparent 70%),
    radial-gradient(700px 420px at 50% -8%, rgba(120,96,44,.10), transparent 70%),
    #04070a;
}

/* --- Text oben --- */
.bh-text{
  position:relative;
  z-index:2;
  padding:3.2vh 24px 0;
}
.bh-eyebrow{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:#8f8672;
}
.bh-title{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2.1rem,4.8vw,3.5rem);
  line-height:1.08;
  margin:.8vh 0 0;
  color:#f2ecdd;
}
.bh-title em{
  font-style:italic;
  color:#ecd9a6;
}
.bh-lead{
  margin:1.2vh auto 0;
  max-width:60ch;
  font-size:clamp(.95rem,1.5vw,1.12rem);
  line-height:1.65;
  color:#a89f8c;
}
.bh-cta{
  margin-top:2.2vh;
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}
.baum-hero .btn-ghost{
  color:#e8e2d4;
  border-color:rgba(200,162,74,.45);
  background:rgba(14,18,16,.4);
}
.baum-hero .btn-ghost:hover{ background:rgba(200,162,74,.14); }
.bh-trust{
  margin-top:1.7vh;
  font-size:.85rem;
  color:#8f8672;
  display:flex;
  gap:1.2rem;
  flex-wrap:wrap;
  justify-content:center;
}
.bh-trust b{ color:#cfc4a8; }

/* --- Lichtschleier, der aus der Überschrift in die Szene fließt --- */
#textVeil{
  position:absolute;
  left:50%;
  top:0;
  width:min(820px, 80vw);
  height:120vh;
  pointer-events:none;
  z-index:2;
  background:
    radial-gradient(48% 62% at 50% 0%,
      rgba(242,224,166,.36) 0%,
      rgba(242,224,166,.18) 16%,
      rgba(242,224,166,.09) 38%,
      rgba(242,224,166,.03) 60%,
      rgba(242,224,166,0) 78%);
  opacity:0;
}

/* --- Sternenhimmel (nur innerhalb des Heros) --- */
#stars{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
}
#stars .star{
  position:absolute;
  border-radius:50%;
  background:#e9f0ea;
  animation:twinkle var(--tw,4s) ease-in-out var(--twd,0s) infinite alternate;
}
#stars .star.warm{background:#efe0b4}
#stars .star.bright{box-shadow:0 0 8px 2px rgba(233,240,234,.75)}
@keyframes twinkle{
  from{opacity:var(--omin,.15)}
  to{opacity:var(--omax,.75)}
}
#shootingStar{
  position:absolute;
  width:70px;
  height:1px;
  background:linear-gradient(90deg, rgba(240,236,214,0), rgba(240,236,214,.9));
  border-radius:1px;
  opacity:0;
}

/* --- Bühne mit dem Baum --- */
.bh-stage{
  flex:1;
  min-height:0;
  display:flex;
  justify-content:center;
  position:relative;
  z-index:1;
}
.bh-stage svg{
  height:100%;
  width:100%;
  overflow:visible;   /* Himmelslicht darf ohne harte Kante nach oben auslaufen */
  transform:scale(1.08);          /* Baum etwas größer; weiche Ränder dürfen leicht anschneiden */
  transform-origin:50% 62%;
}
#crown{ will-change:transform }

/* --- Erneut-wachsen-Knopf --- */
#replay{
  position:absolute;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  font-family:var(--sans);
  font-size:.78rem;
  letter-spacing:.06em;
  color:#cfc4a8;
  background:rgba(14,18,16,.55);
  border:1px solid rgba(200,162,74,.35);
  border-radius:100px;
  padding:9px 20px;
  cursor:pointer;
  backdrop-filter:blur(6px);
  transition:border-color .3s,color .3s;
}
#replay:hover{border-color:rgba(200,162,74,.8);color:#efe6ce}

/* --- klickbare Begriffe: Krone / Stamm / Wurzeln --- */
.bh-tag{cursor:pointer}
.bh-tag text{
  font-family:var(--sans);
  font-size:17px;
  letter-spacing:.05em;
  fill:#d8cba6;
}
.bh-tag:hover .tagDot{fill:#ffffff}
.bh-tag:hover text{fill:#efe6ce}
#tagCard{
  position:absolute;
  bottom:74px;
  left:50%;
  transform:translateX(-50%);
  width:min(440px, calc(100vw - 36px));
  background:rgba(10,15,12,.92);
  border:1px solid rgba(200,162,74,.4);
  border-radius:18px;
  padding:22px 26px 24px;
  z-index:6;
  visibility:hidden;
  opacity:0;
  backdrop-filter:blur(8px);
}
#tagCard .kicker{
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#c8a24a;
  margin-bottom:6px;
}
#tagCard h3{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.6rem;
  color:#f2ecdd;
  margin-bottom:8px;
}
#tagCard .cardBody{
  font-size:.92rem;
  line-height:1.7;
  color:#b6ac95;
}
#tagClose{
  position:absolute;
  top:10px;
  right:14px;
  background:none;
  border:none;
  color:#8f8672;
  font-size:1.35rem;
  line-height:1;
  cursor:pointer;
}
#tagClose:hover{color:#efe6ce}

/* --- goldener Schein am Mauszeiger (nur im Hero) --- */
#cursorGlow{
  position:absolute;
  top:0;left:0;
  width:340px;height:340px;
  margin:-170px 0 0 -170px;
  pointer-events:none;
  z-index:0;
  opacity:0;
  background:radial-gradient(circle, rgba(222,186,106,.22), rgba(196,158,78,.11) 38%, transparent 65%);
}

/* --- Handy: Bühne braucht garantierte Höhe, Hero darf höher als der Viewport werden --- */
@media (max-width:899px){
  .baum-hero{
    height:auto;
    min-height:calc(100svh - 72px);
    padding-bottom:96px;   /* Platz für den „Erneut wachsen"-Knopf unter den Wurzeln */
  }
  .bh-stage{
    flex:none;
    height:min(70svh, 560px);
    margin-top:1.5vh;
  }
}

/* --- Desktop: Text links, Baum rechts in voller Höhe (wie vorher Text + Emblem) --- */
@media (min-width:900px){
  .baum-hero{
    flex-direction:row;
    align-items:stretch;
    text-align:left;
  }
  .bh-text{
    flex:0 0 46%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:0 12px 5vh max(5vw, 32px);
  }
  .bh-lead{ margin-left:0; }
  .bh-cta,
  .bh-trust{ justify-content:flex-start; }
  .bh-stage{ flex:1; }
  #textVeil{ left:72%; }
}

@media (prefers-reduced-motion:reduce){
  #replay{display:none}
  #stars .star{animation:none;opacity:var(--omax,.6)}
  #shootingStar{display:none}
}