/* ==========================================================================
   Graskind – Startseite „Aus einem Blatt wird eine Welt.“
   Aufbau je Kapitel: Bühne (sticky) + Text in natürlichem Fluss.
   Grundzustand im CSS = ruhiger Endzustand (gilt ohne JS und bei reduzierter Bewegung).
   Szenenvariablen (--rise, --fan …) werden von assets/js/journey/*.js animiert.
   ========================================================================== */

@property --deck { syntax: "<color>"; inherits: true; initial-value: #E68708; }

/* =========================================================
   A · Auftakt
   ========================================================= */
.hero {
  position: relative; display: flex; align-items: center;
  min-height: max(100svh, 700px);
  padding: calc(var(--header-h) + 2.5rem) 0 clamp(90px, 10vw, 150px);
  overflow: clip;
  background:
    radial-gradient(60% 55% at 72% 46%, rgba(255, 200, 1, .16), transparent 70%),
    radial-gradient(50% 60% at 15% 85%, rgba(173, 213, 175, .35), transparent 70%);
}
.hero__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1rem, 3vw, 3.5rem); align-items: center; }
.hero__copy { position: relative; z-index: 3; padding-bottom: 1rem; }
.hero__title { margin-bottom: 1.5rem; }
.hero__title .bar { display: inline; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.9rem 0 1.5rem; }
.hero__worlds { max-width: 34rem; }
.hero__worlds .icon { width: 1.05em; height: 1.05em; color: var(--gk-green); }

.hero__stage { position: relative; z-index: 2; container-type: inline-size; perspective: 1700px; perspective-origin: 50% 20%; }
.hero__world {
  position: relative; width: 100%; aspect-ratio: 1 / .9;
  transform-style: preserve-3d;
  transform: rotateX(calc(7deg + var(--py, 0deg))) rotateY(var(--px, 0deg));
}

/* Der Bogen */
.sheet { position: absolute; left: 3%; top: 12%; width: 94%; height: 73%; transform-style: preserve-3d; transform: rotate(-2.2deg); }
.sheet::before { /* Schatten des ganzen Bogens */
  content: ""; position: absolute; inset: 0; border-radius: 3px; transform-origin: 50% 100%;
  box-shadow: 0 2px 3px rgba(40, 28, 6, .14), 0 30px 50px -20px rgba(40, 28, 6, .38), 0 70px 90px -50px rgba(40, 28, 6, .3);
}
.sheet__half, .sheet__face {
  background-color: var(--paper-white);
  background-image: var(--tex-grain), var(--tex-fibers);
  background-size: 128px, 512px;
}
.sheet__half { position: absolute; left: 0; width: 100%; height: 50%; }
.sheet__half--bottom { bottom: 0; border-radius: 0 0 3px 3px; background-position: 0 -50%; }
.sheet__half--top { top: 0; transform-origin: 50% 100%; transform-style: preserve-3d; background: none; rotate: x calc(var(--fold, 0) * -96deg); }
.sheet__face { position: absolute; inset: 0; border-radius: 3px 3px 0 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.sheet__face--front::after { /* Licht beim Aufklappen */
  content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, .0), rgba(60, 44, 10, .10));
  opacity: var(--flap-shade, 0);
}
.sheet__face--back { transform: rotateX(180deg); background-color: var(--paper-2); }
.sheet__crease {
  position: absolute; left: 0; right: 0; top: calc(50% - 6px); height: 12px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(60, 44, 10, .10) 45%, rgba(255, 255, 255, .55) 55%, transparent);
  transform: translateZ(1px);
}

/* Pop-up-Produkte */
.pop { position: absolute; left: var(--x); top: var(--y); width: var(--w); margin: 0; transform-style: preserve-3d; transform: translate3d(0, calc(var(--lift, 0) * -1px), var(--z, 40px)) rotate(var(--rot, 0deg)); }
.pop__body { position: relative; display: block; transform-origin: 50% 100%; }
.pop__body img { width: 100%; filter: drop-shadow(0 12px 14px rgba(40, 28, 6, .26)); }
.pop__shadow {
  position: absolute; left: 6%; right: 6%; bottom: -4%; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 28, 6, .32), transparent); filter: blur(4px);
  transform: translateZ(-2px); transform-origin: 50% 50%;
}
.pop--kalender { --x: 6cqw; --y: 1cqw; --w: 21cqw; --rot: -5deg; --z: 30px; }
.pop--poster   { --x: 70cqw; --y: 4cqw; --w: 23cqw; --rot: 4deg; --z: 45px; }
.pop--malbuch  { --x: 31cqw; --y: 13cqw; --w: 35cqw; --rot: -2deg; --z: 90px; }
.pop--box      { --x: 7cqw; --y: 47cqw; --w: 19cqw; --rot: -5deg; --z: 140px; }
.pop--cards    { --x: 58cqw; --y: 49cqw; --w: 33cqw; --z: 170px; }
.pop--cards .pop__body { height: 22cqw; }
.pop__card { position: absolute; width: 42%; aspect-ratio: 709 / 1063; transform-origin: 50% 100%; }
.pop__card:nth-child(1) { left: 0; top: 7%; rotate: -13deg; }
.pop__card:nth-child(2) { left: 29%; top: 0; rotate: -1deg; z-index: 1; }
.pop__card:nth-child(3) { left: 58%; top: 7%; rotate: 12deg; }
.pop__card img { width: 100%; height: 100%; object-fit: cover; border-radius: 6% / 4%; filter: drop-shadow(0 8px 10px rgba(40, 28, 6, .28)); }

