﻿
/*
    S:  769px
    M:  1025px
    L:  1921px;

*/



/* roboto-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
    src: url('../fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

:root {
    --bs-font-sans-serif: system-ui, -apple-system, "Roboto";
}



/* Überschreibt die bootstrap-Einstellungen */
body {
    font-size: var(--IP_N);
    padding-top: 52px;
    background-color: var(--IP_Body);
    color: var(--IP_Body_Color);
    overflow-y: scroll;
}


html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}



@media (min-width: 1921px) {
    ol, ul {
        padding-left: 2.9rem;
    }

}



/*#region Placeholder {*/


.form-control::-moz-placeholder {
    color: var(--IP_Placeholder);
    font-weight:100;
    opacity: 1;
}

.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--IP_Placeholder);
    font-weight: 100;
    opacity: 1;
}

.form-control::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--IP_Placeholder);
    font-weight: 100;
    opacity: 1;
}


.form-control::-webkit-input-placeholder { /* Webkit */
    color: var(--IP_Placeholder);
    font-weight: 100;
    opacity: 1;
}

.form-control::placeholder {
    color: var(--IP_Placeholder);
    font-weight: 100;
    opacity: 1;
}

/*#endregion Placeholder }*/

@media screen and (min-width: 1921px)  {
    html {
        /*font-size: 15px;*/
    }
}



@media screen and (min-width: 3072px) {
    html {
        /*font-size: 20px;*/
    }
}


/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 0px;
    padding-right: 0px;
}


a {
    color: var(--IP_Blue);
    text-decoration: underline var(--IP_Blue);
}



input, select, textarea {
    max-width: unset;
}


.form-control {
    font-size: var(--IP_N);
    color: var(--IP_Control_Black);
    border: 1px solid var(--IP_FORM_CONTROL_BORDER);
    padding: .275rem .65rem;
}

    .form-control:focus {
        color: var(--IP_Control_Black_Focus);
        border-color: var(--IP_FORM_CONTROL_BORDER_FOCUS);
        box-shadow: 0 0 0 0.25rem var(--IP_FORM_CONTROL_FOCUS_SHADOW);
    }


.form-control-lg {
    min-height: calc(1.5em + 1rem + 2px);
    padding: .4rem 1rem;
    font-size: var(--IP_L);
    border-radius: 0.3rem;
}

.form-select {
    padding: 0.275rem 2.25rem 0.275rem 0.65rem;
    font-size: var(--IP_N);
    color: var(--IP_Control_Black);
    border: 1px solid var(--IP_FORM_CONTROL_BORDER);
}


    .form-select:focus {
        color: var(--IP_Control_Black_Focus);
        border-color: var(--IP_FORM_CONTROL_BORDER_FOCUS);
        box-shadow: 0 0 0 0.25rem var(--IP_FORM_CONTROL_FOCUS_SHADOW);
    }



.form-select-lg {
    min-height: calc(1.5em + 1rem + 2px);
    padding: .4rem 1rem;
    font-size: var(--IP_L);
    border-radius: 0.3rem;
}


.form-check-input {
    border: 1px solid var(--IP_FORM_CONTROL_BORDER);
}

.form-check-input:hover {
    cursor:pointer;
}

    .form-check-input:focus {
        border-color: var(--IP_FORM_CONTROL_BORDER_FOCUS);
        box-shadow: 0 0 0 0.25rem var(--IP_FORM_CONTROL_FOCUS_SHADOW);
    }

.form-check-label:hover{
    cursor:pointer;
}
 
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 769px) {
    .body-content {
        padding: 0;
    }

    .form-control {
        font-size: var(--IP_L);
        padding: .275rem .65rem;
    }

    .form-control-lg {
        font-size: var(--IP_XL);
    }

    .form-select {
        font-size: var(--IP_L);
        padding: 0.275rem 2.25rem 0.275rem 0.65rem;
    }

    .form-select-lg {
        font-size: var(--IP_XL);
    }
    /*line-height wird angepasst, Checkbox-Labels, dennen Schriftgöße IP_N zugewiesen ist, da ab 769px N zu L wird*/
    /*Dem Label muss die Klasse CB_LABEL_N zugewiesen werden, damit nicht andere Check-Box-Labels angepasst werden*/
/*    div.form-check > label.CB_LABEL_N:nth-child(2) {
        line-height: 1;
    }
*/

    div.form-check > input[type=checkbox].CB_N:nth-of-type(1) {
        margin-top: 0.58em;
    }

        div.form-check > input[type=checkbox].CB_N:nth-of-type(1).MT25 {
            margin-top: 0.25em;
        }

}



