/* ============================================================
   JESUS PUNKT — Homepage sections · Heritage Gold
   ============================================================ */

/* ================= HERO (full screen) ================= */
.hero {
  position: relative;
  min-height: calc(var(--vh, 1vh) * 100); /* frozen viewport unit — see js/main.js setVH() */
  display: flex; /* container stretches to full height; it centers the copy itself */
  background: var(--paper);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.48;
}
.hero__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, #ffffff 100%);
}
.hero__container {
  position: relative;
  width: 100%;
  padding-block: calc(var(--header-h) + 1.5rem) clamp(3.5rem, calc(var(--vh, 1vh) * 8), 5.625rem); /* never under the fixed header on short screens */
  display: flex;
  flex-direction: column;
  justify-content: center; /* copy in the middle of the hero */
  align-items: center;
  text-align: center;
}
.hero__copy {
  max-width: 56.9375rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9375rem; /* fig: 15 — title first, time + location underneath */
}
.hero__eyebrow span { font: 700 1rem / var(--lh-display) var(--font-display); color: var(--ink); }
.hero__eyebrow-part { white-space: nowrap; } /* wrap only between address segments */
.hero__eyebrow-part + .hero__eyebrow-part::before {
  content: "·";
  color: var(--gold-text);
  margin-inline: 0.55em 0.65em;
}
/* CTA anchored bottom-right, out of the centered flow */
.hero__actions {
  position: absolute;
  right: var(--space-lg); /* container padding edge */
  bottom: clamp(3.5rem, calc(var(--vh, 1vh) * 8), 5.625rem);
}

/* highlight block behind »lebt« — vertically centered on the word */
.hl {
  position: relative;
  z-index: 0;
  white-space: nowrap;
}
.hl::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.05em;
  right: -0.11em;
  top: 50%;
  height: 1.02em;
  transform: translateY(-50%);
  background: var(--accent);
}

@media (max-width: 48rem) {
  .hero__container { gap: 2.25rem; }
  .hero__eyebrow span { font-size: 0.9375rem; line-height: 1.45; }
  /* once the line would wrap, stack the parts cleanly — no leading dots */
  .hero__eyebrow > span { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
  .hero__eyebrow-part + .hero__eyebrow-part::before { content: none; }
}
/* phone: CTA goes full width — copy aligns left and the title steps UP */
@media (max-width: 37.5rem) {
  .hero__container { align-items: flex-start; text-align: left; }
  .hero__copy { align-items: flex-start; }
  .hero__eyebrow > span { align-items: flex-start; }
  .hero__title .h1 { font-size: 3rem; }
  .hero__actions { left: var(--space-lg); right: var(--space-lg); }
  .hero__actions .btn { width: 100%; }
}

/* ================= VERANSTALTUNGEN ================= */
.events__grid {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: 1fr 1fr; /* flyer beside the rows on desktop */
  gap: var(--space-2xl);
  align-items: start;
}
.events__flyer { order: -1; aspect-ratio: auto; align-self: stretch; } /* left column */
.events__flyer img { object-position: center; }
.events__foot {
  margin-top: 2.75rem; /* 44 */
  text-align: right;
}

@media (max-width: 64rem) {
  .events__grid { gap: var(--space-xl); }
}
@media (max-width: 48rem) {
  /* single column: flyer drops BELOW the event rows */
  .events__grid { display: flex; flex-direction: column; align-items: stretch; gap: 2rem; }
  .events__flyer { order: 0; aspect-ratio: 525 / 297; align-self: auto; }
  .events__foot { margin-top: 1.75rem; }
  /* event rows keep the shared .event-row layout — same design as the /events/ calendar */
}

/* ================= KLEINGRUPPEN ================= */
.groups__grid {
  display: grid;
  grid-template-columns: minmax(0, 38rem) minmax(0, 1fr); /* 608 | 452 */
  gap: var(--space-2xl);
  align-items: start;
}
.groups__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem; /* fig: 32 */
}

