:root {
    --widder-bg: #141823;
    --widder-bg-light: #191e2b;
    --widder-card: #181d29;
    --widder-card-hover: #1c2230;

    --widder-red: #d82c12;
    --widder-red-light: #f13b20;

    --widder-white: #ffffff;
    --widder-text: #f4f4f4;
    --widder-muted: #9da3ae;

    --widder-border: rgba(255, 255, 255, 0.10);
    --widder-border-hover: rgba(216, 44, 18, 0.55);

    --widder-radius: 18px;
}


/* ==========================================================
   BASE
========================================================== */

.widder-ratgeber,
.widder-ratgeber *,
.widder-ratgeber *::before,
.widder-ratgeber *::after {
    box-sizing: border-box !important;
}


.widder-ratgeber {
    position: relative !important;

    width: 100% !important;
    max-width: 1380px !important;

    margin: 0 auto !important;
    padding: 20px 24px 90px !important;

    font-family: "Montserrat", sans-serif !important;

    color: var(--widder-text) !important;
}


/* ==========================================================
   TOOLBAR
========================================================== */

.widder-ratgeber__toolbar {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 28px !important;

    width: 100% !important;

    margin-bottom: 42px !important;
}


/* ==========================================================
   FILTER AREA
========================================================== */

.widder-ratgeber__filter-area {
    min-width: 0 !important;
}


.widder-ratgeber__filter-scroll {
    position: relative !important;

    min-width: 0 !important;
}


.widder-ratgeber__filters {
    display: flex !important;

    align-items: center !important;
    flex-wrap: wrap !important;

    gap: 10px !important;
}


/*
 * Mobile-Hinweise standardmäßig ausblenden.
 * Sie werden erst im Mobile Breakpoint aktiviert.
 */

.widder-ratgeber__filter-edge,
.widder-ratgeber__swipe-hint {
    display: none !important;
}


/* ==========================================================
   FILTER BUTTONS
========================================================== */

.widder-ratgeber__filter {
    appearance: none !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-height: 46px !important;

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

    border: 1px solid var(--widder-border) !important;
    border-radius: 999px !important;

    background: rgba(255, 255, 255, 0.025) !important;

    color: #c8cbd1 !important;

    font-family: "Montserrat", sans-serif !important;

    font-size: 13px !important;
    font-weight: 600 !important;

    line-height: 1 !important;

    cursor: pointer !important;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease !important;
}


.widder-ratgeber__filter:hover {
    color: var(--widder-white) !important;

    border-color: rgba(255, 255, 255, 0.25) !important;

    background: rgba(255, 255, 255, 0.055) !important;

    transform: translateY(-1px) !important;
}


.widder-ratgeber__filter.is-active {
    color: var(--widder-white) !important;

    background: var(--widder-red) !important;

    border-color: var(--widder-red) !important;

    box-shadow:
        0 8px 26px rgba(216, 44, 18, 0.20) !important;
}


/* ==========================================================
   SEARCH
========================================================== */

.widder-ratgeber__search {
    position: relative !important;

    display: flex !important;

    align-items: center !important;

    width: 100% !important;

    max-width: 315px !important;
    min-width: 260px !important;
}


.widder-ratgeber__search svg {
    position: absolute !important;

    left: 18px !important;
    top: 50% !important;

    width: 18px !important;
    height: 18px !important;

    transform: translateY(-50%) !important;

    fill: none !important;

    stroke: #9298a3 !important;

    stroke-width: 1.7 !important;
    stroke-linecap: round !important;

    pointer-events: none !important;

    transition:
        stroke 0.25s ease !important;
}


