/* ================== Design-Variablen ================== */
.xmas-calendar {
  --xcal-radius: 14px;
  --xcal-gap: 12px;
  --xcal-badge: 40px;           /* Ø der Tages-Badges */
  --xcal-card-bg: #fff;
  --xcal-card-bd: #e6e6e6;
  --xcal-muted: #6b7280;        /* Wochentage */
  --xcal-heading: #1f2937;

  --xcal-free-bg: #eaf7f0;      /* grün */
  --xcal-tent-bg: #fff4cf;      /* gelb */
  --xcal-book-bg: #fde8e6;      /* rot */

  --xcal-free-dot: #2e9a59;
  --xcal-tent-dot: #ffb300;
  --xcal-book-dot: #e15549;

  --xcal-shadow: 0 1px 0 rgba(0,0,0,.02), 0 12px 28px rgba(0,0,0,.06);
}

/* ================== Card/Container ================== */
.xmas-calendar .xcal-card {
  border-radius: var(--xcal-radius);
  background: var(--xcal-card-bg);
  border: 1px solid var(--xcal-card-bd);
  box-shadow: var(--xcal-shadow);
}

.xmas-calendar .xcal-card .uk-margin-small-bottom {
  margin-bottom: 16px !important;
}

.xmas-calendar .xcal-card h4.uk-h4 {
  color: var(--xcal-heading);
  font-weight: 700;
  letter-spacing: .01em;
  margin: 2px 0 10px;
}

/* ================== Wochenkopf ================== */
.xmas-calendar .xcal-weekdays {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--xcal-gap);
  margin-bottom: 6px;
}

.xmas-calendar .xcal-weekdays > div {
  text-align: center;
  color: var(--xcal-muted);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;   /* enger = besser lesbar */
  text-transform: none;    /* keine Caps */
  opacity: .95;
}

/* Wochenenden (Sa/So) etwas absetzen */
.xmas-calendar .xcal-weekdays > div:nth-child(6),
.xmas-calendar .xcal-weekdays > div:nth-child(7) {
  color: #4b5563;
}

/* ================== Tagesgrid ================== */
.xmas-calendar .xcal-days {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--xcal-gap);
  padding-bottom: 8px;
}

.xmas-calendar .xcal-day.empty { visibility: hidden; }

/* ================== Tages-Badges ================== */
.xmas-calendar .xcal-day .xcal-btn {
  display: inline-flex;
  width: var(--xcal-badge);
  height: var(--xcal-badge);
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border: 0;
  border-radius: 999px;
  background: #f3f4f6;       /* neutral */
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease, opacity .12s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.xmas-calendar .xcal-day.state-green  .xcal-btn { background: var(--xcal-free-bg); }
.xmas-calendar .xcal-day.state-yellow .xcal-btn { background: var(--xcal-tent-bg); }
.xmas-calendar .xcal-day.state-red    .xcal-btn { background: var(--xcal-book-bg); }

.xmas-calendar .xcal-day .xcal-btn:hover:not([disabled]) {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

.xmas-calendar .xcal-day .xcal-btn:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}

.xmas-calendar .xcal-day .xcal-btn[disabled] {
  cursor: not-allowed;
  opacity: .55;
  filter: grayscale(.05);
}

/* ================== Legende ================== */
.xmas-calendar .xcal-legend { align-items: center; }
.xmas-calendar .xcal-legend li { font-size: 1rem; }
.xmas-calendar .xcal-legend .dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px;
}
.xmas-calendar .xcal-legend .dot-green  { background: var(--xcal-free-dot); }
.xmas-calendar .xcal-legend .dot-yellow { background: var(--xcal-tent-dot); }
.xmas-calendar .xcal-legend .dot-red    { background: var(--xcal-book-dot); }

/* ================== Responsive ================== */
@media (max-width: 1199px) {
  .xmas-calendar { --xcal-badge: 36px; --xcal-gap: 10px; }
}
@media (max-width: 959px) {
  .xmas-calendar { --xcal-badge: 34px; }
}
@media (max-width: 639px) {
  .xmas-calendar { --xcal-badge: 32px; --xcal-gap: 8px; }
  .xmas-calendar .xcal-weekdays > div { font-size: .9rem; }
}

/* ===== Optional: Compact-Modus (füge „xcal--compact“ als zusätzliche Klasse am Element hinzu) ===== */
.xmas-calendar.xcal--compact { --xcal-badge: 32px; --xcal-gap: 8px; }


/* Backend Modul Grid Layout */
.xcal-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1080px) {
  .xcal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .xcal-grid {
    grid-template-columns: 1fr;
  }
}