.form-check-input:checked {
    background-color: var(--IP_BTN_BG);
    border-color: var(--IP_BTN_BO);
}



.row {
    margin-right: 0px;  
    margin-left: 0px;
}


/*BUTTON*/

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    pointer-events: auto;
    opacity: 0.65;
    cursor: not-allowed;
}


.btn-primary {
    color: #fff;
    background-color: var(--IP_BTN_BG);
    border-color: var(--IP_BTN_BO);
}

    .btn-primary:focus,
    .btn-primary.focus {
        color: #fff;
        background-color: var(--IP_BTN_BG_Focus);
        border-color: var(--IP_BTN_BO_Focus);
        box-shadow: var(--IP_BTN_Focus_Shadow);
    }

    .btn-primary:focus-visible,
    .btn-primary.focus-visible {
        color: #fff;
        background-color: var(--IP_BTN_BG_Focus);
        border-color: var(--IP_BTN_BO_Focus);
        outline-color: var(--IP_BTN_Focus_Outline);
    }

    .btn-primary:hover {
        /*        color: #fff;
        background-color: var(--IP_BTN_BG_Blue_Hover);
        border-color: var(--IP_BTN_BO_Blue_Hover);*/
        color: #fff;
        background-color: var(--IP_BTN_BG_Hover);
        border-color: var(--IP_BTN_BO_Hover);
        box-shadow: var(--IP_BTN_Hover_Shadow);
    }

    .btn-primary:active,
    .btn-primary.active,
    .open > .dropdown-toggle.btn-primary {
        color: #fff;
        background-color: var(--IP_BTN_BG_Blue_Active);
        background-image: none;
        border-color: var(--IP_BTN_BO_Blue_Active);
    }

    .btn-primary.disabled, .btn-primary:disabled {
        color: #fff;
        background-color: var(--IP_BTN_BG);
        border-color: var(--IP_BTN_BO);
    }

        .btn-primary:active:hover,
        .btn-primary.active:hover,
        .open > .dropdown-toggle.btn-primary:hover,
        .btn-primary:active:focus,
        .btn-primary.active:focus,
        .open > .dropdown-toggle.btn-primary:focus,
        .btn-primary:active.focus,
        .btn-primary.active.focus,
        .open > .dropdown-toggle.btn-primary.focus {
            color: #fff;
            background-color: #204d74;
            border-color: #122b40;
        }

    .btn-primary.disabled:hover,
    .btn-primary[disabled]:hover,
    fieldset[disabled] .btn-primary:hover,
    .btn-primary.disabled:focus,
    .btn-primary[disabled]:focus,
    fieldset[disabled] .btn-primary:focus,
    .btn-primary.disabled.focus,
    .btn-primary[disabled].focus,
    fieldset[disabled] .btn-primary.focus {
        background-color: var(--IP_BTN_BG_Disabled_Hover);
        border-color: var(--IP_BTN_BO_Disabled_Hover);
        box-shadow:none;
    }



.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    color: #fff;
    background-color: var(--IP_BTN_BG_Active);
    border-color: var(--IP_BTN_BO_Active);
    box-shadow: none;
}

.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
    color: #fff;
    background-color: var(--IP_BTN_BG_Focus);
    border-color: var(--IP_BTN_BO_Focus);
    box-shadow: var(--IP_BTN_Focus_Shadow);
}


.btn-check:checked + .btn:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible, .btn:first-child:active:focus-visible, :not(.btn-check) + .btn:active:focus-visible {
    box-shadow: var(--IP_BTN_Focus_Shadow);
}

.btn-lg,
.btn-group-lg > .btn {
    padding: 10px 16px;
    font-size: var(--IP_L);
    line-height: 1.3333333;
    border-radius: 6px;
}