.widder-ratgeber__search-input {
    appearance: none !important;

    width: 100% !important;
    height: 50px !important;

    margin: 0 !important;

    padding:
        0 18px
        0 50px !important;

    border: 1px solid var(--widder-border) !important;
    border-radius: 999px !important;

    outline: none !important;

    background:
        rgba(255, 255, 255, 0.025) !important;

    color: var(--widder-white) !important;

    font-family: "Montserrat", sans-serif !important;

    font-size: 13px !important;
    font-weight: 500 !important;

    box-shadow: none !important;

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


.widder-ratgeber__search-input::placeholder {
    color: #858b96 !important;

    opacity: 1 !important;
}


.widder-ratgeber__search-input:hover {
    border-color:
        rgba(255, 255, 255, 0.20) !important;
}


.widder-ratgeber__search-input:focus {
    border-color:
        rgba(216, 44, 18, 0.75) !important;

    background:
        rgba(255, 255, 255, 0.04) !important;

    box-shadow:
        0 0 0 3px
        rgba(216, 44, 18, 0.08) !important;
}


.widder-ratgeber__search:focus-within svg {
    stroke:
        var(--widder-red-light) !important;
}


/* ==========================================================
   GRID
========================================================== */

.widder-ratgeber__grid {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 28px !important;

    width: 100% !important;
}


/* ==========================================================
   CARDS
========================================================== */

.widder-ratgeber__card {
    position: relative !important;

    display: flex !important;

    flex-direction: column !important;

    min-width: 0 !important;

    overflow: hidden !important;

    border:
        1px solid
        var(--widder-border) !important;

    border-radius:
        var(--widder-radius) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.025),
            rgba(255, 255, 255, 0.008)
        ),
        var(--widder-card) !important;

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.12) !important;

    transition:
        transform
            0.35s
            cubic-bezier(.2, .8, .2, 1),
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease !important;
}


.widder-ratgeber__card:hover {
    transform:
        translateY(-7px) !important;

    border-color:
        rgba(216, 44, 18, 0.38) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.012)
        ),
        var(--widder-card-hover) !important;

    box-shadow:
        0 28px 65px
            rgba(0, 0, 0, 0.22),
        0 0 35px
            rgba(216, 44, 18, 0.035) !important;
}


.widder-ratgeber__card.is-hidden {
    display: none !important;
}


/* ==========================================================
   CARD IMAGE
========================================================== */

.widder-ratgeber__image {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: 255px !important;

    overflow: hidden !important;

    background: #10141d !important;

    text-decoration: none !important;
}


.widder-ratgeber__image::after {
    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    background:
        linear-gradient(
            180deg,
            rgba(20, 24, 35, 0.03) 35%,
            rgba(20, 24, 35, 0.48) 100%
        ) !important;

    pointer-events: none !important;
}


.widder-ratgeber__image-img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

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

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

    transition:
        transform
            0.65s
            cubic-bezier(.2, .8, .2, 1),
        filter 0.4s ease !important;
}


.widder-ratgeber__card:hover
.widder-ratgeber__image-img {
    transform:
        scale(1.045) !important;
}


/* ==========================================================
   PLACEHOLDER
========================================================== */

.widder-ratgeber__placeholder {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(216, 44, 18, 0.20),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #1c2230,
            #11151f
        ) !important;
}


.widder-ratgeber__placeholder span {
    color:
        rgba(255, 255, 255, 0.32) !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    letter-spacing: 0.14em !important;

    text-transform: uppercase !important;
}


/* ==========================================================
   NEW BADGE
========================================================== */

.widder-ratgeber__new {
    position: absolute !important;

    top: 18px !important;
    right: 18px !important;

    z-index: 3 !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 7px !important;

    padding:
        8px 12px !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.14) !important;

    border-radius: 999px !important;

    background:
        rgba(20, 24, 35, 0.82) !important;

    backdrop-filter:
        blur(10px) !important;

    -webkit-backdrop-filter:
        blur(10px) !important;

    color:
        var(--widder-white) !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    letter-spacing: 0.10em !important;

    text-transform: uppercase !important;

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.18) !important;
}


.widder-ratgeber__new-dot {
    display: block !important;

    width: 6px !important;
    height: 6px !important;

    flex: 0 0 6px !important;

    border-radius: 50% !important;

    background:
        var(--widder-red-light) !important;

    box-shadow:
        0 0 10px
        rgba(241, 59, 32, 0.65) !important;
}


/* ==========================================================
   CATEGORY BADGE
========================================================== */

.widder-ratgeber__category {
    position: absolute !important;

    left: 18px !important;
    bottom: 18px !important;

    z-index: 3 !important;

    display: inline-flex !important;

    align-items: center !important;

    min-height: 31px !important;

    padding:
        0 12px !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.13) !important;

    border-radius: 999px !important;

    background:
        rgba(20, 24, 35, 0.82) !important;

    backdrop-filter:
        blur(10px) !important;

    -webkit-backdrop-filter:
        blur(10px) !important;

    color:
        var(--widder-white) !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    letter-spacing: 0.06em !important;

    text-transform: uppercase !important;
}


