:root {
  /* Wird beim Start aus dem Bild ausgelesen und ersetzt */
  --bg-mint: #d8f4c6; /* Fallback-Mintton */
  --popup-bg: transparent; /* Popup ohne Kachel */
  --popup-fg: #000;        /* Schwarze Schrift */
  --script-font: 'Lato', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  --run-duration: 3.8s;
  --nibble-duration: 1.1s;
  --pop-duration: 600ms;
  /* Negativ: von rechts nach links */
  --run-distance: -60vw;
  /* Gravur-Linien (Holzschnitt-Look) */
  --engrave-gap: 7px;    /* Abstand der Bögen */
  --engrave-line: 1.6px; /* Linienstärke */
  /* Baumgröße (größer dargestellt) */
  --tree-w: clamp(240px, 70vmin, 640px);
  --tree-h: clamp(360px, 90vmin, 960px);
  /* Bild-Zoom/Crop innerhalb des Containers */
  --tree-zoom: 3.2;   /* doppelt so groß wie zuvor */
  --tree-shift-x: 0;  /* Prozentpunkte der Containerbreite (negativ = nach links) */
  --tree-shift-y: 0;  /* Prozentpunkte der Containerhöhe  (negativ = nach oben) */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg-mint);
  color: #0f172a;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* kein Boden mehr – Hintergrund ist Mint, wie im Logo */

/* Baum */
.tree {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--tree-w);
  height: var(--tree-h);
  overflow: hidden; /* für Zoom/Crop */
  display: grid;
  place-items: center;
  z-index: 1;
}
.tree svg { width: 100%; height: 100%; color: #000; display: block; }
.tree .tree-img {
  width: 100%; height: 100%; object-fit: contain; display: block; filter: none;
  -webkit-user-drag: none; user-select: none;
  transform-origin: 50% 50%;
  transform: translate(calc(var(--tree-shift-x) * 1%), calc(var(--tree-shift-y) * 1%)) scale(var(--tree-zoom));
}
/* (Anker entfernt) */
.tree .trunk {
  position: absolute;
  bottom: 0; left: 48%;
  width: 3%; height: 56%;
  background: #000; /* Silhouette */
  border-radius: 4px;
}
.tree .trunk::after{
  content:"";
  position:absolute; left:-14%; bottom:-3%;
  width:128%; height:6%;
  background:#000; border-radius:50%;
}
.tree .stem {
  position: absolute;
  bottom: 0;
  width: 3%; height: 48%;
  background: #000;
  border-radius: 4px;
  opacity: 0.95;
}
.tree .stem-1 { left: 43%; transform: rotate(-3deg); }
.tree .stem-2 { left: 53%; transform: rotate(3deg); }
.tree .leaves {
  position: absolute;
  bottom: 52%; left: 50%;
  width: 160%; aspect-ratio: 1/1;
  transform: translateX(-50%);
  background: #000; /* Silhouette */
  border-radius: 50%;
  /* dicker Rand durch inneres Inset (wir lassen Linien innen beginnen) */
}
.tree .leaves::after {
  content: "";
  position: absolute;
  inset: 6% 6% 8% 6%;
  border-radius: 50%;
  background: var(--bg-mint);
  /* Radiale, konzentrische Gravur – ausgeschnitten über Masken */
  -webkit-mask-image: repeating-radial-gradient(
    circle at var(--cx, 50%) var(--cy, 45%),
    #fff 0 var(--engrave-line),
    transparent var(--engrave-line) calc(var(--engrave-line) + var(--engrave-gap))
  );
  mask-image: repeating-radial-gradient(
    circle at var(--cx, 50%) var(--cy, 45%),
    #fff 0 var(--engrave-line),
    transparent var(--engrave-line) calc(var(--engrave-line) + var(--engrave-gap))
  );
}
.tree .leaves-1 { transform: translate(-50%, -2%) scale(0.96);  --cx: 50%; --cy: 40%; }
.tree .leaves-2 { transform: translate(-88%, 6%) scale(0.76);  --cx: 44%; --cy: 42%; }
.tree .leaves-3 { transform: translate(-12%, 6%) scale(0.76);  --cx: 56%; --cy: 42%; }
.tree .leaves-4 { transform: translate(-50%, -12%) scale(1.10); border-radius: 46% 54% 46% 54% / 60% 60% 40% 40%; --cx: 50%; --cy: 36%; }
.tree .leaves-5 { transform: translate(-50%, 14%) scale(0.78);  --cx: 50%; --cy: 54%; }
.tree .leaves-6 { transform: translate(-98%, -6%) scale(0.64); --cx: 46%; --cy: 38%; }
.tree .leaves-7 { transform: translate( -2%, -6%) scale(0.64); --cx: 54%; --cy: 38%; }
.tree .leaves-8 { transform: translate(-115%, 12%) scale(0.60); --cx: 46%; --cy: 46%; }
.tree .leaves-9 { transform: translate(  15%, 12%) scale(0.60); --cx: 54%; --cy: 46%; }
.tree .leaves-10 { transform: translate(-78%, 16%) scale(0.70); --cx: 47%; --cy: 50%; }
.tree .leaves-11 { transform: translate(-22%, 16%) scale(0.70); --cx: 53%; --cy: 50%; }

/* Haselnuss-spezifische Details: Kätzchen + Nuss-Cluster (Silhouette) */
.tree .catkin {
  position: absolute;
  bottom: 55%; left: 44%;
  width: 6%; height: 26%;
  background: #000;
  border-radius: 50px;
  transform-origin: top center;
  animation: sway 4s ease-in-out infinite;
}
.tree .catkin::after {
  content: "";
  position: absolute; left: 42%; bottom: -6%;
  width: 16%; height: 16%; background: #000; border-radius: 50%;
}
.tree .catkin-1 { transform: translate(-120%, -2%) rotate(-12deg); animation-delay: -0.2s; }
.tree .catkin-2 { transform: translate( -40%, -3%) rotate(-4deg);  animation-delay: 0.1s; }
.tree .catkin-3 { transform: translate(  38%, -2%) rotate(6deg);   animation-delay: 0.3s; }
.tree .catkin-4 { transform: translate(-75%,  6%) rotate(-6deg);   animation-delay: 0.5s; }
.tree .catkin-5 { transform: translate( 85%,  5%) rotate(10deg);   animation-delay: 0.7s; }

.tree .nutcluster {
  position: absolute;
  bottom: 58%; left: 30%;
  width: 44%; height: 26%;
}
.tree .nutcluster span {
  position: absolute;
  width: 26%; aspect-ratio: 1/1;
  background: #000;
  border-radius: 50%;
}
.tree .nutcluster span:nth-child(1) { left: 0%; bottom: 0%; }
.tree .nutcluster span:nth-child(2) { left: 24%; bottom: 8%; }
.tree .nutcluster span:nth-child(3) { left: 48%; bottom: 0%; }
.tree .nutcluster span::before {
  content: "";
  position: absolute; left: -10%; top: 50%;
  width: 120%; height: 46%;
  background: #000;
  transform: translateY(-40%);
  clip-path: polygon(0 60%, 8% 40%, 16% 62%, 24% 38%, 32% 60%, 40% 36%, 48% 60%, 56% 38%, 64% 62%, 72% 40%, 80% 64%, 88% 42%, 96% 62%, 100% 46%, 100% 100%, 0 100%);
}

@keyframes sway {
  0%, 100% { transform: rotate(var(--r, 0deg)) translate(var(--tx, 0), var(--ty, 0)); }
  50% { transform: rotate(calc(var(--r, 0deg) + 4deg)) translate(calc(var(--tx, 0) + 1px), calc(var(--ty, 0) + 1px)); }
}

/* Haselnuss */
.hazelnut {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0) translate(var(--nut-dx, 0), var(--nut-dy, 0));
  bottom: 9vh;
  width: 22px; height: 18px;
  background: #000; /* Silhouette */
  border-radius: 60% 60% 55% 55% / 70% 70% 45% 45%;
  transform-origin: center bottom;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}
