/****** font-face Mark*****/
/* normal */
@font-face {
    font-family: "Mark";
    font-display: swap;
    font-weight: 400;
    src: url("/jakarta.faces.resource/MarkPro.ttf.xhtml?ln=font") format("truetype"),
    url("/jakarta.faces.resource/MarkW05-Regular.woff.xhtml?ln=font") format("woff"),
    url("/jakarta.faces.resource/MarkW05-Regular.woff2.xhtml?ln=font") format("woff2");
}

/* bold */
@font-face {
    font-family: "Mark";
    font-display: swap;
    font-weight: 700;
    src: url("/jakarta.faces.resource/MarkPro-Bold.ttf.xhtml?ln=font") format("truetype"),
    url("/jakarta.faces.resource/MarkW07-Bold.woff.xhtml?ln=font") format("woff"),
    url("/jakarta.faces.resource/MarkW07-Bold.woff2.xhtml?ln=font") format("woff2");
}

html {
    scroll-behavior: smooth;
}

/* Variablen */
body {
    /* Farben */
    /*Brand-Farben*/
    --white: #fff;
    --black: #000;
    --brand-red: #da1f3d;
    --brand-grey: #c2c4c6;
    --grey-0: #626262;
    --grey-4: #e9e9e9;
    --grey-80: #555555;
    --grey-92: #323234;
    --grey-60: #888888;
    --grey-20: #dadbdd;
    --grey-10: #f2f2f2;
    --ui-grey-60: var(--grey-80);
    --ocean-blue: #003366;
    --primary-text: #313131;
    --secondary-blueish-1: var(--grey-10);

    /* Secondary-Farben */
    --secondary-red: #a6182f;

    /* Tabellen-Tags */
    --green-neu: #7fc768;
    --blue-webinar: #65c3cf;
    --yellow-elearning: #f4b865;

    /* Ampel-Farben */
    --green-ampel: #17ab07;
    --red-ampel: var(--brand-red);
    --yellow-ampel: #ec9600;
}

body {
    hyphens: auto;
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    font-family: "Mark", sans-serif;
    color: var(--black);
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* loading spinner */
#faces-ajax-overlay {
    display: none;
    z-index: calc(99999999 + 1); /* Sit on top.. also for focussed elements */
    left: 0;
    top: 0;
    position: fixed;
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0); /* Black fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/opacity */

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

    img {
        width: min(10rem, 50svw);
        height: auto;
    }
}

body.faces-ajax-busy #faces-ajax-overlay {
    display: flex;
}

/* loading spinner end */

/* Disabled */
.disabled {
    opacity: 0.65;
}

/* Schriften Desktop*/
.regular {
    font-weight: 400;
}

b,
.bold {
    font-weight: 700;
}

h1, .h1 {
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 1.5;
}

h2, .h2 {
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.5;
}

h3, .h3 {
    font-size: 1.5rem;
    line-height: 1.5;
}

.p {
    font-size: 1rem;
    line-height: 1.5;
}

.fs-7 {
    font-size: 0.85rem !important;
}

.fs-8 {
    font-size: 0.75rem !important;
}

a {
    text-decoration: none;
    color: var(--black);
    border-bottom: 1px solid var(--brand-grey);

    &:hover {
        border-bottom: 1px solid var(--black);
        color: var(--black);
    }

    &:focus {
        color: var(--brand-red);
    }

    &:active {
        border-bottom: 1px solid var(--brand-red);
        color: var(--brand-red);
    }

    &.disabled {
        --clr-disabled-link: #8D8E91;
        cursor: not-allowed;
        color: var(--clr-disabled-link);
        text-decoration: none !important;

        &:hover {
            border-bottom: 1px solid var(--clr-disabled-link);
        }
    }
}

ul {
    list-style: none;
}

a.link-extern {
    display: inline-flex;
    align-items: center;

    &::after {
        content: "";
        background-image: url("/jakarta.faces.resource/arrow-up-black.svg.xhtml?ln=images");
        background-repeat: no-repeat;
        background-size: cover;
        height: 0.75rem;
        width: 0.75rem;
        display: block;
        margin-left: 0.5rem;
    }

    &:hover {
        border-bottom: 1px solid var(--black);
        color: var(--black);
    }

    &:focus {
        color: var(--brand-red);
        border-bottom: 1px solid var(--brand-red);

        &::after {
            content: "";
            background-image: url("/jakarta.faces.resource/arrow-up-brand-red.svg.xhtml?ln=images");
        }
    }

    &:active {
        border-bottom: 1px solid var(--brand-red);
        color: var(--brand-red);

        &::after {
            content: "";
            background-image: url("/jakarta.faces.resource/arrow-up-brand-red.svg.xhtml?ln=images");
        }
    }
}

.inputlabel {
    font-style: normal;
    font-size: 0.75rem;
    line-height: 1.5;
}

.errormessage {
    display: block;
    color: var(--Secondary-Hibiscus);
}

[aria-invalid="true"] {
    outline: 2px solid var(--Secondary-Hibiscus);
}

/* Übergreifend Desktop */
.container {
    max-width: 1440px !important;
    padding: 5rem;

    .seminar-tbl-container {
        padding-top: 80px;
        padding-bottom: 0;
    }

    .pagination-container {
        padding-top: 1.5rem;
        padding-bottom: 5rem;
    }
}

.container-fluid {
    padding: 0;
}

/* Focus and hover Desktop */
*:focus {
    outline: none;
    text-decoration: none;
}

/* Teasertextbild-Ausblendung nur auf Detailseite */

a:focus,
button:focus,
input:focus,
select:focus {
    text-decoration: none;
    z-index: 99999999;
    outline: 3px solid var(--black) !important;

}

.flex-0 {
    flex: 0 !important;
}

.flex-1-5 {
    flex: 1.5 !important;
}

/* Buttons und Links Desktop */

/* Button Filter Löschen Desktop */
.btn-filter-delete {
    display: inline-flex;
    align-items: center;
    background-color: var(--grey-80);
    color: var(--white);
    border-radius: 3rem;
    border: none;
    padding: 0.625rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    text-align: start;

    & svg {
        width: 0.875rem;
        height: 0.875rem;
        fill: var(--white);
        margin-right: 0.625rem;
        flex-shrink: 0;
    }

    &:hover svg,
    &:focus svg {
        stroke: var(--white);
        stroke-width: 0.063rem;
    }
}

.btn-filter-delete-list {
    /*margin-bottom: 0;*/
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;


    & li {
        /*display: inline-flex;*/
        /*margin-right: 1rem;*/
        margin-bottom: 1rem;

        /*&:last-child {*/
        /*    margin-right: 0;*/
        /*}*/
    }
}

/* Filter zurücksetzen Desktop */
.btn-filter-reset {
    display: inline-flex;
    align-items: center;
    background-color: transparent;
    color: var(--brand-red);
    line-height: 1.5;
    text-align: start;
    border: none;

    & svg {
        width: 0.875rem;
        height: 0.875rem;
        fill: var(--brand-red);
        margin-right: 0.625rem;
        flex-shrink: 0;
    }

    &:hover,
    &:focus {
        text-decoration: underline;
    }

    &:hover svg,
    &:focus svg {
        stroke: var(--brand-red);
        stroke-width: 0.063rem;
    }
}

/* Button Rot */
.btn-red, input[type="file"]::file-selector-button {
    background-color: var(--brand-red);
    padding: 0.5rem 1rem;
    border-radius: 3.5rem;
    border: 1px solid var(--brand-red);
    align-items: center;
    gap: 0.813rem;
    color: var(--white);
    font-weight: 700;

    &:hover,
    &:focus {
        background-color: var(--white);
        border: 1px solid var(--brand-red);
        color: var(--brand-red);

        .table-arrow-icon {
            fill: var(--brand-red);
        }
    }

    &:disabled, &.disabled {
        background-color: var(--grey-80);
        border: none;

        &:hover, &:focus {
            background-color: var(--grey-80);
            color: var(--white);
        }
    }

    /* mit Pfeil */

    &.btn-next {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;

        &::after {
            content: "";
            display: inline-flex;
            background-image: url("/jakarta.faces.resource/right-arrow-white.svg.xhtml?ln=images");
            background-repeat: no-repeat;
            background-size: 0.875rem;
            height: 0.875rem;
            width: 0.875rem;
        }

        &:hover::after,
        &:focus::after {
            background-image: url("/jakarta.faces.resource/arrow-right-red.svg.xhtml?ln=images");
        }
    }

    &.btn-prev {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;

        &::before {
            content: "";
            display: inline-flex;
            background-image: url("/jakarta.faces.resource/left-arrow-white.svg.xhtml?ln=images");
            background-repeat: no-repeat;
            background-size: 0.875rem;
            height: 0.875rem;
            width: 0.875rem;
        }

        &:hover::before,
        &:focus::before {
            background-image: url("/jakarta.faces.resource/arrow-left-red.svg.xhtml?ln=images");
        }
    }

}

