:root {
  --color-thomas: lightblue;
  --color-thomas-weak: #D6EBF5;
  --color-sascha: lightgreen;
  --color-sascha-weak: #CFFACD;
  --color-luci: orange;
  --color-luci-weak: #FFD699;
  --color-disabled: #f0f0f0;
}

body {
  font-family: sans-serif;
  margin: 20px auto;
  max-width: 960px;
}

#person-select {
  display: flex;
  margin-bottom: 20px;
}

.person-button {
  border: none;
  padding: 10px 20px;
  margin-right: 10px;
  cursor: pointer;
  font-size: 16px;
  color: #000;
}

.person-button.thomas {
  background-color: var(--color-thomas);
}

.person-button.sascha {
  background-color: var(--color-sascha);
}

.person-button.luci {
  background-color: var(--color-luci);
}

.month-container {
  margin-bottom: 20px;
}

.month-title {
  font-size: 1.5em;
  margin-bottom: 10px;
}

.month-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.day-header {
  background-color: #ddd;
  padding: 5px;
  text-align: center;
  font-weight: bold;
}

.day {
  padding: 10px;
  border: 1px solid #ccc;
  text-align: center;
  cursor: pointer;
  min-height: 40px;
}

.day:hover {
  background-color: #f0f0f0;
}

/* Leere Felder für den Offset */
.day.empty {
  background-color: #f9f9f9;
  cursor: default;
}

/* Deaktivierte Tage: Wochenende & Feiertage */
.day.disabled {
  background-color: var(--color-disabled);
  pointer-events: none;
  cursor: default;
}

.weak,
.weak-top,
.weak-bottom {
  position: relative;

  &:after,
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0 0 14px 6px #fff inset;
    display: none;
  }
}

.weak {
  &::before{
    display: block;
  }
}

.weak-top {
  &::before {
    bottom: 50%;
    display: block;
  }
}

.weak-bottom {
  &::after {
    top: 50%;
    display: block;
  }
}