/* Schmetterlinge aus dem Kräuterkalender */
.flutter { position: absolute; display: block; transform-style: preserve-3d; transform: translate3d(0, calc(var(--lift, 0) * -1px), var(--z, 200px)); pointer-events: none; }
.flutter--a { left: -2cqw; top: -3cqw; width: 12cqw; --z: 230px; }
.flutter--b { left: 87cqw; top: 38cqw; width: 9cqw; --z: 200px; }
.flutter__wings { display: block; }
.flutter img { width: 100%; filter: drop-shadow(0 10px 8px rgba(40, 28, 6, .22)); }

/* Eröffnung (nur mit Bewegung) */
@keyframes sheet-open { from { transform: rotateX(-178deg); } to { transform: rotateX(0deg); } }
@keyframes sheet-shadow { from { transform: scaleY(.5); } to { transform: scaleY(1); } }
@keyframes pop-up { 0% { transform: rotateX(-86deg) scale(.92); opacity: 0; } 35% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes pop-shadow { from { transform: translateZ(-2px) scale(.2, .6); opacity: 0; } to { transform: translateZ(-2px) scale(1); opacity: 1; } }
@keyframes flap-light { 0% { --flap-shade: 1; } 100% { --flap-shade: 0; } }
@keyframes wing { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.42); } }
@keyframes drift-a { 0% { translate: -30cqw 20cqw; rotate: 25deg; opacity: 0; } 20% { opacity: 1; } 100% { translate: 0 0; rotate: -8deg; opacity: 1; } }
@keyframes drift-b { 0% { translate: 22cqw -12cqw; rotate: -30deg; opacity: 0; } 25% { opacity: 1; } 100% { translate: 0 0; rotate: 12deg; opacity: 1; } }
@keyframes hover-a { 0%, 100% { translate: 0 0; } 50% { translate: 1.2cqw -1.6cqw; } }

.motion-ok .sheet__half--top { animation: sheet-open 1.25s var(--ease-out) .1s both; }
.motion-ok .sheet::before { animation: sheet-shadow 1.25s var(--ease-out) .1s both; }
.motion-ok .pop__body { animation: pop-up 1.05s var(--ease-spring) both; animation-delay: calc(.62s + var(--i) * .12s); }
.motion-ok .pop__shadow { animation: pop-shadow .9s var(--ease-out) both; animation-delay: calc(.62s + var(--i) * .12s); }
.motion-ok .flutter--a { animation: drift-a 2.4s var(--ease-out) 1.2s both; }
.motion-ok .flutter--b { animation: drift-b 2.6s var(--ease-out) 1.5s both; }
.motion-ok .flutter__wings { animation: wing .32s ease-in-out infinite; }
.motion-ok .flutter--b .flutter__wings { animation-duration: .4s; animation-delay: -.1s; }
.motion-ok .hero.is-offscreen .flutter__wings { animation-play-state: paused; }

/* Mobil: Headline → Bühne → Text, damit echte Produkte im ersten Bildschirm stehen */
@media (max-width: 900px) {
  .hero { min-height: 0; padding-top: calc(var(--header-h) + 1.6rem); align-items: flex-start; }
  .hero__inner { display: flex; flex-direction: column; gap: 0; }
  .hero__copy { display: contents; }
  .hero__copy .kicker { order: 1; margin-bottom: .8rem; }
  .hero__title { order: 2; margin-bottom: .4rem; }
  .hero__stage { order: 3; width: min(100%, 520px); margin: 0 auto -.5rem; }
  .hero__copy .lead { order: 4; margin-top: .4rem; }
  .hero__actions { order: 5; margin: 1.2rem 0 1.1rem; }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero__worlds { order: 6; position: relative; z-index: 3; }
}
@media (max-width: 420px) {
  .hero__title { font-size: clamp(2.35rem, 11.5vw, 3rem); }
}

