/* ==========================================================
   BELEGPLAN
   ========================================================== */

.hausname-mobile {
    display: none;
}

.belegplan-container {
    overflow-x: auto;
    overflow-y: auto;
    width: 100%;
}

.belegplan {
    display: grid;
    width: max-content;
    --belegplan-hausbreite: 140px;
}


/* Monatskopf */
.monat {
    text-align: center;
    font-weight: bold;
    padding: 8px 0;
    border: 1px solid #cfd8e3;
    background: #eef4fb;
    color: #4d5f86;
}

/* leere zeile oben links */
.hauskopf-ecke {
    background: #eef4fb;
    border: 0px solid #cfd8e3;
}

/* linke Hausspalte */
.hauskopf {
    border: 1px solid #d6d6d6;
    height: 35px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    font-weight: 600;
    background: #eef4fb;
    color: #4d5f86;
    position: sticky;
    left: 0;
    z-index: 10;
}

/* Tageszellen */
.beleg-cell {
    border: 1px solid #eee;
    height: 35px;
    text-align: center;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}


@media (max-width: 768px) {

    .belegplan {
        --belegplan-hausbreite: 75px;
    }

    .hauskopf {
        font-size: 0.82rem;
        padding-left: 6px;
    }

    .hausname-desktop {
        display: none;
    }

    .hausname-mobile {
        display: inline;
    }
}


/* belegte Tage Haus Aktiv */
/*  AKTUELLES HAUS  */

/* Option */
.status-option {
    background: #9fc5f8;
}

/* Wochenende */
.status-option-we {
    background: #87b8f4;
}

/* Belegt */
.status-belegt {
    background: #f4a6a6;
}

/* Wochenende */
.status-belegt-we {
    background: #ec8f8f;
}

/* Frei */
.status-frei {
    background: #F7FF99;
}

/* Frei - Wochenende */
.status-frei-we {
    background: #EEFF66;
}

/* ==========================================================
   ANDERE HÄUSER GRAUTOENE
   ========================================================== */

.status-option-grau {
    background: #d9d9d9;
}

.status-option-grau-we {
    background: #c9c9c9;
}

.status-belegt-grau {
    background: #b5b5b5;
}

.status-belegt-grau-we {
    background: #a4a4a4;
}

/* ==========================================================
   BELEGPLAN ENDE
   ========================================================== */

/* ==========================================================
   BELEGPLAN LEGENDE
   ========================================================== */

.oasis-belegplan-legende {
    list-style: none !important;
    padding-left: 0 !important;
}

    .oasis-belegplan-legende li {
        list-style: none !important;
        display: flex;
        align-items: center;
        gap: 10px;
        padding-left: 0;
        margin-bottom: 12px;
    }

.oasis-legende-farbe {
    display: inline-block;
    width: 22px;
    height: 14px;
    min-width: 22px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, .12);
}

.oasis-legende-option {
    background-color: #9fc5f8;
}

.oasis-legende-belegt {
    background-color: #f4a6a6;
}

.oasis-legende-frei {
    background-color: #F7FF99;
}

/* ==========================================================
   BELEGPLAN LEGENDE ENDE
   ========================================================== */



/* ==========================================================
   BELEGPLAN - ANREISE / ABREISE A -- Z
   Halbierte Tageszellen
========================================================== */

/* Anreise:
   erste Tageshälfte frei, zweite Hälfte belegt */
