/* =============================================================================
   edelwelt.online · Grundstil
   Tokens aus BRAND.md: fast Schwarz + Gold, Tannengrün als Tiefe, Creme/Papier
   für helle Kapitel. Schriften: Cormorant Garamond · Cinzel · Ms Madi (lokal).
   ============================================================================= */
:root {
  /* Nachtgrün statt Schwarz: die dunklen Flächen tragen das Tannengrün der Marke */
  --black: #0F0E0C;
  --night: #13281F;
  --night-2: #1A3529;
  --night-3: #24463A;
  --fir: #2E5443;
  --fir-2: #3A6A54;
  --gold: #C9A45A;
  --gold-light: #E3C98E;
  --gold-pale: #F7E7B0;
  --gold-deep: #A67C34;
  --gold-ink: #80611F;          /* Gold als Text auf Hell */
  --creme: #F5ECDD;
  --paper: #FBF6EC;
  --white: #FFFDF9;
  --ink: #1E2B24;
  --ink-2: #4A574F;
  --line-gold: rgba(201, 164, 90, 0.34);
  --line-gold-soft: rgba(201, 164, 90, 0.16);
  --line-gold-strong: rgba(201, 164, 90, 0.72);
  --line-ink: rgba(30, 43, 36, 0.14);
  --line-paper: rgba(128, 97, 31, 0.35);
  --passe: 12px;

  --font-serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-caps: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --font-script: 'Ms Madi', 'Snell Roundhand', 'Brush Script MT', cursive;

  --display: clamp(2.6rem, 6.4vw, 6rem);
  --h2: clamp(2rem, 4.4vw, 3.9rem);
  --h3: clamp(1.45rem, 2.4vw, 2rem);
  --lead: clamp(1.15rem, 1.5vw, 1.4rem);
  --body: 1.14rem;
  --eyebrow: 0.72rem;

  --gutter: clamp(16px, 5vw, 72px);
  --max: 1440px;
  --measure: 62ch;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--night);
  color: var(--creme);
  font-family: var(--font-serif);
  font-size: var(--body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video, canvas { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; line-height: 1.08; margin: 0; text-wrap: balance; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
::selection { background: var(--gold); color: var(--night); }
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--gold); color: var(--night); font-family: var(--font-caps); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; }
.skip:focus { top: 16px; }

/* ---------- Typografie-Bausteine ---------- */
.eyebrow {
  font-family: var(--font-caps);
  font-size: var(--eyebrow);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.4rem;
}
.s-paper .eyebrow, .s-creme .eyebrow, .s-white .eyebrow { color: var(--gold-ink); }
.display { font-size: var(--display); font-weight: 400; letter-spacing: -0.005em; }
.h2 { font-size: var(--h2); }
.h3 { font-size: var(--h3); }
.lead { font-size: var(--lead); line-height: 1.5; font-weight: 400; max-width: var(--measure); }
.measure { max-width: var(--measure); }
.caps { font-family: var(--font-caps); font-size: 0.78rem; letter-spacing: 0.26em; text-transform: uppercase; }
.script { font-family: var(--font-script); font-weight: 400; color: var(--gold); font-size: 1.35em; line-height: 1.2; }
.s-paper .script, .s-creme .script, .s-white .script { color: var(--gold-ink); }
.muted { opacity: 0.74; }
.italic { font-style: italic; }
.nums { font-variant-numeric: lining-nums tabular-nums; }