/* the two columns get too cramped below 64rem — stack early, copy first */
@media (max-width: 64rem) {
  .groups__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .groups__copy { order: -1; }
}
@media (max-width: 48rem) {
  .groups__grid { gap: 2rem; }
}

/* ================= WERTE (scroll wheel) ================= */
.werte {
  --wheel-t: 800ms;                                    /* one shared clock for ring, items and face */
  --wheel-ease: cubic-bezier(0.34, 1.25, 0.64, 1);     /* gentle overshoot — the wheel settles with a spring */
  height: calc(var(--vh, 1vh) * 420); /* scroll runway: 7 stops, unhurried; section keeps the standard --section-pad */
}
.werte__sticky {
  position: sticky;
  top: 0;
  height: calc(var(--vh, 1vh) * 100); /* same frozen unit as .werte's own height — never desyncs */
  display: flex;
  align-items: center;   /* the section heading now scrolls in ahead of the pin (see markup),
                            so the pinned box only ever needs to fit the wheel + panel — no
                            "safe" fallback needed (Safari doesn't support the safe/unsafe
                            keywords anyway, which is why it kept clipping the panel heading) */
  overflow: hidden;           /* wheel edges may poke out of the stage, not the page */
}
.werte__sticky > .container { width: 100%; }
.werte__head { align-items: center; text-align: center; }
.werte__stage {
  margin-top: var(--space-lg);
  /* room for bubbles poking beyond the ring — top AND bottom; one rule for ALL
     widths, deliberately never overridden smaller on phones */
  padding-block: clamp(5rem, calc(var(--vh, 1vh) * 12), 7.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: var(--space-2xl);
  align-items: center;
}

/* value circle (shared with the reduced-motion list) — one calm color, accent marks the active one */
.bubble {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  text-align: center;
  padding: 10%;
  background: var(--sand);
  /* depth falloff by ring distance (--d, set by JS); scale lives here, NOT on the
     item — a delayed item transform would fight the counter-rotation and tilt */
  transform: scale(calc(1.03 - var(--d, 1) * 0.03));
  transition: transform var(--wheel-t) var(--wheel-ease) calc(var(--d, 0) * 45ms),
              background var(--t-med) var(--ease) calc(var(--d, 0) * 45ms),
              box-shadow var(--t-med) var(--ease) calc(var(--d, 0) * 45ms);
}
.bubble__num { font: 700 0.6875rem / 1 var(--font-ui); color: var(--gold-text); }
.bubble__name {
  font: 700 0.9375rem / 1.15 var(--font-display);
  color: var(--ink);
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

/* wheel geometry: items sit on a ring, ring turns via --wheel-turn */
.wheel {
  --wheel-size: min(26rem, 38vw, calc(var(--vh, 1vh) * 50));
  --wheel-turn: 0deg;
  position: relative;
  width: var(--wheel-size);
  height: var(--wheel-size);
  margin-inline: auto;
  transform: rotate(var(--wheel-turn));
  transition: transform var(--wheel-t) var(--wheel-ease);
}
/* ring guide through the bubble centres — a circle needs no counter-rotation */
.wheel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(38, 35, 28, 0.12);
  pointer-events: none;
}
/* clock face: 7 gold ticks at the midpoints between slots (at-slot ticks would sit
   under the bubbles at rest); counter-rotated so it stays static while the ring turns */
.wheel::after {
  content: "";
  position: absolute;
  inset: -2.1%; /* radius-48 tick coords land exactly on the ring guide */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23C9A227'%3E%3Ccircle cx='70.83' cy='6.76' r='1'/%3E%3Ccircle cx='96.79' cy='39.32' r='1'/%3E%3Ccircle cx='87.53' cy='79.93' r='1'/%3E%3Ccircle cx='50' cy='98' r='1'/%3E%3Ccircle cx='12.47' cy='79.93' r='1'/%3E%3Ccircle cx='3.21' cy='39.32' r='1'/%3E%3Ccircle cx='29.17' cy='6.76' r='1'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform: rotate(calc(-1 * var(--wheel-turn)));
  transition: transform var(--wheel-t) var(--wheel-ease);
  pointer-events: none;
}
.wheel__item {
  --angle: calc(var(--i) * 51.4286deg);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10rem;
  height: 10rem;
  margin: -5rem 0 0 -5rem;
  cursor: pointer; /* values are tappable — tap brings one into focus */
  transform: rotate(var(--angle))
             translateY(calc(var(--wheel-size) / -2))
             rotate(calc(-1 * var(--angle) - var(--wheel-turn)));
  /* transform stays in lockstep with the ring (no delay!); only opacity ripples */
  transition: transform var(--wheel-t) var(--wheel-ease),
              opacity var(--t-slow) var(--ease) calc(var(--d, 0) * 45ms);
  opacity: calc(1 - var(--d, 0) * 0.18); /* 1 / 0.82 / 0.64 / 0.46 by ring distance */
}
.wheel__item.is-active {
  opacity: 1;
  z-index: 1;
}
.wheel__item.is-active .bubble {
  background: var(--accent);
  box-shadow: var(--shadow-soft);
  transform: scale(1.18);
}

/* description panel */
.werte__panel { display: flex; flex-direction: column; gap: 0.625rem; }
.werte__panel-num { font: 700 0.8125rem / 1 var(--font-ui); color: var(--gold-text); }
.werte__panel-name { font: 700 var(--fs-h2) / var(--lh-heading) var(--font-display); color: var(--ink); }
.werte__panel-line { max-width: 24rem; color: var(--ink-2); }
.werte__panel > div {
  transition: opacity 350ms var(--ease), transform 350ms var(--ease);
}
.werte__panel.is-switching > div { opacity: 0; transform: translateY(0.375rem); }

@media (max-width: 64rem) {
  .werte__stage { gap: var(--space-xl); grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); }
}
@media (max-width: 48rem) {
  .werte { height: calc(var(--vh, 1vh) * 360); }
  .werte__sticky { padding-top: var(--header-h); } /* pinned wheel clears the fixed header */
  .wheel { --wheel-size: min(28rem, 120vw, calc(var(--vh, 1vh) * 40)); }
  .werte__stage {
    grid-template-columns: 1fr;
    gap: 3rem;
    justify-items: center;
    text-align: center;
  }
  /* wheel intentionally wider than the screen — side bubbles bleed off for breathing room */
  .wheel__item { width: 7rem; height: 7rem; margin: -3.5rem 0 0 -3.5rem; }
  .wheel__item .bubble__name { font-size: 0.75rem; }
  /* the active value sits in the middle of the ring, not at 12 o'clock;
     the other six close ranks to 60° (JS re-assigns --angle) so the ring stays complete */
  .wheel__item.is-active {
    transform: rotate(var(--angle))
               translateY(0)
               rotate(calc(-1 * var(--angle) - var(--wheel-turn)));
  }
  .wheel__item.is-active .bubble { transform: scale(1.3); }
  .werte__panel { align-items: center; min-height: 8rem; }
}

/* reduced motion: plain stacked list, no pin, no rotation */
@media (prefers-reduced-motion: reduce) {
  .werte { height: auto; }
  .werte__sticky { position: static; height: auto; overflow: visible; display: block; }
  .werte__stage { display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); }
  .wheel { width: auto; height: auto; transform: none; display: flex; flex-direction: column; gap: var(--space-md); margin: 0; }
  .wheel::before, .wheel::after { content: none; } /* no ring guide / ticks in the list */
  .wheel__item { position: static; margin: 0; transform: none !important; opacity: 1; width: auto; height: auto; cursor: default; }
  .wheel__item .bubble { width: 12rem; height: 12rem; transform: none; }
  .werte__panel { display: none; }
}

/* full-width section CTAs on phones — consistent, symmetric */
@media (max-width: 37.5rem) {
  .groups__copy .btn { width: 100%; }
}