/* ==========================================================
   hub-next-event.css  -  "Naechster Systemtermin + Anmeldung"
   Kompakte Termin-/Signup-Karte fuer die System-Hubs.
   Die Huelle ist seit 06.10.2026 (#887, Etappe 10) die Library-Karte:
     tc-card tc-card--zeile tc-card--accent   (Termin)
     tc-card tc-card--zeile                   (kein Termin)
   Hier stehen nur noch ihre Teile: Datumskachel, Mitte, Knopf,
   Zusatzlinks. Der Akzent kommt aus dem Theme der Seite (--tc-accent);
   bis dahin setzte hub-next-event.js je System einen Hexwert als
   --hne-accent, und auf dem Mordheim-Hub stand weisse Schrift auf
   Gold (#c9a959, Kontrast ~2:1).
   ========================================================== */

.hne, .hne * { box-sizing: border-box; }

.hne {
  display: block;
  margin: 0 0 var(--tc-space-5);
  font-family: var(--tc-font-body);
}

.hne__date {
  flex-shrink: 0; width: 62px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--tc-space-2) 0; border-radius: var(--tc-radius-md);
  background: var(--tc-accent); color: var(--tc-text-on-accent); line-height: 1;
}
.hne__date-day { font-size: 1.5rem; font-weight: var(--tc-weight-bold); }
.hne__date-mon { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }

.hne__body { flex: 1 1 auto; min-width: 0; }
.hne__eyebrow {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--tc-highlight); font-weight: var(--tc-weight-bold); margin-bottom: 3px;
}
.hne__title { font-size: var(--tc-text-lg); font-weight: var(--tc-weight-semibold); color: var(--tc-text-strong); }
.hne__title--muted { color: var(--tc-text-muted); font-weight: var(--tc-weight-medium); }
.hne__meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px;
  font-size: var(--tc-text-sm); color: var(--tc-text-muted);
}
.hne__meta-item { display: inline-flex; align-items: center; gap: 5px; }
.hne__occ { display: inline-flex; align-items: center; gap: 5px; font-weight: var(--tc-weight-semibold); }
.hne__occ--free { color: var(--tc-success); }
.hne__occ--full { color: var(--tc-text-muted); }

.hne__main { flex-shrink: 0; }
.hne__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
  padding: 10px 18px; border-radius: var(--tc-radius-md);
  background: var(--tc-accent); color: var(--tc-text-on-accent); text-decoration: none;
  font-weight: var(--tc-weight-semibold); font-size: 0.9rem; border: 1px solid transparent;
  transition: filter var(--tc-motion-fast), transform var(--tc-motion-fast), border-color var(--tc-motion-fast);
}
.hne__cta:hover { filter: brightness(1.12); transform: translateY(-1px); }
.hne__cta--in { background: transparent; border-color: var(--tc-accent); color: var(--tc-text-strong); }
.hne__cta--in:hover { filter: none; background: rgba(255, 255, 255, 0.06); }
.hne__cta--ghost { background: transparent; border-color: var(--tc-border-default); color: var(--tc-text-default); }
.hne__cta--ghost:hover { filter: none; border-color: var(--tc-accent); }

.hne__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--tc-space-2);
  margin-top: 10px; padding-left: var(--tc-space-1);
}
.hne__actions-label { font-size: 0.75rem; color: var(--tc-text-muted); margin-right: 2px; }
.hne__sec {
  /* ⚠️ 35px waren es (02.09.2026, #425) — ein einziger Pixel unter der
     Schwelle, und deshalb faellt es niemandem auf. Die Pille behaelt ihr
     Polster, min-height hebt nur den Rest. */
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tc-touch-min);
  padding: 6px var(--tc-space-3); border-radius: var(--tc-radius-full);
  border: 1px solid var(--tc-border-subtle);
  background: rgba(255, 255, 255, 0.04);
  color: var(--tc-text-default); text-decoration: none; font-size: var(--tc-text-sm);
  transition: border-color var(--tc-motion-fast), background var(--tc-motion-fast);
}
.hne__sec:hover { border-color: var(--tc-accent); background: rgba(255, 255, 255, 0.08); }

@media (prefers-reduced-motion: reduce) {
  .hne__cta:hover { transform: none; }
}

@media (max-width: 600px) {
  .hne__date { width: 52px; }
  .hne__main { width: 100%; }
  .hne__cta { width: 100%; }
}