/* ==========================================================
   CARD CONTENT
========================================================== */

.widder-ratgeber__content {
    display: flex !important;

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

    padding:
        27px 28px 28px !important;
}


.widder-ratgeber__meta {
    margin:
        0 0 13px !important;

    color:
        var(--widder-muted) !important;

    font-size: 11px !important;
    font-weight: 600 !important;

    line-height: 1.4 !important;

    letter-spacing: 0.07em !important;

    text-transform: uppercase !important;
}


/* ==========================================================
   TITLE
========================================================== */

.widder-ratgeber__title {
    margin:
        0 0 14px !important;

    padding: 0 !important;

    color:
        var(--widder-white) !important;

    font-family:
        "Montserrat",
        sans-serif !important;

    font-size:
        clamp(
            20px,
            1.55vw,
            25px
        ) !important;

    font-weight: 700 !important;

    line-height: 1.22 !important;

    letter-spacing:
        -0.025em !important;
}


.widder-ratgeber__title a {
    color: inherit !important;

    text-decoration: none !important;

    transition:
        color 0.25s ease !important;
}


.widder-ratgeber__card:hover
.widder-ratgeber__title a {
    color: #ffffff !important;
}


/* ==========================================================
   EXCERPT
========================================================== */

.widder-ratgeber__excerpt {
    margin:
        0 0 26px !important;

    padding: 0 !important;

    color: #a8adb6 !important;

    font-family:
        "Montserrat",
        sans-serif !important;

    font-size: 13px !important;
    font-weight: 400 !important;

    line-height: 1.75 !important;
}


/* ==========================================================
   READ MORE
========================================================== */

.widder-ratgeber__link {
    display: inline-flex !important;

    align-items: center !important;

    align-self: flex-start !important;

    gap: 9px !important;

    margin-top: auto !important;

    color:
        var(--widder-white) !important;

    font-family:
        "Montserrat",
        sans-serif !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    letter-spacing: 0.02em !important;

    text-decoration: none !important;

    transition:
        color 0.25s ease !important;
}


.widder-ratgeber__link::before {
    content: "" !important;

    width: 22px !important;
    height: 2px !important;

    background:
        var(--widder-red) !important;

    transition:
        width 0.3s ease !important;
}


.widder-ratgeber__link span {
    display: inline-block !important;

    color:
        var(--widder-red-light) !important;

    font-size: 16px !important;

    transition:
        transform 0.3s ease !important;
}


.widder-ratgeber__card:hover
.widder-ratgeber__link::before {
    width: 31px !important;
}


.widder-ratgeber__card:hover
.widder-ratgeber__link span {
    transform:
        translateX(4px) !important;
}


/* ==========================================================
   MORE BUTTON
========================================================== */

.widder-ratgeber__more-wrap {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    margin-top: 48px !important;
}


.widder-ratgeber__more {
    appearance: none !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 11px !important;

    min-height: 52px !important;

    margin: 0 !important;

    padding:
        0 24px !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.13) !important;

    border-radius: 999px !important;

    background:
        transparent !important;

    color:
        var(--widder-white) !important;

    font-family:
        "Montserrat",
        sans-serif !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    cursor: pointer !important;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease !important;
}


.widder-ratgeber__more:hover {
    border-color:
        var(--widder-red) !important;

    background:
        rgba(216, 44, 18, 0.07) !important;

    transform:
        translateY(-2px) !important;
}


.widder-ratgeber__more span {
    color:
        var(--widder-red-light) !important;

    font-size: 15px !important;

    transition:
        transform 0.25s ease !important;
}


.widder-ratgeber__more:hover span {
    transform:
        translateY(3px) !important;
}


.widder-ratgeber__more-wrap.is-hidden {
    display: none !important;
}


/* ==========================================================
   NO RESULTS
========================================================== */

.widder-ratgeber__no-results {
    width: 100% !important;

    margin-top: 25px !important;

    padding:
        55px 30px !important;

    border:
        1px solid
        var(--widder-border) !important;

    border-radius:
        var(--widder-radius) !important;

    background:
        rgba(255, 255, 255, 0.018) !important;

    text-align: center !important;
}


.widder-ratgeber__no-results[hidden] {
    display: none !important;
}