.btn-sm,
.btn-group-sm > .btn {
    padding: 0.5rem 1.2rem;
    font-size: var(--IP_N);
    line-height: 1.5;
    border-radius: 3px;
}

.btn-xs,
.btn-group-xs > .btn {
    padding: 0.1rem 0.7rem;
    font-size: var(--IP_S);
    line-height: 1.5;
    border-radius: 3px;
}



/*NAVBAR*/

.bg-dark {
    background-color: var(--IP_NAV_BG) !important;
}

.bg-light {
    background-color: var(--IP_Body) !important;
}

.navbar {
    min-height: unset;
    margin-bottom: 0px;
    border: 1px solid transparent;
    font-size: var(--IP_N);
    box-shadow: 0 1px 8px 0 rgb(127 119 137 / 50%);
    font-weight: 500;
    padding-top: 0px;
    padding-bottom: 0px;
}

.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 0.5rem;
    font-size: var(--IP_N);
}

.dropdown-menu {
    font-size: var(--IP_N);
    color: var(--IP_NAV_TEXT);
    background-color: var(--IP_NAV_BG);
    border: 0;
    border-radius: 0;
    /*border-left: 1px solid var(--IP_NAV_TEXT);*/
    padding: 0;
    margin-left:1rem;
}

.dropdown-item {
    color: var(--IP_NAV_TEXT);
    background-color: var(--IP_NAV_BG);
}

    .dropdown-item.sub1 {
        font-size: var(--IP_S);
    }


    .dropdown-item:focus, .dropdown-item:hover {
        color: var(--IP_NAV_TEXT);
        background-color: var(--IP_Black10);
    }

.navbar-dark .navbar-brand {
    color: var(--IP_NAV_TEXT);
}

    .navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
        color: var(--IP_NAV_TEXT);
    }

.navbar-dark .navbar-nav .nav-link {
    color: var(--IP_NAV_TEXT);
    font-size: var(--IP_N);
}

    .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
        color: var(--IP_NAV_TEXT);
    }

    .navbar-dark .navbar-nav .nav-link.disabled {
        color: rgba(255, 255, 255, 0.25);
    }

    .navbar-dark .navbar-nav .show > .nav-link,
    .navbar-dark .navbar-nav .nav-link.active {
        color: var(--IP_NAV_TEXT);
    }

.navbar-dark .navbar-toggler {
    color: var(--IP_White);
    /*border-color: rgba(255, 255, 255, 0.85);*/
    padding: 1px 6px 1px 6px;
}

.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2834, 2, 71, 1.00%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

.navbar-dark .navbar-text {
    color: rgba(255, 255, 255, 0.55);
}

    .navbar-dark .navbar-text a,
    .navbar-dark .navbar-text a:hover,
    .navbar-dark .navbar-text a:focus {
        color: #fff;
    }

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.05rem;
}


.dropdown-divider {
    height: 0;
    margin-left: 5px;
    border-top: 1px solid var(--IP_Gray);
}

@media (min-width: 992px) {


    .navbar {
        font-size: var(--IP_L); /*AB*/
    padding-top: 0;
    padding-bottom: 0;
}

    .navbar-brand {
        font-size: var(--IP_L);
    }

    .navbar-expand-lg {
        flex-wrap: nowrap;
        justify-content: flex-start;
        column-gap: 1rem;
    }

    .navbar-expand-lg .navbar-toggler {
        display: none;
    }



    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
        align-items: center;
    }

    .mb-lg-0 {
        margin-bottom: 0 !important;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
        padding-top: 0;
        padding-bottom: 0;
        font-size: var(--IP_L);
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
        background-color: var(--IP_NAV_BG);
        color: var(--IP_NAV_TEXT);
        border: 1px solid var(--IP_LightGray);
        border-top: 2px solid var(--IP_NAV_TEXT);
        font-size: var(--IP_L);
    }

    .dropdown-menu[data-bs-popper] {
        margin-top: 0.7rem;
    }

    .nav-item {
        padding-left: calc(0.6rem * var(--T_ZOOM));
    }

    .dropdown-item {
        color: var(--IP_NAV_TEXT);
        background-color: var(--IP_NAV_BG);
    }

        .dropdown-item.sub1 {
            font-size: var(--IP_N);
        }



}




