/* ==========================================================================
   Graskind – Kapitel C bis G und Produktauswahl (Startseite)
   Grundzustand = ruhiger Endzustand; Szenenvariablen werden per JS animiert.
   ========================================================================== */

/* =========================================================
   C · Malbücher
   ========================================================= */
.chapter--malbuch { --chapter-bg: var(--paper-white); }
.mb { --draw: 1; --spread: 1; --open: 1; --photo: 1; position: absolute; inset: 0; }
.mb__strokes { position: absolute; left: -6cqw; top: 8cqh; width: calc(100% + 12cqw); height: 88cqh; overflow: visible; mix-blend-mode: multiply; opacity: .62; }
.mb__strokes path {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - clamp(0, var(--draw) * 1.8 - var(--k) * .15, 1));
}
.mb__photo, .mb__hero {
  --fw: min(66cqh, 76cqw);
  position: absolute; left: calc(50% - var(--fw) / 2 + 6cqw); top: 12cqh; width: var(--fw); aspect-ratio: 1;
  margin: 0; rotate: 2deg;
}
.mb__photo {
  border-radius: 6px; background: var(--paper-white);
  box-shadow: 0 0 0 10px var(--paper-white), var(--shadow-3);
  clip-path: inset(calc((1 - var(--photo)) * 17%) calc((1 - var(--photo)) * 26%) round calc(6px + (1 - var(--photo)) * 4px));
}
.mb__photo > img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.mb__label {
  --show: clamp(0, (var(--photo) - .82) * 7 - var(--n) * .25, 1);
  position: absolute; left: var(--x); top: var(--y); z-index: 2;
  opacity: var(--show); translate: -50% calc((1 - var(--show)) * 8px);
}
.mb__label::before {
  content: ""; position: absolute; left: 50%; top: -8px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: var(--gk-yellow); box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 2px 6px rgba(0, 0, 0, .3);
}
.mb__label span {
  display: block; margin-top: 12px; padding: .3rem .6rem; border-radius: 6px; white-space: nowrap;
  background: var(--ink); color: var(--paper-white); font-size: clamp(.68rem, .6rem + .3vw, .82rem); font-weight: 700;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5);
}
.mb__hero { perspective: 1400px; pointer-events: none; opacity: calc(1 - clamp(0, (var(--photo) - .25) * 2.2, 1)); }
.mb__cover-open {
  position: absolute; left: 26%; top: 17%; width: 48%; height: 66%;
  transform-style: preserve-3d; transform-origin: 0 50%;
  transform: rotateY(calc(var(--open) * -168deg));
}
.mb__cover-front, .mb__cover-back { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 2px 6px 6px 2px; }
.mb__cover-front img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; box-shadow: var(--shadow-3); }
.mb__cover-back { transform: rotateY(180deg); background: linear-gradient(90deg, rgba(60, 44, 10, .05), rgba(60, 44, 10, .02) 70%, rgba(60, 44, 10, .22)), var(--paper-2) var(--tex-fibers) 0 0 / 256px; box-shadow: var(--shadow-2); }

.mb__fan { position: absolute; left: 1cqw; bottom: 6cqh; width: min(44cqw, 60cqh); height: 30cqh; margin: 0; padding: 0; list-style: none; z-index: 3; }
.mb__book {
  --b: clamp(0, var(--spread) * 1.6 - var(--i) * .2, 1);
  position: absolute; bottom: 0; left: calc(var(--i) * 21%); width: 34%;
  transform-origin: 50% 120%;
  transform: translateY(calc((1 - var(--b)) * 40cqh)) rotate(calc((var(--i) - 1.5) * 8deg));
  opacity: var(--b);
}
.mb__book a { display: block; border-radius: 3px; transition: translate .35s var(--ease-out); }
.mb__book a:hover, .mb__book a:focus-visible { translate: 0 -10%; }
.mb__book img { width: 100%; border-radius: 2px 4px 4px 2px; box-shadow: 0 2px 2px rgba(30, 22, 6, .2), 0 14px 22px -12px rgba(30, 22, 6, .55); }

