/* Custom-Hero-Produktion (z. B. "Und täglich grüßt das Murmeltier").
   Wird nur geladen, wenn heroStyle = murmeltier. Enthält den weißen Sonder-Hero
   mit angeschnittenem, animiertem Murmeltier (#mmhero / .mm-phil) sowie den
   Punxsutawney-Story-Block. Wird nur bei diesem Hero geladen. */

.prod-logo { width: min(560px, 100%); height: auto; display: block; margin: 4px 0 0; }
.prod-keyvisual img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Individueller Header – großes, angeschnittenes Murmeltier (clean white) ===== */
#mmhero { position: relative; overflow: hidden; background: #ffffff; border-bottom: 1px solid var(--line); }
#mmhero .wrap { position: relative; }
.mm-inner { position: relative; z-index: 2; max-width: 600px; display: flex; flex-direction: column; justify-content: space-between; padding: 24px 0 clamp(24px, 4vw, 48px); min-height: min(76vh, 680px); }
#mmhero .breadcrumb { padding-top: 6px; }
.mm-head { padding: clamp(20px, 4vw, 46px) 0; }
.prod-logo { width: min(520px, 100%); }
#mmhero .meta-bar { max-width: 600px; grid-template-columns: repeat(2, max-content); gap: clamp(32px, 6vw, 72px); }
.mm-phil { position: absolute; z-index: 1; top: 0; bottom: 0; right: -2%; width: min(52vw, 840px); display: flex; align-items: center; justify-content: center; pointer-events: none; }
/* The JS sets `transform` (pose: slide in/out + angle); the idle wiggle uses the
   independent rotate/translate properties, which compose on top of it — so Phil
   gently breathes/sways the whole time and looks alive, without fighting the JS. */
.mm-phil img { width: 100%; height: auto; will-change: transform, rotate, translate, opacity; opacity: 0; transform-origin: center; animation: mm-wiggle 3.8s ease-in-out infinite; }
@keyframes mm-wiggle {
  0%, 100% { rotate: -1.5deg; translate: 0 0.5%; }
  50%      { rotate: 1.5deg;  translate: 0 -0.7%; }
}
@media (prefers-reduced-motion: reduce) { .mm-phil img { opacity: 1 !important; transform: translate(10%,34%) rotate(0deg); animation: none; rotate: 0deg; translate: 0; } }
@media (max-width: 1024px) {
  .mm-inner { min-height: min(56vh, 440px); max-width: none; padding-bottom: 10px; }
  #mmhero .meta-bar { max-width: none; }
  /* Phil overlays the content (incl. the wordmark) and enters from left/right/
     bottom. Anchored bottom-centre so those entries are symmetric. */
  .mm-phil { top: auto; bottom: -4%; left: 0; right: 0; width: auto; height: auto; }
  .mm-phil img { width: min(62vw, 340px); }
}

/* ===== Punxsutawney-Story mit Illustration ===== */
.punx { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.punx .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.punx-illu { position: relative; display: flex; justify-content: center; }
.punx-illu img { width: min(320px, 78%); height: auto; }
.punx-pull { font-family: var(--disp); font-weight: 600; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.04; color: var(--accent); text-transform: uppercase; letter-spacing: 0.004em; margin: 0 0 22px; text-wrap: balance; }
.punx-body p { font-size: 16px; line-height: 1.66; color: var(--ink); margin: 0 0 14px; max-width: 58ch; }
.punx-body p:last-child { margin-bottom: 0; }
.punx-fact { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
@media (max-width: 860px) { .punx .wrap { grid-template-columns: 1fr; } .punx-illu { order: -1; } .punx-illu img { width: 220px; } }