.bookly-frontend-calendar .bookly-nnax-frontend-hidden {
    display: none !important;
}

.bookly-frontend-calendar .ec-event-title {
    display: none !important;
}

/* Belegte Termine und die definierten Sperrzeiten verwenden denselben Rotton. */
.bookly-frontend-calendar .ec-event {
    background-color: rgba(255, 0, 0, 0.3) !important;
    background-image: none !important;
    color: #1f1f1f !important;
    opacity: 1 !important;
}

/* Nur eine Farbebene pro Termin, auch wenn Bookly den Body separat färbt. */
.bookly-frontend-calendar .ec-event .ec-event-body {
    background-color: transparent !important;
    opacity: 1 !important;
}

.bookly-frontend-calendar .ec-event * {
    color: #1f1f1f !important;
}

/* Die Bookly-Mausvorschau nutzt ebenfalls .ec-event. Für freie Bereiche
 * soll sie sich klar von blockierten Zeiten unterscheiden. */
.bookly-frontend-calendar .ec-event.ec-pointer,
.bookly-frontend-calendar .ec-event.ec-pointer .ec-event-body,
.bookly-frontend-calendar .ec-event.ec-preview {
    background-color: rgba(91, 170, 111, 0.28) !important;
    background-image: none !important;
    color: #245c32 !important;
}

/* Für die halbtransparente Sperrfarbe muss der Zeitraster-Untergrund überall
 * gleich weiß sein. Graue Nichtöffnungszeiten werden als eigene Bookly-
 * Hintergrundflächen darüber dargestellt. */
.bookly-frontend-calendar .ec-time-grid .ec-time-grid-col,
.bookly-frontend-calendar .ec-time-grid .ec-today,
.bookly-frontend-calendar .ec-time-grid .ec-day.ec-today {
    background-color: #fff !important;
}

.bookly-frontend-calendar .ec-toolbar .ec-dayGridMonth,
.bookly-frontend-calendar .ec-toolbar .ec-timeGridWeek,
.bookly-frontend-calendar .ec-toolbar .ec-timeGridDay,
.bookly-frontend-calendar .ec-toolbar .ec-listWeek {
    display: none !important;
}

.bookly-nnax-blocked,
#bookly-tbs .ec-bg-event.bookly-nnax-blocked {
    /* Sichtbarer Zielton von rgba(255, 0, 0, 0.3) auf weißem Untergrund.
     * Opaque gesetzt, damit graue Bookly-Nichtöffnungszeiten nicht durchscheinen. */
    background-color: rgb(255, 179, 179) !important;
    opacity: 1 !important;
    inset-inline-start: calc((100% - var(--ec-event-col-gap)) / 1 * 0) !important;
    inset-inline-end: auto !important;
    inline-size: calc((100% - var(--ec-event-col-gap)) / 1 * 1) !important;
    z-index: 2 !important;
}

/* Bookly hellt belegte Termine mit diesem Layer auf. Sperrzeiten müssen
 * denselben Layer verwenden, damit beide Flächentypen gleich aussehen. */
.bookly-nnax-blocked::before,
#bookly-tbs .ec-bg-event.bookly-nnax-blocked::before {
    content: "" !important;
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - 2px);
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7) !important;
    background-image:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 59px,
            rgba(160, 160, 160, 0.12) 59px,
            rgba(160, 160, 160, 0.12) 60px
        ),
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 29px,
            rgba(160, 160, 160, 0.06) 29px,
            rgba(160, 160, 160, 0.06) 30px
        ) !important;
    pointer-events: none;
}

/* Öffnungszeiten-Puffer und geschlossene Tagesbereiche. Diese Flächen
 * werden vor den roten Belegungen geladen, damit rote Sperrflächen sichtbar
 * darüber liegen bleiben. */
.bookly-nnax-unavailable,
#bookly-tbs .ec-bg-event.bookly-nnax-unavailable {
    background-color: rgba(204, 204, 204,0.4) !important;
    opacity: 1 !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Frontend calendar legend shortcode. */
.bookly-nnax-calendar-legend {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin: 0.75rem 0;
    color: inherit;
    font-size: 0.95rem;
}

.bookly-nnax-calendar-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.bookly-nnax-calendar-legend__swatch {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid rgba(31, 31, 31, 0.2);
    border-radius: 0.2rem;
    box-sizing: border-box;
}

.bookly-nnax-calendar-legend__swatch--blocked {
    background-color: rgb(255, 179, 179);
}

.bookly-nnax-calendar-legend__swatch--open {
    background-color: #fff;
}

.bookly-nnax-calendar-legend__swatch--unavailable {
    background-color: rgba(204, 204, 204, 0.4);
}