/*
         * =====================================================
         * ABZEICHEN-BEREICH
         * =====================================================
         */

        .sisc-badges-profile-section {

            --sisc-text:
                #20242b;

            --sisc-text-hell:
                #68707c;

            --sisc-linie:
                #e1e5ea;

            --sisc-flaeche:
                #f5f7fa;

            position:
                relative;

            width:
                100%;

            margin:
                0;

            border:
                1px solid
                var(--sisc-linie);

            border-radius:
                14px;

            background:
                #ffffff;

            box-sizing:
                border-box;

            /*
             * Wichtig:
             * nicht abschneiden.
             */
            overflow:
                visible;
        }


        /*
         * =====================================================
         * ALLE CONTAINER DÜRFEN TOOLTIP ZEIGEN
         * =====================================================
         */

        .sisc-badges-profile-section[open],
        .sisc-badges-profile-content,
        .sisc-badges-profile-group,
        .sisc-badges-profile-grid,
        .sisc-badges-profile-item,
        .sisc-badges-image-wrap {

            overflow:
                visible !important;
        }


        /*
         * =====================================================
         * SUMMARY
         * =====================================================
         */

        .sisc-badges-profile-section
        > .sisc-v7-summary {

            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

            gap:
                18px;

            margin:
                0;

            padding:
                20px 24px;

            cursor:
                pointer;

            list-style:
                none;

            user-select:
                none;
        }


        .sisc-badges-profile-section
        > .sisc-v7-summary::-webkit-details-marker {

            display:
                none;
        }


        .sisc-badges-profile-section[open]
        > .sisc-v7-summary {

            border-bottom:
                1px solid
                var(--sisc-linie);
        }


        .sisc-badges-summary-title {

            display:
                flex;

            align-items:
                baseline;

            flex-wrap:
                wrap;

            gap:
                8px;

            color:
                var(--sisc-text);

            font-size:
                clamp(
                    21px,
                    3vw,
                    28px
                );

            font-weight:
                700;
        }


        .sisc-badges-summary-title small {

            color:
                var(--sisc-text-hell);

            font-size:
                12px;

            font-weight:
                600;
        }


        /*
         * =====================================================
         * PFEIL
         * =====================================================
         */

        .sisc-badges-profile-section
        > .sisc-v7-summary
        > .sisc-v7-pfeil {

            width:
                11px;

            height:
                11px;

            border-right:
                2px solid
                var(--sisc-text-hell);

            border-bottom:
                2px solid
                var(--sisc-text-hell);

            transform:
                rotate(45deg);

            transition:
                transform 0.2s ease;
        }


        .sisc-badges-profile-section[open]
        > .sisc-v7-summary
        > .sisc-v7-pfeil {

            transform:
                rotate(225deg);
        }


        /*
         * =====================================================
         * INHALT
         * =====================================================
         */

        .sisc-badges-profile-content {

            display:
                grid;

            gap:
                25px;

            padding:
                24px;

            position:
                relative;

            z-index:
                1;
        }


        .sisc-badges-profile-group {

            position:
                relative;

            z-index:
                1;
        }


        .sisc-badges-profile-group-title {

            margin:
                0 0 10px;

            color:
                var(--sisc-text-hell);

            font-size:
                12px;

            font-weight:
                700;

            text-transform:
                uppercase;
        }


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

        .sisc-badges-profile-grid {

            display:
                grid;

            grid-template-columns:
                repeat(
                    auto-fill,
                    minmax(
                        92px,
                        1fr
                    )
                );

            gap:
                9px;

            position:
                relative;

            z-index:
                1;
        }


        /*
         * =====================================================
         * KARTE
         * =====================================================
         */

        .sisc-badges-profile-item {

            position:
                relative;

            z-index:
                1;

            min-width:
                0;

            padding:
                8px 5px 7px;

            border:
                1px solid
                var(--sisc-linie);

            border-radius:
                9px;

            background:
                var(--sisc-flaeche);

            text-align:
                center;

            box-sizing:
                border-box;
        }


        /*
         * Ganz wichtig:
         * aktive Karte nach ganz vorne.
         */

        .sisc-badges-profile-item:hover,
        .sisc-badges-profile-item:focus-within {

            z-index:
                999999;
        }


        .sisc-badges-profile-item.sisc-badge-earned {

            border-color:
                rgba(
                    185,
                    137,
                    21,
                    0.38
                );

            background:
                #fffdf5;
        }


        /*
         * =====================================================
         * KLEINES BILD
         * =====================================================
         */

        .sisc-badges-image-wrap {

            position:
                relative;

            display:
                inline-block;

            z-index:
                2;

            cursor:
                help;
        }


        .sisc-badges-profile-image {

            display:
                block;

            width:
                60px;

            height:
                auto;

            margin:
                0 auto;
        }


        .sisc-badge-not-earned
        .sisc-badges-profile-image {

            opacity:
                0.72;
        }


        /*
         * =====================================================
         * HAKEN
         * =====================================================
         */

        .sisc-badges-earned-mark {

            position:
                absolute;

            right:
                -3px;

            bottom:
                1px;

            display:
                inline-flex;

            align-items:
                center;

            justify-content:
                center;

            width:
                19px;

            height:
                19px;

            border:
                2px solid
                #ffffff;

            border-radius:
                50%;

            color:
                #ffffff;

            background:
                #1d7a40;

            font-size:
                10px;

            font-weight:
                800;
        }


        /*
         * =====================================================
         * TITEL
         * =====================================================
         */

        .sisc-badges-profile-caption {

            margin-top:
                5px;
        }


        .sisc-badges-profile-title {

            color:
                var(--sisc-text);

            font-size:
                10px;

            font-weight:
                700;

            line-height:
                1.25;
        }


        /*
         * =====================================================
         * TOOLTIP
         * =====================================================
         */

        .sisc-badges-tooltip {

            position:
                absolute;

            z-index:
                2147483000;

            left:
                50%;

            bottom:
                calc(
                    100% + 14px
                );

            display:
                block;

            width:
                min(
                    340px,
                    88vw
                );

            padding:
                14px;

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

            border-radius:
                14px;

            color:
                #ffffff;

            background:
                #252a32;

            box-shadow:
                0 16px 45px
                rgba(
                    0,
                    0,
                    0,
                    0.35
                );

            box-sizing:
                border-box;

            opacity:
                0;

            visibility:
                hidden;

            transform:
                translateX(-50%)
                translateY(6px);

            transition:
                opacity 0.15s ease,
                visibility 0.15s ease,
                transform 0.15s ease;

            pointer-events:
                none;
        }


        /*
         * =====================================================
         * TOOLTIP-PFEIL
         * =====================================================
         */

        .sisc-badges-tooltip::after {

            content:
                "";

            position:
                absolute;

            top:
                100%;

            left:
                50%;

            border:
                7px solid
                transparent;

            border-top-color:
                #252a32;

            transform:
                translateX(-50%);
        }


        /*
         * =====================================================
         * TOOLTIP BILD
         * =====================================================
         */

        .sisc-badges-tooltip-image-area {

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            width:
                100%;

            margin-bottom:
                12px;
        }


        .sisc-badges-tooltip-image {

            display:
                block;

            width:
                auto;

            max-width:
                300px;

            height:
                auto;

            max-height:
                300px;

            margin:
                0 auto;

            object-fit:
                contain;
        }


        /*
         * =====================================================
         * TOOLTIP TEXT
         * =====================================================
         */

        .sisc-badges-tooltip-content {

            display:
                block;

            padding-top:
                11px;

            border-top:
                1px solid
                rgba(
                    255,
                    255,
                    255,
                    0.15
                );
        }


        .sisc-badges-tooltip-title {

            display:
                block;

            margin-bottom:
                6px;

            color:
                #ffffff;

            font-size:
                16px;

            font-weight:
                700;
        }


        .sisc-badges-tooltip-description {

            display:
                block;

            max-width:
                300px;

            margin:
                0 auto;

            color:
                #e4e7eb;

            font-size:
                12px;

            line-height:
                1.5;
        }


        .sisc-badges-tooltip-earned {

            display:
                inline-block;

            margin-top:
                10px;

            padding:
                5px 10px;

            border-radius:
                20px;

            color:
                #c9f5d7;

            background:
                rgba(
                    29,
                    122,
                    64,
                    0.20
                );

            font-size:
                11px;

            font-weight:
                700;
        }


        .sisc-badges-tooltip-locked {

            display:
                inline-block;

            margin-top:
                10px;

            padding:
                5px 10px;

            border-radius:
                20px;

            color:
                #d8dce2;

            background:
                rgba(
                    255,
                    255,
                    255,
                    0.08
                );

            font-size:
                11px;

            font-weight:
                600;
        }


        /*
         * =====================================================
         * TOOLTIP EINBLENDEN
         * =====================================================
         */

        .sisc-badges-image-wrap:hover
        .sisc-badges-tooltip,

        .sisc-badges-image-wrap:focus
        .sisc-badges-tooltip,

        .sisc-badges-image-wrap:focus-within
        .sisc-badges-tooltip {

            opacity:
                1;

            visibility:
                visible;

            transform:
                translateX(-50%)
                translateY(0);
        }


        /*
         * =====================================================
         * ERSTE REIHE NACH UNTEN
         * =====================================================
         */

        .sisc-badges-profile-grid
        .sisc-badges-profile-item:nth-child(-n+10)
        .sisc-badges-tooltip {

            top:
                calc(
                    100% + 14px
                );

            bottom:
                auto;

            transform:
                translateX(-50%)
                translateY(-6px);
        }


        .sisc-badges-profile-grid
        .sisc-badges-profile-item:nth-child(-n+10)
        .sisc-badges-tooltip::after {

            top:
                auto;

            bottom:
                100%;

            border-top-color:
                transparent;

            border-bottom-color:
                #252a32;
        }


        .sisc-badges-profile-grid
        .sisc-badges-profile-item:nth-child(-n+10)
        .sisc-badges-image-wrap:hover
        .sisc-badges-tooltip,

        .sisc-badges-profile-grid
        .sisc-badges-profile-item:nth-child(-n+10)
        .sisc-badges-image-wrap:focus
        .sisc-badges-tooltip,

        .sisc-badges-profile-grid
        .sisc-badges-profile-item:nth-child(-n+10)
        .sisc-badges-image-wrap:focus-within
        .sisc-badges-tooltip {

            transform:
                translateX(-50%)
                translateY(0);
        }


        /*
         * =====================================================
         * MOBIL
         * =====================================================
         */

        @media screen and (max-width: 767px) {

            .sisc-badges-profile-section
            > .sisc-v7-summary {

                padding:
                    16px 14px;
            }


            .sisc-badges-profile-content {

                padding:
                    14px 10px;
            }


            .sisc-badges-profile-grid {

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

                gap:
                    7px;
            }


            .sisc-badges-profile-image {

                width:
                    54px;
            }


            .sisc-badges-tooltip {

                width:
                    min(
                        300px,
                        90vw
                    );

                padding:
                    12px;
            }


            .sisc-badges-tooltip-image {

                max-width:
                    250px;

                max-height:
                    250px;
            }
        }


        @media screen and (max-width: 430px) {

            .sisc-badges-profile-image {

                width:
                    50px;
            }


            .sisc-badges-tooltip {

                width:
                    min(
                        285px,
                        92vw
                    );
            }


            .sisc-badges-tooltip-image {

                max-width:
                    230px;

                max-height:
                    230px;
            }
        }

