/* ============================================================
   Date Badge — Datums-Plakette mit Tag + Monat
   Konsumenten: Event-Cards (Startseite, Events-Uebersicht),
                Event-Detail-Header

   Markup-Erwartung:
   <div class="date-badge">
     <span class="date-badge-day">15</span>
     <span class="date-badge-month">Mai</span>
   </div>

   Standardmaessig "schwebt" das Badge oben links absolut auf dem
   Parent — Parent muss `position: relative` haben.
   Modifier `.date-badge--static` setzt den Badge in den normalen
   Flow (z.B. fuer Event-Detail-Header).
   ============================================================ */

.date-badge {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  background: var(--color-sand);
  color: var(--color-anthrazit);
  padding: 0.5em 0.9em;
  font-family: var(--font-headline);
  text-align: center;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

.date-badge--static {
  position: static;
  display: inline-block;
}

.date-badge-day {
  font-size: 1.6rem;
  font-weight: 500;
  display: block;
}

.date-badge-month {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: 0.2em;
  font-family: var(--font-classic-tech);
}