/* ============================================================
   Belegungskalender – Ferienwohnung Brissago
   Farben hier anpassen:
   ============================================================ */
.bk {
  --bk-frei:   #009999;   /* freie Tage            */
  --bk-belegt: #bf0000;   /* belegte Tage          */
  --bk-text:   #333333;   /* Schrift               */
  --bk-rand:   #d9d9d9;   /* Rahmen der Monate     */
  --bk-heute:  #003366;   /* Markierung "heute"    */
  --bk-knopf:  #003366;   /* Knöpfe Früher/Später  */
  color: var(--bk-text);
  font-family: inherit;
  line-height: 1.3;
}
.bk *, .bk *::before, .bk *::after { box-sizing: border-box; }

/* Navigation */
.bk-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 12px; flex-wrap: wrap;
}
.bk-zeitraum { font-weight: bold; text-align: center; flex: 1; }
.bk-nav button {
  background: var(--bk-knopf); color: #fff; border: 0; border-radius: 6px;
  padding: 7px 14px; font: inherit; font-size: .9rem; cursor: pointer;
}
.bk-nav button:hover { filter: brightness(1.1); }
.bk-nav button:disabled { opacity: .35; cursor: default; filter: none; }

/* Monate */
.bk-monate {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.bk-monat {
  border: 1px solid var(--bk-rand); border-radius: 8px;
  padding: 8px; background: #fff;
}
.bk-monat h3 { margin: 0 0 6px; font-size: 1rem; text-align: center; }
.bk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.bk-wt { font-size: .72rem; text-align: center; color: #777; padding: 2px 0; }

/* Tage */
.bk-tag {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; border-radius: 3px;
  background: var(--bk-frei);
}
.bk-tag.leer { background: none; }
.bk-tag.belegt { background: var(--bk-belegt); color: #fff; }
.bk-tag.anreise {
  background: linear-gradient(to bottom right, var(--bk-frei) 50%, var(--bk-belegt) 50%);
  text-shadow: 0 0 3px #fff, 0 0 3px #fff;
}
.bk-tag.abreise {
  background: linear-gradient(to bottom right, var(--bk-belegt) 50%, var(--bk-frei) 50%);
  text-shadow: 0 0 3px #fff, 0 0 3px #fff;
}
.bk-tag.vergangen { opacity: .4; }
.bk-tag.heute { outline: 2px solid var(--bk-heute); outline-offset: -2px; font-weight: bold; }

/* nur im Bearbeitungsmodus */
.bk-tag.klickbar { cursor: pointer; }
.bk-tag.klickbar:hover { outline: 2px solid #333; outline-offset: -2px; }
.bk-tag.markiert { outline: 3px solid #f0a500; outline-offset: -3px; font-weight: bold; }

/* Legende */
.bk-legende {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin-top: 12px; font-size: .85rem; align-items: center;
}
.bk-legende span { display: inline-flex; align-items: center; gap: 6px; }
.bk-legende i {
  display: inline-block; width: 18px; height: 18px; border-radius: 3px;
  border: 1px solid var(--bk-rand);
}
.bk-legende i.frei    { background: var(--bk-frei); }
.bk-legende i.belegt  { background: var(--bk-belegt); }
.bk-legende i.anreise { background: linear-gradient(to bottom right, var(--bk-frei) 50%, var(--bk-belegt) 50%); }
.bk-legende i.abreise { background: linear-gradient(to bottom right, var(--bk-belegt) 50%, var(--bk-frei) 50%); }
.bk-stand { margin-top: 6px; font-size: .8rem; color: #777; }
.bk-fehler { color: #a00; }

/* Anzeige von nur einem Monat */
.bk-einzeln { max-width: 320px; margin-left: auto; margin-right: auto; }
.bk-einzeln .bk-monate { grid-template-columns: 1fr; }
.bk-einzeln .bk-monat { padding: 8px; }
.bk-einzeln .bk-tag { font-size: .85rem; }
.bk-einzeln .bk-nav button { padding: 5px 10px; font-size: .82rem; }
.bk-einzeln .bk-legende { justify-content: center; font-size: .8rem; gap: 4px 12px; }
.bk-einzeln .bk-stand { text-align: center; }