/* ---------- Flächen ---------- */
.s-night { background: var(--night); color: var(--creme); }
.s-night-2 { background: var(--night-2); color: var(--creme); }
.s-fir { background: linear-gradient(180deg, var(--night) 0%, var(--night-3) 55%, var(--night) 100%); color: var(--creme); }
.s-white { background: var(--white); color: var(--ink); color-scheme: light; }
.s-paper { background: var(--paper); color: var(--ink); color-scheme: light; }
.s-creme { background: var(--creme); color: var(--ink); color-scheme: light; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { padding-block: clamp(5rem, 12vh, 9rem); position: relative; }
.section-tight { padding-block: clamp(3rem, 7vh, 5rem); }

/* ---------- Zierlinie: Goldlinie mit Herz (aus dem Logo) ---------- */
.zier { display: flex; align-items: center; justify-content: center; gap: 0.9rem; color: var(--gold); }
.zier::before, .zier::after { content: ''; height: 1px; flex: 0 1 clamp(2.5rem, 12vw, 9rem); background: linear-gradient(to right, transparent, currentColor); }
.zier::after { background: linear-gradient(to left, transparent, currentColor); }
.zier svg { width: 14px; height: 14px; fill: currentColor; }
.zier-left { justify-content: flex-start; }
.zier-left::before { display: none; }

/* ---------- Knöpfe ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.8rem;
  padding: 1.05rem 2rem;
  font-family: var(--font-caps); font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase;
  border: 1px solid var(--gold); color: var(--gold-light);
  background: transparent; border-radius: 0;
  transition: background 0.5s var(--ease-out), color 0.5s var(--ease-out), border-color 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  position: relative; isolation: isolate; overflow: hidden;
}
.btn::after { content: ''; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease-out); z-index: -1; }
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }
.btn:hover, .btn:focus-visible { color: var(--night); }
.btn-solid { background: var(--gold); color: var(--night); }
.btn-solid::after { background: var(--gold-pale); }
.btn-solid:hover { color: var(--night); }
.s-paper .btn, .s-creme .btn, .s-white .btn { border-color: var(--gold-ink); color: var(--gold-ink); }
.s-paper .btn::after, .s-creme .btn::after, .s-white .btn::after { background: var(--gold-ink); }
.s-paper .btn:hover, .s-creme .btn:hover, .s-white .btn:hover { color: var(--paper); }
.s-paper .btn-solid, .s-creme .btn-solid, .s-white .btn-solid { background: var(--gold-ink); color: var(--paper); }
.s-paper .btn-solid::after, .s-creme .btn-solid::after, .s-white .btn-solid::after { background: var(--gold-deep); }
.link { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-caps); font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); }
.link::after { content: ''; width: 2.2rem; height: 1px; background: currentColor; transition: width 0.5s var(--ease-out); }
.link:hover::after { width: 3.4rem; }
.s-paper .link, .s-creme .link, .s-white .link { color: var(--gold-ink); }

/* ---------- Bilder ---------- */
.img { overflow: hidden; position: relative; background: var(--night-3); }
.img img { width: 100%; height: 100%; object-fit: cover; }
.img-reveal img { transform: scale(1.08); transition: transform 1.6s var(--ease-out); }
.is-in .img-reveal img, .img-reveal.is-in img { transform: scale(1); }
.img-frame { outline: 1px solid var(--line-gold); outline-offset: var(--passe); }
.caption { font-family: var(--font-caps); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.62; margin-top: 0.8rem; }

/* ---------- Reveal-Hilfen (GSAP setzt die Endzustände; ohne JS ist alles sichtbar) ---------- */
.js .reveal { opacity: 0; }
.js .reveal-line { overflow: hidden; }
.js [data-split] { visibility: hidden; }
.js [data-split].is-ready { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .hero-text .rise { opacity: 1 !important; transform: none !important; }
  .js [data-split] { visibility: visible !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =============================================================================
   Kopfleiste und Menü
   ============================================================================= */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; padding: 18px var(--gutter); transition: background 0.6s var(--ease-out), padding 0.6s var(--ease-out), backdrop-filter 0.6s; }
.site-header.is-scrolled { background: rgba(19, 40, 31, 0.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding-block: 12px; border-bottom: 1px solid var(--line-gold-soft); }
.header-inner { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 2rem; max-width: var(--max); margin-inline: auto; }
.brand { display: block; }
.brand-mark { height: 20px; width: auto; }
.folio { display: none; overflow: hidden; height: 1.2em; color: var(--gold); font-size: 0.62rem; letter-spacing: 0.3em; opacity: 0.8; }
.folio span { display: inline-block; }
.nav-primary { display: none; gap: 2.2rem; justify-self: end; }
.nav-primary a { font-family: var(--font-caps); font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--creme); opacity: 0.82; position: relative; padding-block: 4px; }
.nav-primary a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--gold); transition: right 0.5s var(--ease-out); }
.nav-primary a:hover::after { right: 0; }
.btn-small { padding: 0.7rem 1.2rem; font-size: 0.62rem; }
.header-cta { display: none; }
.nav-toggle { width: 44px; height: 44px; display: grid; place-items: center; gap: 0; justify-self: end; position: relative; }
.nav-toggle span { position: absolute; width: 26px; height: 1px; background: var(--gold-light); transition: transform 0.5s var(--ease-out); }
.nav-toggle span:first-child { transform: translateY(-4px); }
.nav-toggle span:last-child { transform: translateY(4px); }
.nav-open .nav-toggle span:first-child { transform: rotate(45deg); }
.nav-open .nav-toggle span:last-child { transform: rotate(-45deg); }
@media (min-width: 1024px) {
  .folio { display: block; }
  .nav-primary { display: flex; }
  .header-cta { display: inline-flex; }
  .nav-toggle { display: none; }
}
.nav-panel { position: fixed; inset: 0; z-index: 40; background: linear-gradient(180deg, var(--night-2), var(--night)); color: var(--creme); clip-path: inset(0 0 100% 0); transition: clip-path 0.8s var(--ease-inout); overflow: auto; }
.nav-panel.is-open { clip-path: inset(0 0 0 0); }
.nav-panel-inner { min-height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 2.5rem; padding: 6rem var(--gutter) 3rem; max-width: 760px; margin-inline: auto; }
.nav-panel nav { display: flex; flex-direction: column; gap: 0.2rem; }
.nav-panel nav a { font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.25; display: flex; align-items: baseline; gap: 1.2rem; border-bottom: 1px solid var(--line-gold-soft); padding-block: 0.3rem; }
.nav-panel nav a small { font-family: var(--font-caps); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--gold); min-width: 2.4rem; }
.nav-panel-foot { display: flex; flex-direction: column; gap: 0.4rem; font-size: 1.05rem; opacity: 0.85; }

