/* =========================================================
   LISI · Baum-Welt — Pseudo-Zoom Homepage
   Single tree image as universe. Stage is sticky, content
   in 4 zones (crown / branches / trunk / roots). The driver
   block drives scroll progress via JS.
   ========================================================= */

:root {
  --paper:    #fbf6ea;
  --paper-2:  #f5ecd8;
  --sand:     #e8d9be;
  --leaf:     #5c8a55;
  --leaf-deep:#3a5a38;
  --terra:    #d4663c;
  --ochre:    #c89859;
  --sun:      #f4cf7e;
  --ink:      #2a2620;
  --ink-2:    #4a4438;
  --dim:      #6b6555;
  --line:     rgba(42, 38, 32, 0.14);
  --line-light: rgba(255,255,255,0.18);

  --ease:     cubic-bezier(0.382, 0, 0.618, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0.24, 1);

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: auto; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: #0f0d0a;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* NOTE: overflow-x:hidden on html/body breaks position:sticky in some
     browsers. Keep overflow auto/visible on ancestors of the sticky element. */
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* =========================================================
   STAGE: sticky, the tree never leaves the viewport
   ========================================================= */
.stage {
  position: relative;
  width: 100%;
  height: 500vh; /* total scrollable height for pseudo-zoom */
}
.driver {
  /* invisible spacer that makes .stage tall; sticky inner overlays it */
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.stage-inner {
  position: sticky;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  z-index: 2;
  /* fresh sky-to-meadow gradient as a fallback behind the tree image */
  background:
    linear-gradient(to bottom,
      #cfe6f2 0%,
      #e8efd6 45%,
      #b8c989 70%,
      #5a4a30 100%);
}

/* Tree image: full-bleed cover, scales with --zoom (set by JS).
   The image fills the viewport entirely (no letterbox). Dynamic transform
   re-anchors origin to crown / branches / trunk / roots zones. */
.tree-frame {
  position: absolute;
  inset: 0;
  will-change: transform;
  transform-origin: var(--origin-x, 50%) var(--origin-y, 50%);
  transform: scale(var(--zoom, 1));
  transition: transform 0.18s cubic-bezier(0.32, 0.72, 0.24, 1);
}
.tree-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  filter: saturate(1.08) contrast(1.04);
}
/* Before/after morph: before is the base layer (always visible),
   after fades in on top driven by --morph (0..1) set by JS. */
.tree-img-before { z-index: 0; }
.tree-img-after  { z-index: 1; opacity: var(--morph, 0); transition: opacity 0.22s cubic-bezier(0.32, 0.72, 0.24, 1); }

/* Soft vignette for legibility — lighter than before so the lively greens stay vibrant */
.tree-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(15,28,15,0.30) 100%);
  z-index: 1;
}

/* =========================================================
   OVERLAY: holds the four zones; only one shown at a time
   ========================================================= */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.zone {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.4s var(--ease-soft),
    transform 1.6s var(--ease-soft),
    filter 1.4s var(--ease-soft),
    visibility 0s linear 1.4s;
  pointer-events: none;
  filter: blur(2px);
}
.zone.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  filter: blur(0);
  transition:
    opacity 1.4s var(--ease-soft),
    transform 1.6s var(--ease-soft),
    filter 1.4s var(--ease-soft),
    visibility 0s linear 0s;
}
.zone-inner {
  width: min(1100px, 90vw);
  padding: 0 24px;
}

/* Animated subtle drift in/out per zone for depth (softened) */
.zone:not(.is-active) { transform: translateY(10px) scale(0.99); }
.zone.is-active       { transform: translateY(0)    scale(1); }

/* Per-zone vertical placement so content lands over the right tree region */
.zone-crown    { align-items: flex-start; padding-top: 8vh; }
.zone-branches { align-items: center; }
.zone-trunk    { align-items: center; }
.zone-roots    { align-items: center; }

/* =========================================================
   TYPOGRAPHY HELPERS
   ========================================================= */
.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin: 0 0 18px;
  font-weight: 400;
}
.kicker-light { color: rgba(255, 246, 224, 0.85); }
.kicker-dark  { color: rgba(255, 246, 224, 0.78); }

