/* ===== Adventsfenster: Grid & Cards ===== */

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Desktop: 4 Karten pro Reihe */
  gap: 30px;
  justify-items: center;
}

/* Karten sind flexibel: füllen die Zelle, bleiben quadratisch */
.flip-card {
  width: 100%;
  max-width: 180px;          /* Obergrenze Desktop */
  aspect-ratio: 1 / 1;       /* immer quadratisch */
  perspective: 1200px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.flip-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.8s ease;
  transform-style: preserve-3d;
}

/* Flip-Zustand: per Klasse (Mobile/Click) und via Hover (Desktop) */
.flip-card.flipped .flip-inner,
.flip-card:hover .flip-inner {
  transform: rotateY(180deg);
}

.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-align: center;
}

.flip-front {
  background: var(--card);
  color: var(--brand);
  font-size: 2rem; /* Zahl */
}

.flip-back {
  background: var(--header-footer);
  color: var(--fg);
  transform: rotateY(180deg);
  flex-direction: column;
  font-size: 1rem;
  padding: 15px;
  line-height: 1.4;
}

/* Titel */
.page-title {
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 30px;
  padding: 60px 0;
  color: var(--fg);
}

/* ===== Responsives Verhalten ===== */

/* Größere Tablets/Laptops: 3 pro Reihe */
@media (max-width: 1100px) {
  .calendar-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

/* **Mobile**: exakt 2 pro Reihe */
@media (max-width: 850px) {
  .calendar-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
  .flip-card {
    max-width: 220px;  /* darf pro Zelle etwas größer werden */
  }
}

/* sehr kleine Phones: etwas kleinere Typo */
@media (max-width: 380px) {
  .flip-front { font-size: 1.8rem; }
  .flip-back  { font-size: 0.95rem; padding: 12px; }
}

/* Barrierefreiheit: weniger Animation für Menschen mit Motion-Reduce */
@media (prefers-reduced-motion: reduce) {
  .flip-inner { transition: none; }
}