input[type="file"]::file-selector-button {
    margin-right: 1rem;
}

input[type="file"]::file-selector-button:hover {
    background-color: var(--white);
    border: 1px solid var(--brand-red);
    color: var(--brand-red);
}

.selection-dropdown {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Button sortieren */
.btn-sort {
    position: relative;
    color: var(--grey-80);
    background-color: var(--white);
    padding: 0.5rem 3rem 0.5rem 1rem;
    border-radius: 3.5rem;
    border: 1px solid var(--grey-80);
    align-items: center;
    font-weight: 700;
    margin-bottom: 1rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /*background: url("/jakarta.faces.resource/icon _chevron-down_grey.svg.xhtml?ln=images");*/
    /*background-repeat: no-repeat;*/
    /*background-position: right center;*/
    /*background-position-x: 92%;*/
    /*background-size: 1rem;*/
    cursor: pointer;
    /* JavaScript-Object */
    width: 100%;
    max-width: 18rem;

    /*    height: 30px; */
    text-align: center;

    &:after {
        content: "";
        background-image: url("/jakarta.faces.resource/icon _chevron-down_grey.svg.xhtml?ln=images");
        background-repeat: no-repeat;
        background-size: contain;
        width: 14px;
        height: 10px;
        top: 38%;
        position: absolute;
        right: 1rem;
    }

    &[aria-expanded="true"] {
        background-color: var(--brand-red);
        border: 1px solid var(--brand-red);
        color: var(--white);

        &::after {
            content: "";
            background-image: url("/jakarta.faces.resource/icon _chevron-down_white.svg.xhtml?ln=images");
            background-repeat: no-repeat;
            background-size: contain;
            width: 14px;
            height: 10px;
            position: absolute;
            right: 1rem;
            top: 38%;
            transform: rotateX(-180deg);
            /*      top: 50%;
        transform: translateY(-50%); */
            pointer-events: none;
            border: none;
        }
    }

    &:hover,
    &:focus {
        /*background: url("/jakarta.faces.resource/icon _chevron-down_white.svg.xhtml?ln=images");*/
        /*background-position: right center;*/
        /*background-repeat: no-repeat;*/
        /*background-position-x: 92%;*/
        /*background-size: 1rem;*/
        background-color: var(--brand-red);
        border: 1px solid var(--brand-red);
        color: var(--white);

        &:after {
            content: "";
            background-image: url("/jakarta.faces.resource/icon _chevron-down_white.svg.xhtml?ln=images");
            background-repeat: no-repeat;
            background-size: contain;
            width: 14px;
            height: 8.5px;
            top: 38%;
            position: absolute;
            right: 1rem;
        }
    }

    /*&::after {
        content: "" !important;
        background-image: url("/jakarta.faces.resource/icon _chevron-down_white.svg.xhtml?ln=images");
        background-repeat: no-repeat;
        background-size: contain;
        width: 14px;
        height: 8.5px;
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
    }*/

    & option {
        font-family: "Mark", sans-serif;
        appearance: none;
        /* Browser-Standardstil entfernen */
        -webkit-appearance: none;
        /* Für Chrome und Safari */
        -moz-appearance: none;
        /* Für Firefox */
        color: var(--grey-80);
        border: 1px solid var(--brand-red);
        font-weight: 700;
        background-color: var(--white);
    }
}

/* JavaScript Object */

.select-options {
    position: absolute;
    margin-top: 3.25rem;
    z-index: 1000;
}

.select-option {
    color: var(--grey-80);
    border: 1px solid var(--brand-red);
    font-weight: 700;
    background-color: var(--white);
    /*  width: 100%; */
    /*  max-width: 14.063rem; */
    width: 16rem;
    text-align: center;
    padding: 0.5rem 1rem;

    &:hover {
        background-color: var(--brand-red);
        color: white;
    }

    &:focus {
        outline: 3px solid var(--black) !important;
    }
}

.select-option:first-child {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.select-option:last-child {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}


.dropdown-toggle {
    &::after {
        font-size: 1.25em;
    }

    &[aria-expanded="true"]::after {
        border-top: 0;
        border-right: .3em solid transparent;
        border-bottom: .3em solid;
        border-left: .3em solid transparent;
    }
}


/* Button Merkliste */
.btn-bookmark {
    padding: 0 0.5rem;

    & svg {
        height: 1.25rem;
        width: 1rem;
        fill: var(--white);
        stroke: var(--brand-red);
        stroke-width: 2px;

        /* sizing for details page */

        &.h1 {
            padding: 0;
            --ratio: calc(19 / 22);
            --height: 1em;
            height: var(--height);
            margin-top: .125em;
            width: calc(var(--height) * var(--ratio));
        }
    }

    &:hover svg,
    &:focus svg {
        fill: var(--brand-red);
    }
}

.btn-bookmark.active {
    padding: 0 0.5rem;

    & svg {
        height: 1.25rem;
        width: 1rem;
        fill: var(--brand-red);
        stroke: var(--brand-red);
        stroke-width: 2px;

        /* sizing for details page */

        &.h1 {
            padding: 0;
            --ratio: calc(19 / 22);
            --height: 1em;
            height: var(--height);
            margin-top: .125em;
            width: calc(var(--height) * var(--ratio));
        }
    }

    &:hover svg,
    &:focus svg {
        fill: var(--white);
    }
}

.table-arrow-icon {
    width: 0.875rem;
    height: 0.875rem;
    fill: var(--white);
}

/* Header Desktop */
header .container {
    padding: 0;
}

/* Navigation Desktop */
.navigation {
    background-color: var(--brand-red);
    padding: 0;

    & .navbar-collapse {
        background-color: var(--brand-red);
    }

    & .nav-link {
        text-decoration: none;
        color: var(--white);
        padding: 1.25rem 1.5rem !important;
        display: flex;
        align-items: center;

        &:hover {
            color: var(--white);
        }
    }

    & .nav-item {
        &.item, &.dropdown {
            justify-content: center;
            align-items: center;
            font-weight: 700;
            color: var(--white);
            position: relative;

            & a {
                color: var(--white);

                &:hover,
                &:focus {
                    background-color: var(--secondary-red);
                }

                height: 100%;
            }

            & .dropdown-menu {
                background-color: var(--brand-red);
                padding-top: 0;
                padding-bottom: 0;
                min-width: 100%;

                & .dropdown-divider {
                    margin-top: 0;
                    margin-bottom: 0;
                }

                & .dropdown-item {
                    padding: .75rem;
                    font-weight: inherit;

                    &:not(:hover) {
                        border-bottom: 1px solid transparent;
                    }
                }
            }

            &::after {
                content: "";
                border-right: 1px solid var(--white);
                height: 100%;
                position: absolute;
                right: 0;
                top: 0;
                display: inline-block;
                opacity: 0.5;
            }
        }
    }

    & button {
        background-color: var(--brand-red);
        border: none;
        padding: 1.25rem 1.5rem;
        border-left: 1px solid var(--brand-red);
        border-right: 1px solid var(--brand-red);

        & .menu-icon,
        & .bookmark,
        & .shop-icon {
            fill: var(--white);
            stroke: none;
        }

        &:hover {
            background-color: var(--secondary-red);
            border-left: 1px solid rgba(255, 255, 255, 0.5);
            border-right: 1px solid rgba(255, 255, 255, 0.5);
            right: 0;
            top: 0;
            display: inline-block;
        }
    }
}

/* Banner-Bild Desktop*/
.teaser-container {
    padding: 0;

    & .hero-teaser {
        position: relative;

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

        & .hero-teaser-text {
            width: 100%;
            max-width: 33rem;
            position: absolute;
            bottom: 2rem;
            left: 10rem;
            background-color: var(--brand-red);
            border-radius: 0.5rem;
            padding: 1.55rem;
            color: var(--white);

            & .hero-head {
                line-height: 1.1;
            }
        }
    }
}

/* Erweiterte Suche / Filter Desktop */

.wrapper-filter {
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* Button Collapse */

    & .btn-collapse-search {
        color: var(--black);
        width: fit-content;
        align-self: center;

        & svg {
            fill: var(--black);
            transform: rotate(180deg);
        }

        &.collapsed {
            & svg {
                transform: rotate(0deg);
            }
        }
    }

    /* div Collapse */
    /* Dropdown Buttons */

    & .btn-list-filter {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

    & .dropdown {
        & .dropdown-menu {
            border: none;
            background-color: transparent;

            /*       overflow-y: scroll;
            max-height: 14.063rem;
 */

            & ul {
                overflow-y: scroll;
                max-height: 14.063rem;
                margin-bottom: 0.626rem;
            }

            & li {
                padding: 0.5rem 1rem;
                border: 1px solid var(--brand-red);
                background-color: var(--white);
                min-width: 15rem;
                border-bottom: none;

                &:first-child {
                    border-radius: 1rem 1rem 0 0;
                }

                &:nth-last-child(2) {
                    border-radius: 0 0 1rem 1rem;
                    border-bottom: 1px solid var(--brand-red);
                    /*border-top: none;*/
                }

                &:first-child:nth-last-child(2) {
                    border-radius: 1rem 1rem 1rem 1rem;
                    border-bottom: 1px solid var(--brand-red);
                }

                &:last-child {
                    border: none;
                    background-color: transparent;
                }
            }
        }

        .dropdown-toggle {
            padding-right: 2.5rem !important;
            margin-bottom: 3px; /* added for visible outline on focus */

            &::after {
                content: "";
                background-image: url("/jakarta.faces.resource/icon _chevron-down_white.svg.xhtml?ln=images");
                background-repeat: no-repeat;
                background-size: contain;
                width: 14px;
                height: 8.5px;
                position: absolute;
                right: 1rem;
                top: 50%;
                transform: translateY(-50%);
                pointer-events: none;
                border: none;
            }

            &[aria-expanded="true"] {
                &::after {
                    content: "";
                    background-image: url("/jakarta.faces.resource/icon _chevron-down_white.svg.xhtml?ln=images");
                    background-repeat: no-repeat;
                    background-size: contain;
                    width: 14px;
                    height: 10px;
                    position: absolute;
                    right: 1rem;
                    top: 38%;
                    transform: rotateX(-180deg);
                    /*      top: 50%;
                transform: translateY(-50%); */
                    pointer-events: none;
                    border: none;
                }
            }

            &:hover::after,
            &:focus::after {
                background-image: url("/jakarta.faces.resource/icon _chevron-down_red.svg.xhtml?ln=images");
                appearance: none !important;
            }
        }

        /* Dropdown-Filter-Button */
        /*.filter-btn {
            display: inline-flex;
            align-items: center;
            flex-shrink: 0;
            background-color: var(--grey-80);
            color: var(--white);
            padding: 0.5rem 1rem;
            border-radius: 3.5rem;
            gap: 0.813rem;
            border: none;
            font-weight: 700;
            border: 1px solid var(--white);

            &:hover {
                background-color: var(--white);
                border: 1px solid var(--brand-red);
                color: var(--brand-red);
            }

            &::after {
                content: "";
                display: inline-flex;
                background-image: url("/jakarta.faces.resource/right-arrow-white.svg.xhtml?ln=images");
                background-repeat: no-repeat;
                background-size: 0.875rem;
                height: 0.875rem;
                width: 0.875rem;
            }

            &:hover::after {
                background-image: url("/jakarta.faces.resource/arrow-right-red.svg.xhtml?ln=images");
            }
        }*/
    }

    &.justify-content-start {
        .btn-list-filter {
            justify-content: start;
        }

        .btn-collapse-search {
            justify-content: start;
            align-self: unset;
        }
    }


    ul.car-facet-menu--scrollable {
        > li:has(ul) {
            padding: 0 !important;
            overflow: hidden !important;

            > ul {
                padding: 0 !important;
                margin: 0;
            !important;
                overflow-y: auto !important;

                > li {
                    border: none !important;
                    border-radius: 0 !important;
                }

                > li:not(:last-child) {
                    border-bottom: 1px solid var(--brand-red) !important;
                }
            }

        }
    }
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    background-color: var(--grey-80);
    color: var(--white);
    padding: 0.5rem 1rem;
    border-radius: 3.5rem;
    gap: 0.813rem;
    border: none;
    font-weight: 700;
    border: 1px solid var(--white);

    &:hover {
        background-color: var(--white);
        border: 1px solid var(--brand-red);
        color: var(--brand-red);
    }

    &::after {
        content: "";
        display: inline-flex;
        background-image: url("/jakarta.faces.resource/right-arrow-white.svg.xhtml?ln=images");
        background-repeat: no-repeat;
        background-size: 0.875rem;
        height: 0.875rem;
        width: 0.875rem;
    }

    &:hover::after {
        background-image: url("/jakarta.faces.resource/arrow-right-red.svg.xhtml?ln=images");
    }
}

/* Datepicker */
.custom-date-btn-red::-webkit-calendar-picker-indicator {
    opacity: 0 !important;
}

.custom-date-btn-red {
    position: relative !important;
    cursor: pointer !important;
    appearance: none;
    /* Browser-Standardstil entfernen */
    -webkit-appearance: none;
    /* Für Chrome und Safari */
    -moz-appearance: none;
    /* Für Firefox */
}

.custom-date-btn-red::after {
    content: "" !important;
    background-image: url("/jakarta.faces.resource/icon _chevron-down_white.svg.xhtml?ln=images");
    background-repeat: no-repeat;
    background-size: contain;
    width: 14px;
    height: 8.5px;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.custom-date-btn-red:hover::after,
.custom-date-btn-red:focus::after {
    background-image: url("/jakarta.faces.resource/icon _chevron-down_red.svg.xhtml?ln=images");
}

.custom-date-btn-red:focus-within {
    background-color: var(--white);
    border: 1px solid var(--brand-red);
    color: var(--brand-red);
    margin-bottom: 3px;

    &::after {
        background-image: url("/jakarta.faces.resource/icon _chevron-down_red.svg.xhtml?ln=images");
    }
}

/* Übersicht Suchfeld */
.search-bar {
    border-radius: 64px;
    border: 1px solid var(--brand-red);
    padding: 1.188rem 1.5rem 1rem 1.5rem;
    background-color: var(--white);
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 25rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5rem;

    & input {
        background-color: var(--white);
        color: var(--black);
        font-size: 1rem;
        line-height: 1.5;
        font-style: normal;
        border: none;
        padding: 0;
        width: 100%;
    }

    & .btn-search {
        border: none;
        background-color: transparent;
        padding: 0;
        margin: 0;
        line-height: 0;
        flex-shrink: 0;
    }
}

/* Tabelle-Flex */
.tbl-single-flex {
    border: 1px solid var(--grey-80);
    border-radius: 0.5rem;
    padding: 3rem 1.5rem;

    .tbl-headline {
        padding-bottom: 2.5rem;
    }
}

.tbl-row-flex {
    padding: 0;

    /*  gap: 0.188rem; */
    /*     gap: 0.5rem; */

    li {
        width: 11.25rem;
    }
}

.accordion-tbl {
    /*   width: 73.563rem; */
    border: none;

    .accordion-button {
        background-color: var(--white);
        color: var(--brand-red);
        width: 11.25rem;
        font-size: 1rem;
        padding: 0.5rem 0;

        &:not(.collapsed) {
            width: 11.25rem;
            box-shadow: none;
        }
    }

    .accordion-body:first-child {
        /*   width: 73.563rem; */
        /*       width: 77.063rem; */
        width: 81.25rem;
        border: none;
        border-top: 1px solid var(--brand-red);
        border-bottom: 1px solid var(--brand-red);
        margin-bottom: 40px;
        margin-top: 80px;
        padding: 40px 0;
    }

    .accordion-body.accordion-second-body,
    .accordion-body.accordion-third-body {
        width: 81.25rem;
        border: none;
        border-bottom: 1px solid var(--brand-red);
        margin-bottom: 40px;
    }

    .accordion-body:last-child {
        border: none;
    }

    .accordion-item {
        border: none;
    }
}

/* Liste Veranstaltungen */
.list-events {
    & > li {
        border: 1px solid var(--grey-80);
        border-radius: 0.5rem;
        margin-bottom: 1.5rem;
        padding: 3rem 1.5rem;
        color: var(--grey-80);

        &:last-child {
            margin-bottom: 0;
        }
    }

    & .row-head {
        display: flex;
        justify-content: space-between;
        margin-bottom: 1.5rem;
        align-items: center;

        h2 {
            margin-bottom: 0;
        }
    }

    & .event-headline {
        color: var(--brand-red);
        font-size: 1.5rem;

        & a {
            color: var(--brand-red);
        }
    }

    & .event-body-headline {
        font-size: 1rem;
    }

    & .collapse-termine ul {
        & li {
            border-radius: 0;
            border: none;
            border-top: 1px solid var(--brand-red);
            /*       border-bottom: 1px solid var(--brand-red); */
            padding: 0;
            margin-top: 2.5rem;
        }

        & li:last-child {
            margin-bottom: -2.5rem;
        }

        & .col {
            margin-top: 2.5rem;
            margin-bottom: 2.5rem;
        }
    }

    & .btn-collapse {
        margin-top: 1rem;
        color: var(--brand-red);
        font-weight: 700;
        font-size: 1rem;
        background-color: var(--white);
        border: none;
        width: 100%;
        max-width: 11.25rem;
        margin-bottom: -1rem;

        & svg {
            transform: scaleY(-1);
        }

        &.collapsed svg {
            transform: scaleY(1);
        }
    }

    & .col p {
        font-size: 1rem;
        line-height: 1.5rem;
    }
}

.tbl-termin-container {
    gap: 10px;
    align-items: center;
}

.tbl-termin-dropdown {
    color: var(--brand-red);
    font-weight: 700;
}

.tbl-arrow-down {
    fill: var(--brand-red);
}

.tbody-rows {
    border-bottom: 1px solid var(--brand-red);
}

.tbl-rows {
    overflow: hidden;
    padding: 3rem 1.5rem;
    margin-bottom: 2rem;
}

/* Filter Sort */

.btn-table-sort {
    background-color: var(--white);
    width: 12.625rem;
    height: 2.5rem;
    gap: 0.813rem;
    padding: 0.5rem 1rem;
    border-radius: 3.5rem;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border: 0.5px solid var(--grey-80);
}

.table-sort-text-body {
    background-color: var(--white);
    height: 1.5rem;
}

.table-sort-text {
    color: var(--grey-80);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
}

.tbl-sort-font-wght {
    font-weight: 700;
}

img.table-sort-icon {
    width: 0.875rem;
    height: 0.531rem;
}

.ampel {
    align-items: center;
    height: 0.938rem;
}

.ampel-green {
    background-color: #17ab07;
    border-radius: 50%;
    width: 0.938rem;
    height: 0.938rem;
    margin-right: 0.5rem;
}

.ampel-yellow {
    background-color: #ec9600;
    border-radius: 50%;
    width: 0.938rem;
    height: 0.938rem;
    margin-right: 0.5rem;
}

.ampel-red {
    background-color: var(--brand-red);
    border-radius: 50%;
    width: 0.938rem;
    height: 0.938rem;
    margin-right: 0.5rem;
}

.brand-grey-80 {
    color: var(--grey-80);
}

.brand-red {
    color: var(--brand-red);
}

.brand-white {
    color: var(--white);
}

.grey-10 {
    background-color: var(--grey-10);
}

.bg-red-font-white {
    background-color: var(--brand-red);
    color: var(--white) !important;
}

/* Star-Icons */

.stars-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.625rem;

    & .star {
        background-color: var(--brand-grey);
        clip-path: polygon(
                45.46% 3.504%,
                33.029% 29.551%,
                5.216% 33.742%,
                5.216% 33.742%,
                3.812% 34.126%,
                2.603% 34.796%,
                1.605% 35.704%,
                0.834% 36.797%,
                0.305% 38.028%,
                0.034% 39.345%,
                0.037% 40.699%,
                0.329% 42.04%,
                0.927% 43.318%,
                1.847% 44.483%,
                21.968% 64.746%,
                17.209% 93.371%,
                17.209% 93.371%,
                17.129% 94.879%,
                17.375% 96.279%,
                17.905% 97.542%,
                18.677% 98.636%,
                19.648% 99.533%,
                20.778% 100.202%,
                22.025% 100.613%,
                23.346% 100.737%,
                24.699% 100.542%,
                26.042% 100%,
                50.923% 86.485%,
                75.805% 100%,
                75.805% 100%,
                77.148% 100.537%,
                78.501% 100.729%,
                79.822% 100.605%,
                81.068% 100.194%,
                82.198% 99.526%,
                83.17% 98.631%,
                83.942% 97.538%,
                84.472% 96.277%,
                84.718% 94.878%,
                84.637% 93.371%,
                79.878% 64.746%,
                100% 44.483%,
                100% 44.483%,
                100.919% 43.318%,
                101.517% 42.04%,
                101.81% 40.699%,
                101.813% 39.345%,
                101.542% 38.028%,
                101.013% 36.797%,
                100.242% 35.704%,
                99.244% 34.796%,
                98.035% 34.126%,
                96.631% 33.742%,
                68.818% 29.551%,
                56.387% 3.504%,
                56.387% 3.504%,
                55.6% 2.249%,
                54.611% 1.27%,
                53.469% 0.568%,
                52.225% 0.144%,
                50.931% 0%,
                49.635% 0.136%,
                48.39% 0.553%,
                47.245% 1.253%,
                46.252% 2.236%,
                45.46% 3.504%
        );
        width: 0.938rem;
        height: 0.898rem;
    }
}

.star-1 .star:nth-child(-n + 1) {
    background-color: var(--black);
}

.star-2 .star:nth-child(-n + 2) {
    background-color: var(--black);
}

.star-3 .star:nth-child(-n + 3) {
    background-color: var(--black);
}

.star-4 .star:nth-child(-n + 4) {
    background-color: var(--black);
}

.star-5 .star:nth-child(-n + 5) {
    background-color: var(--black);
}

/* Bulletpoints */

main ol {
    padding-left: 1.5rem;
}

main ul {
    list-style: none;
    /*    padding-left: 0.87rem; */
    padding-left: 0.25rem;
}

main li {
    font-size: 16px;
    font-weight: 400;
    color: var(--grey-80);

    &.bulletpoint {
        display: flex;
    }
}

main .bulletpoint::before {
    content: "+";
    margin-right: 0.5rem;
    color: var(--brand-red);
    font-weight: 700;
    font-size: 1rem;
    /*     position: absolute;
    left: 0; */
}

/* Element Übersicht-Farben */
.color-element {
    width: 100%;
    max-width: 17.5rem;
    padding: 0.188rem;
    font-weight: 700;
}

.c-white {
    background-color: var(--white);
    color: var(--black);
    border: 2px solid var(--black);
}

.c-black {
    background-color: var(--black);
    color: var(--white);
}

.c-brand-red {
    background-color: var(--brand-red);
    color: var(--white);
}

.c-brand-grey {
    background-color: var(--brand-grey);
    color: var(--white);
}

.c-g80 {
    background-color: var(--grey-80);
    color: var(--white);
}

.c-g92 {
    background-color: var(--grey-92);
    color: var(--white);
}

.c-g60 {
    background-color: var(--grey-60);
    color: var(--white);
}

.c-g20 {
    background-color: var(--grey-20);
    color: var(--black);
}

.c-g10 {
    background-color: var(--grey-10);
    color: var(--black);
}

.c-ocean {
    background-color: var(--ocean-blue);
    color: var(--white);
}

.c-s-red {
    background-color: var(--secondary-red);
    color: var(--white);
}

.c-green-n {
    background-color: var(--green-neu);
    color: var(--black);
}

.c-blue-w {
    background-color: var(--blue-webinar);
    color: var(--black);
}

.c-yellow-el {
    background-color: var(--yellow-elearning);
    color: var(--black);
}

.c-yellow-el {
    background-color: var(--yellow-elearning);
    color: var(--black);
}

/* Ampel-Farben */
.ampel-g {
    background-color: var(--green-ampel);
    color: var(--black);
    margin-bottom: 0.625rem;
}

.ampel-y {
    background-color: var(--yellow-ampel);
    color: var(--black);
    margin-bottom: 0.625rem;
}

.ampel-r {
    background-color: var(--red-ampel);
    color: var(--black);
    margin-bottom: 0.625rem;
}

/* Übersicht Badges */

.badge {
    border-radius: 0.5rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    padding: 0.5rem;
    height: fit-content;

    &.new-badge {
        color: var(--black);
        background-color: var(--green-neu);
    }

    &.webinar-badge {
        color: var(--black);
        background-color: var(--blue-webinar);
    }

    &.elearning-badge {
        color: var(--black);
        background-color: var(--yellow-elearning);
    }
}

/*Checkboxen*/

.form-check-input {
    background-color: var(--white);
    border: 1px solid var(--ui-grey-60);

    &:hover {
        background-color: var(--grey-10);
    }
}

.form-check-input:checked {
    background-color: var(--brand-red);
    border: none;

    &:focus {
        border: 2px solid var(--white);
        outline: 2px solid var(--brand-red) !important;
        box-shadow: none;
    }
}

/*Pagination Desktop*/
.pagination {
    gap: 0.25rem;
    justify-content: center;
    flex-wrap: wrap; /* prevent horizontal scrolling */

    & .arrow-double-left,
    & .arrow-left-grey-0,
    & .arrow-right-grey-0,
    & .arrow-double-right {
        fill: var(--grey-0);
    }

    & .page-item .page-link {
        display: flex;
        color: var(--primary-text);
        border-radius: 4px;
        border: 1px solid var(--grey-4);
        height: 2.25rem;
        padding: 0.5em 0.75rem;
        justify-content: center;
        align-items: center;
    }

    & .page-item.active .page-link {
        background-color: var(--brand-red);
        color: var(--white);
        border: none;
    }

    & .page-item.p-item-no-border .page-link {
        border: none;

        &:hover {
            background-color: transparent;
            cursor: default;
        }
    }

    & .page-item.p-item-col .page-link {
        border: none;
        color: var(--brand-red);
        font-weight: 700;
    }

    & .form {
        display: flex;
        align-items: center;
        margin-left: 1rem;

        & input {
            width: 5rem;
            margin: 0 0.25rem;
            border-radius: 4px;
            border: 1px solid var(--grey-4);
            color: var(--primary-text);

            &:hover,
            &:focus {
                color: var(--primary-text);
            }
        }

        & button {
            border: none;
            background-color: transparent;
            color: var(--brand-red);
            font-weight: 700;

            &:hover,
            &:focus {
                text-decoration: underline;
            }
        }
    }

    /* contrast accessibility */

    & .disabled {
        opacity: 0.7;
    }
}

/* Stundenplan / Tabellen */
.table-wrapper {
    overflow-x: auto;
}

table {
    color: var(--grey-80);
    border: 0.031rem solid var(--grey-80);
    vertical-align: middle;
    font-size: 1rem;
    line-height: 1.5;
    min-width: 1200px;

    & tr {
        height: 6.688rem;
    }

    & th,
    & td {
        padding: 0.5rem 2rem;
        width: 18.75rem;
    }

    & th {
        background-color: var(--secondary-blueish-1) !important;
        border: 0.031rem solid var(--grey-80);
        text-align: center !important;
    }

    & td {
        color: var(--grey-80);
        border: 0.031rem solid var(--grey-80);
    }

    & tbody {
        & th {
            width: 12.5rem;
        }
    }
}

.up-container {
    width: 1440px;
    height: 20.5rem;
    justify-content: center;
}

.site-up {
    background-color: var(--brand-red);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    gap: 0.5rem;
    border: none;
    align-items: center;
    justify-content: center;
}

/* Footer Desktop*/

footer {
    background-color: var(--grey-10);
    color: var(--grey-80);
    margin-top: auto;
    position: relative;
}

footer h2 {
    color: var(--brand-red);
    font-style: normal;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5;
}

.footer-content {
    justify-content: center;
    align-items: flex-start;
    flex-shrink: 0;
    flex-wrap: wrap;

    & div .footer-sides {
        padding: 0 3.5rem 0 0;
    }

    & .col-12 {
        padding: 0.5rem;
    }
}

footer ul {
    list-style: none;

    & li a {
        color: var(--grey-80);
        text-decoration: none;
        border-bottom: none;

        &:hover {
            border-bottom: none;
        }
    }
}

footer .contact-list ul li::before {
    content: url("/jakarta.faces.resource/arrow-right-grey.svg.xhtml?ln=images");
}

footer .contact-list ul li:hover::before {
    content: url("/jakarta.faces.resource/arrow-right-red.svg.xhtml?ln=images");
}

footer .media-list {
    font-weight: 700;

    a {
        font-weight: 400;
        color: var(--grey-80);
        margin-left: 1rem;
    }

    #fon-align {
        position: relative;
        left: 10px;
    }

    #web-align {
        position: relative;
        left: 5px;
    }
}

footer li a:hover {
    color: var(--brand-red);
}

.contact-list {
    & li {
        font-weight: 700;
    }
}

/* To top Button */
.wrapper-btn-to-top {
    position: absolute;
    display: flex;
    top: -5%;
    left: 0;
    width: 100%;
    justify-content: center;

    & a {
        text-decoration: none;
        background-color: var(--brand-red);
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        box-shadow: none;
        border: none;

        & .side-up-icon {
            fill: var(--white);
        }

        &:hover,
        :focus {
            background-color: var(--white);
            color: red;
            border: 1px solid var(--brand-red);

            .side-up-icon {
                fill: var(--brand-red);
            }
        }
    }
}

/* Detail-Seite */
.text-contentbox {
    /*gap: 7.75rem;*/
    --gap: 1.5rem;
    gap: var(--gap);
}


/* startseite */

.start-courses {
    margin-bottom: 18.188rem;
}

.courses-heading {
    margin-bottom: 2.063rem;
}

.course-boxes {
    flex-wrap: wrap;
    /*   gap: 1.063rem; */
    gap: 0.875rem;
    justify-content: center;

    & ul {
        list-style: none;
    }

    & li {
        position: relative;
        margin-bottom: 13.313rem;
    }
}

.courses {
    width: 19.32rem;
    height: 19.188rem;
    background-color: var(--brand-red);
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    padding-top: 3.875rem;
    padding-left: 2rem;
    padding-right: 2rem;
    flex-direction: column;
    justify-content: space-between;

    & .course-item-btn {
        margin-bottom: 2rem;
    }

    & .btn-red.btn-next {
        border-color: var(--white);
    }

    & .btn-red.btn-prev {
        border-color: var(--white);
    }
}


.fa-ul.ver-actions {
    --fa-li-width: 1.75rem; /*space for list icon --fa-width + margin*/
    margin-left: var(--fa-li-width);
    gap: .5rem;
    display: flex;
    flex-direction: column;

    li {
        .fa-li {
            text-align: left;
            --fa-width: 1.25em; /*fixed width, default from .fa-fw */
        }

        margin-bottom: 0;
        padding: 0 !important;
        border: none;

        &:has(a) {
            * {
                color: var(--brand-red);
            }
        }
    }

    &:has(li):not(:last-child) {
        margin-bottom: 1rem;
    }
}

.gtue-curve {
    width: 19.3rem;
}

.course-box {
    position: absolute;
    top: 114px;
    left: 0px;
}

.course-img {
    &.rounded {
        border-radius: 0.5rem !important;
    }
}

/* Startseite-Ende */

/* content / sidebar container */
.text-contentbox {
    & > section, & > div {
        flex-grow: 1;
    }

    & > section:not(:first-child), & > div > section:not(:first-child) {
        margin-top: var(--gap, 1rem)
    }
}

aside {
    width: 100%;
    /*max-width: 19.25rem;*/
    max-width: 23.75rem;
    @media (max-width: 767.98px) {
        max-width: unset;
    }
    border-radius: 0.5rem;
    padding: 20px;

    p {
        padding-bottom: 1rem;
    }

    h2, .h2 {
        padding-bottom: 1rem;
        font-size: 1.5rem;
        line-height: 1.5;
    }

    p, ul {
        border-bottom: 1px solid var(--brand-red);
    }

    ul {
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    .contact-section-info {
        width: 100%;
        max-width: 13rem;
    }

    .stars-row {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 0.625rem;

        & .star {
            background-color: var(--brand-grey);
            clip-path: polygon(
                    45.46% 3.504%,
                    33.029% 29.551%,
                    5.216% 33.742%,
                    5.216% 33.742%,
                    3.812% 34.126%,
                    2.603% 34.796%,
                    1.605% 35.704%,
                    0.834% 36.797%,
                    0.305% 38.028%,
                    0.034% 39.345%,
                    0.037% 40.699%,
                    0.329% 42.04%,
                    0.927% 43.318%,
                    1.847% 44.483%,
                    21.968% 64.746%,
                    17.209% 93.371%,
                    17.209% 93.371%,
                    17.129% 94.879%,
                    17.375% 96.279%,
                    17.905% 97.542%,
                    18.677% 98.636%,
                    19.648% 99.533%,
                    20.778% 100.202%,
                    22.025% 100.613%,
                    23.346% 100.737%,
                    24.699% 100.542%,
                    26.042% 100%,
                    50.923% 86.485%,
                    75.805% 100%,
                    75.805% 100%,
                    77.148% 100.537%,
                    78.501% 100.729%,
                    79.822% 100.605%,
                    81.068% 100.194%,
                    82.198% 99.526%,
                    83.17% 98.631%,
                    83.942% 97.538%,
                    84.472% 96.277%,
                    84.718% 94.878%,
                    84.637% 93.371%,
                    79.878% 64.746%,
                    100% 44.483%,
                    100% 44.483%,
                    100.919% 43.318%,
                    101.517% 42.04%,
                    101.81% 40.699%,
                    101.813% 39.345%,
                    101.542% 38.028%,
                    101.013% 36.797%,
                    100.242% 35.704%,
                    99.244% 34.796%,
                    98.035% 34.126%,
                    96.631% 33.742%,
                    68.818% 29.551%,
                    56.387% 3.504%,
                    56.387% 3.504%,
                    55.6% 2.249%,
                    54.611% 1.27%,
                    53.469% 0.568%,
                    52.225% 0.144%,
                    50.931% 0%,
                    49.635% 0.136%,
                    48.39% 0.553%,
                    47.245% 1.253%,
                    46.252% 2.236%,
                    45.46% 3.504%
            );
            width: 0.938rem;
            height: 0.898rem;
        }
    }

    .star-1 .star:nth-child(-n + 1) {
        background-color: var(--brand-red);
    }

    .star-2 .star:nth-child(-n + 2) {
        background-color: var(--brand-red);
    }

    .star-3 .star:nth-child(-n + 3) {
        background-color: var(--brand-red);
    }

    .star-4 .star:nth-child(-n + 4) {
        background-color: var(--brand-red);
    }

    .star-5 .star:nth-child(-n + 5) {
        background-color: var(--brand-red);
    }


    /* accessibility gray background so fix contrasts */

    a.disabled {
        --clr-disabled-link: color-mix(in hsl, #8D8E91 25%, black 75%);
    }
}

/* Login-Seite */
.login-container {
    position: relative;
    justify-content: center;
    align-items: center;
}

.loginbox {
    position: absolute;
    top: 7.375rem;
    flex-direction: column;
    width: 100%;
    max-width: 26rem;
    border-radius: 0.5rem;
    align-items: center;
    height: auto;
    padding: 2rem;
    gap: 3rem;

    & div label {
        font-size: 1rem;
        color: var(--grey-80);
        font-weight: 400;
        margin-bottom: 0.25rem;
    }

    .btn-next {
        width: 100%;
        max-width: 11.563rem;
        justify-content: center;
    }

    .btn-prev {
        width: 100%;
        max-width: 11.563rem;
        justify-content: center;
    }

    .regis-links {
        flex-direction: column;

        & a {
            border: none;
            margin-left: -5.5rem;
        }
    }

    .login-item {
        & div {
            flex-direction: column;

            & label {
                margin-bottom: 0 !important;
            }

            & input {
                border-radius: 0.5rem;
                border: none;
                height: 3.063rem;
                margin-bottom: 0;
            }

            & .errorLogin {
                color: var(--brand-red);
            }
        }

        & :nth-child(1) {
            margin-bottom: 2rem;
        }
    }
}

.gtue-curve-container {
    padding-left: 0;
    padding-right: 0;
}

.gtue-curve-login {
    position: absolute;
    /*     left: 0; */
    z-index: -1;
}

.curve-body {
    width: 89.938rem;
    height: 100%;
    background-color: var(--brand-red);
    top: 37rem;
}

/* Login-Seite Ende */

/* Veranstaltungsübersicht-Seite */
.ver-section {
    width: 100%;
    max-width: 59.75rem;
}

.ver-ueber-contentbox {
    gap: 1rem;
}

.progress {
    width: 7.562rem;

    .progress-bar {
        background-color: var(--brand-red);
    }
}

/* .col-aktion-container {
    gap: 0.4375rem;
    .col-aktion {
        width: 6.8125rem;
    }
} */

& .btn-cal {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;

    &::after {
        content: "";
        display: inline-flex;
        background-image: url("");
        background-repeat: no-repeat;
        background-size: 1.2rem;
        height: 1.2rem;
        width: 1.2rem;
    }

    &:hover::after,
    &:focus::after {
        background-image: url("");
    }
}

.col-titel {
    width: 10.875rem;
}

.col-cal {
    margin-bottom: 1.25rem;
}

/* Veranstaltungsübersicht-Ende */

/* Modal */
.modal-dialog {
    /*max-width: 1440px;*/
    max-width: 1000px;
    padding: 1rem;
    display: block;

    &::before {
        content: "";
        background-image: url("");
        background-size: cover;
        display: block;
        width: 100%;
        height: 100px;
    }

    &::after {
        content: "";
        background-image: url("");
        background-size: cover;
        display: block;
        width: 100%;
        height: 100px;
    }
}

.modal-content {
    border-radius: 0;
    border: none;
    padding: 0 7.75rem;
}

/* Tablet */
/*  md Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .container {
        max-width: 992px !important;
        padding: 3.125rem;
    }

    /* Header Tablet */
    header .container {
        padding: 0;
    }

    /* Navigation Tablet */
    .navigation {
        button {
            padding: 1.125rem;
        }

        & .navbar-collapse {
            color: var(--black);
            position: absolute;
            width: 100%;
            top: 3.75rem;
        }

        .navbar-toggler {
            position: relative;
            font-size: unset;
            display: flex;
            align-self: center;

            &:hover {
                background-color: var(--secondary-red);
            }

            &::after {
                content: "";
                border-right: 1px solid var(--white);
                height: 100%;
                position: absolute;
                right: 0;
                top: 0;
                display: inline-block;
                opacity: 0.5;
            }

            & svg {
                width: 1.5rem !important;
                height: 1.5rem !important;
            }
        }

        & .nav-item.item {
            & a {
                color: var(--black);

                &:hover,
                &:focus {
                    background-color: var(--secondary-red);
                    color: var(--white);
                }
            }
        }
    }

    .nav-item.item {
        background-color: var(--white);
        color: var(--grey-80);
        border: 1px solid var(--grey-10);

        & a {
            color: var(--grey-80);
        }

        &:hover {
            color: var(--white);
        }
    }

    /* Schriften Tablet */
    h1, .h1 {
        font-size: 2rem;
    }

    h2, .h2 {
        font-size: 1.5rem;
    }

    /* Erweiterte Suche / Filter Tablet */
    .wrapper-filter {
        /* div Collapse */

        & .btn-list-filter {
            justify-content: start;
        }
    }

    /* Suchfilter */
    .dropdown-search-list,
    .filter-delete-elements {
        flex-direction: column;
    }

    .dropdown-search-list {
        .dropdown-toggle {
            background-color: white;
        }

        .dropdown-filter {
            border-radius: 0;
            width: 100%;
            background-color: var(--white);
            color: var(--grey-80);
            border: 1px solid var(--grey-10);
        }
    }

    .filter-delete-elements {
        .btn-filter-delete {
            /* Vorübergehend */
            width: 200px;
        }
    }

    /* Banner-Bild Tablet*/
    .teaser-container {
        & .hero-teaser {
            & .hero-teaser-text {
                max-width: 30rem;
                left: 2rem;
            }
        }
    }

    /* Liste Veranstaltungen Tablet */
    .list-events {
        & .col {
            width: 50% !important;
            flex: auto;

            &.flex-0 {
                flex: auto !important;
            }

            &.flex-1-5 {
                flex: auto !important;
            }
        }

        & .collapse-termine ul {
            & .col {
                margin-top: 0.2rem;
                margin-bottom: 0;
            }
        }

        & .event-body-headline {
            margin-top: 1rem;
        }

        .flex-wrap {
            gap: 7.5rem;
            margin-left: -0.625rem;
        }
    }

    /* footer */
    footer {
        padding: 2rem;
    }

    .footer-content {
        justify-content: center;
        align-items: flex-start;
        flex-shrink: 0;
        flex-wrap: wrap;
        gap: 3rem;

        & div .footer-sides {
            /*  padding: 0 3.5rem 0 0; */
            padding: 0;
        }

        & .col-12 {
            padding: 0;
        }
    }

    footer ul {
        padding-left: 0;
    }

    footer .media-list ul li {
        margin-bottom: 0.5rem;
    }

    /* To top Button */
    .wrapper-btn-to-top {
        top: unset;
        right: 10%;
        bottom: 10%;
        justify-content: end;

        & a {
            margin-right: 2rem;
            /* figma */
            margin-bottom: 1.125rem;
            /* Wie im Korrektur-Doc */
            /*      margin-bottom: -2.875rem; */
        }
    }

    /* Styles Veranstaltungsuche */
    .search-bar {
        margin-bottom: 6.563rem;
    }

    /* ------------- */
    /* Styles Loginseite */
    .loginbox {
        max-width: 20.5rem;
    }

    .gtue-curve-login {
        left: 0;
        width: 100%;
        top: 19.625rem;
    }

    .curve-body {
        top: 32.818rem;
    }

    /* Styles Vertanstaltungsübersicht */
    .ver-ueber {
        & .col {
            width: 100% !important;
            flex: auto;
        }
    }

    /* Styles */
}

/* Mobile */
/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .container {
        max-width: 768px !important;
        padding: 2.188rem;
    }

    /* Schriften Mobile */
    h1, .h1 {
        font-size: 1.5rem;
    }

    /* Erweiterte Suche / Filter Mobile */
    .wrapper-filter {
        /* Button Collapse */

        & .btn-collapse-search {
            color: var(--white);
            background-color: var(--brand-red);
            align-self: self-start;
            margin-bottom: 2rem;
            border-radius: 0;
            font-weight: 700;

            & svg {
                display: none;
            }
        }

        /* div Collapse mobile */
        /* Dropdown Buttons mobile */

        & .btn-list-filter {
            display: block;
            gap: unset;
            margin: 0 !important;
            padding-left: 0 !important;
        }

        & .dropdown {
            gap: unset;

            & button,
            & input[type="date"] {
                width: 100%;
            }

            & .dropdown-menu {
                position: relative !important;
                border: none;
                background-color: transparent;
                transform: none !important;
                padding-top: 0 !important;

                & li {
                    padding: 0.5rem 1rem;
                    min-width: 100%;
                    border-radius: 0 !important;
                    border: 1px solid var(--grey-20) !important;

                    &:first-child {
                        border-top: none;
                    }

                    &:nth-last-child(2) {
                        border-radius: 0 0 1rem 1rem;
                        border-top: none;
                    }

                    /*&:last-child {
                        border: none;
                        background-color: transparent;
                        padding: 0;
                    }*/
                }
            }

            .dropdown-toggle {
                padding-right: 2.5rem !important;
                color: var(--brand-red);
                background-color: var(--white) !important;
                border-radius: 0;
                border: 1px solid var(--grey-20);

                &::after {
                    content: "";
                    background-image: url("/jakarta.faces.resource/icon _chevron-down_red.svg.xhtml?ln=images");
                    background-repeat: no-repeat;
                    background-size: contain;
                    width: 14px;
                    height: 8.5px;
                    position: absolute;
                    right: 1rem;
                    top: 50%;
                    transform: translateY(-50%);
                    pointer-events: none;
                    border: none;
                }

                &:hover,
                &:focus {
                    background-color: var(--brand-red) !important;
                    border: 1px solid var(--brand-red) !important;
                    color: var(--white) !important;

                    &::after {
                        background-image: url("/jakarta.faces.resource/icon _chevron-down_white.svg.xhtml?ln=images");
                    }
                }
            }

            /* Dropdown-Filter-Button */

            .filter-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                background-color: var(--brand-red);
                color: var(--white);
                border-radius: 0;
                gap: 0.813rem;
                font-weight: 700;
                border: 1px solid var(--brand-red);
                /*height: 3.75rem;*/
                text-align: center;
                width: 100%;

                &:hover {
                    background-color: var(--white);
                    border: 1px solid var(--brand-red);
                    color: var(--brand-red);
                }

                &::after {
                    content: none;
                }

                &:hover::after {
                    content: none;
                }
            }
        }
    }

    /* Datepicker Mobile */
    .custom-date-btn-red {
        width: 100%;
        border-radius: 0;
        padding-right: 2.5rem !important;
        color: var(--brand-red);
        background-color: var(--white) !important;
        text-align: center;
        border: 1px solid var(--grey-20);

        &::after {
            content: "";
            background-image: url("/jakarta.faces.resource/icon _chevron-down_red.svg.xhtml?ln=images");
            background-repeat: no-repeat;
            background-size: contain;
            width: 14px;
            height: 8.5px;
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            border: none;
        }

        &:hover,
        &:focus,
        &:focus-within {
            background-color: var(--brand-red) !important;
            border: 1px solid var(--brand-red) !important;
            color: var(--white) !important;

            &::after {
                background-image: url("/jakarta.faces.resource/icon _chevron-down_white.svg.xhtml?ln=images");
            }
        }
    }

    /* Banner-Bild mobile*/
    .teaser-container {
        & .hero-teaser {
            & .hero-teaser-text {
                position: relative;
                max-width: 100%;
                left: 0;
                bottom: 0;
                border-radius: 0;
            }
        }
    }

    /* Liste Veranstaltungen Mobile */
    .list-events {
        & .row-head {
            display: block;

            & .event-headline {
                font-size: 1rem;
            }
        }

        & .col {
            width: 100% !important;
        }

        & .btn-bookmark {
            margin-top: 0.5rem;
            margin-bottom: 1rem;
        }

        & .flex-wrap {
            margin-left: -0.625rem;
            flex-direction: column;
            align-items: flex-start;
            gap: 2.625rem;
        }

        & li {
            padding: 2rem 1.5rem;
        }
    }

    .collapse-termine {
        padding: 2.5rem 0.5rem;
        padding-top: 0.5rem;
    }

    /* Pagination */
    .pagination {
        flex-wrap: wrap;

        & .page-item:nth-child(6),
        .page-item:nth-child(7),
        .page-item:nth-child(8),
        .page-item-text {
            display: none;
        }

        /*& .page-item:nth-child(10) {*/
        /*    margin-right: 1.875rem;*/
        /*}*/
    }

    /*.page-item-count {*/
    /*    margin-left: -2rem;*/
    /*}*/
    /* Detailseite */
    .text-contentbox {
        gap: 7.75rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .teaser-container {
        padding: 0;
    }

    /* Loginseite */
    .loginbox {
        max-width: 19.438rem;
    }

    .gtue-curve-login {
        width: 100%;
        top: 22.688rem;
    }

    .curve-body {
        top: 32.818rem;
    }

    /* Veranstaltungsübersicht */
    .ver-ueber-contentbox {
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }
}

.dropdown-item-tmt {
    display: block;
    width: 100%;
    clear: both;
    text-align: inherit;
    text-decoration: none;
    /*white-space: nowrap;*/
    background-color: transparent;
    border: 0;
}

#navBarNav {
    z-index: 1000;
}