.display {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  font-variation-settings: "opsz" 96;
}
.display em { font-style: italic; color: var(--sun); font-weight: 400; }
.display-light { color: #fff8e7; text-shadow: 0 2px 4px rgba(0,0,0,0.55), 0 0 28px rgba(0,0,0,0.35); }

.h-section {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.018em;
  margin: 0 0 26px;
}
.h-section em { font-style: italic; }
.h-section-light { color: #fff8e7; text-shadow: 0 1px 2px rgba(0,0,0,0.45); }
.h-section-light em { color: var(--sun); }
.h-section-dark { color: #fff8e7; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.h-section-dark em { color: var(--sun); font-style: italic; }

.lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(16px, 1.55vw, 21px);
  line-height: 1.5;
  max-width: 62ch;
  margin: 0;
}
.lede-light { color: rgba(255, 246, 224, 0.92); text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
.lede-dark  { color: rgba(255, 246, 224, 0.88); text-shadow: 0 1px 2px rgba(0,0,0,0.4); }

/* =========================================================
   ZONE 1 · KRONE
   Mission block sits high so it lands on dark foliage.
   Subtle dark veil keeps text legible wherever it lands.
   ========================================================= */
.zone-inner-crown {
  text-align: left;
  padding: 30px 36px 34px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(20, 14, 6, 0.58) 0%, rgba(20, 14, 6, 0.32) 100%);
  backdrop-filter: blur(3px) saturate(1.05);
  -webkit-backdrop-filter: blur(3px) saturate(1.05);
  border: 1px solid rgba(244, 207, 126, 0.18);
  max-width: 920px;
}
.creed {
  list-style: none;
  padding: 0;
  margin: 36px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 28px;
  max-width: 720px;
}
.creed li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-top: 1px solid var(--line-light);
  padding-top: 12px;
}
.creed-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  opacity: 0.7;
}
.creed-w {
  font-family: var(--serif);
  font-size: clamp(18px, 1.7vw, 22px);
  font-style: italic;
  font-weight: 400;
}
.creed-light { color: #fff8e7; }
.creed-light .creed-num { color: var(--sun); }

/* =========================================================
   ZONE 2 · ÄSTE — branches arranged around the canopy
   ========================================================= */
.zone-inner-branches { text-align: center; }
.zone-inner-branches > .kicker,
.zone-inner-branches > .h-section { margin-left: auto; margin-right: auto; }
.zone-inner-branches > .h-section { max-width: 18ch; }

.branches {
  position: relative;
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "tl tr"
    "ml mr"
    "bm bm";
  gap: 22px 60px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.branch {
  display: block;
  text-align: left;
  background: rgba(20, 14, 6, 0.42);
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  border: 1px solid rgba(244, 207, 126, 0.22);
  border-radius: 14px;
  padding: 18px 20px;
  color: #fff8e7;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: transform 0.5s var(--ease-out), border-color 0.4s ease, background-color 0.4s ease;
}
a.branch:link, a.branch:visited, a.branch:hover, a.branch:active { color: #fff8e7; text-decoration: none; }
.branch:hover { transform: translateY(-2px); border-color: rgba(244, 207, 126, 0.7); background: rgba(20, 14, 6, 0.55); }
.branch-cta {
  display: block;
  margin-top: 10px;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: #f4cf7e;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.branch-cta strong { font-weight: 700; letter-spacing: 0.04em; }
.branch-tl { grid-area: tl; }
.branch-tr { grid-area: tr; text-align: right; }
.branch-ml { grid-area: ml; }
.branch-mr { grid-area: mr; text-align: right; }
.branch-bm { grid-area: bm; max-width: 520px; margin: 0 auto; text-align: center; }
.branch-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--sun);
  display: block;
  margin-bottom: 6px;
}
.branch-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.18;
  margin: 0 0 6px;
  color: #fff8e7;
}
.branch-p {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.45;
  margin: 0;
  color: rgba(255, 246, 224, 0.78);
}

/* =========================================================
   ZONE 3 · STAMM
   Warm trunk background → DARK text reads best
   ========================================================= */
.zone-inner-trunk { text-align: center; max-width: 880px; }
.zone-inner-trunk > .kicker { display: inline-block; }
.trunk-lede {
  margin: 24px auto 0;
  max-width: 56ch;
  background: rgba(20, 14, 6, 0.55);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  padding: 24px 30px;
  border-radius: 14px;
  border: 1px solid rgba(244, 207, 126, 0.25);
  color: #fff8e7;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.55;
  text-shadow: none;
}
.trunk-mark {
  font-family: var(--serif);
  font-style: italic;
  color: var(--sun);
  font-weight: 500;
}

/* =========================================================
   ZONE 4 · WURZELN — 5 product anchors
   ========================================================= */
.zone-inner-roots { text-align: center; }
.zone-inner-roots > .h-section { max-width: 22ch; margin-left: auto; margin-right: auto; }

.roots-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 38px 0 24px;
}
.root {
  display: block;
  text-align: left;
  background: rgba(15, 10, 4, 0.55);
  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  border: 1px solid rgba(244, 207, 126, 0.28);
  border-radius: 14px;
  padding: 18px 18px 20px;
  color: #fff8e7;
  transition: transform 0.4s var(--ease-out), border-color 0.3s ease, background 0.3s ease;
}
.root:hover {
  transform: translateY(-3px);
  border-color: rgba(244, 207, 126, 0.7);
  background: rgba(15, 10, 4, 0.7);
}
.root-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--sun);
}
.root-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.1;
  margin: 8px 0 6px;
  letter-spacing: -0.01em;
}
.root-p {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.4;
  margin: 0;
  color: rgba(255, 246, 224, 0.78);
}
.closer {
  margin: 30px 0 0;
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 52px);
  letter-spacing: -0.02em;
  color: #fff8e7;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.closer-pre  { font-style: italic; font-weight: 300; opacity: 0.92; }
