/* ─────────────────────────────────────────────────────────────
   Freie Termine – gemeinsamer Block für Firmenevents, Vereine,
   Catering. Quelle sind die veröffentlichten Events.
   ───────────────────────────────────────────────────────────── */
.hopp-termine { background: var(--bg-alt); padding: clamp(52px, 7vw, 96px) 32px; }
.hopp-termine-in { max-width: 1180px; margin: 0 auto; }
.hopp-termine-kick { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--accent); margin: 0 0 14px; }
.hopp-termine-h { font-family: var(--display); font-size: clamp(28px, 4.2vw, 54px); font-weight: 900; text-transform: uppercase; letter-spacing: -0.035em; line-height: .93; margin: 0 0 26px; }
.hopp-termine-h em { font-style: italic; font-weight: 400; color: var(--accent); }
.hopp-termine-note { font-family: var(--mono); font-size: 12.5px; line-height: 1.7; opacity: .6; margin: 24px 0 0; max-width: 78ch; }

.hopp-dates { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hopp-date button, .hopp-date > span {
  display: grid; gap: 3px; min-width: 104px; padding: 12px 16px; text-align: left;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; cursor: pointer; transition: border-color .15s, transform .15s, background .15s;
}
.hopp-date button:hover { border-color: var(--accent); background: rgba(224,178,58,.16); transform: translateY(-2px); }
.hopp-date button.is-on { border-color: var(--accent); background: rgba(224,178,58,.28); }
.hopp-date b { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
.hopp-date-d { font-family: var(--display); font-size: 20px; font-weight: 900; letter-spacing: -0.02em; line-height: 1; }
.hopp-date-s { font-family: var(--mono); font-style: normal; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #5f7a53; font-weight: 700; }

/* Belegt: durchgestrichen, mit dem Anlass als Grund */
.hopp-date.is-weg > span { cursor: default; background: transparent; border-style: dashed; border-color: rgba(25,21,16,.25); }
.hopp-date.is-weg b, .hopp-date.is-weg .hopp-date-d { color: var(--ink-soft); opacity: .55; }
.hopp-date.is-weg .hopp-date-d { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: #c0392b; }
.hopp-date.is-weg .hopp-date-s { color: #c0392b; opacity: .9; letter-spacing: .04em; text-transform: none; font-size: 11px; }

@media (max-width: 620px) {
  .hopp-date button, .hopp-date > span { min-width: 86px; padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) { .hopp-date button:hover { transform: none; } }

/* Belegter Abend: anklickbar, Detail fährt darunter ein */
.hopp-date-belegt { position: relative; }
.hopp-date.is-weg button { cursor: pointer; background: transparent; border-style: dashed; border-color: rgba(25,21,16,.28); }
.hopp-date.is-weg button:hover { border-color: #c0392b; background: rgba(192,57,43,.07); transform: translateY(-2px); }
.hopp-date.is-weg button.is-offen { border-style: solid; border-color: #c0392b; background: rgba(192,57,43,.1); }
.hopp-date.is-weg button b, .hopp-date.is-weg button .hopp-date-d { color: var(--ink-soft); opacity: .6; }
.hopp-date.is-weg button .hopp-date-d { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: #c0392b; }
.hopp-date.is-weg button .hopp-date-s { color: #c0392b; opacity: .95; letter-spacing: .04em; text-transform: none; font-size: 11px; }
.hopp-date.is-weg button::after {
  content: "→"; position: absolute; right: 9px; bottom: 9px; font-size: 12px; color: #c0392b; opacity: .75; transition: transform .15s;
}
.hopp-date.is-weg button:hover::after { transform: translateX(3px); opacity: 1; }

@media (prefers-reduced-motion: reduce) { .hopp-date.is-weg button:hover { transform: none; } }