/* Hero with the book as the product (prototype, branch feat/hero-buch).
   Centered copy, a CSS 3D book that opens on load, turns its pages, shows the back cover and riffles
   back to the front. No photo carousel. Page ratio 1.4015 (612 x 436.5 pt), spread = two pages.
   Each leaf has two segments (spine half, outer half) so the paper bends while it turns. */
@property --bend { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.hero--buch { align-items: flex-start; background: radial-gradient(60% 50% at 50% 62%, rgba(179, 0, 14, .38) 0%, rgba(94, 0, 7, .18) 45%, rgba(16, 11, 11, 0) 100%), var(--dunkelgrau); }
.hero--buch { min-height: calc(100dvh - 25px); }
.hero--buch .hero__content { padding-bottom: calc(clamp(48px, 7vw, 88px) - 25px); padding-top: 150px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero--buch .hero__content .streifen { margin-bottom: 22px; width: min(260px, 60%); }
.hero--buch .hero__title .gold { color: var(--warmgold); }
.hero--buch .hero__rating { display: inline-flex; align-items: center; gap: 10px; margin: 4px auto 18px; font-style: normal; font-size: .9rem; color: var(--hellgrau); }
.hero--buch .hero__stars { color: var(--warmgold); letter-spacing: .08em; font-size: 1rem; line-height: 1; }
.hero--buch .hero__title { max-width: 30ch; margin-inline: auto; margin-bottom: 16px; font-size: clamp(1.85rem, 1rem + 2.7vw, 2.9rem); }
.hero--buch .hero__sub { margin-inline: auto; margin-bottom: 0; max-width: none; white-space: nowrap; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); }
@media (max-width: 600px) { .hero--buch .hero__sub { white-space: normal; } }
.hero--buch .hero__ctas { justify-content: center; margin: clamp(30px, 4vw, 44px) 0 0; }
/* Equal button widths, so the gap between them sits exactly under the book spine */
@media (min-width: 601px) { .hero--buch .hero__ctas .btn { flex: 1 1 0; max-width: 340px; } }
.hero--buch .btn--ghost svg { margin-right: 10px; flex-shrink: 0; width: 20px; height: 20px; }
.hero--buch .hero__facts { justify-content: center; margin-top: 30px; margin-bottom: 0; gap: 12px 36px; font-size: 1.05rem; }
.hero--buch .hero__clubs { width: 100%; margin-top: 35px; padding-top: 0; }

/* Two moments behind the hero, left and right, both fading towards the middle; the red glow lies over them and the
   snow falls in front. Background images instead of <img>, so a phone loads only the small left one. */
.hero--buch .collage { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero--buch .collage__bild { position: absolute; top: 0; width: 44%; height: 100%; background-repeat: no-repeat; background-size: cover; opacity: .58; filter: saturate(.85); }
.hero--buch .collage__bild--l { left: 0; background-image: url("../media/img/hero/hintergrund-lesen.webp"); background-position: 35% 20%; -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .8) 38%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .8) 38%, transparent 100%); }
.hero--buch .collage__bild--r { right: 0; background-image: url("../media/img/hero/hintergrund-vereinsheim.webp"); background-position: 50% 22%; -webkit-mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, .8) 38%, transparent 100%); mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, .8) 38%, transparent 100%); }
.hero--buch .collage::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(62% 52% at 50% 62%, rgba(179, 0, 14, .46) 0%, rgba(94, 0, 7, .24) 48%, rgba(16, 11, 11, 0) 100%); }
.hero--buch .collage::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(0deg, var(--dunkelgrau) 0%, rgba(16, 11, 11, 0) 24%), linear-gradient(180deg, rgba(16, 11, 11, .7) 0%, rgba(16, 11, 11, 0) 22%); }
@media (max-width: 767px) {
  .hero--buch .collage__bild--r { display: none; background-image: none; }
  .hero--buch .collage__bild--l { width: 100%; height: 360px; opacity: .42; background-image: url("../media/img/hero/hintergrund-lesen-s.webp"); background-position: 50% 12%; -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .7) 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .7) 45%, transparent 100%); }
}

/* Stage: perspective, floor shadow */
.buch-stage { position: relative; width: min(100%, 720px); margin: clamp(22px, 3vw, 34px) auto 0; perspective: 1500px; perspective-origin: 50% 20%; }
.buch-stage::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -14%; height: 26%; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 70%); filter: blur(10px); z-index: -1; }

