.category_icon_row {

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    padding-left: 2rem;

    justify-content: center;
    gap: 2rem;

    > .category_icon {

        transition: filter 0.2s,
                    transform 0.2s;



        &.active       {                  }
        &:not(.active) { cursor: pointer; }

        img { width: 5rem; height: 5rem; }

        &:not(.active):hover {
            transform: scale(1.2, 1.2);
        }
    }

}

@media only screen and (max-width: 45rem) {    /* < 720px */

    .category_icon_row { gap: 0.5rem; padding-left: 0; }

    .category_icon_row > .category_icon img { width: 3.5rem; height: 3.5rem; }

    }

.document_list_title {
    margin: 1rem 0;
    color: var(--col-gold);
    font-size: 2rem;
    font-weight: bold;

    padding-left: 2rem;

    max-width: calc(100vw - 2rem - 2rem);
    overflow-wrap: break-word;
}

.document_list_title1 {
    margin: 2rem 0 0 0;
    color: var(--col-gold);
    font-size: 1.5rem;
    font-weight: bold;

    padding-left: 2rem;

    max-width: calc(100vw - 2rem - 2rem);
    overflow-wrap: break-word;
}

.waermebruecke_header {
    font-size: 1.2rem;
    margin: 1rem;
    padding-left: 2rem;
    font-style: italic;
}

.category_badge_row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    gap: 4px;

    margin-top:    0.5rem;
    margin-bottom: 1.5rem;

    padding-left: 2rem;

    > .category_badge {

        border: 1px solid var(--col-gold);
        color:  var(--col-gold);
        border-radius:  var(--border-radius-small);
        text-decoration: none;
        white-space: pre;
        padding: 4px 12px;
        font-size: 1.1rem;

        &.active {
            border-color: black;
            color: black;
            cursor: default;
        }
    }
}

.category_select_row {
    display: flex;
    gap: 1rem;

    margin-top:    0.5rem;
    margin-bottom: 1.5rem;

    padding-left: 2rem;

    > label {
        align-self: center;
    }

    > select {
        border: 1px solid black;
        color:  black;

        min-width: 20rem;
    }
}

.document_list {

    margin-bottom: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;

    @media only screen and (max-width: 45rem) {  /* 720px */
        grid-template-columns: 1fr;
    }


    gap: 1.5rem;

    .document_card {

        border: 1px solid var(--col-gold);
        border-radius:  var(--border-radius-full);
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        padding: 2rem 2rem;

        .document_icon {
            width: 100%;
            aspect-ratio: 16 / 9;
            max-height: 30rem;
            object-fit: cover;

            border-radius: 20px 20px 20px 20px;;
        }

        .title {
            font-size: 2rem;
            margin: 0;
        }

        .description {
            margin: 0 0 1rem;
            white-space: pre-wrap;
        }

        .download_links {

            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 1rem;

            .dl_link {

                color:  var(--col-gold);
                border: 1px solid var(--col-gold);
                border-radius:  var(--border-radius-small);
                text-decoration: none;
                white-space: pre;
                padding: 2px 10px;

                -webkit-transition: background-color .3s, color .3s;

                &:hover {
                    background-color: var(--col-gold);
                    color: black;
                }
            }

        }

    }

}




.wb_selector {

    display: flex;
    justify-content: center;

    margin-top:    0.5rem;
    margin-bottom: 1.0rem;

    .wb_selector_img {
        position: relative;

        max-width: 100%;

        img {
            width: 100%;
            height: auto;
        }

        .wb_dot {
            position: absolute;

            left: var(--wbx);
            top: var(--wby);
            width: var(--wbw);
            height: var(--wbh);

            border-radius: 100%;

            z-index: 1;

            background-color: var(--col-green);
            opacity: 0.01;

            transform: translate(-50%, -50%);

            transition: transform 0.4s,
                        opacity 0.4s;

            box-shadow: 0 0 4px 0 rgba(50, 50, 50, 0.75);

            &:hover {
                transform: scale(1.25) translate( calc( -1 * 50% / 1.25 )  , calc( -1 * 50% / 1.25 ) );
                opacity: 1;
            }

        }

        .wb_debugdot {

            width:  0;
            height: 0;

            z-index: 2;

            pointer-events: none;

            .dot {
                content: "";
                position: absolute;

                left: calc( var(--wbx) - 2px );
                top: calc( var(--wby) - 2px );
                width: 4px;
                height: 4px;

                background-color: rgba(0, 0, 0, 0.4);
                opacity: 0.65;
                border-radius: 100%;

                z-index: 3;
            }

            .cross1, .cross2 {
                content: "";
                position: absolute;

                left: calc( var(--wbx) + (var(--wbw) / -2.0) );
                top: calc( var(--wby) - 1px );
                width: var(--wbw);
                height: 2px;

                background-color: black;
                opacity: 0.35;

                z-index: 3;

                transform-origin: center;

            }

            .cross1 { transform: rotate( 45deg); }
            .cross2 { transform: rotate(-45deg); }

            .circle {
                content: "";
                position: absolute;

                left: calc( var(--wbx) + (var(--wbw) / -2.0) );
                top: calc( var(--wby) + (var(--wbh) / -2.0) );
                width: var(--wbw);
                height: var(--wbh);

                background-color: transparent;
                border: 1px solid black;
                border-radius: 100%;
                box-sizing: border-box;

                z-index: 3;

                transform-origin: center;
            }

        }

    }
}

#root:not([data-show-debugbar="1"]) .wb_selector .wb_selector_img .wb_debugdot {
    display: none;
}