/* =========================================================
   SPIELESCHEUNE – NEWS / BLOGKARTEN
   Version 12.2 – Startseite + News-Übersicht / kompakter Übergang

   Passende Template-Dateien:
   /templates/NOVAChild/blog/preview.tpl
   /templates/NOVAChild/blog/overview.tpl

   Kernprinzip:
   - dieselbe ruhige Kartenoptik auf Startseite und News-Unterseite
   - feste quadratische Bildbühne
   - kein verkleinertes Eckbild und keine Bild-Hoverebene
   - mehrfarbiger Rahmen nur als dezenter Hovereffekt
   - Unterseite als sauberes responsives 3/2/1-Kartenraster
   ========================================================= */


/* ---------------------------------------------------------
   01. Gemeinsame Designwerte
   --------------------------------------------------------- */

section.index-news-wrapper,
.ss-news-overview {
    --ss-news-title: #26394d;
    --ss-news-text: #58636f;
    --ss-news-surface: #ffffff;
    --ss-news-visual-bg: #f6f7f8;
    --ss-news-border: rgba(38, 57, 77, 0.10);

    --ss-news-radius: 22px;
    --ss-news-gap: clamp(16px, 1.55vw, 28px);
}


/* ---------------------------------------------------------
   02. Startseitenbereich über die volle Breite
   --------------------------------------------------------- */

section.index-news-wrapper {
    position: relative;
    left: 50%;

    box-sizing: border-box;
    width: 100vw !important;
    max-width: none !important;

    margin-right: -50vw !important;
    margin-left: -50vw !important;

    margin-top: 0 !important;

    padding:
        clamp(12px, 1.25vw, 22px)
        clamp(10px, 1vw, 20px)
        clamp(36px, 3.4vw, 58px) !important;

    overflow: hidden !important;
    background: #ffffff;
}

/*
 * Die inneren Inhaltswrapper bleiben offen, damit der Startseiten-Newsbereich
 * bis an die Bildschirmkanten ausbrechen kann.
 *
 * Der äußere Main-Wrapper begrenzt die Seite dagegen exakt am Viewport.
 * Das verhindert die unter Windows durch 100vw entstehenden ca. 17 px
 * Horizontal-Overflow, ohne die Full-Bleed-Darstellung abzuschneiden.
 */
#content,
#content-wrapper {
    overflow-x: visible !important;
}

#main-wrapper {
    overflow-x: hidden !important;
    overflow-x: clip !important;
}

