/* GROW – Grundgestaltung
   Ruhig und hochwertig: Papierton, gedecktes Mint und Gelb, Waldgrün als Tinte.
   Aquarell und Bleistift kommen gezielt in Illustrationen vor, nicht in der UI. */
:root {
  --paper: #f7f4ea;
  --paper-2: #efeadb;
  --mint: #dcebe1;
  --mint-2: #bcd8c7;
  --mint-deep: #7fa88f;
  --yellow: #f4ecc6;
  --yellow-2: #e8d48a;
  --yellow-deep: #c9a94a;
  --forest: #1e3b31;
  --forest-2: #35594a;
  --ink: #1e2b26;
  --ink-soft: #5b6b64;
  --line: rgba(30, 59, 49, 0.16);
  --line-strong: rgba(30, 59, 49, 0.4);
  --radius: 6px;
  --header-h: 72px;
  --ease: cubic-bezier(.22, .7, .2, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-neutral);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* feine Papierstruktur */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: 0.18;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.5  0 0 0 0 0.4  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }

h1, h2, h3, .playful {
  font-family: var(--font-playful);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-optical-sizing: auto;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--forest);
  margin: 0;
}
h2 { font-size: clamp(34px, 5vw, 60px); }
em { font-style: italic; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--forest-2);
  margin: 0 0 16px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.6; }
.lead { font-size: 19px; color: var(--ink-soft); max-width: 58ch; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 clamp(16px, 3vw, 40px);
  background: rgba(247, 244, 234, 0.86);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.is-play .site-header { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.brand { display: block; color: var(--forest); }
.brand-logo .grow-logo { height: 26px; width: auto; display: block; }
.main-nav { display: flex; align-items: center; gap: clamp(10px, 2vw, 26px); }
.nav-link { text-decoration: none; font-weight: 500; font-size: 15px; color: var(--forest); }
.nav-link:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.nav-cta { padding: 8px 16px; border-radius: 999px; background: var(--forest); color: var(--paper); }
.nav-cta:hover { text-decoration: none; background: var(--forest-2); }
.mode-switch { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line-strong); }
.mode-switch a { text-decoration: none; font-weight: 500; font-size: 14px; padding: 5px 14px; border-radius: 999px; color: var(--forest); transition: background 0.25s, color 0.25s; }
.mode-switch a.is-active { background: var(--forest); color: var(--paper); }
.lang-switch { display: inline-flex; gap: 2px; font-size: 13px; }
.lang-switch button { border: 0; background: none; cursor: pointer; font-weight: 500; padding: 4px 6px; color: var(--ink-soft); }
.lang-switch button[aria-pressed="true"] { color: var(--forest); font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
body.is-play .mode-switch, body.is-play .lang-switch { background: rgba(247, 244, 234, 0.8); border-radius: 999px; }
body.is-play .lang-switch { padding: 3px 6px; }
@media (max-width: 640px) {
  .nav-link:not(.nav-cta), .nav-cta { display: none; }
  .brand-logo .grow-logo { height: 20px; }
  .mode-switch a { padding: 5px 10px; font-size: 13px; }
}

/* ---------- Views ---------- */
.view { min-height: 100vh; min-height: 100dvh; }

/* ---------- Start ---------- */
.view-start {
  position: relative;
  display: grid;
  align-items: center;
  padding: calc(var(--header-h) + 40px) clamp(16px, 5vw, 72px) 56px;
  overflow: hidden;
}
.start-wash { position: absolute; inset: 0; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: url(#wc-soft); }
.blob-mint { width: 52vmax; height: 40vmax; left: -16vmax; bottom: -22vmax; background: var(--mint); opacity: 0.9; }
.blob-yellow { width: 34vmax; height: 30vmax; right: -8vmax; top: -10vmax; background: var(--yellow); opacity: 0.9; }
.blob-mint2 { display: none; }
.start-inner { position: relative; max-width: 1280px; width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.start-copy { max-width: 640px; }
.start-logo { color: var(--forest); max-width: 230px; margin: 0 0 28px; }
.start-logo .grow-logo { width: 100%; height: auto; display: block; }
.start-title { font-size: clamp(40px, 5vw, 74px); }
.start-title em { color: var(--forest-2); }
.start-lead { font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-soft); max-width: 48ch; margin: 22px 0 30px; }
.choices { display: grid; border-top: 1px solid var(--line-strong); }
.choice {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 4px 18px;
  padding: 16px 4px;
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: padding 0.4s var(--ease), background 0.4s;
}
.choice:hover { padding-left: 14px; background: rgba(255, 255, 255, 0.35); }
.choice-art { grid-row: span 2; width: 48px; height: 48px; }
.choice-art svg { width: 100%; height: 100%; overflow: visible; }
.choice-kicker { grid-column: 2; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--forest-2); }
.choice-title { grid-column: 2; font-family: var(--font-playful); font-size: clamp(26px, 2.6vw, 34px); color: var(--forest); line-height: 1.1; }
.choice-text { grid-column: 2; color: var(--ink-soft); font-size: 15px; }
.choice-go { grid-column: 3; grid-row: 1 / span 3; font-weight: 500; color: var(--forest); white-space: nowrap; }
.choice-go::after { content: " →"; transition: margin 0.3s var(--ease); }
.choice:hover .choice-go::after { margin-left: 6px; }
.start-note { margin-top: 18px; color: var(--ink-soft); font-size: 14px; }
/* interaktive Holzscheibe mit Projekt-Orbit */
.start-visual { position: relative; aspect-ratio: 1; max-width: 560px; width: 100%; justify-self: center; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.hero-leaves { position: absolute; inset: -10%; pointer-events: none; }
.hero-leaf { position: absolute; opacity: 0.85; animation: heroFloat 7s ease-in-out infinite; transition: translate 0.6s var(--ease); }
@keyframes heroFloat { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(10deg) translateY(-10px); } }
.hero-scene { position: absolute; inset: 0; perspective: 1100px; }
.hero-tilt { position: absolute; inset: 0; transform-style: preserve-3d; }
.hero-disc { position: absolute; left: 18%; top: 18%; width: 64%; height: 64%; border-radius: 50%; transform-style: preserve-3d; display: block; cursor: pointer; text-decoration: none; }
.hero-rim { position: absolute; inset: 0; border-radius: 50%; background: #8f6b4a; }
.hero-face { position: absolute; inset: -4%; width: 108%; height: 108%; overflow: visible; filter: drop-shadow(0 30px 40px rgba(30, 40, 30, 0.25)); }
.hero-cta { position: absolute; left: 50%; bottom: -2%; transform: translate(-50%, 50%) translateZ(30px); white-space: nowrap; font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: 999px; background: var(--forest); color: var(--paper); opacity: 0; transition: opacity 0.35s, transform 0.35s var(--ease); }
.hero-disc:hover .hero-cta, .hero-disc:focus-visible .hero-cta { opacity: 1; transform: translate(-50%, 30%) translateZ(30px); }
.hero-orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.hero-item { position: absolute; width: 74px; height: 74px; margin: -37px 0 0 -37px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: repeating-radial-gradient(circle, #dcc19b 0 3px, #c8a77d 3px 4px, #d6b991 4px 7px); box-shadow: 0 14px 24px -12px rgba(20, 40, 33, 0.55); transition: scale 0.3s var(--ease); will-change: transform; }
.hero-item img { position: absolute; inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); border-radius: 50%; object-fit: cover; pointer-events: none; }
.hero-item:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.hero-caption { position: absolute; left: 0; right: 0; bottom: -46px; margin: 0; text-align: center; font-size: 13px; color: var(--ink-soft); min-height: 40px; }
.hero-title { display: block; font-family: var(--font-playful); font-size: 22px; color: var(--forest); line-height: 1.2; opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.3s; }
.start-visual.has-title .hero-title { opacity: 1; transform: none; }
.start-visual.has-title .hero-hint { opacity: 0; }
.hero-hint { display: block; transition: opacity 0.3s; }
.hero-hint.is-used { opacity: 0.55; }

/* Knopf „Nach oben“ */
.to-top { position: fixed; right: clamp(14px, 3vw, 36px); bottom: clamp(14px, 4vh, 36px); z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border: 0; border-radius: 999px; background: var(--forest); color: var(--paper); font-weight: 500; font-size: 14px; cursor: pointer; box-shadow: 0 16px 30px -14px rgba(20, 40, 33, 0.6); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 0.35s, transform 0.35s var(--ease), background 0.2s; }
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--forest-2); }
.to-top-arrow { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(247, 244, 234, 0.18); }
@media (max-width: 560px) { .to-top-label { display: none; } .to-top { padding: 10px; } }

@media (max-width: 900px) {
  .start-inner { grid-template-columns: 1fr; }
  .start-visual { max-width: 340px; order: -1; margin: 10px auto 40px; }
  .choice { grid-template-columns: 44px 1fr; }
  .choice-go { grid-column: 2; grid-row: auto; margin-top: 4px; }
}

/* ---------- Projektbibliothek ---------- */
.view-projects { padding: calc(var(--header-h) + 56px) 0 0; }
.projects-head { max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 72px); }
.projects-head h2 { max-width: 16ch; }
.grain-divider { max-width: 1280px; height: 40px; margin: 34px auto; color: var(--mint-deep); padding: 0 clamp(16px, 5vw, 72px); }
.grain-divider svg { width: 100%; height: 100%; display: block; }

/* Schnellübersicht */
.cat-links { margin-top: 40px; border-top: 1px solid var(--line-strong); display: grid; grid-template-columns: repeat(3, 1fr); }
.cat-link {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 14px;
  padding: 18px 18px 18px 0;
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: padding 0.4s var(--ease);
}
.cat-link:hover { padding-left: 10px; }
.cat-link-no { font-size: 12px; font-weight: 700; color: var(--forest-2); letter-spacing: 0.1em; }
.cat-link-name { font-family: var(--font-playful); font-size: 24px; color: var(--forest); line-height: 1.15; }
.cat-link-n { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.cat-link-jump { position: absolute; inset: 0; }
@media (max-width: 900px) { .cat-links { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cat-links { grid-template-columns: 1fr; } .cat-link-name { font-size: 21px; } }

.people { max-width: 1280px; margin: 110px auto 0; padding: 0 clamp(16px, 5vw, 72px); }
.people-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 26px; }
.person { display: flex; gap: 14px; align-items: flex-start; padding-top: 16px; border-top: 1px solid var(--line); }
.person-bird { width: 56px; height: 44px; flex: none; }
.person-name { font-weight: 700; color: var(--forest); }
.person-role { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--forest-2); font-weight: 700; }
.person-text { font-size: 15px; color: var(--ink-soft); margin: 4px 0 0; }

.cta { margin: 110px 0 0; padding: 110px clamp(16px, 5vw, 72px) 130px; position: relative; overflow: hidden; background: var(--forest); color: var(--paper); text-align: center; }
.cta h2 { color: var(--paper); }
.cta-inner { position: relative; }
.cta p { color: rgba(247, 244, 234, 0.75); font-size: 19px; margin: 14px 0 30px; }
.cta .button-dark { background: var(--yellow-2); color: var(--forest); }
.cta .button-ghost { box-shadow: inset 0 0 0 1px rgba(247, 244, 234, 0.6); color: var(--paper); }

.button {
  display: inline-block;
  text-decoration: none;
  font-weight: 500;
  padding: 13px 24px;
  border-radius: 999px;
  margin: 6px;
  border: 0;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
.button-dark { background: var(--forest); color: var(--paper); }
.button-dark:hover { background: var(--forest-2); }
.button-ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--forest); color: var(--forest); }
.button-ghost:hover { background: rgba(30, 59, 49, 0.06); }

/* ---------- Dialog (Projekt-Details) ---------- */
.project-dialog {
  border: 0;
  padding: 0;
  width: min(760px, calc(100vw - 24px));
  max-height: calc(100dvh - 40px);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 40px 90px -30px rgba(20, 40, 33, 0.55);
  overflow: auto;
}
.project-dialog::backdrop { background: rgba(20, 40, 33, 0.45); backdrop-filter: blur(4px); }
.project-dialog[open] { animation: pop 0.45s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(16px); } }
.dialog-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--mint); }
.dialog-body { padding: 28px 32px 34px; }
.dialog-body h3 { font-size: 36px; margin: 10px 0 12px; }
.dialog-body p { color: var(--ink-soft); margin: 0 0 22px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--forest); background: transparent; }
a.tag { text-decoration: none; }
a.tag:hover { background: var(--mint); }
.panel-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(247, 244, 234, 0.92);
  color: var(--forest);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