.mb__list { list-style: none; margin: 0 0 .4rem; padding: 0; display: grid; gap: .45rem; }
.mb__pick {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 1rem; padding: .75rem 1rem; border-radius: 12px;
  background: color-mix(in oklab, var(--tint) 14%, var(--paper-white)); border-left: 6px solid var(--tint);
  color: var(--ink); text-decoration: none; transition: transform .25s var(--ease-out), background-color .2s;
}
.mb__pick:hover { color: var(--ink); transform: translateX(4px); background: color-mix(in oklab, var(--tint) 22%, var(--paper-white)); }
.mb__pick-name { font-weight: 800; font-size: 1.08rem; }
.mb__pick-sub { grid-column: 1; font-size: .85rem; color: var(--ink-mute); }
.mb__pick .icon { grid-column: 2; grid-row: 1 / span 2; color: var(--tint); }

@media (max-width: 900px) {
  .mb__photo, .mb__hero { --fw: min(48cqh, 80cqw); left: calc(50% - var(--fw) / 2); top: 13cqh; }
  .mb__fan { left: 4cqw; bottom: auto; top: calc(13cqh + min(48cqh, 80cqw) - 10cqh); width: 58cqw; height: 18cqh; }
  .mb__label span { font-size: .66rem; padding: .22rem .45rem; }
  .mb__label:nth-of-type(2) { display: none; }
}

/* =========================================================
   D · Poster
   ========================================================= */
