/* =====================================================
   BELEGUNGSKALENDER — eigener Verfügbarkeits-Kalender
   Datenquelle: assets/data/verfuegbarkeit.json (nur frei/belegt).
   Keine externen Anfragen, keine Cookies — rein lokal.
   ===================================================== */
.ed-avail { max-width: 1080px; margin: 0 auto; }

.ed-avail-legend {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 1.8rem; margin-bottom: 2.6rem;
}
.ed-avail-legend span {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.8rem; letter-spacing: 0.02em; color: var(--ed-muted);
}
.ed-avail-legend i {
  width: 16px; height: 16px; border-radius: 50%; display: inline-block;
  border: 1px solid var(--ed-line);
}
.ed-avail-legend i.is-frei   { background: #fff; }
.ed-avail-legend i.is-belegt { background: rgba(5, 4, 11, 0.16); border-color: transparent; }

/* Monats-Navigation */
.ed-avail-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 1.6rem; margin-bottom: 2.4rem;
}
.ed-avail-range {
  font-family: var(--ed-serif); font-style: italic;
  font-size: 1.25rem; min-width: 12rem; text-align: center; color: var(--ed-fg);
}
.ed-avail-arrow {
  appearance: none; background: none; cursor: pointer;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid var(--ed-line); color: var(--ed-fg);
  font-size: 1.1rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.ed-avail-arrow:hover:not(:disabled) { border-color: var(--ed-accent); color: var(--ed-accent); }
.ed-avail-arrow:disabled { opacity: 0.3; cursor: default; }

.ed-avail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.6rem 2.2rem;
}

.ed-avail-month-name {
  font-family: var(--ed-serif); font-style: italic; font-weight: 400;
  font-size: 1.5rem; margin: 0 0 1rem; text-align: center; letter-spacing: 0.01em;
}
.ed-avail-month-name span { color: var(--ed-accent); }

.ed-avail-dows, .ed-avail-days {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  text-align: center;
}
.ed-avail-dow {
  font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ed-muted); padding-bottom: 7px;
}
.ed-avail-day {
  position: relative; font-size: 0.8rem; line-height: 1;
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-variant-numeric: tabular-nums; color: var(--ed-fg);
}
.ed-avail-day.is-empty  { visibility: hidden; }
.ed-avail-day.is-frei   { color: var(--ed-fg); }
.ed-avail-day.is-belegt { color: var(--ed-muted); background: rgba(5, 4, 11, 0.10); }
.ed-avail-day.is-past   { color: var(--ed-line); }
.ed-avail-day.is-today  { box-shadow: inset 0 0 0 1.5px var(--ed-accent); font-weight: 600; }

.ed-avail-stand {
  text-align: center; font-size: 0.76rem; letter-spacing: 0.02em;
  color: var(--ed-muted); margin: 2.8rem 0 0;
}
.ed-avail-cta {
  text-align: center; font-size: 0.98rem; margin: 0.7rem 0 0; color: var(--ed-muted);
}
.ed-avail-cta a { color: var(--ed-fg); }

.ed-avail-loading, .ed-avail-error {
  grid-column: 1 / -1; text-align: center; color: var(--ed-muted); padding: 2.4rem 0;
}

/* Abstand vor der zweiten Stufe (Smoobu-Buchung & Preise) */
.ed-booking-rule--two { margin-top: 5rem; }

@media (max-width: 560px) {
  .ed-avail-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2.2rem 1.6rem; }
}