.closer-mark { font-style: italic; font-weight: 500; color: #ffffff; text-shadow: 0 2px 6px rgba(0,0,0,0.55), 0 0 12px rgba(0,0,0,0.35); }

/* =========================================================
   TOP HEADER — fixed, minimal
   ========================================================= */
.top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 246, 224, 0.95);
  pointer-events: auto;
  transition: color 0.5s ease;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
/* dark legibility veil at the very top so the header stays readable on bright sky */
.stage-inner::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 110px;
  background: linear-gradient(to bottom, rgba(10,8,4,0.55) 0%, rgba(10,8,4,0.25) 55%, rgba(10,8,4,0) 100%);
  z-index: 18;
  pointer-events: none;
}
.top-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; letter-spacing: 0.32em; }
.top-logo svg { color: var(--sun); }
.top-nav { display: flex; gap: 20px; }
.top-nav a { transition: color 0.2s ease; }
.top-nav a:hover { color: var(--sun); }
@media (max-width: 820px) { .top-nav { display: none; } }

/* When the visible zone has a light background, switch nav to dark */
body.is-trunk .top { color: var(--ink-2); }
body.is-trunk .top-logo svg { color: var(--terra); }
body.is-trunk .top-nav a:hover { color: var(--terra); }

/* =========================================================
   RIGHT RAIL — progress indicator
   ========================================================= */
.rail {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 18;
  pointer-events: none;
}
.rail-ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rail-ol li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 246, 224, 0.55);
  transition: color 0.4s ease, opacity 0.4s ease;
}
.rail-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 246, 224, 0.45);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.rail-l { opacity: 0; transform: translateX(-6px); transition: opacity 0.3s ease, transform 0.3s ease; }
.rail-ol li.is-active { color: #fff8e7; }
.rail-ol li.is-active .rail-dot {
  background: var(--sun);
  transform: scale(1.6);
  box-shadow: 0 0 12px rgba(244, 207, 126, 0.7);
}
.rail-ol li.is-active .rail-l { opacity: 1; transform: translateX(0); }

body.is-trunk .rail-ol li { color: rgba(42, 38, 32, 0.5); }
body.is-trunk .rail-ol li.is-active { color: var(--ink); }
body.is-trunk .rail-dot { background: rgba(42, 38, 32, 0.4); }
body.is-trunk .rail-ol li.is-active .rail-dot { background: var(--terra); box-shadow: 0 0 12px rgba(212, 102, 60, 0.5); }

@media (max-width: 720px) { .rail { display: none; } }

/* =========================================================
   SCROLL HINT
   ========================================================= */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 246, 224, 0.7);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: opacity 0.6s ease;
}
.scroll-hint.is-hidden { opacity: 0; pointer-events: none; }
.hint-dot { animation: hintBob 1.6s var(--ease) infinite; transform-origin: center; }
@keyframes hintBob {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(6px); opacity: 0.4; }
}