.widder-ratgeber__no-results strong {
    display: block !important;

    margin-bottom: 8px !important;

    color:
        var(--widder-white) !important;

    font-size: 18px !important;
    font-weight: 700 !important;
}


.widder-ratgeber__no-results span {
    display: block !important;

    color:
        var(--widder-muted) !important;

    font-size: 13px !important;

    line-height: 1.6 !important;
}


/* ==========================================================
   EMPTY
========================================================== */

.widder-ratgeber__empty {
    width: 100% !important;
    max-width: 1380px !important;

    margin:
        0 auto !important;

    padding:
        60px 24px !important;

    color:
        var(--widder-muted) !important;

    font-family:
        "Montserrat",
        sans-serif !important;

    font-size: 14px !important;

    text-align: center !important;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1100px) {

    .widder-ratgeber {
        padding-left:
            22px !important;

        padding-right:
            22px !important;
    }


    .widder-ratgeber__toolbar {
        align-items:
            flex-start !important;

        flex-direction:
            column !important;

        gap: 20px !important;
    }


    .widder-ratgeber__filter-area {
        width: 100% !important;
    }


    .widder-ratgeber__search {
        max-width:
            420px !important;
    }


    .widder-ratgeber__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {

    .widder-ratgeber {
        padding:
            10px 16px
            70px !important;
    }


    .widder-ratgeber__toolbar {
        width: 100% !important;

        margin-bottom:
            30px !important;

        gap: 18px !important;
    }


    /* ======================================================
       MOBILE FILTER AREA
    ====================================================== */

    .widder-ratgeber__filter-area {
        position: relative !important;

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

        min-width: 0 !important;
    }


    .widder-ratgeber__filter-scroll {
        position: relative !important;

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

        min-width: 0 !important;
    }


    /*
     * Die Kategorien liegen auf einer Linie.
     * Horizontal wischen zeigt weitere Kategorien.
     */

    .widder-ratgeber__filters {
        display: flex !important;

        align-items: center !important;

        flex-wrap: nowrap !important;

        gap: 8px !important;

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

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

        /*
         * Rechts etwas Platz für Fade + Pfeil.
         */
        padding:
            2px 48px
            8px 0 !important;

        scrollbar-width:
            none !important;

        -webkit-overflow-scrolling:
            touch !important;

        scroll-snap-type:
            x proximity;
    }


    .widder-ratgeber__filters::-webkit-scrollbar {
        display: none !important;
    }


    .widder-ratgeber__filter {
        flex:
            0 0 auto !important;

        min-height:
            42px !important;

        padding:
            0 16px !important;

        white-space:
            nowrap !important;

        font-size:
            11px !important;

        scroll-snap-align:
            start;
    }


    /* ======================================================
       FADE AM RECHTEN RAND

       Zeigt optisch:
       Hier befinden sich weitere Kategorien.
    ====================================================== */

    .widder-ratgeber__filter-scroll::after {
        content: "" !important;

        position: absolute !important;

        z-index: 3 !important;

        top: 0 !important;
        right: 0 !important;

        width: 62px !important;

        height:
            calc(100% - 8px) !important;

        pointer-events:
            none !important;

        background:
            linear-gradient(
                90deg,
                rgba(20, 24, 35, 0) 0%,
                rgba(20, 24, 35, 0.82) 58%,
                #141823 100%
            ) !important;

        opacity: 1 !important;

        transition:
            opacity
            0.25s ease !important;
    }


    /* ======================================================
       RUNDER PFEIL RECHTS
    ====================================================== */

    .widder-ratgeber__filter-edge {
        position: absolute !important;

        z-index: 4 !important;

        top: 50% !important;
        right: 5px !important;

        display: grid !important;

        place-items:
            center !important;

        width: 27px !important;
        height: 27px !important;

        border:
            1px solid
            rgba(255, 255, 255, 0.12) !important;

        border-radius:
            50% !important;

        background:
            #1a1f2b !important;

        color:
            #ffffff !important;

        pointer-events:
            none !important;

        transform:
            translateY(
                calc(-50% - 4px)
            ) !important;

        box-shadow:
            0 6px 18px
            rgba(0, 0, 0, 0.28) !important;

        opacity: 1 !important;

        transition:
            opacity 0.25s ease,
            transform 0.25s ease !important;
    }


    .widder-ratgeber__filter-edge svg {
        display: block !important;

        width: 12px !important;
        height: 12px !important;

        animation:
            widder-filter-edge-move
            1.5s
            ease-in-out
            infinite !important;
    }


    /* ======================================================
       "WEITERE THEMEN →"
    ====================================================== */

    .widder-ratgeber__swipe-hint {
        display: flex !important;

        align-items: center !important;
        justify-content: flex-end !important;

        gap: 6px !important;

        width:
            max-content !important;

        max-width: 100% !important;

        margin:
            5px 0
            0 auto !important;

        color:
            #8f95a0 !important;

        font-family:
            "Montserrat",
            sans-serif !important;

        font-size:
            10px !important;

        font-weight:
            600 !important;

        line-height:
            1.4 !important;

        letter-spacing:
            0.035em !important;

        pointer-events:
            none !important;

        opacity: 1 !important;

        transition:
            opacity 0.25s ease,
            transform 0.25s ease !important;
    }


    .widder-ratgeber__swipe-hint svg {
        display: block !important;

        width: 14px !important;
        height: 14px !important;

        flex:
            0 0 14px !important;

        color:
            var(--widder-red-light) !important;

        animation:
            widder-filter-hint-move
            1.5s
            ease-in-out
            infinite !important;
    }


    /* ======================================================
       NACH DEM ERSTEN WISCHEN

       JS fügt .is-scrolled hinzu.
    ====================================================== */

    .widder-ratgeber__filter-area.is-scrolled
    .widder-ratgeber__swipe-hint {
        opacity: 0 !important;

        transform:
            translateX(5px) !important;

        visibility:
            hidden !important;
    }


    /* ======================================================
       AM ENDE DER FILTER

       JS fügt .is-end hinzu.
       Dann brauchen wir rechts keinen Hinweis mehr.
    ====================================================== */

    .widder-ratgeber__filter-area.is-end
    .widder-ratgeber__filter-scroll::after {
        opacity: 0 !important;
    }


    .widder-ratgeber__filter-area.is-end
    .widder-ratgeber__filter-edge {
        opacity: 0 !important;

        visibility:
            hidden !important;
    }


    /* ======================================================
       SEARCH
    ====================================================== */

    .widder-ratgeber__search {
        width:
            100% !important;

        max-width:
            none !important;

        min-width:
            0 !important;
    }


    .widder-ratgeber__search-input {
        height:
            48px !important;
    }


    /* ======================================================
       GRID
    ====================================================== */

    .widder-ratgeber__grid {
        grid-template-columns:
            minmax(0, 1fr) !important;

        gap:
            20px !important;
    }


    /* ======================================================
       CARD
    ====================================================== */

    .widder-ratgeber__image {
        height:
            230px !important;
    }


    .widder-ratgeber__content {
        padding:
            23px 22px
            24px !important;
    }


    .widder-ratgeber__title {
        font-size:
            21px !important;
    }


    .widder-ratgeber__excerpt {
        font-size:
            12.5px !important;
    }


    .widder-ratgeber__more-wrap {
        margin-top:
            36px !important;
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 420px) {

    .widder-ratgeber__image {
        height:
            210px !important;
    }


    .widder-ratgeber__category {
        left:
            14px !important;

        bottom:
            14px !important;
    }


    .widder-ratgeber__new {
        top:
            14px !important;

        right:
            14px !important;
    }


    /*
     * Auf sehr kleinen Geräten den Fade etwas schmaler,
     * damit mehr vom Filter sichtbar bleibt.
     */

    .widder-ratgeber__filter-scroll::after {
        width:
            54px !important;
    }


    .widder-ratgeber__filter-edge {
        right:
            4px !important;

        width:
            26px !important;

        height:
            26px !important;
    }

}


/* ==========================================================
   FILTER HINT ANIMATIONS
========================================================== */

@keyframes widder-filter-edge-move {

    0%,
    100% {
        margin-left: 0;
    }

    50% {
        margin-left: 3px;
    }

}


@keyframes widder-filter-hint-move {

    0%,
    100% {
        transform:
            translateX(0);
    }

    50% {
        transform:
            translateX(4px);
    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

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

    .widder-ratgeber *,
    .widder-ratgeber *::before,
    .widder-ratgeber *::after {
        transition:
            none !important;

        animation:
            none !important;
    }

}