/* Events, Specials, Aktionen, News */
.events{ display:grid; gap:1.6rem; }
.evt{ --cut:32px; }
.evt .bevel__in{ padding:0; display:grid; grid-template-columns:minmax(280px,38%) 1fr; }
.evt__media{ position:relative; overflow:hidden; min-height:280px; }
.evt__ph{
  position:absolute; inset:0; background:var(--onyx-2) center/cover no-repeat;
  filter:grayscale(.85) contrast(1.06) brightness(.72); transform:scale(1.02);
  transition:filter .8s var(--ease), transform .9s var(--ease);
}
.evt__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 55%, var(--onyx));
}
.evt:hover .evt__ph{ filter:grayscale(0) contrast(1) brightness(.92); transform:scale(1.07); }
.evt__badge{
  /* Die Aktionsgrafiken tragen oben LINKS das Wochentagskürzel (Mo, Di,
     …). Das Badge lag genau darüber. Deshalb nach unten rechts. */
  position:absolute; z-index:2; right:1.1rem; bottom:1.1rem; max-width:calc(100% - 2.2rem);
  font-family:var(--hl); font-size:.66rem; letter-spacing:0.182em; text-transform:uppercase;
  color:var(--noir); padding:.42rem .85rem; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  background:linear-gradient(120deg,var(--gold),var(--champagne));
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.evt__body{ padding:clamp(1.6rem,3vw,2.6rem); display:flex; flex-direction:column; gap:.9rem; }
.evt__date{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--hl); font-weight:600; font-size:.72rem; letter-spacing:0.182em;
  text-transform:uppercase; color:var(--gold);
}
.evt__date em{ font-style:normal; color:var(--ash-2); }
.evt__loop{
  width:11px; height:11px; border:1px solid var(--gold); border-right-color:transparent;
  border-radius:50%; animation:mc-loop 3.4s linear infinite;
}
@keyframes mc-loop{ to{ transform:rotate(360deg) } }
.evt__ttl{ font-family:var(--hl); font-weight:600; font-size:clamp(1.4rem,2.8vw,1.95rem); line-height:1.08; color:var(--platin); }
.evt__sub{ font-family:var(--hl); font-weight:500; font-size:1.06rem; color:var(--champagne); }
.evt__txt{ font-size:.96rem; }
.evt__foot{
  margin-top:auto; padding-top:1.4rem; border-top:1px solid rgba(217,224,230,.1);
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap;
}
.evt__price{ font-family:var(--hl); font-size:1.9rem; line-height:1; font-weight:700; }
.evt__price sup{ font-size:.34em; vertical-align:super; margin-left:.12em; }
.evt.is-past{ opacity:.62; }
.evt.is-past .evt__ph{ filter:grayscale(1) brightness(.5); }
.evt.is-past:hover{ opacity:1; }

.pager{
  margin-top:3rem; padding-top:1.8rem; border-top:1px solid rgba(201,162,39,.2);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.4rem;
}
.pager > :last-child{ justify-self:end; }
.pager__n{ font-family:var(--hl); font-weight:600; font-size:.72rem; letter-spacing:0.168em; text-transform:uppercase; color:var(--ash); }

@media (max-width:820px){
  .evt .bevel__in{ grid-template-columns:1fr; }
  .evt__media{ min-height:220px; }
  .evt__media::after{ background:linear-gradient(0deg, var(--onyx), transparent 60%); }
  .evt__badge{ right:auto; left:1.1rem; bottom:1.1rem; }
}

/* ─── Touch: Ersatz für :hover ────────────────────────────────────────
   .evt ist selbst ein .bevel und wird von MC.touchFocus() beobachtet.
   Die Entsättigung sitzt aber auf .evt__ph, nicht auf der Kachel —
   deshalb hier eigene Regeln.
   ─────────────────────────────────────────────────────────────────── */
@media (hover: none), (pointer: coarse) {
  .evt__ph{ filter:grayscale(.4) contrast(1.03) brightness(.82); }
  .evt.in-view .evt__ph{ filter:grayscale(0) contrast(1) brightness(.92); }
  .evt.is-near .evt__ph{ transform:scale(1.07); }
  /* Vergangene Termine bleiben bewusst ausgegraut, aber nicht so hart */
  .evt.is-past .evt__ph,
  .evt.is-past.in-view .evt__ph{ filter:grayscale(.85) brightness(.55); }
  .evt.is-past{ opacity:.72; }
  .pager__n{ color:var(--platin); }
}