.stp-table, .table {
    min-width: auto !important;
}

.table th, .table td {
    width: auto;
}

.table tr {
    height: auto;
}


.resultEntry {
    &:nth-child(even) {
        background-color: var(--grey-10);
    }

    &:nth-child(odd) {
        background-color: var(--white);
    }

    /* accessibility ... */

    & .fa-ul.ver-actions li:has(a) * {
        color: var(--black);
    }
}

.error {
    color: var(--brand-red);;
    display: block;
}

.ui-dialog.video-overlay {
    background: none;
    border: none;
    box-shadow: none;
}

/* OverlayPanel künstlich mittig setzen */
.centered-overlay {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999 !important;
    width: 850px;
    height: 450px;
}

/* Video-Container */
.video-box {
    background: #000;
    border-radius: .5rem;
    overflow: hidden;
}

.ui-overlaypanel-content {
    padding: 0;
}

.bg-eak-pflicht {
    background-image: url('../images/star_inverted.png.xhtml');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 16px 16px;
    cursor: help;
}

.bg-eak-global {
    background-image: url('../images/globe_inverted.png.xhtml');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 16px 16px;
    cursor: help;
}

.bg-eak-freigabe {
    background-image: url('../images/check_inverted.png.xhtml');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 16px 16px;
    cursor: help;
}