/* Wiese */
.hero__meadow { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(80px, 10vw, 150px); pointer-events: none; z-index: 1; }
.hero__meadow-back, .hero__meadow-front { position: absolute; left: 0; bottom: 0; width: 100%; }
.hero__meadow-back { height: 100%; color: var(--gk-green-light); transform: scaleX(-1); }
.hero__meadow-front { height: 66%; color: var(--gk-green); }
.silphie { position: absolute; width: clamp(30px, 3.6vw, 58px); filter: drop-shadow(0 3px 3px rgba(30, 22, 6, .2)); }
.silphie--1 { left: 6%; top: 8%; }
.silphie--2 { left: 41%; top: 26%; width: clamp(24px, 2.6vw, 42px); }
.silphie--3 { left: 88%; top: 4%; }

/* =========================================================
   Kapitelgerüst: Bühne + Textschritte
   ========================================================= */
.chapter {
  --chapter-bg: var(--paper);
  --edge-color: var(--chapter-bg);
  position: relative; isolation: isolate;
  background-color: var(--chapter-bg);
  background-image: var(--tex-grain), var(--tex-fibers);
  background-size: 128px, 512px;
  color: var(--ink);
}
.chapter__inner {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(1.5rem, 4vw, 4rem); width: min(100% - 2 * var(--gutter), 1440px); margin-inline: auto;
}
.chapter__stage {
  grid-column: 2; grid-row: 1; align-self: start;
  position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px;
  container-type: size;
}
.chapter__steps { grid-column: 1; grid-row: 1; position: relative; z-index: 2; }
.chapter--stage-left .chapter__stage { grid-column: 1; }
.chapter--stage-left .chapter__steps { grid-column: 2; }
.chapter--stage-left .chapter__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.step {
  display: flex; flex-direction: column; justify-content: center; gap: .2rem;
  min-height: 88vh; min-height: 88svh; padding: 14vh 0; max-width: 33rem;
}
.step--intro { min-height: 100vh; min-height: 100svh; }
.step .h2 { margin-bottom: 1.4rem; }
.step .h3 { margin-bottom: .9rem; }
.step .lead { max-width: 30ch; }
.step__actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.3rem; }

/* Kleine Höhen: Bühne nicht festhalten, sondern ruhig im Fluss zeigen */
@media (max-height: 520px) and (min-width: 901px) {
  .chapter__stage { position: relative; height: 560px; }
  .step, .step--intro { min-height: 0; padding: 3rem 0; }
}

/* Mobil: Bühne oben festhalten, Textkarten gleiten darüber */
@media (max-width: 900px) {
  .chapter__inner { display: block; width: 100%; }
  .chapter__stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; z-index: 0; overflow: hidden; }
  .chapter__steps { margin-top: -100vh; margin-top: -100svh; padding: 60svh var(--gutter) 6svh; pointer-events: none; }
  .step, .step--intro {
    pointer-events: auto; min-height: 0; max-width: 34rem; margin: 0 auto 68svh; padding: 1.3rem 1.25rem 1.45rem;
    border-radius: 18px; background: rgba(251, 247, 238, .95); box-shadow: var(--shadow-2);
  }
  .step:last-child { margin-bottom: 0; }
  .step .h2 { font-size: clamp(2rem, 8.5vw, 2.8rem); margin-bottom: 1rem; }
  .step .lead { font-size: 1.06rem; max-width: none; }
}
@media (max-width: 900px) and (max-height: 560px) {
  .chapter__stage { position: relative; height: 92svh; }
  .chapter__steps { margin-top: 0; padding-top: 1rem; }
  .step { margin-bottom: 1rem; }
}

/* =========================================================
   B · Quartettspiele
   ========================================================= */
