/* SLIDER - EVENTS

01	GENERAL

*/

/* -----------------------------------------------------------------------
	01	GENERAL
/* ---------------------------------------------------------------------*/

.paragraph.views.event .paragraph.headline {
    background-color: var(--color-grey-light);
    padding: var(--section-inner-side-padding) 0 0 0;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    margin: 0;
}

.paragraph.views.event .paragraph.headline h2 {
    margin: 0;
}

.view-id-event.view-display-id-teaser section {
    background-color: transparent;
}

.paragraph.views.event .view-id-event.view-display-id-teaser {
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    background-color: var(--color-grey-light);
    padding: var(--section-inner-side-padding);
}

.paragraph.views.event .view-id-event.view-display-id-teaser .view-content {
    display: grid;
    grid-column-gap: var(--grid-gap);
    grid-template-columns: var(--grid-columns);
}

.view-id-event.view-display-id-teaser h2 {
    /* margin-bottom: 4rem; */
}

.view-id-event.view-display-id-teaser .splide__track {
    padding: 0 0 10% 0;
}

.view-id-event.view-display-id-teaser .splide__slide {
    opacity: .5;
    transition: opacity ease-in-out .2s;
    min-height: 12rem;
}

.view-id-event.view-display-id-teaser .splide__slide.is-active {
    opacity: 1;
}

.group-events-slider {
    padding: .5rem 0;
}

.group-events-slider .views-field-field-teaser * {
    font-size: inherit;
}

.view-id-event.view-display-id-teaser .view-events {
    grid-column: span 6;
}

.contrast .view-events:after {
    background: linear-gradient(0deg, rgba(197, 197, 197, 1), rgba(197, 197, 197, 0) 100%);
}


/* -----------------------------------------------------------------------
        02	DATE
/* ---------------------------------------------------------------------*/


.paragraph.views.event .paragraph.headline {
    background-color: var(--color-grey-light);
    padding: var(--section-inner-side-padding) 0 0 0;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    margin: 0;
}

.paragraph.views.event .paragraph.headline h2 {
    margin: 0;
}

