:root {
  --clr-bg-light: rgb(229, 235, 237);
  /*rgb(198, 227, 255);*/
  --clr-bg-container: white;
  --clr-text: hsl(0, 0%, 100%);
  --clr-text-dark: black;

  /*#006079;*/
  --clr-bg-grid-item-colored: rgb(123, 162, 162);
  /*#006079;*/
  --clr-shadow-navbar-scrolled: rgb(0, 0, 0);
  --clr-text-navbar: hsl(0, 0%, 100%);
  --clr-text-navbar-focus: white;
  --clr-link-navbar-focus: rgb(255, 255, 255);
  --clr-bg-footer: rgb(134, 134, 134);
  /*rgb(62, 90, 133);*/
  --clr-line-light: rgb(255, 183, 48);
  --clr-line-dark: rgb(255, 183, 48);
  /*#006079;*/
  --clr-calendar-booked: rgb(201, 90, 87);
  --clr-calendar-free: rgb(141, 179, 111);
  --clr-calendar-reserved: rgb(240, 206, 117);
  --clr-calendar-blocked: rgb(51, 51, 51);
  --clr-calendar-text: white;
  --clr-calendar-bg: rgb(123, 162, 162);
}

.calendar-block {
    
  margin-bottom: 40px;
  padding: 20px;
  background-color: var(--clr-calendar-bg);
  color: var(--clr-calendar-text);
  text-align: center;
  align-items: center;
}




/* Container, der beide Kalender umschließt (falls du zwei anzeigst) */
.calendar-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.calendar-instance {
    display: flex;
    flex-direction: column;
    padding: 15px;
    color: var(--clr-calendar-text);
    min-width: 300px;
    max-width: 400px;
    min-height: 350px;
}

.calendar-instance h4 {
    text-align: center;
    font-weight: bold;
    margin-top: 0;
    margin-block-end: 10px;
    color: var(--clr-calendar-text);
}

/* Das eigentliche Gitter */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 Spalten */
    grid-auto-rows: 1fr; /* Jede neue Zeile bekommt exakt die gleiche Höhe */
    gap: 2px;
    width: 100%;
}

/* Wochentage und Tage teilen sich die gleichen Grid-Eigenschaften */
.weekday {
    text-align: center;
    font-weight: bold;
    font-size: 1rem;
    align-items: center;
    justify-content: center;
    color: var(--clr-calendar-text);
    position: relative;
    aspect-ratio: 1 / 1; /* DAS sorgt für das Quadrat */
    display: flex;
    font-weight: bold;
    min-width: 0;
    overflow: visible !important;
}

.calendar-day{
    position: relative;
    aspect-ratio: 1 / 1; /* DAS sorgt für das Quadrat */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
    min-width: 0;
    background-color: var(--clr-calendar-free); /* Standard: Grün */
    color: white;
    overflow: visible !important;
}


.free {
  background: var(--clr-calendar-free);
}

.full-red {
  background: var(--clr-calendar-booked);
}
.full-yellow {
  background: var(--clr-calendar-reserved);
}

/* Gästewechsel am selben Tag: Gebucht zu Gebucht */
.diagonal-red-red {
  background: linear-gradient(
    135deg,
    var(--clr-calendar-booked) 49%,
    white 49%,
    white 51%,
    var(--clr-calendar-booked) 51%
  );
}

/* Gästewechsel am selben Tag: Reserviert zu Reserviert */
.diagonal-yellow-yellow {
  background: linear-gradient(
    135deg,
    var(--clr-calendar-reserved) 49%,
    white 49%,
    white 51%,
    var(--clr-calendar-reserved) 51%
  );
}

.diagonal-green-red {
  background: linear-gradient(
    135deg,
    var(--clr-calendar-free) 49%,
    white 49%,
    white 51%,
    var(--clr-calendar-booked) 51%
  );
}

.diagonal-red-green {
  background: linear-gradient(
    135deg,
    var(--clr-calendar-booked) 49%,
    white 49%,
    white 51%,
    var(--clr-calendar-free) 51%
  );
}

.diagonal-green-yellow {
  background: linear-gradient(
    135deg,
    var(--clr-calendar-free) 49%,
    white 49%,
    white 51%,
    var(--clr-calendar-reserved) 51%
  );
}

.diagonal-yellow-green {
  background: linear-gradient(
    135deg,
    var(--clr-calendar-reserved) 49%,
    white 49%,
    white 51%,
    var(--clr-calendar-free) 51%
  );
}


.diagonal-red-yellow {
  background: linear-gradient(
    135deg,
    var(--clr-calendar-booked) 49%,
    white 49%,
    white 51%,
    var(--clr-calendar-reserved) 51%
  );
}

.diagonal-yellow-red {
  background: linear-gradient(
    135deg,
    var(--clr-calendar-reserved) 49%,
    white 49%,
    white 51%,
    var(--clr-calendar-booked) 51%
  );
}





/* Container für die Legende */
.calendar-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
    padding: 5px;
}

/* Einzelnes Legenden-Element */
.legend-item {
    display: flex;
    align-items: center;
    font-size: 0.75rem; /* Sehr klein und dezent */
    color: var (--clr-calendar-text);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Die farbigen Quadrate */
.legend-color {
    width: 12px;
    height: 12px;
    margin-right: 6px;
}

/* Farben (passend zu deinen Kalender-Klassen) */
.legend-color.gebucht {
    background-color: var(--clr-calendar-booked); 
}

.legend-color.reserviert {
    background-color: var(--clr-calendar-reserved);
}

.legend-color.geblockt {
    background-color: var(--clr-calendar-blocked);
}

/* Echtes HTML-Overlay für geblockte Zeiträume */
.blocked-overlay {
    position: absolute;
    inset: 0;
    
    /* Dunkles, halbtransparentes Streifenmuster */
    background: repeating-linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.4),      
        rgba(0, 0, 0, 0.4) 5px,  
        transparent 5px,         
        transparent 10px         
    );
    
    pointer-events: none; /* GANZ WICHTIG: Leitet den Maus-Hover an den Kalendertag für den Tooltip weiter */
    z-index: 1; /* Liegt über der Hintergrundfarbe, aber unter der Zahl (z-index: 2) */
    border-radius: inherit; /* Falls deine Tage irgendwann mal runde Ecken bekommen */
}