.hazelnut.pickup {
  transition: transform 0.9s cubic-bezier(.2,.8,.2,1);
}
.hazelnut.eaten {
  transform: translateX(-50%) scale(0);
  opacity: 0.2;
}

/* Eichhörnchen (Bild) */
.squirrel {
  position: absolute;
  right: clamp(8px, 3vmin, 24px);
  bottom: 9vh;
  width: clamp(108px, 32vw, 200px);
  user-select: none;
  -webkit-user-drag: none;
  filter: none; /* Silhouette-Stil, kein Schatten */
  transform: translate3d(0,0,0);
  will-change: transform;
}
.squirrel.running {
  animation:
    run var(--run-duration) ease-in-out forwards,
    bob 450ms ease-in-out infinite;
}
.squirrel.nibbling {
  animation:
    nibble var(--nibble-duration) ease-in-out 2 both,
    bob 380ms ease-in-out infinite;
}

/* Popup */
.popup {
  position: fixed;
  left: 50%; top: 14%;
  transform: translate(-50%, -50%) scale(0.8);
  background: var(--popup-bg);
  color: var(--popup-fg);
  padding: 0;
  border-radius: 0;
  font-family: var(--script-font);
  font-weight: 700;
  font-size: clamp(28px, 8vw, 72px);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  opacity: 0;
  pointer-events: none;
}
.popup.show {
  opacity: 1;
  animation: pop var(--pop-duration) cubic-bezier(.25,1.4,.4,1) both;
}

/* Performance hints */
.hazelnut { will-change: transform; }
.popup { will-change: transform, opacity; }

/* Mobile optimizations: weniger Dauer/Bewegung, größere Ziel-Flächen */
@media (pointer: coarse) {
  .squirrel.running { animation: run var(--run-duration) ease-out forwards; }
  .squirrel.nibbling { animation: nibble calc(var(--nibble-duration) * 0.9) ease-out 1 both; }
  .popup { font-size: clamp(22px, 6.5vw, 56px); }
}

/* (Font-Switcher entfernt) */

/* Keyframes */
@keyframes run {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--run-distance)); }
}
@keyframes bob {
  0%, 100% { transform: translateY(0) translateX(var(--tx, 0)); }
  50% { transform: translateY(-2px) translateX(var(--tx, 0)); }
}
@keyframes nibble {
  0% { transform: translateX(var(--run-distance)) scale(1); }
  25% { transform: translateX(var(--run-distance)) scale(0.98) rotate(-1deg); }
  50% { transform: translateX(var(--run-distance)) scale(1.02) rotate(1deg); }
  75% { transform: translateX(var(--run-distance)) scale(0.99) rotate(-0.6deg); }
  100% { transform: translateX(var(--run-distance)) scale(1); }
}
@keyframes pop {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  60% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* Motion-Reduce: weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
  .squirrel.running, .squirrel.nibbling { animation: none; }
  .popup.show { animation: none; opacity: 1; }
}

/* Mobile-first Breakpoints */
@media (min-width: 480px) {
  .squirrel { width: clamp(120px, 28vmin, 220px); }
  .tree { width: clamp(90px, 24vmin, 200px); }
}
@media (min-width: 768px) {
  .squirrel { width: clamp(140px, 20vmin, 240px); }
  .tree { width: clamp(120px, 20vmin, 240px); }
}