.chapter--poster { --chapter-bg: var(--night); color: #EEF1F4; }
.chapter--poster .kicker { color: var(--gk-green-light); }
.chapter--poster .kicker__num { background: var(--gk-green-light); color: var(--gk-green-ink); }
.chapter--poster .lead, .chapter--poster p { color: rgba(238, 241, 244, .84); }
.chapter--poster .facts li::before { background: var(--gk-yellow); }
.chapter--poster a:not(.btn) { color: var(--gk-green-light); }
.btn--light { --btn-bg: var(--gk-green-light); --btn-fg: var(--gk-green-ink); --btn-bd: var(--gk-green-light); }
@media (max-width: 900px) {
  .chapter--poster .step { background: rgba(16, 30, 52, .92); color: #EEF1F4; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), var(--shadow-2); }
}

.chapter--poster { --dawn: 1; }
.chapter--poster::before, .chapter--poster::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.chapter--poster::before { /* Sterne (statisch, kachelnd) und Himmelsschimmer */
  background:
    radial-gradient(1.5px 1.5px at 40px 60px, rgba(255, 255, 255, .9), transparent), radial-gradient(1px 1px at 190px 140px, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1px 1px at 120px 250px, rgba(255, 240, 214, .8), transparent), radial-gradient(1.2px 1.2px at 260px 30px, rgba(214, 228, 255, .8), transparent),
    radial-gradient(60% 45% at 25% 0%, rgba(80, 110, 170, .22), transparent 70%);
  background-size: 307px 293px, 307px 293px, 307px 293px, 307px 293px, 100% 100%;
}
.chapter--poster::after { /* Morgenlicht */
  opacity: var(--dawn);
  background:
    radial-gradient(70% 42% at 72% 100%, rgba(255, 200, 1, .42), rgba(240, 138, 93, .26) 45%, transparent 75%),
    linear-gradient(to top, rgba(234, 215, 188, .16), transparent 55%);
}
.chapter--poster .chapter__inner, .chapter--poster .deckle { z-index: 2; }
.ps { --kitchen: 1; position: absolute; inset: 0; overflow: clip; }
.ps__sky { position: absolute; inset: -10%; -webkit-mask-image: linear-gradient(to right, transparent, #000 30%); mask-image: linear-gradient(to right, transparent, #000 30%); }
.ps__stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.motion-ok .ps__stars--near { animation: twinkle 5s ease-in-out infinite alternate; }
.motion-ok .chapter--poster.is-offscreen .ps__stars--near { animation-play-state: paused; }
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }
.ps__poster { position: absolute; left: 6cqw; top: 7cqh; height: 86cqh; aspect-ratio: 727 / 2672; margin: 0; transform-origin: 50% 0; z-index: 2; }
.ps__poster a { display: block; height: 100%; }
.ps__poster img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
.ps__rail {
  position: absolute; right: 4cqw; top: 11cqh; z-index: 3;
  list-style: none; margin: 0; padding: 0 0 0 1.1rem; display: grid; gap: .1rem;
  border-left: 2px solid rgba(255, 255, 255, .18); font-size: .82rem; font-weight: 600;
}
.motion-ok .ps__rail { opacity: calc(1 - var(--kitchen) * .4); }
.ps__rail li { position: relative; padding: .14rem 0; color: rgba(238, 241, 244, .78); transition: color .3s; }
.ps__rail li::before { content: ""; position: absolute; left: calc(-1.1rem - 6px); top: .62em; width: 10px; height: 10px; border-radius: 50%; background: var(--night-2); box-shadow: 0 0 0 2px rgba(255, 255, 255, .3); transition: background-color .3s, box-shadow .3s; }
.ps__rail li.is-active { color: #fff; }
.ps__rail li.is-active::before { background: var(--gk-yellow); box-shadow: 0 0 0 2px var(--gk-yellow), 0 0 14px 2px rgba(255, 200, 1, .6); }
.ps__kitchen {
  position: absolute; right: 2cqw; bottom: 9cqh; z-index: 2; width: min(52cqw, 70cqh);
  list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: 2.4cqw;
}
.ps__kitchen li {
  --k: clamp(0, var(--kitchen) * 1.6 - var(--i) * .25, 1);
  flex: 1; opacity: var(--k);
  transform: translateY(calc((1 - var(--k)) * 30cqh)) rotate(calc((var(--i) - 1) * 2.5deg));
}
.ps__kitchen a { display: block; transition: translate .35s var(--ease-out); }
.ps__kitchen a:hover, .ps__kitchen a:focus-visible { translate: 0 -6px; }
.ps__kitchen img { width: 100%; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .45)); }
@media (max-width: 900px) {
  .ps__poster { left: 5cqw; top: 9cqh; height: 54cqh; }
  .ps__rail { right: 4cqw; top: 12cqh; font-size: .74rem; }
  .ps__kitchen { right: 3cqw; bottom: auto; top: 44cqh; width: 52cqw; gap: 2cqw; }
}

/* =========================================================
   E · Kalender
   ========================================================= */
.chapter--kalender {
  --herb: 0;
  --chapter-bg: color-mix(in oklab, var(--chili-soft) calc((1 - var(--herb)) * 100%), var(--herb-soft));
}
.kal { --drift: 1; position: absolute; inset: 0; overflow: clip; perspective: 2400px; perspective-origin: 50% 0%; }
.kal__cal { position: relative; margin: 0; }
/* Galerie (ohne JS / reduzierte Bewegung) */
.kal:not(.is-stack) { display: grid; align-content: center; gap: 4cqh; padding: 14cqh 4cqw 6cqh; }
.kal:not(.is-stack) .kal__cal { display: flex; flex-direction: column; }
.kal:not(.is-stack) .kal__pages { display: flex; gap: 2.5cqw; margin: 0; padding: 0; list-style: none; }
.kal:not(.is-stack) .kal__page { width: min(16cqh, 22cqw); }
.kal:not(.is-stack) .kal__page a { display: block; }
.kal:not(.is-stack) .kal__page img { width: 100%; box-shadow: var(--shadow-2); border-radius: 2px; }
.kal:not(.is-stack) .kal__back, .kal:not(.is-stack) .kal__nail, .kal:not(.is-stack) .kal__tabs, .kal:not(.is-stack) .kal__floaters { display: none; }
.kal__caption { display: block; margin-top: .4rem; font-size: .72rem; font-weight: 700; line-height: 1.25; }
.kal__title { order: -1; margin-bottom: .6rem; font-size: var(--fs-label); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

/* Gestapelter Wandkalender (mit Bewegung) */
.kal.is-stack .kal__cal {
  --ch: min(76cqh, 140cqw);
  position: absolute; left: 50%; top: 11cqh; width: calc(var(--ch) * .465); height: var(--ch);
  margin-left: calc(var(--ch) * -.2325); transform-style: preserve-3d;
}
.kal.is-stack .kal__cal--chili { transform: translateX(calc(var(--herb) * -120cqw)) rotate(calc(var(--herb) * -8deg)); }
.kal.is-stack .kal__cal--kraeuter { transform: translateX(calc((1 - var(--herb)) * 120cqw)) rotate(calc((1 - var(--herb)) * 8deg)); }
.kal.is-stack .kal__pages { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; transform-style: preserve-3d; }
.kal.is-stack .kal__page {
  --flip: 0;
  position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 1.4%;
  transform: translateZ(calc(var(--z) * .6px)) rotateX(calc(var(--flip) * 178deg));
  opacity: calc(1 - clamp(0, (var(--flip) - .82) * 6, 1));
}
.kal.is-stack .kal__page a { position: absolute; inset: 0; transform-style: preserve-3d; }
.kal.is-stack .kal__caption, .kal.is-stack .kal__title { display: none; }
.kal__front { display: block; }
.kal.is-stack .kal__front, .kal.is-stack .kal__back { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kal.is-stack .kal__front img { width: 100%; height: 100%; object-fit: cover; }
.kal.is-stack .kal__page:last-child .kal__front { box-shadow: 0 2px 3px rgba(30, 22, 6, .15), 0 40px 60px -30px rgba(30, 22, 6, .45); }
.kal__back { transform: rotateX(180deg); background: var(--paper-back) var(--tex-fibers) 0 0 / 256px; border-radius: 2px; }
.kal__nail {
  position: absolute; left: 50%; top: -3.2cqh; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; z-index: 5;
  background: radial-gradient(circle at 35% 30%, #fafafa, #8c8c8c 60%, #555); box-shadow: 0 3px 4px rgba(0, 0, 0, .35);
}
.kal__floaters { position: absolute; inset: 0; pointer-events: none; }
.kal__f {
  position: absolute; left: var(--x); top: var(--y); width: calc(var(--w) * 1cqw);
  transform: translate3d(0, calc(var(--drift) * var(--d) * -7cqh), 0) rotate(calc(var(--rot) + var(--drift) * var(--d) * 9deg));
}
.kal__f img { width: 100%; filter: drop-shadow(0 12px 12px rgba(40, 20, 6, .28)); }
.kal__f--chili { opacity: calc(1 - var(--herb)); }
.kal__f--herb { opacity: var(--herb); translate: 0 calc((1 - var(--herb)) * -24cqh); }
.motion-ok .kal__f--herb img { animation: flutter-wing .38s ease-in-out infinite; }
.motion-ok .kal__f--herb:nth-child(n + 3) img { animation: none; } /* Biene und Marienkäfer flattern nicht */
@keyframes flutter-wing { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.55); } }
.motion-ok .chapter--kalender.is-offscreen .kal__f img { animation-play-state: paused; }

.kal__tabs {
  position: absolute; left: 0; right: 0; bottom: 3cqh; z-index: 6;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.2rem; padding: 0 1rem;
}
.kal__tabgroup { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem; border-radius: 99px; background: rgba(251, 247, 238, .85); box-shadow: var(--shadow-1); }
.kal__tablabel { padding: 0 .5rem 0 .6rem; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tint); }
.kal__tab { min-height: 36px; padding: 0 .75rem; border: 0; border-radius: 99px; background: transparent; font-weight: 700; font-size: .82rem; font-variant-numeric: tabular-nums; }
.kal__tab:hover { background: rgba(16, 35, 28, .07); }
@media (pointer: coarse) { .kal__tab { min-height: 44px; } }
.kal__tab[aria-current="true"] { background: var(--tint); color: #fff; }
@media (max-width: 900px) {
  .kal.is-stack .kal__cal { --ch: min(54cqh, 112cqw); top: 17cqh; }
  .kal__tabs { top: calc(var(--header-h) + 6px); bottom: auto; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; gap: .4rem; }
  .kal__tabs::-webkit-scrollbar { display: none; }
  .kal__tabgroup { flex: none; }
  .kal__f { width: calc(var(--w) * 1.4cqw); }
  .kal:not(.is-stack) .kal__page { width: 26cqw; }
}

/* =========================================================
   F · Vom Papier ins Digitale
   ========================================================= */
.chapter--digital { --chapter-bg: var(--gk-green-mist); }
.dg { --fly: 1; position: relative; }
.dg__stage { padding: clamp(5rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem); }
.dg__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.dg__head .h2 { max-width: 16ch; }
.dg__flight { position: relative; }
.dg__path { position: absolute; left: 0; top: 4%; width: 100%; height: 56%; overflow: visible; pointer-events: none; }
.dg__path--v { display: none; }
.dg__path path { fill: none; stroke-linecap: round; }
.dg__path-guide { stroke: rgba(4, 120, 92, .28); stroke-width: 3; stroke-dasharray: .006 .012; }
.dg__path-ink { stroke: var(--gk-green); stroke-width: 3.5; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--fly)); }
.dg__plane { position: absolute; left: 0; top: 0; z-index: 4; width: clamp(64px, 6vw, 96px); pointer-events: none; filter: drop-shadow(0 10px 8px rgba(3, 80, 61, .25)); }
.dg__plane svg { width: 100%; height: auto; }
html:not(.motion-ok) .dg__plane { display: none; }
.dg__stations { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: clamp(1.5rem, 3vw, 3rem); margin: 0; padding: 0; list-style: none; }
.dg__station { --lit: 1; }
.dg__station > .h3, .dg__station > p, .dg__visual { opacity: calc(.4 + var(--lit) * .6); }
.dg__station .h3 { display: flex; align-items: center; gap: .6rem; margin: 1.2rem 0 .6rem; }
.dg__num { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--gk-green); color: #fff; font-size: 1rem; flex: none; }
.dg__visual { position: relative; height: clamp(190px, 22vw, 290px); display: grid; place-items: center; }
.dg__card { width: clamp(110px, 10vw, 150px); rotate: -8deg; border-radius: 6% / 4%; box-shadow: var(--shadow-2); }
.dg__badge { position: absolute; width: clamp(84px, 8vw, 118px); right: 12%; bottom: 6%; rotate: 10deg; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .25)); }
.dg__phone { width: clamp(120px, 11vw, 170px); filter: drop-shadow(0 18px 22px rgba(3, 50, 40, .35)); rotate: 4deg; }
.dg__doors { display: grid; gap: .8rem; }
.door {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: .15rem .9rem; align-items: start;
  padding: 1rem 1.1rem 1.1rem; border-radius: 16px; background: var(--paper-white); color: var(--ink); text-decoration: none;
  box-shadow: 0 0 0 1px rgba(4, 120, 92, .18), var(--shadow-1); transition: transform .3s var(--ease-out), box-shadow .3s;
}
.door:hover { color: var(--ink); transform: translateY(-3px); box-shadow: 0 0 0 2px var(--gk-green), var(--shadow-2); }
.door__icon { grid-row: 1 / span 3; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--gk-green); color: #fff; }
.door--food .door__icon { background: var(--gk-yellow); color: var(--ink); }
.door__icon .icon { width: 24px; height: 24px; }
.door__title { font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; }
.door__host { font-size: .85rem; font-weight: 700; color: var(--gk-green-deep); }
.door__text { font-size: .92rem; color: var(--ink-soft); }
.dg__note { margin-top: 2rem; color: var(--ink-mute); max-width: 72ch; }
@media (max-width: 900px) {
  .dg__stations { grid-template-columns: 1fr; gap: 3.5rem; }
  .dg__path { display: none; }
  .dg__path--v { display: block; top: 0; height: 100%; }
  .dg__visual { height: 210px; }
}