/*
 * =====================================================
 * TOOLTIP-STACKING FIX
 * =====================================================
 *
 * Wichtig:
 * Nicht nur das einzelne Abzeichen, sondern auch seine
 * komplette Gruppe muss über den nachfolgenden Gruppen liegen.
 */


/*
 * Die normalen Gruppen bekommen keine feste Stapelhöhe.
 */
.sisc-badges-profile-content,
.sisc-badges-profile-group,
.sisc-badges-profile-grid {

    z-index:
        auto !important;

    overflow:
        visible !important;
}


/*
 * Jede Gruppe braucht position: relative,
 * damit sie bei Hover nach vorne geholt werden kann.
 */
.sisc-badges-profile-group {

    position:
        relative;
}


/*
 * Sobald sich die Maus irgendwo über einer Gruppe befindet,
 * wird die KOMPLETTE Gruppe über alle anderen Gruppen gelegt.
 */
.sisc-badges-profile-group:hover,
.sisc-badges-profile-group:focus-within {

    z-index:
        1000000 !important;
}


/*
 * Das Raster innerhalb der aktiven Gruppe ebenfalls
 * nach vorne holen.
 */
.sisc-badges-profile-group:hover
.sisc-badges-profile-grid,

.sisc-badges-profile-group:focus-within
.sisc-badges-profile-grid {

    position:
        relative;

    z-index:
        1000001 !important;
}


/*
 * Aktive Abzeichen-Karte.
 */
.sisc-badges-profile-item:hover,
.sisc-badges-profile-item:focus-within {

    position:
        relative;

    z-index:
        1000002 !important;
}


/*
 * Tooltip selbst ganz nach vorne.
 */
.sisc-badges-tooltip {

    z-index:
        1000003 !important;

    max-height:
        none;
}


/*
 * Alle relevanten Eltern dürfen nichts abschneiden.
 */
.sisc-badges-profile-section,
.sisc-badges-profile-section[open],
.sisc-badges-profile-content,
.sisc-badges-profile-group,
.sisc-badges-profile-grid,
.sisc-badges-profile-item,
.sisc-badges-image-wrap {

    overflow:
        visible !important;
}