.view-id-event.view-display-id-teaser .date-grid {
    grid-column: span 3;
    margin: 0 auto;
    position: relative;
    width: 12.500rem;
    height: 12.500rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.number-container {
    position: relative;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.number-row {
    position: relative;
    width: 100%;
    height: 100%;
    transition: all .5s ease-in-out;
    top: 0;
    text-align: center;
    font-size: 5.125rem;
    color: var(--color-primary);
    line-height: 100px;
}

.dot {
    height: 100%;
    width: 100%;
    position: absolute;
    text-align: center;
    font-size: 82px;
    color: var(--color-primary);
    line-height: 100px;
}

.dot.second-dot {
    display: flex;
    justify-content: flex-end;
    right: -8px;
}

/* -----------------------------------------------------------------------
        03	TEXT
/* ---------------------------------------------------------------------*/

.paragraph.views.event
.splide__track.splide__track--loop.splide__track--ttb.splide__track--draggable {
    height: calc(220px) !important;
}

.paragraph.views.event
.splide__slide {
    overflow: hidden;
}

.view-id-event.view-display-id-teaser .view-events {
    grid-column: span 6;
}

.slider-content .daymonth_termin,
.slider-content .year_termin,
.slider-content .field-content p {
    font-size: var(--font-size-text)
}

.view-id-event.view-display-id-teaser .slider-content .field-content p a {
    color: var(--color-primary);
    text-decoration: none;
}

.view-id-event.view-display-id-teaser .views-field-title a {
    color: var(--color-grey-dark);
    font-size: var(--font-size-h3);
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: .5rem;
    text-decoration: none;
    text-align: left;
}

.view-id-event.view-display-id-teaser .views-field-title a:before {
    display: block;
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
}

.view-id-event.view-display-id-teaser .views-field-field-teaser {
    display: inherit;
}

.view-id-event.view-display-id-teaser .views-field-field-teaser p {
    display: none;
}

.view-id-event.view-display-id-teaser .views-field-field-teaser p:first-child,
.view-id-event.view-display-id-teaser .views-field-field-teaser p:only-child {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 5.625rem;
}

.view-id-event.view-display-id-teaser .splide__track:after {
    display: block;
    content: '';
    width: 100%;
    height: 5rem;
    position: absolute;
    bottom: 0;
    background: linear-gradient(0deg, rgba(235, 235, 235, 1), rgba(235, 235, 235, 0) 100%);
}

/* -----------------------------------------------------------------------
        04	NAVIGATION
/* ---------------------------------------------------------------------*/

.view-id-event.view-display-id-teaser .splide__arrows {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: relative !important;
}

.view-id-event.view-display-id-teaser .splide__arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: none;
    cursor: pointer;
}

.view-id-event.view-display-id-teaser .splide__arrow--prev {
    margin-right: 10px;
}

.view-id-event.view-display-id-teaser .splide__arrow--next {
    margin-left: 10px;
}

.view-events > button {
    position: absolute;
    bottom: 0;
    top: initial;
    width: 2rem;
    height: 2rem;
    appearance: none;
    border: 0;
    font-size: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
    padding: 0;
    z-index: 1;
    transform: inherit;
}

button:before {
    display: block;
}

.slider.teaser_wfbb_events .splide__arrows {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.view-id-event.view-display-id-teaser button.splide__arrow--prev,
.view-id-event.view-display-id-teaser button.splide__arrow--prev:hover,
.view-id-event.view-display-id-teaser button.splide__arrow--prev:focus {
    left: 0;
    background-image: var(--arrow-narrow-next-grey);
    background-repeat: no-repeat;
    background-size: auto;
    transform: rotate(180deg) translateX(3rem);
    right: 0;
    margin: 0 auto;
}

.view-id-event.view-display-id-teaser button.splide__arrow--next,
.view-id-event.view-display-id-teaser button.splide__arrow--next:hover,
.view-id-event.view-display-id-teaser button.splide__arrow--next:focus {
    right: 0;
    background-image: var(--arrow-narrow-next-grey);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
    left: 0;
    margin: 0 auto;
    transform: rotate(90deg);
}

.view-id-event.view-display-id-teaser button.splide__arrow--prev,
.view-id-event.view-display-id-teaser button.splide__arrow--prev:hover,
.view-id-event.view-display-id-teaser button.splide__arrow--prev:focus {
    left: 55%;
    right: inherit;
    background-image: var(--arrow-narrow-next-grey);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
    transform: rotate(-90deg);
}

/* -----------------------------------------------------------------------
        05	ALL EVENTS LINK
/* ---------------------------------------------------------------------*/

.view-id-event.view-display-id-teaser .view-allevents {
    grid-column: span 3;
}

.eventsall {
    display: grid;
    justify-content: center;
    height: 100%;
}

.linkeventsall {
    font-weight: 700;
    display: grid;
    align-items: center;
}

.linkeventsall a {
    display: block;
    color: var(--color-grey-dark);
    justify-self: center;
    text-decoration: none;
    font-size: var(--font-size-text);
}

.linkeventsall a:hover {
    text-decoration: none;
}

.view-allevents a:before {
    display: block;
    content: '';
    height: 4.250rem;
    width: 4.250rem;
    background-image: var(--arrow-circle-dark);
    margin: 0 auto 1rem;
}

.view-allevents a:hover:before {
    background-image: var(--arrow-circle-dark-filled);
}

.view-id-event.view-display-id-teaser button.slick-next.slick-arrow,
.view-id-event.view-display-id-teaser button.slick-next.slick-arrow:hover,
.view-id-event.view-display-id-teaser button.slick-next.slick-arrow:focus {
    right: 0;
    background-image: var(--arrow-light-dark);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
    left: 0;
    margin: 0 auto;
}

@media (max-width: 991px) {

    .view-id-event.view-display-id-teaser .date-grid {
        display: none;
    }

    .view-id-event.view-display-id-teaser .view-events {
        grid-column: span 12;
    }

    .view-id-event.view-display-id-teaser .view-allevents {
        grid-column: span 12;
    }

    .view-events.splide--slide,
    .view-allevents {
        grid-column: span 12;
        width: 100%;
    }

    .view-id-event.view-display-id-teaser .splide__list {
        padding: 0 15% 0 0;
        width: 100%;
    }

    .view-id-event.view-display-id-teaser .slider-content {
        text-align: left;
    }

    .view-id-event.view-display-id-teaser .splide__slide > div {
        padding: 0 0 0 var(--section-inner-side-padding);
    }

    .view-id-event.view-display-id-teaser .view-events:after {
        width: 11rem;
        height: 100%;
        right: 0;
        background: linear-gradient(270deg, rgba(235, 235, 235, 1), rgba(235, 235, 235, 0) 100%);
    }

    .view-id-event.view-display-id-teaser button.splide__arrow {
        display: none !important;
    }

    .view-id-event.view-display-id-teaser .views-field-field-date-wfbb-events {
        display: block;
    }

    .view-id-event.view-display-id-teaser .views-field-event-datum > div {
        display: inline-block;
        font-weight: 700;
        color: var(--color-primary);
    }

    .view-id-event.view-display-id-teaser .views-field-event-datum {
        direction: ltr;
    }

    .view-id-event.view-display-id-teaser .daymonth_termin:after {
        display: inline-block;
        content: '.';
    }

    .view-allevents {
        margin-top: calc(var(--grid-gap) * 2);
    }

    .linkeventsall a {
        display: flex;
        align-items: center;
    }

    .view-allevents a:before {
        display: inline-block;
        height: 2rem;
        width: 2rem;
        background-size: contain;
        margin: 0 1rem 0 0;
    }
}

@media (min-width: 990px) {
    .view-id-event.view-display-id-teaser .views-field-event-datum {
        display: none;
    }
}

@media (max-width: 991px) {
    .paragraph.views.event.event-teaser .splide__arrows {
        left: 0;
        margin: 0;
    }

    .paragraph.views.event.event-teaser .splide__arrows button.splide__arrow--prev {
        transform: rotate(180deg) !important;
        display: initial !important;
    }

    .paragraph.views.event.event-teaser .splide__arrows button.splide__arrow--next {
        transform: rotate(0deg) !important;
        display: initial !important;
    }
}