.bg-eak-tl {
    background-image: url('../images/tl.png.xhtml');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 16px 16px;
    cursor: help;
}

.bg-eak {
    min-width: 16px;
    margin-left: 10px;
}

.html-editor-300 {
    border-radius: .25rem;
    border: 1px solid #ced4da;

    & .ql-editor {
        min-height: 300px;
    }

    & .ql-container {
        border: none;
    }

    & .ui-editor-toolbar {
        border: none;
        border-bottom: 1px solid #ced4da;
    }
}

.pic-container {
    border: 1px solid var(--brand-red);
    border-radius: 5px;
    padding: 10px;
    height: 100%;
    overflow: hidden;
}

.pic-container .pic-content {
    max-height: 250px;
}

#eakp-lightbox {
    height: 100%;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0, 0, 0); /* Black fallback color */
    background-color: rgba(0, 0, 0, 0.6); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    overflow-y: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
    display: none;

    & .eakp-lightbox-inner {
        position: absolute;
        top: 10%;
        left: 50%;
        background-color: transparent;
        z-index: 1002;
        overflow-y: visible;
        width: 80%;
        height: 60%;
        margin-left: -40%;
        color: #D51D41;
        text-align: center;
        vertical-align: middle;
    }

    & .eakp-lightbox-control {
        position: relative;
        text-align: center;
        padding: 10px;
    }

    & .eakp-lightbox-control a {
        position: relative;
    }

    & .eakp-lightbox-img {
        position: relative;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
    }
}