.buch { --tilt: 14deg; --shift: -25%; --scale: 1; --rest: 4deg; position: relative; width: 100%; aspect-ratio: 2.803; transform-style: preserve-3d; transform: translateX(var(--shift)) rotateX(var(--tilt)) scale(var(--scale)); transition: transform 1100ms var(--ease); will-change: transform; }
.buch.is-open { --shift: 0%; }
.buch.is-turning:not(.is-riffle) { animation: settle 1300ms ease-in-out; }
@keyframes settle { 0%, 100% { rotate: x 0deg; } 55% { rotate: x .9deg; } 80% { rotate: x -.4deg; } }
.buch-stage.is-turning::after { animation: shadow-breathe 1300ms ease-in-out; }
@keyframes shadow-breathe { 0%, 100% { transform: scaleX(1); opacity: 1; } 55% { transform: scaleX(1.05); opacity: .8; } }
.buch.is-back { --shift: 25%; }

/* Boards (cover thickness) and page blocks (3 to 4 visible page edges) under the leaves */
.buch__board { position: absolute; top: -1.6%; bottom: -1.6%; left: 50%; width: calc(50% + 1.6%); border-radius: 0 7px 7px 0; background: linear-gradient(180deg, #2A1E1E, #171111); box-shadow: 0 34px 60px -22px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 -2px 0 rgba(0, 0, 0, .5); transform: translateZ(-12px); }
.buch__board--l { left: auto; right: 50%; border-radius: 7px 0 0 7px; opacity: 0; transition: opacity .3s .5s; }
.buch.is-open .buch__board--l, .buch.is-back .buch__board--l { opacity: 1; }
.buch.is-back .buch__board--r { opacity: 0; transition: opacity .3s .6s; }
.buch__block { position: absolute; top: .4%; bottom: .4%; left: 50%; width: 50%; background: #A9A398; border-radius: 0 3px 3px 0; transform: translateZ(-4px);
  box-shadow: 2px 1px 0 #7F7970, 4px 2px 0 #B5AFA4, 6px 3px 0 #746E65, 8px 4px 0 #B0AA9F, 10px 5px 0 #6E685F, 12px 6px 0 #ABA59A; }
.buch__block--l { left: auto; right: 50%; border-radius: 3px 0 0 3px; box-shadow: -2px 1px 0 #7F7970, -4px 2px 0 #B5AFA4, -6px 3px 0 #746E65, -8px 4px 0 #B0AA9F, -10px 5px 0 #6E685F, -12px 6px 0 #ABA59A; opacity: 0; transition: opacity .3s .5s; }
.buch.is-open .buch__block--l, .buch.is-back .buch__block--l { opacity: 1; }
.buch.is-back .buch__block--r { opacity: 0; transition: opacity .3s .6s; }
.buch:not(.is-open):not(.is-back) .buch__block--r { opacity: 0; }   /* closed at the front: only the cover */
.buch__block { transition: opacity .3s .5s; }

/* Leaves: right half, hinged at the spine, resting slightly open (V shape). All leaves share the same resting
   angle, otherwise their planes intersect and the browser splits them (parts of a lower page show through).
   Stacking in 3D is decided by depth, not z-index: each resting leaf sits a bit in front of the next. */
.buch__leaf { --bend: 0deg; will-change: transform; position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d; transform: translateZ(calc((var(--n) - var(--i)) * 1.6px)) rotateY(calc(-1 * var(--rest))); transition: transform 1300ms cubic-bezier(.55, .04, .18, 1); cursor: pointer; }
.buch__leaf.is-flipped { transform: translateZ(calc(var(--i) * 1.6px + 1.6px)) rotateY(calc(-180deg + var(--rest))); }
.buch__leaf.is-moving { transform: translateZ(14px) rotateY(calc(-1 * var(--rest))); }
.buch__leaf.is-moving.is-flipped { transform: translateZ(14px) rotateY(calc(-180deg + var(--rest))); }
.buch.is-riffle .buch__leaf { transition-duration: 480ms; }

/* Five chained strips per leaf. Each strip hangs on the right edge of the previous one and turns by --bend,
   so the page bends in a smooth curve while it turns; at rest --bend is 0 and the page is flat (no crease). */
.buch__s { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; transform-style: preserve-3d; transform-origin: left center; }
.buch__s .buch__s { left: 100%; width: 100%; transform: rotateY(var(--bend)); }
.buch__f { position: absolute; inset: 0 -0.7px 0 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background-color: #2A2F26; background-size: 500% 100%; background-repeat: no-repeat; }
.buch__f--front { background-image: var(--f); }
.buch__f--back { background-image: var(--b); transform: rotateY(180deg); }
/* Image slices: strip k shows the k-th fifth of the right page on its front and, mirrored, the (4-k)-th fifth of the left page on its back */
.k0 > .buch__f--front, .k4 > .buch__f--back { background-position: 0 0; }
.k1 > .buch__f--front, .k3 > .buch__f--back { background-position: 25% 0; }
.k2 > .buch__f--front, .k2 > .buch__f--back { background-position: 50% 0; }
.k3 > .buch__f--front, .k1 > .buch__f--back { background-position: 75% 0; }
.k4 > .buch__f--front, .k0 > .buch__f--back { background-position: 100% 0; }
/* Paper shading, one continuous gradient sliced the same way: darker towards the spine, a faint highlight outside */
.buch__f::before, .buch__f::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-size: 500% 100%; background-repeat: no-repeat; background-position: inherit; }
.buch__f--front::before { background-image: linear-gradient(90deg, rgba(0, 0, 0, .36), rgba(0, 0, 0, .12) 16%, rgba(0, 0, 0, 0) 48%, rgba(255, 255, 255, .05) 78%, rgba(0, 0, 0, .07)); }
.buch__f--back::before { background-image: linear-gradient(270deg, rgba(0, 0, 0, .36), rgba(0, 0, 0, .12) 16%, rgba(0, 0, 0, 0) 48%, rgba(255, 255, 255, .05) 78%, rgba(0, 0, 0, .07)); }
/* Cover and back cover: a glossy sweep instead of paper shading */
.buch__leaf--cover .buch__f--front::before { background-image: linear-gradient(100deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, 0) 22%, rgba(255, 255, 255, .07) 58%, rgba(0, 0, 0, .1) 100%); }
.buch__leaf--back .buch__f--back::before { background-image: linear-gradient(260deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, 0) 22%, rgba(255, 255, 255, .07) 58%, rgba(0, 0, 0, .1) 100%); }
/* Rounded outer corners on the outermost strip */
.k4 > .buch__f--front { border-radius: 0 4px 4px 0; }
.k4 > .buch__f--back { border-radius: 4px 0 0 4px; }
.buch__leaf--cover .k4 > .buch__f--front { border-radius: 0 7px 7px 0; }
.buch__leaf--back .k4 > .buch__f--back { border-radius: 7px 0 0 7px; }

/* Turning: the strips lag behind the hinge, then whip forward (about 7 degrees per joint, 28 in total) */
.buch__leaf.is-moving.is-fwd { animation: bend-fwd 1300ms cubic-bezier(.55, .04, .18, 1); }
.buch__leaf.is-moving.is-back { animation: bend-back 1300ms cubic-bezier(.55, .04, .18, 1); }
.buch.is-riffle .buch__leaf.is-moving { animation-duration: 480ms; }
@keyframes bend-fwd { 0% { --bend: 0deg; } 30% { --bend: 7.5deg; } 70% { --bend: -4deg; } 100% { --bend: 0deg; } }
@keyframes bend-back { 0% { --bend: 0deg; } 30% { --bend: -6.5deg; } 70% { --bend: 4deg; } 100% { --bend: 0deg; } }
/* Moving shade on both faces while a page turns */
.buch__f::after { opacity: 0; background-image: linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, .08) 30%, rgba(0, 0, 0, 0) 55%, rgba(255, 255, 255, .14) 72%, rgba(255, 255, 255, .04) 82%, rgba(0, 0, 0, .1)); }
.buch__leaf.is-moving .buch__f::after { animation: shade 1300ms ease-in-out; }
.buch.is-riffle .buch__leaf.is-moving .buch__f::after { animation-duration: 480ms; }
@keyframes shade { 0%, 100% { opacity: 0; } 45% { opacity: 1; } }