.status-anreise {
    background: linear-gradient( 135deg, #F7FF99 0%, #F7FF99 50%, #f4a6a6 50%, #f4a6a6 100% );
}


/* Abreise:
   erste Tageshälfte belegt, zweite Hälfte frei */
.status-abreise {
    background: linear-gradient( 135deg, #f4a6a6 0%, #f4a6a6 50%, #F7FF99 50%, #F7FF99 100% );
}

/* Anreise Option:
   frei -> Option */
.status-anreise-option {
    background: linear-gradient( 135deg, #F7FF99 0%, #F7FF99 50%, #9fc5f8 50%, #9fc5f8 100% );
}

/* Abreise Option:
   Option -> frei */
.status-abreise-option {
    background: linear-gradient( 135deg, #9fc5f8 0%, #9fc5f8 50%, #F7FF99 50%, #F7FF99 100% );
}

/* Anreise am Wochenende:
   frei WE -> belegt WE */
.status-anreise-we {
    background: linear-gradient( 135deg, #EEFF66 0%, #EEFF66 50%, #ec8f8f 50%, #ec8f8f 100% );
}

/* Abreise am Wochenende:
   belegt WE -> frei WE */
.status-abreise-we {
    background: linear-gradient( 135deg, #ec8f8f 0%, #ec8f8f 50%, #EEFF66 50%, #EEFF66 100% );
}


/* Anreise OPTION am Wochenende:
   frei WE -> Option WE */
.status-anreise-option-we {
    background: linear-gradient( 135deg, #EEFF66 0%, #EEFF66 50%, #87b8f4 50%, #87b8f4 100% );
}

/* Abreise OPTION am Wochenende:
   Option WE -> frei WE */
.status-abreise-option-we {
    background: linear-gradient( 135deg, #87b8f4 0%, #87b8f4 50%, #EEFF66 50%, #EEFF66 100% );
}

/* ==========================================================
   BELEGPLAN - ANREISE / ABREISE ENDE
   Halbierte Tageszellen
========================================================== */


/* ==========================================================
   OASIS GESAMT-BELEGPLAN
   Farben nur auf oasis-occupancy
========================================================== */


/* Option */
#oasis-belegplan .status-option,
#oasis-belegplan .status-option-grau {
    background: #9fc5f8;
}


/* Option Wochenende */
#oasis-belegplan .status-option-we,
#oasis-belegplan .status-option-grau-we {
    background: #87b8f4;
}


/* Belegt */
#oasis-belegplan .status-belegt,
#oasis-belegplan .status-belegt-grau {
    background: #f4a6a6;
}


/* Belegt Wochenende */
#oasis-belegplan .status-belegt-we,
#oasis-belegplan .status-belegt-grau-we {
    background: #ec8f8f;
}


/* Frei */
#oasis-belegplan .status-frei {
    background: #F7FF99;
}


/* Frei Wochenende */
#oasis-belegplan .status-frei-we {
    background: #EEFF66;
}

/* ==========================================================
   OASIS GESAMT-BELEGPLAN  ENDE
   Farben nur auf oasis-occupancy
========================================================== */


/* ==========================================================
   OASIS BELEGPLAN – AJAX FADE
========================================================== */

    #oasis-belegplan {
        transition: opacity .25s ease;
    }

    #oasis-belegplan.oasis-loading {
        opacity: 0;
    }

/* ==========================================================
   OASIS BELEGPLAN – AJAX FADE ENDE
========================================================== */

/* ==========================================================
   HAUSNAMEN ALS LINK
========================================================== */

        #oasis-belegplan .hauskopf a {
            color: #4d5f86;
            text-decoration: none;
            transition: color .2s ease;
        }

            #oasis-belegplan .hauskopf a:hover {
                color: #b78945;
            }

/* ==========================================================
   HAUSNAMEN ALS LINK ENDE
========================================================== */
/* ==========================================================
   BELEGPLAN - ANREISE / ABREISE
   ANDERE HÄUSER IN GRAU
========================================================== */

/* neutrale freie Hälfte */
:root {
    --belegplan-grau-frei: #eeeeee;
}