section.index-news-wrapper > .container-fluid,
section.index-news-wrapper .container-fluid {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

section.index-news-wrapper .home-news-slide__header,
section.index-news-wrapper .news-heading,
section.index-news-wrapper > .container-fluid > h2 {
    width: 100% !important;
    max-width: none !important;

    margin: 0 0 clamp(22px, 2vw, 34px) !important;
    padding: 0 !important;

    text-align: center;
}


/* ---------------------------------------------------------
   03. Slick-Carousel der Startseite
   --------------------------------------------------------- */

section.index-news-wrapper .slick-slider {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

section.index-news-wrapper .slick-list {
    width: auto !important;

    margin-right: calc(var(--ss-news-gap) / -2) !important;
    margin-left: calc(var(--ss-news-gap) / -2) !important;
    padding: 0 !important;

    overflow: hidden !important;
}

section.index-news-wrapper .slick-track {
    display: flex !important;
    align-items: stretch;

    margin: 0 !important;
}

section.index-news-wrapper .product-wrapper-news.slick-slide,
section.index-news-wrapper .product-wrapper.product-wrapper-news {
    box-sizing: border-box;

    display: flex !important;
    float: none !important;

    height: auto !important;
    min-height: 100%;

    margin: 0 !important;
    padding-right: calc(var(--ss-news-gap) / 2) !important;
    padding-left: calc(var(--ss-news-gap) / 2) !important;
}

section.index-news-wrapper .slick-arrow {
    z-index: 10;
}


/* ---------------------------------------------------------
   04. News-Unterseite: Überschrift und Grundabstände
   --------------------------------------------------------- */

.ss-news-overview-heading {
    margin-top: clamp(20px, 2.2vw, 38px) !important;
    margin-bottom: clamp(28px, 3vw, 52px) !important;
}

.ss-news-overview-heading__title {
    position: relative;

    display: inline-block;

    margin: 0 !important;
    padding: 0 0 17px !important;

    color: var(--ss-heading, #525252) !important;
    font-family: var(--ss-font-display, "Poppins", Arial, sans-serif) !important;
    font-size: clamp(2rem, 3.2vw, 3.35rem) !important;
    font-weight: 600 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
}

.ss-news-overview-heading__title::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: clamp(92px, 8vw, 142px);
    height: 4px;

    background: linear-gradient(
        90deg,
        #e56b5e 0%,
        #ef7d32 22%,
        #e7ae19 42%,
        #a5c34e 61%,
        #258fa3 80%,
        #31547f 100%
    );
    border-radius: 999px;
}

.ss-news-overview {
    padding-bottom: clamp(42px, 5vw, 82px) !important;
}


/* ---------------------------------------------------------
   05. News-Unterseite: Filter und Paginierung
   --------------------------------------------------------- */

.ss-news-overview__toolbar {
    align-items: flex-end !important;

    margin-bottom: 0 !important;
}

.ss-news-overview #frm_filter,
.ss-news-overview #frm_filter .form-group {
    margin-bottom: 0 !important;
}

.ss-news-overview__filters {
    align-items: center;

    margin-right: -6px !important;
    margin-left: -6px !important;
}

.ss-news-overview__filters > [class*="col-"] {
    padding-right: 6px !important;
    padding-left: 6px !important;
}

.ss-news-overview .custom-select {
    min-width: 170px;
    height: 56px !important;

    padding-right: 42px !important;
    padding-left: 18px !important;

    color: var(--ss-news-text) !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(38, 57, 77, 0.18) !important;
    border-radius: 15px !important;

    font-family: var(--ss-font-body, "Century Gothic", Arial, sans-serif) !important;
    font-size: 0.98rem !important;
    line-height: 1.2 !important;

    box-shadow: 0 5px 16px rgba(24, 38, 54, 0.035) !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}

.ss-news-overview__filters > [class*="col-"]:first-child .custom-select {
    min-width: 225px;
}

.ss-news-overview .custom-select:hover {
    border-color: rgba(38, 57, 77, 0.30) !important;
}

.ss-news-overview .custom-select:focus {
    border-color: var(--ss-accent, #e56b5e) !important;
    box-shadow: 0 0 0 3px rgba(229, 107, 94, 0.13) !important;
}

.ss-news-overview__pagination {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;

    min-height: 56px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    color: var(--ss-heading, #525252);
    font-family: var(--ss-font-body, "Century Gothic", Arial, sans-serif);
    font-weight: 600;
}

.ss-news-overview__divider {
    margin: clamp(20px, 2vw, 30px) 0 clamp(28px, 2.8vw, 44px) !important;

    border: 0 !important;
    border-top: 1px solid rgba(38, 57, 77, 0.11) !important;
}

.ss-news-overview__pagination-bottom {
    margin-top: clamp(30px, 3.4vw, 52px);
}

.ss-news-overview__pagination-bottom .pagination-wrapper,
.ss-news-overview__pagination-bottom .pagination {
    margin-bottom: 0 !important;
}


/* ---------------------------------------------------------
   06. News-Unterseite: Kategorie und Kartenraster
   --------------------------------------------------------- */

.ss-news-overview__category-title {
    margin: 0 0 24px !important;

    color: var(--ss-news-title) !important;
    font-family: var(--ss-font-display, "Poppins", Arial, sans-serif) !important;
    font-weight: 600 !important;
}

.ss-news-overview__grid {
    align-items: stretch;

    margin-right: calc(var(--ss-news-gap) / -2) !important;
    margin-left: calc(var(--ss-news-gap) / -2) !important;

    row-gap: var(--ss-news-gap);
}

.ss-news-overview__item {
    display: flex !important;

    margin: 0 !important;
    padding-right: calc(var(--ss-news-gap) / 2) !important;
    padding-left: calc(var(--ss-news-gap) / 2) !important;
}


/* ---------------------------------------------------------
   07. Gemeinsame News-Karte
   --------------------------------------------------------- */

article.ss-news-card,
.ss-news-card {
    position: relative !important;

    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;

    min-width: 0;
    width: 100% !important;
    height: 100%;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: var(--ss-news-surface) !important;
    border: 1px solid var(--ss-news-border) !important;
    border-radius: var(--ss-news-radius) !important;

    box-shadow: 0 8px 24px rgba(24, 38, 54, 0.06) !important;

    isolation: isolate;

    transition:
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.ss-news-card:hover,
.ss-news-card:focus-within {
    transform: none !important;
    box-shadow: 0 14px 32px rgba(24, 38, 54, 0.10) !important;
}

/* Mehrfarbiger Rahmen liegt beim Hover um die komplette Karte. */
.ss-news-card::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 50;

    padding: 4px;

    border-radius: inherit;

    background: linear-gradient(
        135deg,
        #e56b5e 0%,
        #f0a42b 20%,
        #d4c62e 40%,
        #7cab45 60%,
        #178ca2 80%,
        #26394d 100%
    );

    opacity: 0;
    pointer-events: none;

    -webkit-mask:
        linear-gradient(#ffffff 0 0) content-box,
        linear-gradient(#ffffff 0 0);
    -webkit-mask-composite: xor;

    mask:
        linear-gradient(#ffffff 0 0) content-box,
        linear-gradient(#ffffff 0 0);
    mask-composite: exclude;

    transition: opacity 0.25s ease;
}

.ss-news-card:hover::after,
.ss-news-card:focus-within::after {
    opacity: 1;
}


/* ---------------------------------------------------------
   08. Quadratische Bildbühne
   --------------------------------------------------------- */

.ss-news-card__stage {
    position: relative;

    display: block;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 1 / 1;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: var(--ss-news-visual-bg);
    border: 0 !important;
    text-decoration: none !important;
}

.ss-news-card__stage:focus-visible {
    outline: 3px solid var(--ss-accent, #e56b5e);
    outline-offset: -4px;
}

.ss-news-card__stage-image {
    position: absolute;
    inset: 0;
    z-index: 1;

    display: block;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    object-fit: cover !important;
    object-position: center !important;

    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
}


/* ---------------------------------------------------------
   09. Alte Hover-Bildebene sicher deaktivieren
   --------------------------------------------------------- */

.ss-news-card__hover,
.ss-news-card__readmore-frame,
.ss-news-card__readmore-label,
.ss-news-card__readmore-arrow,
.ss-news-card__thumb,
.ss-news-card__thumb-image {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
}

.ss-news-card:hover .ss-news-card__stage-image,
.ss-news-card:focus-within .ss-news-card__stage-image {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}


/* ---------------------------------------------------------
   10. Textbereich
   --------------------------------------------------------- */

.ss-news-card__body {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;

    margin: 0 !important;

    padding:
        clamp(16px, 1.05vw, 21px)
        clamp(16px, 1.05vw, 21px)
        clamp(21px, 1.35vw, 27px) !important;

    background: var(--ss-news-surface) !important;
    border: 0 !important;

    text-align: left;
}

.ss-news-card__title {
    display: block !important;
    width: 100% !important;

    margin: 0 0 12px !important;
    padding: 0 !important;

    color: var(--ss-news-title) !important;

    font-family: var(--ss-font-display, "Poppins", Arial, sans-serif) !important;
    font-size: clamp(1.02rem, 0.96vw, 1.18rem) !important;
    font-weight: 600 !important;
    line-height: 1.32 !important;
    letter-spacing: -0.015em !important;

    text-align: left !important;
    hyphens: auto;
}

.ss-news-card__title a,
.ss-news-card__title a:link,
.ss-news-card__title a:visited,
.ss-news-card__title a:hover,
.ss-news-card__title a:focus,
.ss-news-card__link,
.ss-news-card__link:link,
.ss-news-card__link:visited,
.ss-news-card__link:hover,
.ss-news-card__link:focus {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--ss-news-title) !important;
    background: transparent !important;
    border: 0 !important;

    text-decoration: none !important;
    box-shadow: none !important;
}

.ss-news-card__title a::before,
.ss-news-card__title a::after,
.ss-news-card__link::before,
.ss-news-card__link::after {
    content: none !important;
    display: none !important;
}

.ss-news-card__description {
    display: -webkit-box !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    color: var(--ss-news-text) !important;

    font-family: var(--ss-font-body, "Century Gothic", Arial, sans-serif) !important;
    font-size: clamp(0.93rem, 0.82vw, 1rem) !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;

    text-align: left !important;
    hyphens: auto;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

.ss-news-overview .ss-news-card__description {
    -webkit-line-clamp: 5;
    line-clamp: 5;
}


/* ---------------------------------------------------------
   11. Nicht benötigte NOVA-Standardbestandteile
   --------------------------------------------------------- */

.ss-news-card .blog-preview-author,
.ss-news-card .blog-preview-comment,
.ss-news-card .newsbox-footer,
.ss-news-card .blog-preview__meta,
.ss-news-card .blog-preview__footer {
    display: none !important;
}


/* ---------------------------------------------------------
   12. Tablet
   --------------------------------------------------------- */

@media (max-width: 991.98px) {
    section.index-news-wrapper,
.ss-news-overview {
        --ss-news-gap: 18px;
    }

    .ss-news-overview__toolbar {
        align-items: stretch !important;
    }

    .ss-news-overview__pagination {
        justify-content: flex-start;

        margin-top: 14px;
        min-height: 0;
    }

    .ss-news-overview .custom-select,
    .ss-news-overview__filters > [class*="col-"]:first-child .custom-select {
        min-width: 0;
        width: 100%;
    }
}


/* ---------------------------------------------------------
   13. Smartphone
   --------------------------------------------------------- */

@media (max-width: 575.98px) {
    section.index-news-wrapper,
.ss-news-overview {
        --ss-news-radius: 18px;
        --ss-news-gap: 16px;
    }

    section.index-news-wrapper {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    .ss-news-overview-heading {
        margin-bottom: 30px !important;
    }

    .ss-news-overview-heading__title {
        font-size: clamp(1.8rem, 9vw, 2.45rem) !important;
    }

    .ss-news-overview__filters > [class*="col-"] {
        margin-bottom: 10px;
    }

    .ss-news-overview .custom-select {
        height: 52px !important;
    }

    .ss-news-card__body {
        padding: 18px !important;
    }
}


/* ---------------------------------------------------------
   14. Reduzierte Bewegung
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    section.index-news-wrapper,
.ss-news-overview .ss-news-card,
    .ss-news-card::after,
    .ss-news-card__stage-image,
    .ss-news-overview .custom-select {
        transition: none !important;
        transform: none !important;
    }
}