.btn-danger {
    background-color: var(--brand-red);
}

.bew-options {
    left: 10px;
    right: 0;
}

.row-wv.active {
    background-color: var(--brand-red);
}

.row-wv.active * {
    color: white;
}

.row-wv:hover {
    background-color: var(--brand-red);
}

.row-wv:hover * {
    color: white;
}

.ausw-list {
    padding-left: 0;

    & li {
        color: var(--black);
        font-size: var(--bs-body-font-size);
        font-weight: var(--bs-body-font-weight);
        padding-left: 0;
    }
}

@media print {
    .container {
        padding-top: 0;
        margin-top: 0;
    }

    aside {
        display: none;
    }

    .pageBreak {
        page-break-before: always;
    }

    .list-events li {
        page-break-inside: avoid;
    }
}


.antirow {
    --bs-gutter-x: 1.5rem;
    margin-left: calc(.5 * var(--bs-gutter-x));
    margin-right: calc(.5 * var(--bs-gutter-x));
}

.event_modules {
}

.event-module-item {
    padding: 20px 10px;
}

.event-item-image-row {
    margin-top: 10px;
}

.event_modules .even {
    background-color: #F0F0F0;
}

.event_modules .odd {
    background-color: #FFFFFF;
}

.event-item-image-row img {
    display: block;
    height: auto;
    max-width: 100%;
}