/* =============================================================================
   Hero · Goldbaum
   ============================================================================= */
.hero { position: relative; min-height: 100svh; padding-bottom: 7rem; display: flex; flex-direction: column; align-items: center; background: radial-gradient(ellipse 72% 58% at 50% 40%, #2A4C3C 0%, #1C3A2D 38%, var(--night) 78%); overflow: hidden; isolation: isolate; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-stage { position: relative; z-index: 1; width: min(54svh, 86vw, 640px); aspect-ratio: 1736.1 / 1406.3; margin-top: clamp(5.5rem, 11svh, 8rem); pointer-events: none; }
.hero-bogen { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 2s var(--ease-out) 0.3s; }
.hero-bogen.is-on { opacity: 1; }
.hero-baumbox { position: absolute; left: 7.73%; top: 6.30%; width: 83.34%; height: 87.07%; }
.hero-text { position: relative; z-index: 2; text-align: center; padding: 0.5rem var(--gutter) 0; opacity: 0; transition: opacity 0.6s; max-width: 900px; }
.hero-text.is-on, .no-js .hero-text, .no-js .hero-bogen { opacity: 1; }
.js .hero-text .rise { opacity: 0; }
.hero-text .eyebrow { margin-bottom: 1rem; opacity: 0.8; }
.hero-wordmark { font-size: clamp(2.7rem, 9.2vw, 6.6rem); font-weight: 500; letter-spacing: 0.24em; text-indent: 0.24em; line-height: 1; color: var(--gold-pale); margin: 0; }
.hero-wordmark .w-welt { color: var(--gold); }
.hero-claim { font-family: var(--font-caps); font-size: clamp(0.62rem, 1.4vw, 0.86rem); letter-spacing: 0.36em; text-indent: 0.36em; text-transform: uppercase; color: rgba(245, 236, 221, 0.88); margin: 1.3rem 0 0; }
.hero-sub { margin: 1.4rem auto 0; font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-style: italic; opacity: 0.8; }
.hero-sub b { font-weight: 500; font-style: normal; color: var(--gold-light); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin-top: 2rem; }
.hero-scroll { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; color: var(--gold); opacity: 0.7; font-size: 0.6rem; }
.hero-scroll i { display: block; width: 1px; height: 42px; background: linear-gradient(var(--gold), transparent); animation: scrollhint 2.6s var(--ease-inout) infinite; transform-origin: top; }
@keyframes scrollhint { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(16px); opacity: 0; } }
.hero-fallback { display: block; width: min(70vw, 480px); margin: clamp(5.5rem, 11svh, 8rem) auto 0; }
.no-js .hero-stage, .no-js .hero-canvas { display: none; }
@media (max-height: 700px) { .hero-stage { width: min(44svh, 80vw); } .hero-sub { display: none; } }
@media (max-width: 640px) { .hero-cta .btn { width: 100%; justify-content: center; } }