body {
  font-family: Arial, sans-serif;
}

/* Kalender als Grid (7 Spalten für die Wochentage) */
.btn-kal {
  --bs-btn-color: black;
  --bs-btn-bg: #dad2b0;
  --bs-btn-border-color: rgb(129, 40, 66);
  --bs-btn-hover-border-color: white;
}
.btn-h {
  --bs-btn-color: black;
  --bs-btn-bg: yellow;
  --bs-btn-hover-bg: yellow;
}
.btn-e {
  --bs-btn-color: black;
  --bs-btn-bg: #b0f165;
  --bs-btn-hover-bg: #b0f165;
}
.btn-f {
  --bs-btn-color: white;
  --bs-btn-bg: red;
  --bs-btn-hover-bg: red;
  --bs-btn-hover-color: white;
}
.btn-o {
  --bs-btn-color: black;
  --bs-btn-bg: #f0f0f0;
  --bs-btn-hover-bg: #f0f0f0;
}
.btn-u {
  border: 2px solid black;
  --bs-btn-color: black;
  --bs-btn-bg: white;
  --bs-btn-hover-color: black;
  --bs-btn-hover-bg: white;
}

/* Kalender als Grid (7 Spalten für die Wochentage) */
#calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  max-width: 300px;
  margin: auto;
  margin-bottom: 8px;
}

/* Kopfzeile (Wochentage) */
.header {
  font-weight: bold;
  text-align: center;
  padding: 8px 0;
  color: rgb(129, 40, 66);
  background-color: #dad2b0;
}

/* einzelne Tag-Felder */
.day {
  border: 1px solid #dfdddd;
  padding: 8px;
  text-align: center;
  min-height: 8px;
  position: relative;
}

/* Hover-Effekt für die Tage */
.day:hover {
  cursor: pointer;
  font-weight: bold;
  box-sizing: border-box;
  border: 1px solid black;
}

/* Gesetzliche Feiertage (fest und beweglich) */
.holiday-official {
  background: rgb(248, 41, 41);
  color: white;
}

/* Heute */
.day.today {
  background: yellow;
}

/* Nicht gesetzliche Feiertage */
.holiday-nonofficial {
  background: #b0f165;
}

/* Angebotstage:  */
.offer-day {
  background-color: #f0f0f0; 
}

/* Infobox unter dem Kalender */
#info-box {
  max-width: 550px;
  margin: 10px auto;
  padding: 10px;
  text-align: left;
}

.holiday-official.offer-day {
  border: 1px solid red;
  color: red;
}

/* Gesetzliche Feiertage (fest und beweglich) */
.day.sunday:not(.holiday-official)  {
  color: red;
}