.menu_entry {
    margin-bottom: 40px;

    h3 {
        margin: 0;
    }
}

.event-module-item ul, .event-module-item ol {
    margin-bottom: 0;
}

.event-module-item ol li:not(:last-child) {
    margin-bottom: 20px;
}


/* Focus fix for search input */
.search-bar {
    input[type="search"]:focus {
        outline: none !important;
        z-index: inherit;
        text-decoration: inherit;
    }

    &:has(input[type="search"]:focus) {
        /*text-decoration: none;*/
        z-index: 99999999;
        outline: 3px solid var(--black) !important;
    }
}

/* Stunenplan */
@media print {
    .stp-eintrag-container {
        overflow: visible !important;
        height: auto !important;
    }

    .stp > * {
        font-size: small !important;
    }

    .stp-nowrap {
        white-space: normal !important;
        word-wrap: normal !important;
        width: auto !important;
    }
}


.stp-table {
    table-layout: fixed;
    width: 930px;

    margin: 0 auto;
    padding-bottom: 50px;
}

.stp-table > thead > tr > th {
    border-bottom: 1px solid black !important;
    border-right: 1px solid black !important;
    border-top: 1px solid black !important;
    border-left: none !important;
    text-align: center;
    vertical-align: middle;
    height: 50px !important;
    padding: 5px !important;
    background-color: #dddedf !important; /*Needs to be important for print!*/
}

