/* ==========================================================
   SiKo Events – Detail und Anmeldung als Dialogfenster
   ========================================================== */

body.event-modal-open {
    overflow: hidden;
}


/* Dialogfenster */

.siko-event-modal {
    width: min(1080px, calc(100vw - 64px));
    max-width: none;

    height: auto;
    max-height: calc(100dvh - 64px);

    margin: auto;
    padding: 0;

    border: 0;
    border-radius: 18px;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;

    background: #fff;
    color: #20262b;

    box-shadow:
        0 22px 70px rgb(0 0 0 / 28%);
}


/* Abgedunkelte Seite */

.siko-event-modal::backdrop {
    background: rgb(18 23 27 / 68%);

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}


/* Fensterinhalt */

.siko-event-modal__panel {
    position: relative;

    min-height: 100%;

    padding:
        76px
        clamp(24px, 5vw, 64px)
        56px;

    overflow: visible;
    box-sizing: border-box;
}


/* Schliessen wie beim Hauptmenü */

.siko-event-modal__close,
.siko-event-modal__close:hover,
.siko-event-modal__close:focus {
    position: absolute;
    top: 18px;
    right: 18px;

    width: 52px;
    height: 52px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;
    color: #222;

    box-shadow: none;
    cursor: pointer;

    z-index: 2;
}

.siko-event-modal__close:hover {
    color:
        var(--siko-link, #568b29);
}

.siko-event-modal__close:focus-visible {
    outline:
        3px solid rgb(86 139 41 / 38%);

    outline-offset: 2px;
}

.siko-event-modal__close span {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 34px;
    height: 2px;

    background: currentColor;
}

.siko-event-modal__close
span:first-child {
    transform:
        translate(-50%, -50%)
        rotate(45deg);
}

.siko-event-modal__close
span:last-child {
    transform:
        translate(-50%, -50%)
        rotate(-45deg);
}


/* Ladeanzeige */

.siko-event-modal__loading {
    display: grid;
    place-items: center;

    min-height: 260px;

    color: #4f565b;
    font-size: 1.1rem;
    text-align: center;
}


/* Geladene Detail- und Anmeldeansicht */

.siko-event-modal
.siko-event-detail,
.siko-event-modal
.siko-registration,
.siko-event-modal
.siko-registration__unavailable {
    width: 100%;
    max-width: 940px;

    margin: 0 auto;
}


/* Titel */

.siko-event-modal
.siko-event-detail__title,
.siko-event-modal
.siko-registration__event-title {
    overflow-wrap: anywhere;
    hyphens: auto;

    font-size:
        clamp(2rem, 4vw, 3.35rem);

    line-height: 1.1;
}


/* Zurück-Link im Fenster ausblenden */

.siko-event-modal
.siko-event-detail__back {
    display: none;
}


/* ==========================================================
   Smartphone und Tablet
   ========================================================== */

@media (max-width: 767.98px) {

    .siko-event-modal {
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);

        border-radius: 14px;
    }

    .siko-event-modal__panel {
        min-height: 100%;

        padding:
            74px
            20px
            38px;
    }

    .siko-event-modal__close {
        position: fixed;
        top: 20px;
        right: 20px;
    }

    .siko-event-modal
    .siko-event-detail__title,
    .siko-event-modal
    .siko-registration__event-title {
        font-size:
            clamp(1.8rem, 7.5vw, 2.6rem);
    }
}


/* Sehr kleine Smartphones */

@media (max-width: 420px) {

    .siko-event-modal {
        width: 100vw;

        height: 100dvh;
        max-height: 100dvh;

        border-radius: 0;
    }

    .siko-event-modal__panel {
        min-height: 100dvh;

        padding:
            72px
            18px
            32px;
    }

    .siko-event-modal__close {
        top: 16px;
        right: 16px;
    }
}


/* Reduzierte Bewegung */

@media (prefers-reduced-motion: reduce) {

    .siko-event-modal::backdrop {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* ==========================================================
   Anmeldung innerhalb desselben Dialogfensters
   ========================================================== */

.siko-event-modal.is-registration {
    height: calc(100dvh - 64px);
    overflow: hidden;
}

.siko-event-modal.is-registration
.siko-event-modal__panel {
    height: 100%;
    min-height: 0;

    padding:
        70px
        0
        0;

    overflow: hidden;
}

.siko-event-modal.is-registration
.siko-event-modal__content {
    width: 100%;
    height: 100%;

    overflow: hidden;
}


/* Eingebettete Anmeldeseite */

.siko-event-modal__registration-frame {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;

    background: #fff;
}


/* ==========================================================
   Darstellung innerhalb des iframe
   ========================================================== */

html.siko-event-modal-frame,
html.siko-event-modal-frame body {
    min-height: 100%;

    margin: 0 !important;

    background: #fff !important;
}

html.siko-event-modal-frame body {
    overflow-y: auto !important;
}


/*
 * Header, Footer und normaler Seitentitel
 * im eingebetteten Dokument ausblenden.
 */

html.siko-event-modal-frame
.site-header,

html.siko-event-modal-frame
.site-footer,

html.siko-event-modal-frame
.page-header,

html.siko-event-modal-frame
.siko-hero {
    display: none !important;
}


html.siko-event-modal-frame
.site,

html.siko-event-modal-frame
.site-main {
    min-height: 0 !important;
}


/* Inhalt der eingebetteten Seite */

html.siko-event-modal-frame
.page-content {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    padding:
        24px
        clamp(18px, 5vw, 52px)
        48px !important;

    box-sizing: border-box;
}


html.siko-event-modal-frame
.siko-registration {
    width: 100%;
    max-width: 900px;

    margin:
        0
        auto;
}


/* Tablet und Smartphone */

@media (max-width: 767.98px) {

    .siko-event-modal.is-registration {
        height:
            calc(100dvh - 24px);
    }

    .siko-event-modal.is-registration
    .siko-event-modal__panel {
        padding-top: 66px;
    }

    html.siko-event-modal-frame
    .page-content {
        padding:
            18px
            16px
            36px !important;
    }
}


/* Kleine Smartphones */

@media (max-width: 420px) {

    .siko-event-modal.is-registration {
        height: 100dvh;
    }

    .siko-event-modal.is-registration
    .siko-event-modal__panel {
        min-height: 0;
        padding-top: 64px;
    }
}