/* Shared Forest UI. The canvas world owns day and night; panels stay dark glass
   so text keeps its contrast over any sky. One radius scale: panels 18px,
   controls and buttons full pill. One accent: sunlight amber. */
:root {
  --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --ink: #eef3ea;
  --ink-soft: #c3d0c2;
  --ink-mute: #9fb1a0;
  --glass: rgba(15, 27, 21, 0.7);
  --glass-strong: rgba(13, 23, 18, 0.9);
  --line: rgba(236, 246, 228, 0.12);
  --accent: #f4bf4f;
  --accent-ink: #1e2410;
  --crystal: #7fe3dc;
  --radius: 18px;
  --gutter: 16px;
  --shadow: 0 18px 50px rgba(6, 14, 10, 0.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #16241c;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Meadow under the world: the first paint is never black while WebGL and the atlas load. */
main { position: fixed; inset: 0; background: radial-gradient(ellipse at 60% 55%, #86b451 0%, #6d9a45 55%, #557f39 100%); }

#forest {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
  outline: none;
}
#forest-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#forest-gl[hidden] { display: none; }
#forest.grabbing { cursor: grabbing; }
#forest:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 50;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { position: static; left: 8px; }
.skip-link:focus-visible { position: fixed; left: 8px; }

.panel, .hero, .feed ol, .controls, .legend, .tree-card, .toast {
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

@media (prefers-reduced-transparency: reduce) {
  .hero, .feed ol, .controls, .legend, .tree-card, .toast, .sheet { background: var(--glass-strong); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
button svg, a.cta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Brand */
.brand {
  position: absolute;
  top: var(--gutter);
  left: var(--gutter);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 16px;
  border-radius: 999px;
  background: rgba(15, 27, 21, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
}
.brand h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-mute);
}
.live[data-status="connected"] { background: #8fd16a; box-shadow: 0 0 0 4px rgba(143, 209, 106, 0.18); }

/* Hero */
.hero {
  position: absolute;
  left: 24px;
  bottom: 44px;
  width: min(420px, calc(100vw - 48px));
  padding: 24px 24px 22px;
  border-radius: var(--radius);
}
.hero h2 {
  margin: 0 0 8px;
  font-size: clamp(26px, 3.1vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 750;
  text-wrap: balance;
}
.hero-body p:not(.split) {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.5;
  max-width: 36ch;
}
.stats {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1fr;
  gap: 4px 12px;
  margin: 0 0 6px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
}
.stats div { min-width: 0; }
.stats dt { font-size: 12.5px; color: var(--ink-mute); margin-bottom: 2px; }
.stats dd {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.split {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--ink-mute);
}
.split span { color: var(--ink-soft); font-variant-numeric: tabular-nums; font-weight: 600; }
.split span + span { color: var(--crystal); }
.progress {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.actions { display: flex; gap: 10px; margin-top: 18px; }
.cta, .ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s, box-shadow 0.2s;
}
.cta {
  flex: 1;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 10px 26px rgba(244, 191, 79, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.cta:hover { background: #f7cb6b; }
.cta:active, .ghost:active { transform: scale(0.97); }
.cta:disabled { opacity: 0.75; cursor: progress; }
.ghost {
  background: rgba(236, 246, 228, 0.08);
  border: 1px solid var(--line);
  color: var(--ink);
}
.ghost:hover { background: rgba(236, 246, 228, 0.14); }

/* Activity feed */
.feed {
  position: absolute;
  top: var(--gutter);
  right: var(--gutter);
  width: 300px;
  pointer-events: none;
}
.feed ol {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  border-radius: var(--radius);
}
.feed ol:empty { display: none; }
.feed li {
  padding: 7px 16px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.feed li:first-child { color: var(--ink); }
.feed li + li { border-top: 1px solid rgba(236, 246, 228, 0.06); }

/* Map controls */
.controls {
  position: absolute;
  right: var(--gutter);
  bottom: 44px;
  display: flex;
  flex-direction: column;
  padding: 4px;
  border-radius: 999px;
}
.controls button {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: transparent;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
}
.controls button:hover { background: rgba(236, 246, 228, 0.1); }

/* Legend */
.legend {
  position: absolute;
  right: 76px;
  bottom: 44px;
  width: min(360px, calc(100vw - 32px));
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--glass-strong);
}
.legend h2 { margin: 0 0 10px; font-size: 16px; }
.legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.legend li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.legend b { color: var(--ink); }
.legend p { margin: 14px 0 0; font-size: 13px; color: var(--ink-mute); }
.sw { width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; display: block; }
.sw-tree { background: radial-gradient(circle at 35% 30%, #b5dc6d, #3f7a31 70%); }
.sw-grove { background: radial-gradient(circle at 30% 30%, #9cc95a 20%, transparent 22%), radial-gradient(circle at 70% 60%, #6aa843 30%, transparent 32%), #2d5a26; }
.sw-crystal { border-radius: 3px; transform: rotate(45deg) scale(0.8); background: linear-gradient(135deg, #dafbf6, #5fd0d6 50%, #2b6f8f); }
.sw-sky { background: linear-gradient(135deg, #f7a86f, #6e6aa0 60%, #18223f); }

/* Tree card */
.tree-card {
  position: absolute;
  left: 50%;
  top: 76px;
  transform: translateX(-50%);
  width: min(340px, calc(100vw - 32px));
  padding: 14px 48px 14px 18px;
  border-radius: var(--radius);
}
.tree-card strong { display: block; font-size: 16px; margin-bottom: 4px; }
.tree-card p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.tree-card button {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: transparent;
  display: grid;
  place-items: center;
}
.tree-card button svg { transform: rotate(45deg); }

/* Toasts */
.toasts {
  position: absolute;
  left: 50%;
  top: var(--gutter);
  transform: translateX(-50%);
  display: grid;
  gap: 8px;
  justify-items: center;
  width: min(440px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  background: var(--glass-strong);
}
.toast.accent { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.toast.out { opacity: 0; transform: translateY(-6px); transition: opacity 0.35s, transform 0.35s; }

.noscript { position: fixed; inset: auto 16px 60px; padding: 20px; border-radius: var(--radius); background: var(--glass-strong); }
.noscript h2 { margin: 0 0 8px; }

/* Legal footer: links stay unchanged, only positioned. */
footer nav[aria-label="Rechtliche Hinweise"] {
  position: fixed;
  right: var(--gutter);
  bottom: 8px;
  padding: 5px 14px;
  font-size: 12px;
  border-radius: 999px;
  background: rgba(15, 27, 21, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
footer nav[aria-label="Rechtliche Hinweise"] ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
  padding: 0;
}
footer nav[aria-label="Rechtliche Hinweise"] a {
  color: var(--ink);
  opacity: 0.85;
  text-decoration: none;
}
footer nav[aria-label="Rechtliche Hinweise"] a:hover,
footer nav[aria-label="Rechtliche Hinweise"] a:focus { opacity: 1; text-decoration: underline; }

/* Sponsor entry points on the home page. */
.sponsor-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-underline-offset: 3px;
}
.sponsor-link::after { content: " \2192"; }
.legend a { color: var(--accent); }
.sw-sponsor { border-radius: 4px; background: linear-gradient(90deg, transparent 30%, var(--accent) 30% 70%, transparent 70%), radial-gradient(circle at 50% 35%, #a9d0f0, #4f7fb0 70%); }
.card-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 8px; font-size: 14px; }
.card-closeup {
  display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto 8px; border-radius: 12px;
  background: radial-gradient(ellipse at 50% 92%, rgba(247, 210, 122, 0.35), transparent 60%), linear-gradient(#dcecf2, #eef3e2);
}
.card-extra a { color: var(--accent); font-weight: 600; word-break: break-all; }
.ad-label {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(244, 191, 79, 0.55);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Sponsor pages: the world stays behind a sheet (left panel, bottom sheet on phones). */
.brand a { color: var(--ink); font-size: 15px; font-weight: 700; text-decoration: none; }
.sheet {
  position: absolute;
  left: 24px;
  top: 72px;
  max-height: calc(100% - 116px);
  width: min(440px, calc(100vw - 48px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 22px 22px;
  border-radius: var(--radius);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  outline: none;
}
.sheet h1, .sheet h2 { margin: 0 0 8px; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 750; outline: none; }
.sheet .lede { margin: 0 0 16px; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.sheet .hint { margin: 6px 0 14px; font-size: 13px; line-height: 1.45; color: var(--ink-mute); }
.sheet .hint a, .check a { color: var(--accent); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; padding-top: 8px; border-top: 3px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink-mute); }
.steps li::before { content: counter(s) " "; }
.steps li.done { border-color: rgba(244, 191, 79, 0.5); color: var(--ink-soft); }
.steps li[aria-current] { border-color: var(--accent); color: var(--ink); }
.field-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 650; }
.opt { font-weight: 400; color: var(--ink-mute); }
.sheet input:not([type=checkbox]):not([type=radio]):not([type=range]), .sheet textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(236, 246, 228, 0.22);
  background: rgba(236, 246, 228, 0.06);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.sheet textarea { resize: vertical; line-height: 1.45; }
.sheet input:focus-visible, .sheet textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.sheet input:user-invalid, .sheet textarea:user-invalid { border-color: #ff8f7a; }
.stepper { display: grid; grid-template-columns: 48px 1fr 48px; gap: 8px; margin-bottom: 14px; }
.stepper input { -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input { text-align: center; font-size: 22px !important; font-weight: 700; font-variant-numeric: tabular-nums; }
.stepper button { border-radius: 12px; background: rgba(236, 246, 228, 0.1); display: grid; place-items: center; }
.stepper button:hover { background: rgba(236, 246, 228, 0.16); }
.tiers { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.tiers th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--ink-mute); padding: 0 10px 6px; }
.tiers td { padding: 8px 10px; border-top: 1px solid var(--line); color: var(--ink-soft); }
.tiers td + td, .tiers th + th { text-align: right; }
.tiers tr.on td { color: var(--accent-ink); background: var(--accent); font-weight: 700; border-color: transparent; }
.tiers tr.on + tr td { border-color: transparent; }
.tiers tr.on td:first-child { border-radius: 10px 0 0 10px; box-shadow: 2px 0 0 var(--accent); }
.tiers tr.on td:last-child { border-radius: 0 10px 10px 0; }
.total { display: grid; margin: 0; min-width: 6.5em; line-height: 1.1; }
.total span { font-size: 12.5px; color: var(--ink-mute); }
.total strong { font-size: 24px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
#q-note { min-height: 2.9em; }
.sheet .cta { width: 100%; }
.row { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.row .cta { flex: 1; }
.row.wrap { flex-wrap: wrap; margin-top: 8px; }
.row.wrap .ghost { height: 44px; padding: 0 16px; font-size: 14.5px; }
.ghost.wide { width: 100%; }
a.ghost { display: inline-flex; align-items: center; text-decoration: none; }
button[aria-busy="true"] { cursor: progress; opacity: 0.75; }
.error { margin: 8px 0 0; min-height: 1.4em; font-size: 14px; line-height: 1.4; color: #ffb4a3; }
.error:empty { min-height: 0; margin: 0; }
.status { margin: 0 0 4px; font-size: 14.5px; }
.status span { color: var(--accent); font-variant-numeric: tabular-nums; margin-left: 8px; }
.variants { margin: 14px 0 0; padding: 0; border: 0; min-width: 0; }
.variants legend { padding: 0; font-weight: 700; font-size: 15px; }
.variants .hint { margin: 4px 0 10px; }
.variant-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.variant { position: relative; display: block; border-radius: 14px; overflow: hidden; cursor: pointer; box-shadow: 0 0 0 2px var(--line); transition: box-shadow 0.15s; }
.variant input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.variant canvas { display: block; width: 100%; height: auto; aspect-ratio: 320 / 360; background: #a8d2e4; }
.variant[data-state="loading"] canvas { animation: variant-wait 1.4s ease-in-out infinite alternate; }
.variant[data-state="failed"] { opacity: 0.35; cursor: default; }
.variant:has(input:checked) { box-shadow: 0 0 0 3px var(--accent), 0 6px 22px rgba(244, 191, 79, 0.35); }
.variant:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
@keyframes variant-wait { from { opacity: 0.55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .variant[data-state="loading"] canvas { animation: none; opacity: 0.7; } }
.preview { margin: 14px 0 0; }
.preview canvas { display: block; width: 100%; height: 320px; border-radius: 14px; background: #a8d2e4; }
.preview figcaption { display: grid; gap: 10px; margin-top: 10px; font-size: 13.5px; color: var(--ink-soft); }
.range { display: grid; grid-template-columns: auto 1fr 7.5em; align-items: center; gap: 10px; }
.range input { accent-color: var(--accent); }
.range output { color: var(--ink); font-weight: 600; }
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 3px; border-radius: 999px; background: rgba(236, 246, 228, 0.07); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 7px 0; border-radius: 999px; text-align: center; font-weight: 600; }
.seg input:checked + span { background: var(--accent); color: var(--accent-ink); }
.seg input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 1px; }
.toggle { display: inline-flex; align-items: center; gap: 8px; }
.toggle input, .check input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; margin: 1px 0 0; }
.summary { margin: 18px 0 10px; padding: 12px 14px; border-radius: 14px; background: rgba(236, 246, 228, 0.06); font-size: 14.5px; }
.summary div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.summary dt { color: var(--ink-soft); }
.summary dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.summary .grand { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 16px; }
.summary .grand dd { font-size: 19px; }
.consents { margin: 0; padding: 0; border: 0; display: grid; gap: 12px; }
.check { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); cursor: pointer; }
.check small { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-mute); }
.share { display: grid; gap: 4px; margin: 8px 0 12px; }
.turnstile { margin: 0 0 10px; min-height: 65px; }
/* The main action stays in reach while the sheet scrolls. */
.sheet .step > .row:not(.wrap) {
  position: sticky;
  bottom: -22px;
  z-index: 1;
  margin: 16px -22px -22px;
  padding: 12px 22px 22px;
  background: linear-gradient(to bottom, rgba(13, 23, 18, 0), rgba(13, 23, 18, 0.96) 28%);
}

body[data-page="sponsor"] .controls { bottom: 44px; }

@media (max-width: 767px) {
  .sponsor-link { margin-top: 10px; font-size: 13.5px; }
  .sheet {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    max-height: 64vh;
    max-height: 64dvh;
    padding: 16px 16px calc(34px + env(safe-area-inset-bottom));
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .sheet h1, .sheet h2 { font-size: 22px; }
  .sheet .lede { font-size: 14px; margin-bottom: 12px; }
  .steps { margin-bottom: 12px; }
  /* Placing: the map needs the room. */
  body[data-step="3"] .sheet { max-height: 42vh; max-height: 42dvh; }
  .preview canvas { height: 280px; }
  .sheet .step > .row:not(.wrap) { bottom: calc(-34px - env(safe-area-inset-bottom)); margin: 14px -16px calc(-34px - env(safe-area-inset-bottom)); padding: 10px 16px calc(40px + env(safe-area-inset-bottom)); }
  body[data-page="sponsor"] .controls { top: 12px; bottom: auto; }
}

/* Entrance: the hero rises once on load. */
@media (prefers-reduced-motion: no-preference) {
  .hero { animation: rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; }
  .brand, .controls { animation: fade 0.8s ease 0.3s both; }
  .feed li:first-child { animation: fade 0.5s ease both; }
  .toast { animation: drop 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
}
/* Transform only: the hero text is the LCP element and must paint at once. */
@keyframes rise { from { transform: translateY(18px); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Screenshot mode (?clean=1) and sprite preview hide the UI. */
body.clean main > :not(canvas), body.clean footer { display: none; }

/* Phones: hero becomes a bottom sheet, feed a one-line ticker. */
@media (max-width: 767px) {
  .hero {
    left: 10px;
    right: 10px;
    bottom: 34px;
    width: auto;
    padding: 18px 18px 16px;
  }
  .hero h2 { font-size: 25px; }
  .hero-body p:not(.split) { font-size: 14.5px; margin-bottom: 14px; }
  .stats { padding-top: 12px; }
  .stats dd { font-size: 21px; }
  .stats dt { font-size: 12px; }
  .actions { margin-top: 14px; }
  .cta, .ghost { height: 48px; }
  .ghost { padding: 0 16px; }
  .feed { top: 64px; left: 10px; right: auto; width: calc(100vw - 20px); }
  .feed ol { display: inline-block; padding: 0; border-radius: 999px; }
  .feed li { display: none; padding: 7px 14px; font-size: 13px; }
  .feed li:first-child { display: block; }
  .controls { top: 12px; right: 10px; bottom: auto; flex-direction: row; }
  .controls button { width: 40px; height: 40px; }
  .brand { top: 12px; left: 10px; }
  .legend { right: 10px; left: 10px; top: 64px; bottom: auto; width: auto; }
  .tree-card { top: 160px; }
  .toasts { top: 108px; }
  .toast { font-size: 13.5px; padding: 9px 14px; }
  footer nav[aria-label="Rechtliche Hinweise"] { left: 10px; right: 10px; bottom: 4px; padding: 3px 8px; font-size: 10.5px; }
  footer nav[aria-label="Rechtliche Hinweise"] ul { justify-content: center; flex-wrap: nowrap; gap: 10px; white-space: nowrap; }
}
@media (max-width: 767px) and (max-height: 700px) {
  .hero-body p:not(.split) { display: none; }
}
.sheet .cta:disabled:not([aria-busy="true"]) { opacity: 0.55; cursor: not-allowed; }
/* Account notice (sponsor step 4, account pages). */
.notice { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: rgba(244, 191, 79, 0.14); font-size: 14px; line-height: 1.45; }
.notice a { color: var(--accent); font-weight: 600; }
/* Share actions: tree card, milestone toasts and the share page /t/<id>. */
.toasts .toast-share {
  pointer-events: auto;
  margin-left: 8px;
  padding: 3px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.toasts .toast-share:active { transform: scale(0.97); }
.tree-card .card-share {
  position: static;
  width: auto;
  height: auto;
  display: inline-flex;
  margin-top: 10px;
  padding: 0;
  border-radius: 0;
  color: var(--accent);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tree-sheet .sponsor-by { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; }
.tree-sheet .sponsor-by a { color: var(--accent); font-weight: 600; word-break: break-all; }
.tree-sheet .summary { margin-top: 0; }
.tree-sheet .row .ghost { flex: 0 0 auto; }
.tree-sheet .row .ghost span { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }
a.cta { text-decoration: none; }
@media (max-width: 767px) {
  .tree-sheet .hint { display: none; }
  .tree-sheet .summary { padding: 8px 12px; font-size: 14px; }
  body[data-page="tree"] .controls { top: 12px; bottom: auto; }
}
/* Inline sign-in on /sponsor step 4: the code field opens under the email, the order continues after it. */
.login-code { margin: 0 0 14px; padding: 12px 12px 2px; border-radius: 12px; background: rgba(244, 191, 79, 0.1); border: 1px solid rgba(244, 191, 79, 0.35); }
.sheet .login-code input { font-size: 22px; font-weight: 700; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.sheet button.link { color: var(--accent); font: inherit; font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
#passkey-btn { margin: 0 0 14px; }
#passkey-btn[hidden] { display: none; }

/* Collapsible hero and feed. The expanded hero is the first paint (its headline is the LCP
   element); the collapsed hero is a pill: tree count, plant button, expand button. */
.hero { --ease: cubic-bezier(0.16, 1, 0.3, 1); interpolate-size: allow-keywords; transition: width 0.4s var(--ease), padding 0.4s var(--ease), border-radius 0.4s var(--ease), opacity 0.25s ease, visibility 0s; }
.hero h2 { margin-right: 36px; }
.hero-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.4s var(--ease); }
.hero-body > div { min-height: 0; overflow: hidden; transition: opacity 0.25s ease; }
.hero .hero-toggle { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; padding: 0; }
.hero-toggle svg { transition: transform 0.3s var(--ease); }
.hero-count { display: none; }
.hero.collapsed { width: auto; padding: 6px; border-radius: 999px; }
/* inline-size containment: the hidden body must not keep the pill at full width. */
.hero.collapsed .hero-body { grid-template-rows: 0fr; contain: inline-size; }
.hero.collapsed .hero-body > div { visibility: hidden; opacity: 0; transition: opacity 0.15s ease, visibility 0s 0.4s; }
.hero.collapsed .actions { margin-top: 0; align-items: center; gap: 6px; }
.hero.collapsed .hero-count { display: inline-flex; align-items: baseline; gap: 5px; padding: 0 8px 0 12px; font-size: 14px; color: var(--ink-soft); white-space: nowrap; }
.hero-count b { color: var(--ink); font-size: 17px; font-variant-numeric: tabular-nums; }
.hero.collapsed .cta { flex: none; height: 44px; padding: 0 18px; font-size: 15px; }
.hero.collapsed #share, .hero.collapsed .sponsor-link { display: none; }
.hero.collapsed .hero-toggle { position: static; width: 44px; height: 44px; }
.hero.collapsed .hero-toggle svg { transform: rotate(180deg); }

.feed { display: flex; align-items: flex-start; justify-content: flex-end; gap: 6px; }
.feed ol { flex: 1; min-width: 0; }
.feed.collapsed ol { display: none; }
.feed button, .exit-pill, .legal-toggle {
  pointer-events: auto;
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
}
.feed button svg { width: 18px; height: 18px; }
.feed button[aria-expanded="true"] { color: var(--ink-mute); }
.feed ol:empty + button { display: none; }

/* Map controls: pressed toggles turn amber; fullscreen shows the icon for the next action. */
.controls button[aria-pressed="true"] { color: var(--accent); }
#fullscreen .fs-exit, #fullscreen[aria-pressed="true"] .fs-enter { display: none; }
#fullscreen[aria-pressed="true"] .fs-exit { display: block; }

/* Immersive mode (Hide panels, or fullscreen): only the world, map controls, toasts and a
   way back. Outside real fullscreen the legal links stay one click away. */
.brand, .feed, footer { transition: opacity 0.25s ease, visibility 0s; }
body.immersive :is(.hero, .feed, .brand, footer) { opacity: 0; visibility: hidden; pointer-events: none; animation: none; transition: opacity 0.25s ease, visibility 0s 0.25s; }
body.immersive.legal-open footer { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.25s ease; }
.exit-pill, .legal-toggle { display: none; position: absolute; width: auto; }
body.immersive .exit-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  top: var(--gutter);
  left: var(--gutter);
  height: 44px;
  padding: 0 16px 0 12px;
  font-size: 14.5px;
  font-weight: 650;
}
.exit-pill svg { width: 18px; height: 18px; }
body.immersive:not(.fs) .legal-toggle { display: inline-flex; align-items: center; left: var(--gutter); bottom: 8px; height: 28px; padding: 0 12px; font-size: 12px; }
html.scroll-away, html.scroll-away body { overflow: visible; }
html.scroll-away body { height: calc(100% + 1px); }

@media (max-width: 767px) {
  #hide-ui { display: none; }
  .hero.collapsed { right: auto; }
  .feed { width: auto; right: 10px; justify-content: flex-start; }
  .feed ol { flex: 0 1 auto; }
  body.immersive .exit-pill { top: 12px; left: 10px; height: 40px; }
  body.immersive:not(.fs) .legal-toggle { left: 50%; bottom: 6px; translate: -50% 0; }
  body.immersive.legal-open .legal-toggle { bottom: 30px; }
}
@media (max-width: 430px) {
  .controls button { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero, .hero-body, .hero-toggle svg, .brand, .feed, footer, .hero.collapsed .hero-body > div,
  body.immersive :is(.hero, .feed, .brand, footer) { transition: none; }
}