/* Rating badge, pinned to the top right corner of the book */

/* Soft cast shadow around the spine while a page turns, and a permanent soft gutter */
.buch__gutter { position: absolute; top: -2%; bottom: -2%; left: 50%; width: 22%; transform: translateX(-50%) translateZ(11px); pointer-events: none;
  background: radial-gradient(50% 60% at 50% 50%, rgba(0, 0, 0, .34), rgba(0, 0, 0, .18) 30%, rgba(0, 0, 0, 0) 70%); filter: blur(6px); opacity: 0; transition: opacity .6s .4s; }
.buch.is-open .buch__gutter { opacity: .8; }
.buch__cast { position: absolute; top: -6%; bottom: -6%; left: 50%; width: 70%; transform: translateX(-50%) translateZ(12px); pointer-events: none;
  background: radial-gradient(45% 55% at 50% 50%, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0) 72%); filter: blur(16px); opacity: 0; }
.buch.is-turning .buch__cast { animation: cast 1300ms ease-in-out; }
.buch.is-riffle.is-turning .buch__cast { animation-duration: 480ms; }
@keyframes cast { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* Pause button: present for keyboard and screen reader users, invisible for everyone else (WCAG 2.2.2) */
.buch-stage .buch__pause { position: absolute; right: -60px; top: 50%; transform: translateY(-50%); z-index: 5; background: rgba(16, 11, 11, .6); border-color: rgba(244, 244, 244, .4); opacity: 0; pointer-events: none; }
.buch-stage .buch__pause:focus-visible, .buch-stage .buch__pause[aria-pressed="true"] { opacity: 1; pointer-events: auto; }
@media (max-width: 860px) { .buch-stage .buch__pause { right: auto; left: 0; top: auto; bottom: -54px; transform: none; } }   /* left, the flip hint sits on the right corner */

/* Flip hint: a round gold button on the lower outer corner of the right page. The rail has the size of the stage and
   shifts like the book (closed and back cover: the visible half sits in the middle; open: full width), so the button
   stays on that corner. It pulses until the visitor has turned a page once (.is-used), and fades with the book on scroll. */
.buch__hint-rail { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: var(--fade, 1); transform: translateX(-25%); transition: transform 1100ms var(--ease); }
.buch-stage.is-open .buch__hint-rail { transform: none; }
.buch__hint { position: absolute; right: -16px; bottom: -18px; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 2px solid var(--dunkelgrau); border-radius: 50%; background: var(--warmgold); color: var(--dunkelgrau); box-shadow: 0 10px 22px rgba(0, 0, 0, .55); cursor: pointer; pointer-events: auto; transition: transform 180ms var(--ease), background 180ms ease; }
.buch__hint svg { width: 24px; height: 24px; }
.buch__hint::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--warmgold); opacity: 0; pointer-events: none; }
.buch__hint:active { transform: scale(.94); }
.buch__hint:focus-visible { outline: 2px solid var(--weiss); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .buch__hint:hover { background: var(--warmgold-hover); transform: scale(1.06); } .buch__hint:hover:active { transform: scale(.94); } }
@media (prefers-reduced-motion: no-preference) { .buch-stage:not(.is-used) .buch__hint::after { animation: hint-ring 2600ms ease-out infinite; } }
@keyframes hint-ring { 0%, 55% { transform: scale(1); opacity: 0; } 60% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
@media (max-width: 767px) { .buch__hint { right: -10px; bottom: -16px; width: 44px; height: 44px; } .buch__hint svg { width: 22px; height: 22px; } }

:root[data-theme="light"] .hero--buch { background: radial-gradient(60% 50% at 50% 62%, rgba(179, 0, 14, .22) 0%, rgba(94, 0, 7, .1) 45%, rgba(16, 11, 11, 0) 100%), var(--dunkelgrau); }
@media (prefers-reduced-motion: reduce) {
  .buch, .buch__leaf, .buch__s, .buch__f::after, .buch__cast { transition: none; animation: none !important; }
  .buch-stage .buch__pause { display: none; }
}
@media (max-width: 767px) {
  .hero--buch .hero__content { padding-top: 120px; }
  /* Phone: the book comes right after the headline, text and buttons follow */
  .hero--buch .hero__title { order: 1; }
  .buch-stage { order: 2; margin-top: 14px; margin-bottom: 40px; width: 104%; margin-left: -2%; perspective: 1100px; }
  .hero--buch .hero__sub { order: 3; }
  .hero--buch .hero__rating { order: 0; }
  .hero--buch .hero__ctas { order: 4; }
  .hero--buch .hero__facts { order: 5; margin-top: 44px; }
  .hero--buch .hero__clubs { order: 7; }
  .buch__block, .buch__block--l { box-shadow: 1px 1px 0 #7F7970, 2px 2px 0 #B5AFA4, 3px 3px 0 #746E65, 4px 4px 0 #B0AA9F; }
  .buch__block--l { box-shadow: -1px 1px 0 #7F7970, -2px 2px 0 #B5AFA4, -3px 3px 0 #746E65, -4px 4px 0 #B0AA9F; }
}
/* Phone: book a bit smaller */
@media (max-width: 767px) {
  .buch-stage { width: 92%; margin-left: auto; margin-right: auto; }
}