.stp-table > thead > tr > th:first-child, .table-stp > tbody > tr > td:first-child {
    border-left: 1px solid black !important;;
}

.stp-table > tbody > tr > td {
    border-bottom: 1px solid black !important;
    border-right: 1px solid black !important;
    border-top: none !important;
    border-left: none !important;
}

.stp-nowrap {
    white-space: nowrap;
    width: max-content;
}

.stp-table > tbody > tr > td.stp-rowheader {
    font-weight: bold;
    background-color: #dddedf !important; /*Needs to be important for print!*/
    text-align: center;
    border-left: 1px solid black !important;
    vertical-align: middle;
}


.stp-block {
    padding: 0 !important;
}

.stp-eintrag {
    min-height: 50px;
    min-width: inherit;
}

.stp-eintrag-container {
    height: 50px;
    overflow: hidden;
}

.stp-eintrag-container.stp-has-entries:hover, .stp-eintrag-container.stp-has-entries.stp-active {
    filter: drop-shadow(2px 2px 10px #000) brightness(0.9);
    -webkit-filter: brightness(0.9) drop-shadow(2px 2px 10px #000);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2, Color='#000')";
    overflow: visible;
    position: absolute;
    width: max-content;
    height: max-content;
    z-index: 100;
}

.stp-eintrag {
    padding: 5px;
    font-size: smaller;
    cursor: cell;
}

.stp-container a.item-active, .stp-container a.item-active > span, .stp-container a.item-active:hover, .stp-container a.item-active > span:hover {
    background-color: #C9302C;
    font-weight: normal;
    color: white;
}

ul.facet-sublist {
    overflow-y: visible !important;
    max-height: none !important;

    li {
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-left: none !important;
        border-bottom: none !important;
        border-right: none !important;
        border-radius: unset !important;

        &:last-child {
            border-top: 1px solid var(--brand-red) !important;
            background-color: var(--white) !important;
        }

        &:first-child {
            border-top: none !important;
            background-color: var(--white) !important;
        }
    }
}
ul.maxh {
    max-height: none !important;
}
.hero-teaser-navigation {
    button {
        background-color: var(--brand-red) !important;
        border: none;
        outline-style: none;
        display: inline-block;

        &.slide-next {
            margin-left: 10px;
        }
    }
}

.logo {
    z-index: 801;
    width: 7.8125rem;
    border: none !important;
    position: absolute;
    right: 74px;
    top: 1rem;
}
@media (max-width: 1559px) {
    .logo {
        top: 1rem;
    }
}
@media (max-width: 991.98px) {
    .logo {
        right: 124px;
        top: 4rem;
    }
}
@media (max-width: 767.98px) {
    .logo {
        right: 74px !important;
        top: 1rem;
    }
}
.brand-grey-80 .progress {
    width: 100%;
    background-color: #fff;
    height: 1.5rem;
}