/* (DRIVER styles defined inline with .stage above.) */

/* =========================================================
   FOOT
   ========================================================= */
.foot {
  background: var(--ink);
  color: rgba(251, 246, 234, 0.78);
  padding: 48px 28px 36px;
  font-family: var(--sans);
  font-size: 13px;
}
.foot-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto 18px;
}
.foot-brand { font-family: var(--serif); font-size: 17px; color: #fff8e7; margin: 0; font-weight: 400; }
.foot-sub { font-family: var(--serif); font-style: italic; color: var(--sun); margin: 4px 0 0; font-size: 14px; }
.foot-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-nav a { transition: color 0.2s ease; }
.foot-nav a:hover { color: var(--sun); }
.foot-mini {
  max-width: 1200px;
  margin: 0 auto;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(251, 246, 234, 0.45);
  border-top: 1px solid rgba(251, 246, 234, 0.12);
  padding-top: 18px;
}
.foot-agent {
  max-width: 1200px;
  margin: 6px auto 0;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(251, 246, 234, 0.32);
}
.foot-agent a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.foot-agent a:hover {
  color: rgba(251, 246, 234, 0.65);
  border-bottom-color: rgba(251, 246, 234, 0.35);
}

/* =========================================================
   RESPONSIVE — MOBILE (≤720px)
   --------------------------------------------------------
   Wichtig: Auf Desktop bleibt das immersive Scroll-Zoom-
   Konzept (Stage 500vh + sticky inner + überblendende
   Zonen) 1:1 erhalten. Auf Mobile wird die Bühne in einen
   klassischen vertikalen Fluss überführt, weil die Zonen-
   Inhalte sonst nicht in den iPhone-Viewport passen und
   abgeschnitten wären. Das Tree-Bild bleibt als sanftes,
   sticky scrollendes Atmosphären-Layer hinter dem Text.
   ========================================================= */
@media (max-width: 720px) {
  /* --- 1) Stage: kein 500vh-Driver mehr, Höhe folgt Inhalt --- */
  .stage { height: auto; }
  .driver { display: none; }

  /* --- 2) Stage-inner: Block-Flow statt sticky — die Tree-Hero
         wird zur ersten Bildschirmhöhe, die Zonen fließen DANACH. --- */
  .stage-inner {
    position: relative;
    top: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  /* Tree-Bild als Hero-Bildschirm (1× Viewport hoch). */
  .tree-frame {
    position: relative;
    inset: auto;
    height: 100vh;
    height: 100svh;
    transform: scale(1.15) !important;
    transform-origin: 50% 45% !important;
    transition: none !important;
    overflow: hidden;
  }

  /* Auf Mobile direkt After-Day-Zustand zeigen (kein Scroll-Morph) */
  .tree-img-after  { opacity: 1 !important; }
  .tree-img-before { opacity: 0 !important; }

  /* --- 3) Overlay & Zonen: aus dem absolute-Käfig in den Fluss --- */
  .overlay {
    position: relative;
    inset: auto;
    z-index: 5;
    pointer-events: auto;
  }
  .zone {
    position: relative;
    inset: auto;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    display: block;
    padding: 32px 0 56px;
    /* Sanfter Atmosphären-Hintergrund hinter den Text-Zonen,
       damit die Karten gut lesbar bleiben (das Tree-Bild ist
       hier nicht mehr sichtbar, weil der Hero-Bereich darüber liegt). */
    background: linear-gradient(
      180deg,
      #1b1610 0%,
      #14110a 100%
    );
  }
  .zone-crown {
    /* Crown ist die erste Text-Zone direkt nach dem Hero-Bild;
       ein dezentes Fade fährt vom Bild ins Dunkel über. */
    padding-top: 48px;
    background:
      linear-gradient(180deg,
        rgba(20, 14, 6, 0.55) 0%,
        #1b1610 90px,
        #14110a 100%);
  }
  .zone-inner {
    width: min(560px, 100%);
    margin: 0 auto;
    padding: 0 18px;
  }

  /* --- 4) Crown verdichten --- */
  .zone-inner-crown {
    margin-top: 0;
    padding: 22px 20px 26px;
    border-radius: 18px;
  }
  .zone-inner-crown > .kicker {
    font-size: 10px;
    letter-spacing: 0.18em;
    line-height: 1.5;
    margin-bottom: 12px;
  }
  .display { font-size: clamp(34px, 9vw, 48px); margin-bottom: 18px; }
  .lede { font-size: 16px; line-height: 1.55; }
  .creed { grid-template-columns: 1fr; gap: 12px 0; margin-top: 24px; }
  .creed li { padding-top: 10px; }
  .creed-w { font-size: 17px; }

  /* --- 5) Branches: einspaltig + Karten-Layout --- */
  .h-section { font-size: clamp(26px, 7.5vw, 36px); margin-bottom: 18px; }
  .branches {
    grid-template-columns: 1fr;
    grid-template-areas: "tl" "tr" "ml" "mr" "bm";
    gap: 12px;
    margin-top: 22px;
  }
  .branch { padding: 16px 18px; }
  .branch-tr, .branch-mr { text-align: left; }
  .branch-bm { max-width: 100%; text-align: left; }
  .branch-h { font-size: 18px; }
  .branch-p { font-size: 13.5px; line-height: 1.45; }

  /* --- 6) Trunk verdichten --- */
  .trunk-lede {
    margin-top: 18px;
    padding: 18px 20px;
    font-size: 16.5px;
    line-height: 1.55;
  }

  /* --- 7) Roots: 2 Spalten statt 5 --- */
  .roots-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 24px 0 18px;
  }
  .root { padding: 14px 14px 16px; }
  .root-h { font-size: 16px; }
  .root-p { font-size: 12px; line-height: 1.4; }
  .closer { font-size: clamp(24px, 7vw, 34px); margin-top: 22px; }

  /* --- 8) Header & Hint --- */
  .top { padding: 14px 18px; }
  /* Scroll-Hint ist auf Mobile irreführend (kein Kamera-Zoom mehr) */
  .scroll-hint { display: none !important; }

  /* Rail (rechte Mini-Navi) ist via separater Regel bereits
     ausgeblendet (Zeile 526). */

  /* --- 9) Veil-Overlay über dem Tree-Bild für Lesbarkeit
         des ersten Bildschirms („Scrollen“-Hint-Bereich) --- */
  .stage-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(10, 8, 4, 0) 0%,
      rgba(10, 8, 4, 0) 55%,
      rgba(10, 8, 4, 0.55) 100%
    );
    pointer-events: none;
    z-index: 3;
  }
}