@media (min-width: 1024px) {
    .navbar-expand-lg .navbar-nav {
        column-gap: 2rem;
    }
}

.tooltip {
    font-size: var(--IP_S);

}

    .tooltip.show {
        opacity: 99%;
    }



.tooltip-inner {
    background-color: var(--IP_TOOLTIP_BG);
    box-shadow: var(--IP_TOOLTIP_SHADOW);
    opacity: 1 !important;
    border: 1px solid var(--IP_TOOLTIP_BORDER);
    border-radius: 0.50rem;
    color: var(--IP_Black);
    max-width: 450px !important;
    width: auto !important;
}

.tooltip.bs-tooltip-right .tooltip-arrow::before {
    border-right-color: var(--IP_TOOLTIP_BORDER) !important;
}

.tooltip.bs-tooltip-left .tooltip-arrow::before {
    border-left-color: var(--IP_TOOLTIP_BORDER) !important;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--IP_TOOLTIP_BORDER) !important;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--IP_TOOLTIP_BORDER) !important;
}




/*Accordion*/

.accordion {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
}

.accordion-button {
    font-size: var(--IP_N);
    color: var(--IP_Text_Black);
    padding: 1.0rem 1.25rem 1.0rem 1.25rem;
    background-color: transparent;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-end;
    text-align: left;
}

    /*.accordion-button.Default_Acc {*/
        /*color: var(--IP_White);*/
    /*}*/

    .accordion-button:not(.collapsed) {
        color: var(--IP_Text_Black);
        background-color: var(--IP_BG_SectionHeader);
        box-shadow: none;
    }

/*    .accordion-button.Default_Acc:not(.collapsed) {
        color: var(--IP_Text_Black);
        background-color: var(--IP_Black10);
        box-shadow: none;
    }*/

    .accordion-button:hover {
        background-color: var(--IP_HOVER_BOX_BG_hover);
    }

/*    .accordion-button.Default_Acc:hover {
        background-color: var(--IP_Black10);
        color: var(--IP_NativeBlack);
    }
*/
    .accordion-button:focus {
        box-shadow: none;
    }

    .accordion-button::after {
        width: var(--IP_N);
        height: var(--IP_N);
        background-size: var(--IP_N);
        margin-right: calc(1.25rem * var(--T_ZOOM));
        margin-left: 0px;
    }

.accordion-item {
    color: var(--IP_Text_Black);
    background-color: transparent;
}

/*    .accordion-item.Default_Acc {
        color: var(--IP_Text_Black);
        background-color: var(--IP_Black10);
    }*/


.accordion-collapse {
    transition: all 0.5s ease-in;
}



.accordion-body {
    font-size: var(--IP_S);
    padding: 1.25rem 1.25rem 3.5rem 1.25rem;
    padding-left: calc(var(--IP_S) + 1.25rem + calc(1.25rem * var(--T_ZOOM)));
}

/*    .accordion-body.Default_Acc {
        background-color: var(--IP_Black05);
    }*/


@media screen and (min-width: 769px) {
    .accordion-button {
        font-size: var(--IP_L);
        padding: 1.5rem 1.25rem 1.5rem 1.25rem;
    }

/*        .accordion-button:not(.collapsed) {
            color: var(--IP_Blue);
            background-color: var(--IP_BG_SectionHeader);
            box-shadow: none;
        }
*/
/*        .accordion-button:hover {
            background-color: var(--IP_HOVER_BOX_BG_hover);
        }

        .accordion-button:focus {
            box-shadow: none;
        }*/

        .accordion-button::after {
            width: var(--IP_L);
            height: var(--IP_L);
            background-size: var(--IP_L);
        }

/*    .accordion-item {
        color: var(--IP_Black);
        background-color: transparent;
    }*/

    .accordion-body {
        font-size: var(--IP_N);
        padding: 1.25rem 1.25rem 3.5rem 3.25rem;
        padding-left: calc(var(--IP_L) + 1.25rem + calc(1.25rem * var(--T_ZOOM)));
    }
}


/*Bootstrap Icons*/

.bi-clock-history::before {
    font-weight: bold !important;
}