/* Anreise - belegt grau */
.status-anreise-grau {
    background: linear-gradient( 135deg, var(--belegplan-grau-frei) 0%, var(--belegplan-grau-frei) 50%, #b5b5b5 50%, #b5b5b5 100% );
}


/* Abreise - belegt grau */
.status-abreise-grau {
    background: linear-gradient( 135deg, #b5b5b5 0%, #b5b5b5 50%, var(--belegplan-grau-frei) 50%, var(--belegplan-grau-frei) 100% );
}


/* Anreise - Option grau */
.status-anreise-option-grau {
    background: linear-gradient( 135deg, var(--belegplan-grau-frei) 0%, var(--belegplan-grau-frei) 50%, #d9d9d9 50%, #d9d9d9 100% );
}


/* Abreise - Option grau */
.status-abreise-option-grau {
    background: linear-gradient( 135deg, #d9d9d9 0%, #d9d9d9 50%, var(--belegplan-grau-frei) 50%, var(--belegplan-grau-frei) 100% );
}


/* Anreise Wochenende - belegt grau */
.status-anreise-grau-we {
    background: linear-gradient( 135deg, #e2e2e2 0%, #e2e2e2 50%, #a4a4a4 50%, #a4a4a4 100% );
}


/* Abreise Wochenende - belegt grau */
.status-abreise-grau-we {
    background: linear-gradient( 135deg, #a4a4a4 0%, #a4a4a4 50%, #e2e2e2 50%, #e2e2e2 100% );
}


/* Anreise Wochenende - Option grau */
.status-anreise-option-grau-we {
    background: linear-gradient( 135deg, #e2e2e2 0%, #e2e2e2 50%, #c9c9c9 50%, #c9c9c9 100% );
}


/* Abreise Wochenende - Option grau */
.status-abreise-option-grau-we {
    background: linear-gradient( 135deg, #c9c9c9 0%, #c9c9c9 50%, #e2e2e2 50%, #e2e2e2 100% );
}


/* ==========================================================
   BELEGPLAN - ANREISE / ABREISE GRAU ENDE
========================================================== */

/* ==========================================================
   GESAMT-BELEGPLAN - ANREISE / ABREISE
   Graue A/Z-Klassen wieder farbig darstellen
========================================================== */


/* Anreise - Belegt */
#oasis-belegplan .status-anreise-grau {
    background: linear-gradient( 135deg, #F7FF99 0%, #F7FF99 50%, #f4a6a6 50%, #f4a6a6 100% );
}


/* Abreise - Belegt */
#oasis-belegplan .status-abreise-grau {
    background: linear-gradient( 135deg, #f4a6a6 0%, #f4a6a6 50%, #F7FF99 50%, #F7FF99 100% );
}


/* Anreise - Option */
#oasis-belegplan .status-anreise-option-grau {
    background: linear-gradient( 135deg, #F7FF99 0%, #F7FF99 50%, #9fc5f8 50%, #9fc5f8 100% );
}


/* Abreise - Option */
#oasis-belegplan .status-abreise-option-grau {
    background: linear-gradient( 135deg, #9fc5f8 0%, #9fc5f8 50%, #F7FF99 50%, #F7FF99 100% );
}


/* Anreise - Belegt Wochenende */
#oasis-belegplan .status-anreise-grau-we {
    background: linear-gradient( 135deg, #EEFF66 0%, #EEFF66 50%, #ec8f8f 50%, #ec8f8f 100% );
}


/* Abreise - Belegt Wochenende */
#oasis-belegplan .status-abreise-grau-we {
    background: linear-gradient( 135deg, #ec8f8f 0%, #ec8f8f 50%, #EEFF66 50%, #EEFF66 100% );
}


/* Anreise - Option Wochenende */
#oasis-belegplan .status-anreise-option-grau-we {
    background: linear-gradient( 135deg, #EEFF66 0%, #EEFF66 50%, #87b8f4 50%, #87b8f4 100% );
}


/* Abreise - Option Wochenende */
#oasis-belegplan .status-abreise-option-grau-we {
    background: linear-gradient( 135deg, #87b8f4 0%, #87b8f4 50%, #EEFF66 50%, #EEFF66 100% );
}

/* Abreise feste Buchung + Anreise Option */
.status-wechsel-belegt-option {
    background: linear-gradient( 135deg, #f4a6a6 0%, #f4a6a6 50%, #9fc5f8 50%, #9fc5f8 100% );
}

/* Wochenende */
.status-wechsel-belegt-option-we {
    background: linear-gradient( 135deg, #ec8f8f 0%, #ec8f8f 50%, #87b8f4 50%, #87b8f4 100% );
}

/* ==========================================================
   GESAMT-BELEGPLAN - ANREISE / ABREISE ENDE
   Graue A/Z-Klassen wieder farbig darstellen
========================================================== */