/* Graskind-Welt – Kapitel produkte: Produktübersicht als Papier-Regale (DOM, kein WebGL).
 * Grundgestaltung gilt immer (auch ohne JS / reduzierte Bewegung); Bewegung nur unter #produkte.fx (setzt produkte.js). */

#produkte .container { position: relative; }
#produkte .shelf__head { border-bottom: 0; padding-bottom: 0; margin-bottom: 1rem; }

/* ---------- Regalfach: Papier-Diorama mit Tiefe ---------- */
.shelf__bay {
  --sky: #F6EBD2; --sky-2: #F1E3C4; --l1: #E8D6AC; --l2: #D9C38F; --l3: #C9CF95;
  --sun: var(--gk-yellow); --cloud: var(--paper-white); --ray: #FFD84D;
  --scene-h: clamp(118px, 10.5vw, 158px);
  position: relative; isolation: isolate;
  padding: calc(var(--scene-h) - clamp(40px, 3.2vw, 52px)) clamp(.75rem, 1.6vw, 1.4rem) clamp(2rem, 3vw, 2.6rem);
  border-radius: 30px;
  background:
    linear-gradient(to bottom, var(--sky) 0, var(--sky-2) calc(var(--scene-h) * .55), var(--l3) var(--scene-h),
      var(--floor, color-mix(in oklab, var(--l3) 62%, var(--paper-white))) calc(var(--scene-h) + 220px),
      var(--floor-2, color-mix(in oklab, var(--l3) 42%, var(--paper-white))) 100%);
  box-shadow:
    inset 0 26px 38px -26px rgba(46, 34, 10, .38),
    inset 14px 0 26px -24px rgba(46, 34, 10, .3), inset -14px 0 26px -24px rgba(46, 34, 10, .3),
    0 0 0 1px rgba(46, 34, 10, .1);
}
/* Regalboden: Papierkante mit Schattenlippe */
.shelf__bay::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 18px;
  border-radius: 0 0 30px 30px;
  background:
    linear-gradient(to bottom, rgba(46, 34, 10, .16), rgba(46, 34, 10, 0) 5px),
    linear-gradient(to bottom, var(--paper-2), var(--paper-3));
  box-shadow: 0 10px 18px -12px rgba(46, 34, 10, .5);
}
.shelf--malbuecher .shelf__bay { --sky: #EAF1DF; --sky-2: #DEEBD2; --l1: #CDE2C3; --l2: #A7CFA9; --l3: #86BE93; }
/* Poster: Nachtregal wie das All-Kapitel */
.shelf--poster .shelf__bay {
  --sky: #0E1B33; --sky-2: #1A2D4D; --l1: #2B4469; --l2: #213859; --l3: #182C48; --cloud: #F3EADA;
  --floor: #1C3150; --floor-2: #233A5C;
  box-shadow: inset 0 26px 38px -26px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.shelf--poster .shelf__bay::before { /* Sternenfeld und Milchstraße statt Papierkorn */
  z-index: -3; opacity: 1; mix-blend-mode: normal;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='520'%3E%3Ccircle cx='207.3' cy='78.4' r='1.3' fill='%23FFF6D6' fill-opacity='0.39'/%3E%3Ccircle cx='343.0' cy='190.2' r='0.7' fill='%23FFF6D6' fill-opacity='0.37'/%3E%3Ccircle cx='277.5' cy='36.3' r='0.7' fill='%23FFD84D' fill-opacity='0.38'/%3E%3Ccircle cx='361.9' cy='492.7' r='1.3' fill='%23FFF6D6' fill-opacity='0.67'/%3E%3Ccircle cx='253.9' cy='507.7' r='0.7' fill='%23FFF6D6' fill-opacity='0.51'/%3E%3Ccircle cx='92.3' cy='61.3' r='0.9' fill='%23FFF6D6' fill-opacity='0.41'/%3E%3Ccircle cx='365.6' cy='97.7' r='0.7' fill='%23FFF6D6' fill-opacity='0.66'/%3E%3Ccircle cx='396.2' cy='258.1' r='1.1' fill='%23FFD84D' fill-opacity='0.78'/%3E%3Ccircle cx='298.0' cy='480.2' r='0.9' fill='%23FFFFFF' fill-opacity='0.49'/%3E%3Ccircle cx='115.1' cy='405.5' r='0.7' fill='%23FFFFFF' fill-opacity='0.64'/%3E%3Ccircle cx='560.1' cy='379.3' r='0.9' fill='%23FFF6D6' fill-opacity='0.41'/%3E%3Ccircle cx='267.6' cy='393.7' r='0.8' fill='%23FFD84D' fill-opacity='0.58'/%3E%3Ccircle cx='615.7' cy='40.4' r='1.1' fill='%23FFFFFF' fill-opacity='0.54'/%3E%3Ccircle cx='224.1' cy='258.3' r='1.6' fill='%23FFD84D' fill-opacity='0.39'/%3E%3Ccircle cx='59.9' cy='140.4' r='1.3' fill='%23FFF6D6' fill-opacity='0.38'/%3E%3Ccircle cx='449.0' cy='336.5' r='1.3' fill='%23FFD84D' fill-opacity='0.51'/%3E%3Ccircle cx='246.9' cy='347.7' r='0.7' fill='%23FFD84D' fill-opacity='0.55'/%3E%3Ccircle cx='391.0' cy='256.7' r='0.8' fill='%23FFFFFF' fill-opacity='0.42'/%3E%3Ccircle cx='158.5' cy='203.3' r='1.6' fill='%23FFD84D' fill-opacity='0.39'/%3E%3Ccircle cx='287.5' cy='285.7' r='0.8' fill='%23FFD84D' fill-opacity='0.83'/%3E%3Ccircle cx='178.2' cy='216.0' r='0.9' fill='%23FFD84D' fill-opacity='0.88'/%3E%3Ccircle cx='96.6' cy='91.6' r='0.8' fill='%23FFF6D6' fill-opacity='0.36'/%3E%3Ccircle cx='531.9' cy='94.8' r='0.9' fill='%23FFF6D6' fill-opacity='0.43'/%3E%3Ccircle cx='342.1' cy='317.1' r='0.9' fill='%23FFF6D6' fill-opacity='0.73'/%3E%3Ccircle cx='329.9' cy='321.1' r='1.3' fill='%23FFF6D6' fill-opacity='0.6'/%3E%3Ccircle cx='557.4' cy='495.0' r='1.3' fill='%23FFD84D' fill-opacity='0.57'/%3E%3Ccircle cx='252.2' cy='250.4' r='1' fill='%23FFF6D6' fill-opacity='0.45'/%3E%3Ccircle cx='630.2' cy='229.1' r='0.7' fill='%23FFFFFF' fill-opacity='0.68'/%3E%3Ccircle cx='65.5' cy='294.7' r='1.1' fill='%23FFF6D6' fill-opacity='0.87'/%3E%3Ccircle cx='392.8' cy='36.6' r='0.8' fill='%23FFD84D' fill-opacity='0.43'/%3E%3Ccircle cx='161.4' cy='180.6' r='0.9' fill='%23FFD84D' fill-opacity='0.42'/%3E%3Ccircle cx='543.3' cy='516.4' r='1' fill='%23FFD84D' fill-opacity='0.62'/%3E%3Ccircle cx='55.0' cy='53.1' r='0.9' fill='%23FFFFFF' fill-opacity='0.61'/%3E%3Ccircle cx='442.9' cy='268.5' r='0.8' fill='%23FFFFFF' fill-opacity='0.43'/%3E%3Ccircle cx='347.6' cy='14.1' r='1.1' fill='%23FFFFFF' fill-opacity='0.89'/%3E%3Ccircle cx='552.5' cy='362.0' r='0.9' fill='%23FFFFFF' fill-opacity='0.85'/%3E%3Ccircle cx='227.6' cy='115.9' r='1.1' fill='%23FFFFFF' fill-opacity='0.7'/%3E%3Ccircle cx='392.5' cy='410.0' r='1.6' fill='%23FFF6D6' fill-opacity='0.79'/%3E%3Ccircle cx='523.7' cy='384.7' r='0.8' fill='%23FFF6D6' fill-opacity='0.63'/%3E%3Ccircle cx='227.6' cy='15.1' r='0.7' fill='%23FFFFFF' fill-opacity='0.61'/%3E%3Ccircle cx='123.9' cy='314.7' r='0.9' fill='%23FFD84D' fill-opacity='0.79'/%3E%3Ccircle cx='462.8' cy='181.8' r='0.9' fill='%23FFF6D6' fill-opacity='0.47'/%3E%3Ccircle cx='145.2' cy='102.3' r='0.8' fill='%23FFD84D' fill-opacity='0.69'/%3E%3Ccircle cx='576.2' cy='437.0' r='1' fill='%23FFFFFF' fill-opacity='0.79'/%3E%3Ccircle cx='54.3' cy='343.5' r='1' fill='%23FFF6D6' fill-opacity='0.61'/%3E%3Ccircle cx='114.3' cy='410.4' r='0.9' fill='%23FFF6D6' fill-opacity='0.79'/%3E%3Cpath d='M122 83Q122 88 127 88Q122 88 122 93Q122 88 117 88Q122 88 122 83Z' fill='%23FFD84D' fill-opacity='.85'/%3E%3Cpath d='M470 346Q470 350 474 350Q470 350 470 354Q470 350 466 350Q470 350 470 346Z' fill='%23FFD84D' fill-opacity='.85'/%3E%3C/svg%3E"),
    linear-gradient(118deg, transparent 26%, rgba(173, 213, 175, .08) 42%, rgba(255, 200, 1, .07) 50%, rgba(173, 213, 175, .06) 58%, transparent 74%);
  background-size: 640px 520px, 100% 100%;
}
.shelf--poster .shelf__layer--1, .shelf--poster .shelf__layer--2, .shelf--poster .shelf__layer--3 { filter: drop-shadow(0 -2px 3px rgba(0, 0, 0, .35)); }
#produkte .shelf--poster .product { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 22px 36px -20px rgba(0, 0, 0, .7); }
.shelf--kalender .shelf__bay { --sky: #FCEBCB; --sky-2: #F8E0B4; --l1: #EDD3A4; --l2: #CBD3A6; --l3: #A3B776; }

.shelf__scene {
  position: absolute; z-index: -2; left: 0; right: 0; top: 0; height: var(--scene-h);
  border-radius: 30px 30px 0 0; overflow: hidden; pointer-events: none;
}
.shelf__bay::before { /* Papierkorn über Kulisse und Fachboden */
  content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none;
  background: url("../../img/texture/grain.webp"); background-size: 128px; mix-blend-mode: multiply; opacity: .5;
}
.shelf__front {
  position: absolute; z-index: -2; left: 0; right: 0; bottom: 0; height: clamp(84px, 9vw, 132px);
  border-radius: 0 0 30px 30px; overflow: hidden; pointer-events: none;
}
.shelf__layer {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible;
  fill: currentColor; filter: drop-shadow(0 -2px 2px rgba(46, 34, 10, .16));
}
.shelf__layer--0 { color: var(--cloud); filter: drop-shadow(0 2px 2px rgba(46, 34, 10, .12)); }
.shelf__layer--1 { color: var(--l1); }
.shelf__layer--2 { color: var(--l2); }
.shelf__layer--3 { color: var(--l3); filter: drop-shadow(0 -3px 3px rgba(46, 34, 10, .2)); }
.shelf__layer--f0 { color: color-mix(in oklab, var(--l3) 88%, var(--paper-white)); }
.shelf__layer--f1 { color: color-mix(in oklab, var(--l3) 86%, var(--ink)); filter: drop-shadow(0 -2px 3px rgba(46, 34, 10, .2)); }
.shelf--poster .shelf__layer--f0 { color: #2A4266; }
.shelf--poster .shelf__layer--f1 { color: #132440; }
.shelf__stalk { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.shelf__bloom { fill: var(--gk-yellow); }
.shelf__eye { fill: #B9832A; }
.shelf__sun { fill: var(--sun); }
.shelf__rays { fill: var(--ray); }
.shelf__star { fill: var(--sun); }
.shelf__planet { fill: var(--sun); }
.shelf__ring { fill: none; stroke: var(--cloud); stroke-width: 4; }
.shelf__cloud { fill: var(--cloud); }

/* ---------- Kacheln im Fach ---------- */
#produkte .shelf__grid { position: relative; perspective: 1600px; }
#produkte .product {
  background: rgba(251, 247, 238, .95);
  box-shadow: 0 0 0 1px var(--line), 0 18px 30px -22px rgba(46, 34, 10, .55), 0 3px 6px -3px rgba(46, 34, 10, .18);
}
#produkte .product:hover,
#produkte .product:focus-within { background: var(--paper-white); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }

/* ---------- Bewegung (nur mit #produkte.fx) ---------- */
#produkte.fx .product {
  transform-origin: 50% 100%;
  transition:
    box-shadow .35s var(--ease-out), background-color .3s,
    opacity .6s ease var(--d, 0s), rotate 1s var(--ease-spring) var(--d, 0s), translate .9s var(--ease-out) var(--d, 0s),
    scale .5s var(--ease-spring);
}
/* Noch nicht erreicht: Karte liegt flach im Fach und klappt beim Erreichen hoch (Pop-up) */
#produkte.fx .product.is-pending { opacity: 0; rotate: x 56deg; translate: 0 26px; }

/* Kippen mit Glanzlicht (Werte setzt produkte.js je Bild) */
#produkte.fx .product.is-tilt {
  z-index: 2;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  box-shadow:
    0 0 0 1px var(--line),
    calc(var(--tx, 0) * -18px) calc(24px - var(--ty, 0) * 10px) 44px -20px rgba(46, 34, 10, .5),
    calc(var(--tx, 0) * -4px) calc(4px - var(--ty, 0) * 2px) 8px -4px rgba(46, 34, 10, .16);
}
#produkte.fx .product.is-tilt .product__media img { translate: calc(var(--tx, 0) * -10px) calc(var(--ty, 0) * -8px); }
#produkte.fx .product.is-tilt .product__media::after { translate: calc(var(--tx, 0) * 8px) 0; }
#produkte.fx .product::after {
  content: ""; position: absolute; z-index: 3; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(circle at var(--gx, 50%) var(--gy, 20%), rgba(255, 255, 255, .6), rgba(255, 255, 255, .16) 24%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(calc(110deg + var(--tx, 0) * 20deg), rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 62%);
  background-size: 100% 100%, 220% 100%;
  background-position: 0 0, calc(50% - var(--tx, 0) * 40%) 0;
  mix-blend-mode: overlay; opacity: var(--glow, 0);
}
/* Tippen auf Touch: kurz eindrücken, Glanz am Fingerpunkt */
#produkte.fx .product.is-press { scale: .972; transition-duration: .35s, .3s, .6s, 1s, .9s, .14s; }

/* Kulisse: Ebenen klappen gestaffelt hoch, danach Parallaxe beim Scrollen (--sp setzt produkte.js) */
#produkte.fx .shelf__layer {
  transition: translate 1.1s var(--ease-out);
  transform: translate3d(0, calc(var(--sp, 0) * var(--k, 0px)), 0);
}
#produkte.fx.is-near .shelf__layer { will-change: transform; }
#produkte.fx .shelf__layer--0 { --k: 22px; transition-delay: .32s; }
#produkte.fx .shelf__layer--1 { --k: 13px; }
#produkte.fx .shelf__layer--2 { --k: 6px; transition-delay: .08s; }
#produkte.fx .shelf__layer--3 { --k: 1px; transition-delay: .16s; }
#produkte.fx .shelf__layer--f0 { --k: -4px; }
#produkte.fx .shelf__layer--f1 { --k: -10px; transition-delay: .1s; }
#produkte.fx .shelf__bay.is-pending .shelf__layer { translate: 0 75%; transition-delay: 0s; }
#produkte.fx .shelf__bay.is-pending .shelf__layer--0 { translate: 0 110%; }
#produkte.fx .shelf__rays { transform-box: fill-box; transform-origin: center; animation: pk-spin 90s linear infinite; }
#produkte.fx .shelf__cloud { animation: pk-drift 14s ease-in-out infinite alternate; }
#produkte.fx .shelf__cloud + .shelf__cloud { animation-duration: 19s; animation-direction: alternate-reverse; }
@keyframes pk-spin { to { rotate: 360deg; } }
@keyframes pk-drift { from { translate: -18px 0; } to { translate: 22px 0; } }

/* Filterchips: Schriftfarbe mitblenden, damit beim Wechsel nichts kurz verschwindet */
#produkte .products__filter .chip { transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease-out); }

/* Filter: ausgeblendetes Regal bleibt für den Übergang kurz sichtbar (nicht bedienbar) */
#produkte .shelf.is-leaving[hidden] { display: block !important; position: absolute; z-index: 0; margin: 0; pointer-events: none; }

@media (max-width: 760px) {
  .shelf__bay { --scene-h: 92px; border-radius: 22px; padding-top: 64px; }
  .shelf__scene { border-radius: 22px 22px 0 0; }
  .shelf__front { border-radius: 0 0 22px 22px; height: 84px; }
  .shelf__bay::after { border-radius: 0 0 22px 22px; height: 14px; }
}