/* =========================================================
   G · Graspapier (Ruhephase)
   ========================================================= */
.chapter--grass { --chapter-bg: #ECE1C6; }
.gp { position: relative; overflow: clip; }
.gp__macro { position: absolute; inset: -6% 0; background: var(--tex-macro) center / cover; transform: scale(calc(1.06 + var(--zoom, 0) * .08)); }
.js .gp__macro:not(.is-near) { background-image: none; } /* erst kurz vor Sichtbarkeit laden */
.gp__macro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(236, 225, 198, .94) 0%, rgba(236, 225, 198, .78) 45%, rgba(236, 225, 198, .25) 100%); }
.gp__fibers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.gp__inner { position: relative; z-index: 2; padding: clamp(6rem, 12vw, 10rem) 0 clamp(5rem, 9vw, 8rem); }
.gp__intro { max-width: 40rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.gp__intro .h2 { margin-bottom: 1.3rem; }
.gp__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.gp__fact {
  padding: clamp(1.25rem, 2.5vw, 2rem); border-radius: var(--radius-l);
  background: rgba(251, 247, 238, .88); box-shadow: 0 0 0 1px var(--line), var(--shadow-1);
}
.gp__big { margin: 0 0 .5rem; font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--gk-green); hyphens: manual; }
.gp__fact h3 { font-size: 1.1rem; margin-bottom: .6rem; letter-spacing: -.01em; }
.gp__fact p:last-child { margin: 0; color: var(--ink-soft); font-size: .98rem; }
.gp__source { margin: 2rem 0 0; }
@media (max-width: 900px) { .gp__facts { grid-template-columns: 1fr; } }