/* ---------- Spielmodus (3D) ---------- */
.view-play { position: fixed; inset: 0; overflow: hidden; background: #e7efe6; z-index: 1; touch-action: none; }
.stage { position: absolute; inset: 0; overflow: hidden; user-select: none; -webkit-user-select: none; }
.sky3 { position: absolute; inset: 0; background: linear-gradient(180deg, #f3ecd0 0%, #eaf0e3 22%, #dbeae2 45%, #e9efe4 70%, #f4ecc9 100%); background-size: 100% 260%; }
.pano3, .clouds3 { position: absolute; left: 0; right: 0; top: 0; background-repeat: repeat-x; background-size: 2048px auto; pointer-events: none; will-change: transform, background-position; }
.clouds3 { height: 420px; opacity: 0.85; }
.pano3-mtn { height: 460px; opacity: 0.8; filter: blur(0.6px); }
.pano3-far { height: 460px; opacity: 0.95; }
.pano3-near { height: 460px; filter: blur(1px); }
/* Wiese unterhalb des Horizonts – passt farblich zum Boden um den Baum */
.meadow3 { position: absolute; left: 0; right: 0; top: 0; height: 160vh; pointer-events: none; will-change: transform;
  background-color: #a9c8ae; background-repeat: no-repeat, repeat; background-size: 100% 100%, 760px auto; }

/* Vogelschwärme im Hintergrund */
.flocks3, .falls3 { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.flocks3 { will-change: transform; }
.flock { position: absolute; left: 0; width: 220px; height: 80px; animation: flyAcross var(--dur) linear forwards; }
.flock.rtl { animation-name: flyAcrossRtl; }
.flock.rtl .fbird svg { transform: scaleX(-1); }
@keyframes flyAcross { from { transform: translate(-260px, 0) scale(var(--s)); } 50% { transform: translate(50vw, -26px) scale(var(--s)); } to { transform: translate(calc(100vw + 60px), 10px) scale(var(--s)); } }
@keyframes flyAcrossRtl { from { transform: translate(calc(100vw + 60px), 0) scale(var(--s)); } 50% { transform: translate(50vw, -26px) scale(var(--s)); } to { transform: translate(-260px, 10px) scale(var(--s)); } }
.fbird { position: absolute; width: 30px; height: 17px; animation: birdDrift 3.4s ease-in-out infinite; }
.fbird svg { width: 100%; height: 100%; overflow: visible; fill: #33413a; }
.fbird path { transform-box: fill-box; }
.fbird .w-l { transform-origin: 100% 100%; }
.fbird .w-r { transform-origin: 0% 100%; }
.fbird .w-l { animation: flapW var(--flap) ease-in-out infinite alternate; }
.fbird .w-r { animation: flapW var(--flap) ease-in-out infinite alternate; animation-delay: calc(var(--flap) * -0.15); }
@keyframes flapW { from { transform: scaleY(1); } 60% { transform: scaleY(0.15); } to { transform: scaleY(-0.55) skewX(-8deg); } }
@keyframes birdDrift { 50% { transform: translateY(6px); } }
/* fallende Blätter vor dem Baum */
.fall { position: absolute; top: -90px; animation: leafFall var(--dur) linear forwards; }
.fall img { display: block; opacity: 0.9; animation: leafSway 2.6s ease-in-out infinite alternate; }
@keyframes leafFall { to { transform: translate(var(--drift), calc(100vh + 160px)); } }
@keyframes leafSway { from { transform: translateX(-26px) rotate(-30deg) rotateY(0deg); } to { transform: translateX(26px) rotate(40deg) rotateY(60deg); } }
.s3 { position: absolute; left: 0; top: 0; transform-origin: 0 0; perspective: 1000px; perspective-origin: 50% 42%; }
.cam3 { position: absolute; left: 50%; top: 56%; width: 0; height: 0; transform-style: preserve-3d; outline: none; will-change: transform; }
.d3 { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; }
.d3 .gi { width: 100%; height: 100%; transform: scale(0); opacity: 0; transition: transform 1s var(--ease), opacity 0.5s; }
.d3.on .gi { transform: none; opacity: 1; }
.cam3.instant .gi { transition: none !important; }
.bark3 { backface-visibility: hidden; }
.bark3 .gi { transform: scaleY(0); transform-origin: 50% 100%; }
.core3 .gi { transform: scaleY(0); transform-origin: 50% 100%; }
.d3.on.core3 .gi { transform: none; }
.limb { transform-origin: 0 50%; }
.limb .gi { transform: scaleX(0); transform-origin: 0 50%; }
.leaf3 .gi { background-size: 100% 100%; }
.leaf3.fg .gi { filter: blur(5px); opacity: 0; }
.leaf3.fg.on .gi { opacity: 0.92; }
.ground3 { width: 2200px; height: 2200px; margin: -1100px 0 0 -1100px; border-radius: 50%;
  background:
    radial-gradient(circle, rgba(92, 70, 50, 0.55) 0 5.5%, rgba(140, 112, 80, 0.45) 8%, rgba(160, 150, 110, 0) 13%),
    radial-gradient(circle, #a99a72 0 7%, #a7bf9c 13%, #a3c4ad 26%, rgba(162, 197, 173, 0.9) 40%, rgba(162, 197, 173, 0) 50%); }
.limb.root .gi { filter: brightness(0.82) saturate(0.9); }
.string3 { width: 2px; margin-left: -1px; transform-origin: 50% 0; background: none; }
.string3 .gi { transform: scaleY(0); transform-origin: 50% 0; background: #4a3a2c; }
.disc3 { width: 200px; height: 200px; margin: -100px 0 0 -100px; transform-style: preserve-3d; }
.disc3 .disc-g { position: relative; transform-style: preserve-3d; }
.disc3:not(.on) .disc-g { transform: scale3d(0, 0, 0); }
.disc-rim, .disc-back, .disc-face { position: absolute; inset: 0; border-radius: 50%; }
.disc-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.disc-back { background: repeating-radial-gradient(circle, #caa57c 0 5px, #b98f64 5px 6.5px, #c79f73 6.5px 11px); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: inset 0 0 0 4px #8a6646; }
.disc-back img { position: absolute; inset: 20px; width: calc(100% - 40px); height: calc(100% - 40px); border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(30, 40, 32, 0.5); }
.disc3.on .disc-g { animation: discSwing 7s ease-in-out infinite; }
@keyframes discSwing { 0%, 100% { transform: rotateY(-16deg) rotateZ(-1.5deg); } 50% { transform: rotateY(16deg) rotateZ(1.5deg); } }
.disc-face {
  border: 0; padding: 0; cursor: pointer;
  background: repeating-radial-gradient(circle at 50% 50%, #dcc19b 0 4px, #c8a77d 4px 5px, #d6b991 5px 9px);
  box-shadow: inset 0 0 0 4px #8a6646, inset 0 0 0 6px rgba(90, 62, 40, 0.35);
  transition: box-shadow 0.3s;
}
.disc-face img { position: absolute; inset: 20px; width: calc(100% - 40px); height: calc(100% - 40px); border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(30, 40, 32, 0.5); }
.disc-face:hover, .disc-face:focus-visible { box-shadow: inset 0 0 0 3px rgba(90, 62, 40, 0.45), 0 0 0 6px rgba(232, 212, 138, 0.9); outline: none; }
.disc-year { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: #5c4128; }
.disc3.is-found .disc-face { box-shadow: inset 0 0 0 3px rgba(201, 169, 74, 0.95); }
.bb { transform-origin: 50% 100%; }
.seed3 { width: 84px; height: 84px; margin: -80px 0 0 -42px; border: 0; padding: 0; background: none; cursor: pointer; }
.seed3 svg { width: 100%; height: 100%; animation: seedBob 2.6s ease-in-out infinite; transition: transform 0.7s var(--ease), opacity 0.5s 0.3s; }
.seed3 .seed-halo { fill: #e8d48a; opacity: 0.55; filter: url(#wc); }
.seed3.is-planted svg { animation: none; transform: scale(0.45); transition: transform 0.6s var(--ease); }
.seed3.is-planted .seed-halo { opacity: 0; }
@keyframes seedBob { 50% { transform: translateY(-8px); } }
.sq3 { width: 160px; height: 110px; margin: -100px 0 0 -80px; transform-origin: 80px 100px; pointer-events: none; }
.sq3 .sq-sprite { width: 100%; height: 100%; transform-origin: 80px 100px; }
.falls3 { z-index: 2; }
.sq3 svg { width: 100%; height: 100%; overflow: visible; }
/* Eichhörnchen: im Stand Schwanz-Zucken und Atmen, in Bewegung ein Galopp
   (Strecken – Zusammenziehen, Beine gegengleich, Schwanz schwingt verzögert nach) */
.sq3 .sq-tail, .sq3 .sq-hind, .sq3 .sq-front, .sq3 .sq-head, .sq3 .sq-body { transform-box: fill-box; }
.sq3 .sq-tail { transform-origin: 92% 96%; animation: sqTailIdle 3.2s ease-in-out infinite; }
.sq3 .sq-body { transform-origin: 50% 100%; animation: sqBreath 2.4s ease-in-out infinite; }
.sq3 .sq-head { transform-origin: 10% 90%; animation: sqLook 5s ease-in-out infinite; }
.sq3 .sq-hind { transform-origin: 40% 15%; }
.sq3 .sq-front { transform-origin: 20% 0%; }
@keyframes sqTailIdle { 0%, 60%, 100% { transform: rotate(0); } 66% { transform: rotate(-9deg); } 72% { transform: rotate(4deg); } 78% { transform: rotate(-5deg); } 84% { transform: rotate(0); } }
@keyframes sqBreath { 50% { transform: scale(1.015, 1.03); } }
@keyframes sqLook { 0%, 40%, 100% { transform: rotate(0); } 46%, 62% { transform: rotate(-8deg); } 68%, 84% { transform: rotate(5deg); } }
.sq3.is-moving .sq-body { animation: sqGallopBody 0.38s ease-in-out infinite; }
.sq3.is-moving .sq-hind { animation: sqGallopHind 0.38s ease-in-out infinite; }
.sq3.is-moving .sq-front { animation: sqGallopFront 0.38s ease-in-out infinite; }
.sq3.is-moving .sq-head { animation: sqGallopHead 0.38s ease-in-out infinite; }
.sq3.is-moving .sq-tail { animation: sqGallopTail 0.38s ease-in-out infinite; animation-delay: -0.1s; }
@keyframes sqGallopBody { 0%, 100% { transform: scale(1.07, 0.95); } 50% { transform: scale(0.9, 1.08) translateY(-2px); } }
@keyframes sqGallopHind { 0%, 100% { transform: rotate(32deg) translateX(-4px); } 50% { transform: rotate(-28deg) translateX(6px); } }
@keyframes sqGallopFront { 0%, 100% { transform: rotate(-38deg) translateX(3px); } 50% { transform: rotate(30deg) translateX(-5px); } }
@keyframes sqGallopHead { 0%, 100% { transform: rotate(-4deg) translateX(2px); } 50% { transform: rotate(5deg) translateX(-3px); } }
@keyframes sqGallopTail { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(9deg); } }
.bird3 { width: 92px; height: 56px; margin: -50px 0 0 -46px; transform-origin: 46px 50px; border: 0; padding: 0; background: none; cursor: pointer; }
.bird3 svg { width: 100%; height: 100%; overflow: visible; }
.sign3 { width: 280px; height: 70px; margin: -70px 0 0 -140px; display: grid; place-items: center; }
.sign3 span { font-family: var(--font-playful); font-size: 34px; color: var(--forest); padding: 6px 22px; background: rgba(247, 244, 234, 0.85); border-radius: 4px; }

.hud {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--header-h) + 6px);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 0 clamp(12px, 3vw, 40px);
  pointer-events: none;
  z-index: 5;
}
.hud > * { pointer-events: auto; }
.hud-count {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(247, 244, 234, 0.88);
  font-weight: 500;
  font-size: 14px;
  color: var(--forest);
}
.acorn { width: 14px; height: 16px; background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20'><path d='M3 8 Q9 22 15 8Z' fill='%23b08a5c'/><path d='M1.5 8 Q9 1 16.5 8Z' fill='%23614631'/><path d='M9 3 V0.5' stroke='%23614631' stroke-width='1.6'/></svg>"); }
.hud-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.pill {
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(247, 244, 234, 0.88);
  color: var(--forest);
}
.pill-dark { background: var(--forest); color: var(--paper); }

.hint {
  position: absolute;
  left: 50%;
  bottom: clamp(22px, 6vh, 56px);
  transform: translateX(-50%);
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  background: rgba(30, 59, 49, 0.92);
  color: var(--paper);
  font: inherit;
  font-weight: 500;
  font-size: 15px;
  z-index: 6;
  text-align: center;
  max-width: calc(100vw - 32px);
  cursor: default;
  animation: hintIn 0.5s both var(--ease);
}
.hint.is-action { cursor: pointer; }
.hint.is-action:hover { background: var(--forest); }
@keyframes hintIn { from { opacity: 0; transform: translate(-50%, 10px); } }

.panel {
  position: absolute;
  right: clamp(12px, 3vw, 40px);
  top: calc(var(--header-h) + 56px);
  width: min(400px, calc(100vw - 24px));
  max-height: calc(100% - var(--header-h) - 80px);
  overflow: auto;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 30px 80px -30px rgba(20, 40, 33, 0.6);
  z-index: 7;
  animation: panelIn 0.5s both var(--ease);
}
@keyframes panelIn { from { opacity: 0; transform: translateX(20px); } }
.panel-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--mint); }
.panel-text { padding: 20px 24px 24px; }
.panel-text h3 { font-size: 28px; margin: 10px 0 8px; }
.panel-text p { margin: 0 0 18px; font-size: 15px; color: var(--ink-soft); }
.panel-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.panel-actions .button { margin: 0; padding: 10px 18px; font-size: 15px; }
.panel-bird { display: flex; gap: 14px; align-items: center; padding: 24px 24px 0; }
.panel-bird svg { width: 70px; height: 46px; flex: none; overflow: visible; }
.panel-name { font-size: 24px; margin: 2px 0 0; }
@media (max-width: 640px) {
  .panel { right: 8px; left: 8px; width: auto; top: auto; bottom: 8px; max-height: 58vh; }
  .panel-img { aspect-ratio: 16 / 8; }
}

.dpad { position: absolute; left: 14px; bottom: 16px; width: 150px; height: 150px; display: none; z-index: 6; }
.dpad button {
  position: absolute;
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 0;
  background: rgba(247, 244, 234, 0.88);
  color: var(--forest);
  font-size: 16px;
  touch-action: none;
}
.dpad button.is-down { background: var(--yellow-2); }
.dpad [data-dir="up"] { left: 50px; top: 0; }
.dpad [data-dir="down"] { left: 50px; bottom: 0; }
.dpad [data-dir="left"] { left: 0; top: 50px; }
.dpad [data-dir="right"] { right: 0; top: 50px; }
body.is-touch .dpad { display: block; }
body.is-touch .panel:not([hidden]) ~ .dpad { display: none; }
body.is-touch .hint { bottom: 186px; }

.help {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 32px));
  padding: 28px 30px;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 30px 80px -30px rgba(20, 40, 33, 0.6);
  z-index: 8;
}
.help h3 { font-size: 30px; margin-bottom: 12px; }
.help ul { padding-left: 18px; margin: 0 0 20px; color: var(--ink-soft); }
.help li { margin-bottom: 6px; }
@media (max-width: 640px) {
  .hud-actions .pill-dark { display: none; }
  .hud-actions { flex-wrap: nowrap; }
  .pill { padding: 7px 12px; font-size: 13px; white-space: nowrap; }
  .hud-count { padding: 6px 12px; font-size: 13px; }
  .hud-actions [data-skip]:not([hidden]) ~ [data-help] { display: none; }
  .hint { font-size: 14px; padding: 10px 16px; border-radius: 18px; width: max-content; }
}

/* ---------- Übergang ---------- */
.wipe { position: fixed; inset: -12vh 0; z-index: 80; pointer-events: none; transform: translateY(110%); }
.wipe svg { width: 100%; height: 100%; display: block; }
.wipe.is-in { transition: transform 0.55s cubic-bezier(.7, 0, .3, 1); transform: translateY(0); pointer-events: auto; }
.wipe.is-out { transition: transform 0.6s cubic-bezier(.7, 0, .3, 1); transform: translateY(-110%); }

/* Bleistiftrahmen über Bildern */
.sketch-frame { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); pointer-events: none; overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
@media (max-width: 560px) { .hero-item { width: 54px; height: 54px; margin: -27px 0 0 -27px; } .hero-item img { inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); } }

/* ---------- Fußzeile (alle Seiten) ---------- */
.site-footer { background: var(--forest); color: rgba(243, 236, 212, 0.78); padding: clamp(50px, 7vw, 90px) clamp(16px, 5vw, 72px) 28px; font-size: 15px; }
.ft-top { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.ft-logo { display: inline-block; width: 150px; color: #f3ecd4; }
.ft-logo .grow-logo { width: 100%; height: auto; display: block; }
.ft-brand p { margin: 18px 0 0; max-width: 30ch; line-height: 1.55; }
.ft-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ft-col h2 { font-family: var(--font-neutral); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow-2); margin: 0 0 6px; }
.ft-col a { color: #f3ecd4; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.35s var(--ease); }
.ft-col a:hover, .ft-col a:focus-visible { background-size: 100% 1px; }
.ft-col p { margin: 0; line-height: 1.55; }
.ft-bottom { max-width: 1280px; margin: clamp(40px, 6vw, 70px) auto 0; padding-top: 20px; border-top: 1px solid rgba(243, 236, 212, 0.18); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.ft-up { border: 0; background: none; color: #f3ecd4; font: inherit; cursor: pointer; padding: 0; }
.ft-up::before { content: "↑ "; }
.ft-up:hover { text-decoration: underline; }
body.is-play .site-footer { display: none; }
@media (max-width: 860px) { .ft-top { grid-template-columns: 1fr 1fr; } .ft-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .ft-top { grid-template-columns: 1fr; } }

/* ---------- Spielmodus: Eicheln, Knospen, geheime Scheibe, Vögel, Tageszeit ---------- */
.acorn3 { width: 46px; height: 62px; margin: -31px 0 0 -23px; pointer-events: none; }
.acorn3::before { content: ""; position: absolute; left: 50%; top: -14px; width: 1.5px; height: 18px; background: #6b4a2c; }
.acorn3 svg { width: 100%; height: 100%; overflow: visible; animation: acornSway 2.8s ease-in-out infinite alternate; transform-origin: 50% 0; }
@keyframes acornSway { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.acorn3.is-gone { display: none !important; }
.acorn3.is-taken svg { animation: acornTake 0.65s var(--ease) forwards; }
@keyframes acornTake { 30% { transform: translateY(-18px) scale(1.25); } 100% { transform: translateY(26px) scale(0.2); opacity: 0; } }
.bloom3 { width: 44px; height: 47px; margin: -47px 0 0 -22px; pointer-events: none; }
.bloom3 svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 100%; transform: scale(0); transition: transform 0.9s var(--ease); }
.bloom3.is-bud .bud, .bloom3.is-bloom .bloom { transform: scale(1); }
.bloom3.is-bloom .bloom { animation: bloomSway 4s ease-in-out infinite alternate; }
@keyframes bloomSway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }

.sq3.is-munch .sq-head { animation: munch 0.18s ease-in-out 4 alternate; transform-box: fill-box; transform-origin: 30% 80%; }
@keyframes munch { to { transform: rotate(-9deg) scale(1.06); } }
.hud-count.bump { animation: hudBump 0.6s var(--ease); }
@keyframes hudBump { 35% { transform: scale(1.18); background: var(--yellow-2); } }
.hud-count .acorn { transition: transform 0.3s; }
.hud-count.bump .acorn { transform: rotate(-20deg) scale(1.3); }

.secret3 { width: 120px; height: 120px; margin: -60px 0 0 -60px; border: 0; padding: 0; background: none; cursor: pointer; }
.secret-bud, .secret-disc { position: absolute; inset: 0; display: grid; place-items: center; transition: transform 0.9s var(--ease), opacity 0.6s; }
.secret-bud svg { width: 100%; height: 100%; overflow: visible; animation: bloomSway 3s ease-in-out infinite alternate; }
.secret-count { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); padding: 3px 9px; border-radius: 999px; background: rgba(247, 244, 234, 0.92); font-size: 12px; font-weight: 700; color: var(--forest); white-space: nowrap; }
.secret-disc { opacity: 0; transform: scale(0.3) rotate(-90deg); }
.secret-disc svg { width: 100%; height: 100%; filter: drop-shadow(0 0 18px rgba(232, 212, 138, 0.9)); }
.secret-shine { position: absolute; inset: -40%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 240, 180, 0.8), rgba(255, 240, 180, 0) 65%); animation: shine 2.6s ease-in-out infinite alternate; }
@keyframes shine { from { transform: scale(0.85); opacity: 0.6; } to { transform: scale(1.1); opacity: 1; } }
.secret3.is-open .secret-bud { opacity: 0; transform: scale(1.4); }
.secret3.is-open .secret-disc { opacity: 1; transform: none; }
.secret3:hover .secret-bud svg, .secret3:focus-visible .secret-bud svg { animation-duration: 0.6s; }

.bird3 .fly { display: none; width: 70%; height: auto; margin: 10px auto 0; overflow: visible; }
.bird3.is-flying .perch { display: none; }
.bird3.is-flying .fly { display: block; }
.bird3.is-flying .fly .w-l, .bird3.is-flying .fly .w-r { transform-box: fill-box; animation: flapW 0.24s ease-in-out infinite alternate; }
.bird3.is-flying .fly .w-l { transform-origin: 100% 100%; }
.bird3.is-flying .fly .w-r { transform-origin: 0% 100%; }
.bird3 { transition: opacity 0.4s; }

.fall.burst { animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); }

/* Tageszeit */
.tod3 { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.tod-morning .tod3 { background: linear-gradient(to bottom, rgba(214, 233, 240, 0.35), rgba(255, 255, 255, 0) 45%), radial-gradient(ellipse at 15% 0%, rgba(255, 246, 214, 0.55), rgba(255, 246, 214, 0) 55%); }
.tod-morning .meadow3 { filter: brightness(1.04) saturate(0.95); }
.tod-morning .pano3 { filter: blur(1.5px) brightness(1.06); opacity: 0.85; }
.dew3 span { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.9); opacity: 0; animation: dew 5s ease-in-out infinite; }
@keyframes dew { 45%, 55% { opacity: 0.9; transform: scale(1); } 0%, 100% { opacity: 0; transform: scale(0.3); } }
.tod-evening .tod3 { background: linear-gradient(to bottom, rgba(242, 160, 90, 0.18), rgba(255, 196, 120, 0.12) 50%, rgba(120, 70, 60, 0.18)); mix-blend-mode: multiply; }
.tod-evening .sky3 { filter: sepia(0.35) saturate(1.3) hue-rotate(-12deg) brightness(1.02); }
.tod-evening .pano3, .tod-evening .meadow3 { filter: sepia(0.25) saturate(1.1); }
.tod-night .tod3 { background: linear-gradient(to bottom, rgba(18, 30, 60, 0.55), rgba(20, 40, 50, 0.4)); }
.tod-night .sky3 { filter: brightness(0.55) saturate(0.7) hue-rotate(20deg); }
.tod-night .pano3, .tod-night .meadow3, .tod-night .clouds3 { filter: brightness(0.6) saturate(0.7); }
.flies3 span { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff6b0; box-shadow: 0 0 10px 3px rgba(255, 236, 140, 0.85); animation-name: flyDrift, flyBlink; animation-iteration-count: infinite, infinite; animation-direction: alternate, alternate; animation-timing-function: ease-in-out, ease-in-out; }
@keyframes flyDrift { 0% { transform: translate(0, 0); } 50% { transform: translate(40px, -30px); } 100% { transform: translate(-30px, 20px); } }
@keyframes flyBlink { 0%, 40% { opacity: 0.1; } 70%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .flies3, .dew3 { display: none; } }
body.is-play .nav-link:not(.nav-cta) { background: rgba(247, 244, 234, 0.8); border-radius: 999px; padding-left: 14px; padding-right: 14px; }

/* See mit Insel um den Baum */
.lake3 { width: 2800px; height: 2800px; margin: -1400px 0 0 -1400px; border-radius: 50%; background-size: 100% 100%, 380px 380px;
  -webkit-mask-image: radial-gradient(circle, #000 0 62%, rgba(0, 0, 0, 0.6) 66%, transparent 71%); mask-image: radial-gradient(circle, #000 0 62%, rgba(0, 0, 0, 0.6) 66%, transparent 71%); }
.island3 { width: 600px; height: 560px; margin: -280px 0 0 -300px; border-radius: 48% 52% 50% 46% / 50% 46% 54% 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(92, 70, 50, 0.6) 0 12%, rgba(140, 112, 80, 0.35) 18%, rgba(0, 0, 0, 0) 26%),
    radial-gradient(circle at 46% 52%, #a8c49d 0 52%, #b9cf9c 62%, #d9cfa4 70%, #cbbf94 76%, rgba(203, 191, 148, 0) 80%);
  box-shadow: 0 0 0 6px rgba(150, 190, 180, 0.4); }
.lily3 { border-radius: 50%; background: radial-gradient(circle at 40% 40%, #a5c68e, #7fa86f 70%); clip-path: polygon(50% 50%, 52% 0, 100% 0, 100% 100%, 0 100%, 0 0, 48% 0); opacity: 0.92; }
.lily3.has-flower::after { content: ""; position: absolute; left: 35%; top: 35%; width: 30%; height: 30%; border-radius: 50%; background: radial-gradient(circle, #f6d77a 0 25%, #fbe9e4 30% 70%, #f2c9b3 72%); }
.ripple3 { width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(240, 248, 242, 0.7); animation: ripple 6s ease-out infinite; }
@keyframes ripple { 0% { transform-origin: 50% 50%; scale: 0.1; opacity: 0.9; } 70% { opacity: 0.25; } 100% { scale: 1.6; opacity: 0; } }
.reed3 svg { width: 100%; height: 100%; overflow: visible; }
.reed3 { pointer-events: none; transform-origin: 30% 100%; }

/* ---------- Gipfel-Feier ---------- */
.summit { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; pointer-events: none; text-align: center; }
.summit-rays { position: absolute; left: 50%; top: 44%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 240, 180, 0.42) 0 6deg, rgba(255, 240, 180, 0) 6deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 0 8%, rgba(0, 0, 0, 0.5) 22%, transparent 45%); mask-image: radial-gradient(circle, #000 0 8%, rgba(0, 0, 0, 0.5) 22%, transparent 45%);
  animation: rays 3.8s linear forwards, raysIn 0.8s var(--ease) forwards; opacity: 0; }
@keyframes rays { to { rotate: 60deg; } }
@keyframes raysIn { to { opacity: 1; } }
.summit-seal { width: min(46vmin, 300px); aspect-ratio: 1; filter: drop-shadow(0 18px 30px rgba(30, 40, 20, 0.35)); animation: sealIn 1s cubic-bezier(0.2, 1.6, 0.4, 1) 0.35s both; }
.summit-seal svg { width: 100%; height: 100%; animation: sealSpin 12s linear infinite; }
.summit-seal .summit-lines { animation: sealSpin 12s linear infinite reverse; transform-origin: 0 0; }
@keyframes sealIn { from { transform: scale(0) rotate(-200deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sealSpin { to { transform: rotate(360deg); } }
.summit-title { margin: 22px 0 6px; font-family: var(--font-playful); font-size: clamp(30px, 4.6vw, 60px); line-height: 1.05; color: var(--forest); text-shadow: 0 0 18px rgba(255, 252, 238, 0.95), 0 0 40px rgba(255, 246, 214, 0.9); animation: summitText 0.8s var(--ease) 0.9s both; }
.summit-sub { margin: 0; padding: 6px 16px; border-radius: 999px; background: rgba(30, 59, 49, 0.82); color: #f3ecd4; font-size: 15px; font-weight: 500; animation: summitText 0.8s var(--ease) 1.15s both; }
@keyframes summitText { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.summit.is-leaving .summit-seal { animation: sealOut 0.8s var(--ease) forwards; }
.summit.is-leaving .summit-title, .summit.is-leaving .summit-sub, .summit.is-leaving .summit-rays { transition: opacity 0.5s; opacity: 0; }
@keyframes sealOut { to { transform: translate(-40vw, -40vh) scale(0.12); opacity: 0; } }
.stage.is-summit .tod3 { background-color: rgba(255, 236, 170, 0.12); transition: background-color 0.6s; }
.confetti { position: absolute; bottom: -40px; z-index: 5; pointer-events: none; animation: confetti 3.4s cubic-bezier(0.15, 0.7, 0.4, 1) both; }
.confetti img, .confetti svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes confetti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 45% { transform: translate(calc(var(--x) * 0.6), var(--y)) rotate(calc(var(--r) * 0.5)); opacity: 1; } 100% { transform: translate(var(--x), 30vh) rotate(var(--r)); opacity: 0; } }
.sq3.is-cheer .sq-sprite { animation: cheer 0.42s ease-in-out infinite alternate; }
@keyframes cheer { from { translate: 0 0; } to { translate: 0 -26px; } }
/* Siegel bleibt danach klein am Zähler */
.hud-count.has-summit::after { content: ""; width: 18px; height: 18px; margin-left: 6px; border-radius: 50%; background: radial-gradient(circle, #1e3b31 0 38%, #e8d48a 40% 100%); box-shadow: 0 0 0 1.5px #c9a43a; }
.pill-icon { min-width: 38px; padding-left: 0; padding-right: 0; font-size: 16px; }
.pill-icon[aria-pressed="false"] { opacity: 0.55; text-decoration: line-through; }
@media (prefers-reduced-motion: reduce) { .summit-rays, .summit-seal svg, .summit-seal .summit-lines { animation: none; } .summit-rays { opacity: 0.6; } }

/* ---------- Einpflanzen: Schaufel, Loch, Erdhaufen, Keimling ---------- */
.hole3 { width: 120px; height: 84px; margin: -42px 0 0 -60px; border-radius: 50%; background: radial-gradient(ellipse, #4e3b2a 0 45%, #6f5136 62%, rgba(111, 81, 54, 0) 72%); opacity: 0; }
.mound3 { width: 120px; height: 44px; margin: -44px 0 0 -60px; pointer-events: none; }
.mound3 svg { width: 100%; height: 100%; overflow: visible; transform: scale(0); transform-origin: 50% 100%; }
.sprout3 { width: 60px; height: 62px; margin: -62px 0 0 -30px; pointer-events: none; }
.sprout3 svg { width: 100%; height: 100%; overflow: visible; transform: scale(0); transform-origin: 50% 100%; }
.shovel3 { width: 80px; height: 240px; margin: -240px 0 0 -40px; pointer-events: none; }
.shovel-sprite { position: relative; width: 100%; height: 100%; transform-origin: 50% 100%; }
.shovel-sprite svg { width: 100%; height: 100%; overflow: visible; }
.shovel3.is-digging .shovel-sprite { animation: shovelDig 3s var(--ease) forwards; }
@keyframes shovelDig {
  0% { transform: translate(60px, -260px) rotate(30deg); opacity: 0; }
  12% { transform: translate(0, -20px) rotate(-8deg); opacity: 1; }
  20% { transform: translate(0, 18px) rotate(-4deg); }
  27% { transform: translate(14px, -10px) rotate(-38deg); }
  34% { transform: translate(0, 18px) rotate(-4deg); }
  41% { transform: translate(14px, -10px) rotate(-38deg); }
  48% { transform: translate(-30px, -40px) rotate(10deg); }
  60% { transform: translate(-40px, -40px) rotate(70deg); }
  66% { transform: translate(-40px, -6px) rotate(84deg); }
  71% { transform: translate(-40px, -30px) rotate(84deg); }
  76% { transform: translate(-40px, -6px) rotate(84deg); }
  86% { transform: translate(-20px, -80px) rotate(40deg); opacity: 1; }
  100% { transform: translate(80px, -320px) rotate(30deg); opacity: 0; }
}
.dirt { position: absolute; left: 50%; bottom: 6px; width: 9px; height: 9px; border-radius: 50%; background: #7a5a3a; opacity: 0; }
.shovel3.is-digging .dirt { animation: dirtFly 0.6s ease-out 0.75s 2 both; }
.shovel3.is-digging .d2 { animation-delay: 0.8s; width: 6px; height: 6px; --dx: -40px; }
.shovel3.is-digging .d3 { animation-delay: 0.85s; --dx: -70px; }
.shovel3.is-digging .d4 { animation-delay: 1.2s; width: 7px; height: 7px; --dx: -55px; }
.shovel3.is-digging .d5 { animation-delay: 1.25s; --dx: -85px; }
@keyframes dirtFly { 0% { opacity: 1; transform: translate(0, 0); } 50% { transform: translate(calc(var(--dx, -60px) * 0.6), -60px); } 100% { opacity: 0; transform: translate(var(--dx, -60px), 10px); } }
.lily-step { background: radial-gradient(circle at 40% 40%, #b2d19b, #86ae74 70%); }

/* Elemente der Krone erst zeigen, wenn der Baum dort gewachsen ist (keine schwebende Knospe im Himmel) */
.acorn3:not(.on), .secret3:not(.on), .bird3:not(.on), .sign3:not(.on) { visibility: hidden; }

/* ---------- Rückmeldung beim Eichel-Sammeln ---------- */
.acorn-fly { position: fixed; left: 0; top: 0; z-index: 60; width: 40px; height: 54px; margin: -27px 0 0 -20px; pointer-events: none; transition: transform 0.9s cubic-bezier(0.5, -0.4, 0.3, 1), opacity 0.3s 0.75s; filter: drop-shadow(0 4px 10px rgba(255, 220, 120, 0.9)); }
.acorn-fly svg { width: 100%; height: 100%; overflow: visible; animation: acornSpin 0.9s ease-in-out; }
@keyframes acornSpin { 50% { transform: rotate(-30deg) scale(1.5); } }
.acorn-toast { position: absolute; z-index: 7; left: 50%; top: 18%; transform: translate(-50%, 12px); display: flex; align-items: center; gap: 12px; padding: 10px 20px 10px 12px; border-radius: 999px; background: var(--forest); color: #f7f1e0; box-shadow: 0 16px 36px -14px rgba(20, 40, 33, 0.6); opacity: 0; pointer-events: none; animation: toast 2.6s var(--ease) forwards; white-space: nowrap; }
.acorn-toast svg { width: 30px; height: 40px; overflow: visible; }
.acorn-toast b { display: block; font-family: var(--font-playful); font-size: 19px; font-weight: 400; }
.acorn-toast small { display: block; font-size: 13px; color: var(--yellow-2); }
.acorn-toast .acorn-bar { display: block; width: 150px; height: 4px; margin-top: 5px; border-radius: 2px; background: rgba(247, 241, 224, 0.2); overflow: hidden; }
.acorn-toast .acorn-bar i { display: block; height: 100%; background: var(--yellow-2); transform-origin: 0 50%; transition: transform 0.8s var(--ease) 0.3s; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 12px) scale(0.9); } 12%, 82% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -10px); } }
.hud-count.bump { box-shadow: 0 0 0 4px rgba(232, 212, 138, 0.8); }

/* ---------- Spielfiguren ---------- */
.sq3 .ch-fly { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sq3.char-bird.is-air .ch-perch { display: none; }
.sq3.char-bird.is-air .ch-fly { display: block; }
.ch-fly .wing-near, .ch-fly .wing-far { transform-box: fill-box; transform-origin: 92% 88%; animation: wingBeat 0.24s ease-in-out infinite alternate; }
.ch-fly .wing-far { animation-delay: -0.04s; }
@keyframes wingBeat { from { transform: rotate(-8deg); } to { transform: rotate(72deg) scaleY(0.75); } }
.sq3.char-bird:not(.is-moving) .ch-fly .wing-near, .sq3.char-bird:not(.is-moving) .ch-fly .wing-far { animation-duration: 0.34s; }
.sq3.char-bird.is-moving:not(.is-air) .ch-perch { animation: birdHop 0.32s ease-in-out infinite alternate; }
@keyframes birdHop { to { transform: translateY(-10px) rotate(-4deg); } }
.sq3.char-cat .sq-tail { transform-origin: 85% 95%; }

/* ---------- Wetter ---------- */
.weather3 { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.w-rain .weather3 span { position: absolute; top: -12%; width: 1.5px; height: 70px; background: linear-gradient(rgba(235, 245, 250, 0), rgba(235, 245, 250, 0.85)); transform: rotate(12deg); animation: rainFall linear infinite; }
@keyframes rainFall { to { transform: translate(-22vh, 125vh) rotate(12deg); } }
.w-rain .sky3 { filter: grayscale(0.45) brightness(0.88); }
.w-rain .pano3, .w-rain .meadow3 { filter: saturate(0.7) brightness(0.9); }
.w-rain .clouds3 { filter: grayscale(1) brightness(0.8); opacity: 1; }
.w-rain .weather3 { background-color: rgba(70, 90, 100, 0.16); }
.w-rain .ripple3 { animation-duration: 2.2s; }
.w-snow .weather3 span { position: absolute; top: -4%; border-radius: 50%; background: #fff; box-shadow: 0 0 4px rgba(255, 255, 255, 0.9); animation: snowFall linear infinite; }
@keyframes snowFall { 0% { transform: translate(0, 0); } 50% { transform: translate(var(--sway, 40px), 55vh); } 100% { transform: translate(0, 108vh); } }
.w-snow .sky3 { filter: grayscale(0.5) brightness(1.05); }
.w-snow .pano3 { filter: saturate(0.35) brightness(1.18); }
.w-snow .meadow3 { filter: saturate(0.25) brightness(1.35); }
.w-snow .island3 { filter: saturate(0.3) brightness(1.3); }
.w-snow .lake3 { filter: saturate(0.6) brightness(1.08); }
.w-snow .weather3 { background-image: linear-gradient(to bottom, rgba(240, 246, 250, 0.22), rgba(240, 246, 250, 0)); }
.tod-night.w-snow .weather3 { background-image: none; }
@media (prefers-reduced-motion: reduce) { .weather3 { display: none; } }

/* ---------- Anpassen ---------- */
.custom { position: absolute; z-index: 8; left: 50%; top: calc(var(--header-h) + 64px); transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); max-height: calc(100% - var(--header-h) - 90px); overflow: auto;
  padding: 20px 22px 18px; border-radius: 6px; background: rgba(250, 247, 238, 0.97); box-shadow: 0 30px 70px -30px rgba(20, 40, 33, 0.55); animation: customIn 0.45s var(--ease); }
@keyframes customIn { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.custom h2 { font-size: clamp(24px, 2.6vw, 30px); color: var(--forest); margin: 2px 0 10px; }
.custom .panel-close { position: absolute; top: 12px; right: 12px; }
.custom-row { padding: 9px 0; border-top: 1px solid var(--line-strong); }
.custom-label { margin: 0 0 7px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest-2); }
.custom-opts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.custom-opt { display: grid; justify-items: center; gap: 2px; padding: 7px 4px 6px; border: 0; border-radius: 6px; background: var(--paper-2); color: var(--forest); font: inherit; font-size: 13px; cursor: pointer; box-shadow: inset 0 0 0 1px transparent; transition: background 0.2s, box-shadow 0.2s, transform 0.2s; }
.custom-opt:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-strong); }
.custom-opt.is-on { background: var(--mint); box-shadow: inset 0 0 0 2px var(--forest); font-weight: 600; }
.custom-opt:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.custom-ico { display: grid; place-items: center; width: 48px; height: 36px; }
.custom-ico svg { width: 100%; height: 100%; overflow: visible; }
.custom-go { margin-top: 10px; width: 100%; justify-content: center; }
.pill-custom span[aria-hidden] { color: var(--mint-deep); }
@media (max-width: 560px) { .custom { top: calc(var(--header-h) + 50px); padding: 20px 16px 16px; } .custom-opts { grid-template-columns: repeat(3, 1fr); } .custom-ico { width: 44px; height: 36px; } }
@media (max-width: 560px) {
  .pill-custom span:not([aria-hidden]) { display: none; }
  .pill-custom { min-width: 38px; padding-left: 0; padding-right: 0; }
  .hud-actions { flex-wrap: wrap; justify-content: flex-end; max-width: 64vw; row-gap: 6px; }
}

/* Ton-Knopf: Lautsprecher mit Wellen bzw. durchgestrichen, Beschriftung auf großen Bildschirmen */
.hud [data-sound] { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 0 14px; text-decoration: none; opacity: 1; }
.hud [data-sound] svg { width: 18px; height: 18px; }
.hud [data-sound][aria-pressed="false"] { opacity: 0.75; text-decoration: none; }
.hud [data-sound][aria-pressed="true"] svg { color: var(--forest); }
@media (max-width: 760px) { .hud [data-sound] .sound-label { display: none; } .hud [data-sound] { padding: 0; min-width: 38px; justify-content: center; } }

/* Samenkorn als Mauszeiger (nur mit Maus), Links behalten die Hand */
html.has-seed-cursor, html.has-seed-cursor body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M5 4 C12 3 19 8 20 15 C21 20 17 23 12 21 C6 19 3 12 5 4Z' fill='%23b9874d' stroke='%231e3b31' stroke-width='1.4'/%3E%3Cpath d='M7 7 C11 9 14 12 15 17' fill='none' stroke='%23e1b981' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") 4 4, auto; }
html.has-seed-cursor body.is-play .stage { cursor: auto; }
.seed-pop { position: fixed; z-index: 200; width: 34px; height: 36px; margin: -34px 0 0 -17px; pointer-events: none; }
.seed-pop svg { width: 100%; height: 100%; overflow: visible; }
.seed-pop .sp-stem { fill: none; stroke: #5f8f78; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 14; stroke-dashoffset: 14; animation: spStem 0.3s ease-out forwards, spFade 0.9s forwards; }
.seed-pop .sp-l, .seed-pop .sp-r { fill: #8fbfa6; transform-box: fill-box; scale: 0; animation: spLeaf 0.35s 0.18s cubic-bezier(.3, 1.6, .5, 1) forwards, spFade 0.9s forwards; }
.seed-pop .sp-l { transform-origin: 100% 100%; }
.seed-pop .sp-r { transform-origin: 0 100%; fill: #7fa88f; }
@keyframes spStem { to { stroke-dashoffset: 0; } }
@keyframes spLeaf { to { scale: 1; } }
@keyframes spFade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Herbarium (grow/js/herbarium.js) ---------- */
.herb-btn { position: fixed; left: clamp(14px, 3vw, 36px); bottom: clamp(14px, 4vh, 36px); z-index: 61; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border: 0; border-radius: 999px; background: var(--paper); color: var(--forest); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: 0 0 0 1px var(--line), 0 14px 30px -16px rgba(20, 40, 33, 0.55); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 0.4s, transform 0.4s var(--ease), background 0.2s; }
.herb-btn.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.herb-btn:hover { background: var(--mint); }
.herb-btn b { font-weight: 600; color: var(--forest-2); font-variant-numeric: tabular-nums; }
.herb-btn.is-full { background: var(--yellow); }
.herb-btn.bump { animation: herbBump 0.6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes herbBump { 40% { transform: scale(1.14) rotate(-3deg); } }
.herb-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mint); }
.herb-ico svg { width: 22px; height: 22px; }
body.is-play .herb-btn { display: none; }
@media (max-width: 560px) { .herb-label { display: none; } }

.herb-toast { position: fixed; left: 50%; top: calc(var(--header-h) + 14px); z-index: 120; display: flex; align-items: center; gap: 12px; max-width: min(440px, 92vw); padding: 10px 18px 10px 10px; border-radius: 16px; background: var(--paper); color: var(--forest); font-size: 14px; line-height: 1.35; box-shadow: 0 0 0 1px var(--line), 0 20px 40px -18px rgba(20, 40, 33, 0.55); transform: translate(-50%, -16px); opacity: 0; pointer-events: none; transition: opacity 0.35s, transform 0.4s var(--ease); }
.herb-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.herb-toast .herb-ico { flex: 0 0 40px; width: 40px; height: 40px; }
.herb-toast .herb-ico svg { width: 32px; height: 32px; }

.herb-dlg { width: min(980px, 94vw); max-height: 90vh; padding: 0; border: 0; border-radius: 14px; background: #f9f6ec; color: var(--ink); box-shadow: 0 40px 80px -30px rgba(20, 40, 33, 0.6); }
.herb-dlg::backdrop { background: rgba(30, 59, 49, 0.4); backdrop-filter: blur(3px); }
.herb-sheet { position: relative; padding: clamp(24px, 4vw, 48px); background-image: repeating-linear-gradient(0deg, rgba(30, 59, 49, 0.035) 0 1px, transparent 1px 28px); }
.herb-sheet h2 { font-size: clamp(30px, 4vw, 48px); }
.herb-sheet .panel-close { position: absolute; right: 16px; top: 14px; }
.herb-lead { color: var(--ink-soft); margin: 8px 0 26px; }
.herb-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px 18px; }
.herb-card { text-align: center; transform: rotate(var(--tilt)); }
.herb-press { position: relative; display: grid; place-items: center; aspect-ratio: 1; background: #fff; box-shadow: 0 10px 22px -14px rgba(20, 40, 33, 0.45); }
.herb-card:not(.has) .herb-press { background: transparent; box-shadow: inset 0 0 0 2px rgba(30, 59, 49, 0.18); border-radius: 4px; }
.herb-press svg { width: 82%; height: 82%; }
.herb-q { font-family: var(--font-playful); font-size: 34px; color: rgba(30, 59, 49, 0.3); }
.herb-tape { position: absolute; top: -8px; left: 50%; width: 46px; height: 16px; margin-left: -23px; background: rgba(232, 212, 138, 0.7); transform: rotate(-4deg); }
.herb-card:not(.has) .herb-tape { display: none; }
.herb-name { margin: 10px 0 2px; font-family: var(--font-playful); font-size: 17px; color: var(--forest); }
.herb-hint { margin: 0; font-size: 12px; color: var(--ink-soft); line-height: 1.35; }
.herb-dl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
@media (max-width: 760px) { .herb-grid { grid-template-columns: repeat(2, 1fr); } }