.chapter--quartett {
  --chapter-bg: color-mix(in oklab, var(--deck) 36%, var(--paper));
  transition: --deck .9s var(--ease-out);
}
.qt { --tilt: 1; --rise: 1; --fan: 1; --reveal: 1; --focus: 1; --box: 1; --swap: 0; position: absolute; inset: 0; overflow: clip; }
.qt__num {
  position: absolute; right: -3cqw; bottom: -9cqh; margin: 0;
  font-size: min(82cqh, 70cqw); font-weight: 800; line-height: .8; letter-spacing: -.07em;
  color: color-mix(in oklab, var(--deck) 52%, var(--paper));
  text-shadow: 0 2px 0 rgba(255, 255, 255, .35), 0 -2px 1px rgba(60, 40, 0, .08);
  user-select: none; pointer-events: none;
}
.qt__scene { position: absolute; inset: 15cqh 0 19cqh; perspective: 1500px; perspective-origin: 50% 35%; }
.qt__fan {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(calc(var(--tilt) * 8deg)) rotateY(calc(var(--tilt) * -9deg));
}
.qcard {
  --ch: min(47cqh, 54cqw);
  --cw: calc(var(--ch) * .667);
  --a: calc((var(--s) - 3) * 10.5deg);
  --hero: 0; --open: 0;
  position: absolute; left: 57%; top: 50%; width: var(--cw); height: var(--ch);
  margin: calc(var(--ch) * -.5) 0 0 calc(var(--cw) * -.5);
  transform-style: preserve-3d; transform-origin: 50% 200%;
  /* --rise 0: Stapel liegt weit hinten hinter der Schachtel; 1: Karte steht vorn */
  transform:
    translate3d(
      calc(var(--hero) * var(--focus) * -1cqw),
      calc((1 - var(--rise)) * (var(--ch) * -.57 - 7cqh) + var(--swap) * 7cqh - var(--hero) * var(--focus) * 4cqh),
      calc(var(--d) * -16px + (1 - var(--rise)) * -520px + var(--focus) * (var(--hero) * 110px - (1 - var(--hero)) * 24px))
    )
    rotate(calc(var(--a) * var(--fan) + (1 - var(--fan)) * var(--jit, 0deg)))
    scale(calc((1 - (1 - var(--rise)) * .38) * (1 + var(--hero) * var(--focus) * .06)));
  text-decoration: none; color: inherit; border-radius: 6% / 4%;
  -webkit-tap-highlight-color: transparent;
}
.qcard.is-open { --open: 1; cursor: zoom-in; }
.qcard.is-hero { --hero: 1; }
.qcard__body {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateY(calc(max(1 - var(--open) * clamp(0, var(--reveal) * 2 - var(--k) * .33, 1), var(--swap)) * 180deg));
  transition: translate .45s var(--ease-out);
}
.qcard.is-open:hover .qcard__body, .qcard.is-open:focus-visible .qcard__body { translate: 0 -5%; }
.qcard:focus-visible { box-shadow: none; }
.qcard:focus-visible .qcard__face--front { box-shadow: 0 0 0 4px var(--paper-white), 0 0 0 8px var(--gk-green-deep), 0 20px 30px -12px rgba(0, 0, 0, .45); }
.qcard__face {
  position: absolute; inset: 0; overflow: hidden; border-radius: 6% / 4%;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: var(--paper-white) var(--tex-fibers) 0 0 / 256px; /* Ladezustand: Papier statt Weiß */
  box-shadow: 0 1px 1px rgba(20, 14, 2, .18), 0 10px 18px -10px rgba(20, 14, 2, .45);
}
.qcard__face img { width: 100%; height: 100%; object-fit: cover; }
.qcard__face--back { transform: rotateY(180deg); }
.qcard__face--back.is-neutral {
  background-color: var(--paper-back); background-image: var(--tex-grain), var(--tex-fibers); background-size: 128px, 256px;
  box-shadow: inset 0 0 0 1px rgba(60, 44, 10, .12), 0 1px 1px rgba(20, 14, 2, .18), 0 10px 18px -10px rgba(20, 14, 2, .45);
}
.qcard__face--back.is-neutral img { opacity: 0; }
.qcard__face::after { content: ""; position: absolute; inset: 0; background: #1d1404; opacity: calc(var(--focus) * (1 - var(--hero)) * .16); pointer-events: none; }

.qt__box {
  --bw: min(23cqh, 26cqw);
  position: absolute; left: 0; bottom: 3cqh; z-index: 2; width: var(--bw);
  transform-origin: 50% 100%;
  transform:
    translate(calc((1 - var(--box)) * (57cqw - var(--bw) / 2)), calc((1 - var(--box)) * 1cqh))
    scale(calc(1 + (1 - var(--box)) * .5))
    rotate(calc(var(--box) * -5deg));
}
.qt__box-img { width: 100%; filter: drop-shadow(0 18px 18px rgba(20, 14, 2, .32)); }

.qt__decks { position: absolute; left: 0; right: 0; bottom: 3.5cqh; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; padding: 0 1rem; }
.qt__chip { background: rgba(251, 247, 238, .82); }
.qt__chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
.qt__hint { display: flex; gap: .55rem; align-items: flex-start; margin: .3rem 0 0; padding: .75rem .9rem; border-radius: 12px; background: rgba(251, 247, 238, .6); font-weight: 600; font-size: .95rem; }
.qt__hint .icon { margin-top: .15em; color: var(--gk-green); }
html:not(.js) .qt__decks, html:not(.js) .qt__hint { display: none; }

@media (max-width: 900px) {
  .qt__scene { inset: 17cqh 0 40cqh; }
  .qcard { --ch: min(36cqh, 46cqw); }
  .qt__num { font-size: 60cqh; bottom: auto; top: 14cqh; right: -6cqw; }
  .qt__decks {
    top: calc(var(--header-h) + 8px); bottom: auto; flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px var(--gutter) 6px;
  }
  .qt__decks::-webkit-scrollbar { display: none; }
  .qt__chip { flex: none; }
  .qt__box { --bw: min(22cqh, 34cqw); bottom: -1cqh; }
}