/* Reduced motion: skip transforms, fade only */
@media (prefers-reduced-motion: reduce) {
  .tree-frame { transition: none !important; transform: scale(1) !important; }
  .zone, .zone:not(.is-active), .zone.is-active { transition: opacity 0.3s ease; transform: none !important; }
}

/* Crown · dezenter "Mehr zu unserer Mission" Link
   Typografisch identisch zum Kicker ("LISI · Leber Institute ..."):
   mono, 11px, 0.32em letter-spacing, uppercase, weight 400.
   Reagiert beim Hover mit warmer Sonne-Akzentfarbe. */
.crown-more {
  margin-top: 1.6rem;
}
.crown-more-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 400;
  color: rgba(255, 246, 224, 0.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 246, 224, 0.22);
  padding-bottom: 2px;
  transition: color .25s ease, border-color .25s ease;
}
.crown-more-link:hover,
.crown-more-link:focus-visible {
  color: var(--sun, #f4cf7e);
  border-bottom-color: rgba(244, 207, 126, 0.55);
}

/* ---------------------------------------------------------------------
 * .harmonia-link — inline-Link auf der Phrase "In Harmonia Crescimus".
 * Erbt vollständig den Textstil des Eltern-Elements (Farbe, Schnitt,
 * Style/italic), damit der Linktext optisch identisch zum umliegenden
 * Text bleibt. Nur ein dezenter Hover-Hint zeigt die Klickbarkeit.
 * ------------------------------------------------------------------ */
.harmonia-link {
  color: inherit;
  font: inherit;
  font-style: inherit;
  font-weight: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, color .25s ease;
}
.harmonia-link:hover,
.harmonia-link:focus-visible {
  border-bottom-color: currentColor;
  outline: none;
}