.belegung-wrapper .belegung-calendar-table      { border-collapse: collapse; margin-bottom: 20px; } 

.belegung-wrapper .belegung-calendar-table th, 
.belegung-wrapper .belegung-calendar-table td   { width: 24px; height: 24px; text-align: center; 
                                                    font-size: 11px; border: 1px solid #999; } 

.belegung-wrapper .belegung-frei                { background-color: #97D7A8; } 
.belegung-wrapper .belegung-reserviert          { background-color: #6CB3D8; } 
.belegung-wrapper .belegung-belegt              { background-color: #FF3F41; } 
.belegung-wrapper .belegung-ungueltig           { background-color: #fff; } 
.belegung-wrapper .belegung-kalender-title      { font-family: bitter !important; font-weight: bold; font-size: 16px; margin: 15px 0 5px; } 

.belegung-legend                                { margin-top: 20px; font-size: 20px; display: flex; flex-wrap: wrap; gap: 15px;
                                                    align-items: center; margin-left: 100px; margin-bottom: 80px; } 

.belegung-legend .belegung-legend-item          { display: flex; align-items: center; gap: 5px;text-transform: uppercase; 
                                                  margin-right: 30px; } 

.belegung-legend .belegung-legend-color         { width: 20px; height: 20px; } 
.belegung-legend .belegung-legend-frei          { background-color: #97D7A8; } 
.belegung-legend .belegung-legend-reserviert    { background-color: #6CB3D8; } 
.belegung-legend .belegung-legend-belegt        { background-color: #FF3F41; } 
.belegung-legend .belegung-legend-ungueltig     { background-color: #fff; } 

.belegung-tooltip {
  position: absolute;
  display: none;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
}


@media(max-width: 768px) {
.belegung-calendar-table th, 
.belegung-calendar-table td     { min-width: 16px; height: 16px !important; font-size: 9px; } 

.belegung-calendar-container    { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; } 

.belegung-calendar-table        { width: max-content; border-collapse: collapse; margin-bottom: 1rem; min-width: 100%; } 

.belegung-calendar-table th, 
.belegung-calendar-table td     { width: 24px; height: 24px; text-align: center; font-size: 11px; border: 1px solid #999; 
                                    box-sizing: border-box; } 

.belegung-frei                  { background-color: #a9e9a3; } 
.belegung-reserviert            { background-color: #ffe48a; } 
.belegung-belegt                { background-color: #f9a6a6; } 
.belegung-ungueltig             { background-color: #fff; } 
}
@media (max-width: 480px){
 .belegung-calendar-table th, 
 .belegung-calendar-table td    { width: 16px; height: 16px; font-size: 9px; } 
 }