/* ==========================================================
   SiKo News – Detailansicht als Dialogfenster
   ========================================================== */

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


/* Dialogfenster */

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

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

    margin: auto;
    padding: 0;

    border: 0;
    border-radius: 18px;

    overflow: hidden;

    background: #fff;
    color: #20262b;

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


/* Abgedunkelte Seite hinter dem Fenster */

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

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


/* Scrollbarer Inhalt */

.siko-news-modal__panel {
    position: relative;

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

    padding:
        72px
        clamp(28px, 5vw, 72px)
        56px;

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

    overscroll-behavior: contain;
    box-sizing: border-box;
}


/* Schliessen-Schaltfläche */

.siko-news-modal__close {
    position: absolute;
    top: 20px;
    right: 20px;

    width: 48px;
    height: 48px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #20262b;
    color: #fff;

    cursor: pointer;
    z-index: 2;
}

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

    width: 27px;
    height: 3px;

    border-radius: 2px;
    background: currentColor;
}

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

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

.siko-news-modal__close:hover,
.siko-news-modal__close:focus-visible {
    background:
        var(--siko-link, #568b29);
}

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

    outline-offset: 3px;
}


/* Ladeanzeige */

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

    min-height: 240px;

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


/* Bestehende News-Detailansicht im Fenster */

.siko-news-modal .siko-news-detail {
    width: 100%;
    max-width: 980px;

    margin: 0 auto;
}

.siko-news-modal .siko-news-detail__header,
.siko-news-modal .siko-news-detail__media,
.siko-news-modal .siko-news-detail__text,
.siko-news-modal
.siko-news-detail__content-elements {
    max-width: none;

    margin-right: 0;
    margin-left: 0;
}


/* Titel */

.siko-news-modal
.siko-news-detail__header h1 {
    margin:
        0
        72px
        20px
        0;

    font-size:
        clamp(2.3rem, 5vw, 4.6rem);

    font-weight: 400;
    line-height: 1.08;
}


/* Lead beziehungsweise Teaser */

.siko-news-modal
.siko-news-detail__lead {
    font-size:
        clamp(1.15rem, 2.1vw, 1.5rem);

    line-height: 1.45;
}


/* Artikelbild */

.siko-news-modal
.siko-news-detail__media {
    margin-top: 32px;
    margin-bottom: 32px;
}

.siko-news-modal
.siko-news-detail__image {
    display: block;

    width: 100%;
    height: auto;
    max-height: 62vh;

    object-fit: contain;

    background: #f3f3f1;
}


/* Artikeltext */

.siko-news-modal
.siko-news-detail__text,
.siko-news-modal
.siko-news-detail__content-elements {
    font-size: 1.08rem;
    line-height: 1.65;
}


/*
 * Die Zurück-Schaltfläche der normalen Detailseite
 * wird im Fenster nicht benötigt.
 */

.siko-news-modal
.siko-news-detail__navigation {
    display: none;
}


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

@media (max-width: 767.98px) {

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

        border-radius: 14px;
    }

    .siko-news-modal__panel {
        max-height: calc(100dvh - 24px);

        padding:
            76px
            22px
            38px;
    }

    .siko-news-modal__close {
        position: fixed;
        top: 24px;
        right: 24px;

        width: 46px;
        height: 46px;
    }

    .siko-news-modal
    .siko-news-detail__header h1 {
        margin-right: 0;

        font-size:
            clamp(2rem, 10vw, 3.2rem);
    }

    .siko-news-modal
    .siko-news-detail__media {
        margin-top: 24px;
        margin-bottom: 24px;
    }

    .siko-news-modal
    .siko-news-detail__text,
    .siko-news-modal
    .siko-news-detail__content-elements {
        font-size: 1rem;
        line-height: 1.6;
    }
}


/* ==========================================================
   Sehr kleine Smartphones
   ========================================================== */

@media (max-width: 420px) {

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

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

        border-radius: 0;
    }

    .siko-news-modal__panel {
        height: 100dvh;
        max-height: 100dvh;

        padding:
            76px
            18px
            32px;
    }

    .siko-news-modal__close {
        top: 18px;
        right: 18px;
    }
}


/* Keine Unschärfe bei reduzierten Bewegungen */

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

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

/* ==========================================================
   Grösse des News-Fensters korrigieren
   ========================================================== */

@media (min-width: 768px) {

    .siko-news-modal {
        width: min(880px, calc(100vw - 64px));
    }

    .siko-news-modal .siko-news-detail {
        max-width: 760px;
    }

    .siko-news-modal
    .siko-news-detail__header h1 {
        font-size: clamp(2rem, 4vw, 3.25rem);
    }
}

/* ==========================================================
   Korrekturen News-Fenster
   ========================================================== */

/*
 * Das Dialogfenster selbst übernimmt das Scrollen.
 * Dadurch wird auf iPhone und iPad nichts abgeschnitten.
 */

.siko-news-modal {
    overflow-x: hidden !important;
    overflow-y: auto !important;

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

.siko-news-modal__panel {
    height: auto !important;
    min-height: 100%;
    max-height: none !important;

    overflow: visible !important;
}


/*
 * Lange Wörter wie „Veranstaltungskalender“
 * dürfen umgebrochen werden.
 */

.siko-news-modal
.siko-news-detail__header h1 {
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}


/*
 * Schliessen wie beim Hauptmenü:
 * transparent, schwarze feine Linien, kein Kreis.
 */

.siko-news-modal__close,
.siko-news-modal__close:hover,
.siko-news-modal__close:focus {
    width: 52px;
    height: 52px;

    border: 0;
    border-radius: 0;

    background: transparent;
    color: #222;

    box-shadow: none;
}

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

.siko-news-modal__close span {
    width: 34px;
    height: 2px;

    border-radius: 0;
    background: currentColor;
}


/* Tablet */

@media (max-width: 767.98px) {

    .siko-news-modal {
        overflow-y: auto !important;
    }

    .siko-news-modal__panel {
        height: auto !important;
        min-height: 100%;
        max-height: none !important;

        overflow: visible !important;
    }

    .siko-news-modal
    .siko-news-detail__header h1 {
        font-size: clamp(1.9rem, 8vw, 2.8rem);
    }
}


/* Smartphone */

@media (max-width: 420px) {

    .siko-news-modal {
        height: 100dvh;
        max-height: 100dvh;

        overflow-y: auto !important;
    }

    .siko-news-modal__panel {
        height: auto !important;
        min-height: 100dvh;
        max-height: none !important;

        overflow: visible !important;
    }

    .siko-news-modal
    .siko-news-detail__header h1 {
        font-size: clamp(1.8rem, 7.5vw, 2.4rem);
        line-height: 1.12;
    }
}