:root {
    /* itb-Variablen */
    --itb-bg-vg-color: #e3000f;
    --itb-bg-vg-color-rgb: 227, 0, 15;
    --itb-vg-color-dark: #b0000c;
    --itb-vg-color-dark-rgb: 176, 0, 12;
    --itb-text-vg-light: #fff;
    --itb-text-dark: #7a7a7a;
    --itb-border-light: #ced4da;
    --itb-border-hover: #989898;
    --itb-bg-grey: #f2f2f2;
    --itb-bg-white: #fff;
    --itb-bg-danger: #dc3545;
    --itb-bg-badge: #333;

    --itb-bg-vg-color-light: #fdbdba;
    --itb-bg-color-gelb: #fff2ab;
    --itb-bg-color-gelb-dark: #ffed00;
    --itb-bg-color-violett: #d2d2f7;
    --itb-bg-color-violett-dark: #581c6d;
    --itb-color-black: #000;


    /* Bootstrap Root-Variablen (nur die, die Bootstrap im :root setzt!) */
    --bs-primary: var(--itb-bg-vg-color);
    --bs-primary-rgb: var(--itb-bg-vg-color-rgb);
    --bs-secondary: var(--itb-bg-white);
    --bs-secondary-rgb: var(--itb-vg-color-dark-rgb);
    --bs-info: var(--itb-vg-color-dark);
    --bs-info-rgb: var(--itb-vg-color-dark-rgb);
    --bs-danger: var(--itb-bg-danger);
    --bs-body-color: var(--itb-text-dark);
    --bs-body-bg: var(--itb-bg-white);
    --bs-border-color: var(--itb-border-light);
    --bs-badge-bg: var(--itb-bg-badge);

    /* Link-Variablen */
    --bs-link-color: var(--itb-vg-color-dark);
    --bs-link-color-rgb: var(--itb-bg-vg-color-rgb);
    --bs-link-opacity: 1;
    --bs-link-hover-color: #777;
    --bs-link-hover-color-rgb: 119,119,119;
    --bs-link-hover-opacity: 1;

    /* Heading-Farbe
    --bs-heading-color: var(--itb-bg-vg-color);
  */
    /* Emphasis/Text-Emphasis Farben (optional) */
    --bs-light-text-emphasis: var(--itb-text-vg-light);
    --bs-dark-text-emphasis: var(--itb-text-dark);

    --bs-body-font-family: RobotoRegular,  sans-serif;
    --bs-nav-link-font-size: 22px;
}

/* Navbar-Variablen im Scope der Navbar für .nav-link */
.navbar {
    --bs-navbar-color: var(--itb-bg-vg-color);
    --bs-navbar-hover-color: var(--itb-bg-vg-color);
    --bs-navbar-active-color: var(--itb-bg-vg-color);
    --bs-navbar-disabled-color: #bdbdbd;
    --bs-navbar-brand-color: var(--itb-bg-vg-color);
    --bs-navbar-brand-hover-color: var(--itb-vg-color-dark);
}

.btn,
.btn-primary {
    --bs-btn-hover-bg: var(--itb-vg-color-dark);
    --bs-btn-hover-color: var(--itb-text-vg-light);
    --bs-btn-hover-border-color: var(--itb-vg-color-dark);
    --bs-btn-active-bg: var(--itb-vg-color-dark);
    --bs-btn-active-color: var(--itb-text-vg-light);
    --bs-btn-active-border-color: var(--itb-vg-color-dark);
    --bs-btn-disabled-bg: var(--itb-bg-vg-color);
    --bs-btn-disabled-color: var(--itb-text-vg-light);
}

.btn {
    --bs-btn-bg: var(--itb-bg-grey);
    --bs-btn-color: var(--itb-bg-vg-color);
    --bs-btn-border-color: var(--itb-vg-color-dark);
    --bs-btn-disabled-border-color: var(--itb-bg-vg-color);
}

.btn-primary {
    --bs-btn-bg: var(--itb-bg-vg-color);
    --bs-btn-color: var(--itb-text-vg-light);
    --bs-btn-border-color: var(--itb-bg-vg-color);
    --bs-btn-disabled-border-color: var(--itb-bg-vg-color);
}

.btn-secondary {
    --bs-btn-bg: var(--itb-bg-white);
    --bs-btn-color: #000;
    --bs-btn-border-color: var(--itb-border-light);
    --bs-btn-hover-bg: var(--itb-border-hover);
    --bs-btn-hover-color: white;
    --bs-btn-hover-border-color: var(--itb-border-hover);
    --bs-btn-active-bg: var(--itb-border-hover);
    --bs-btn-active-color: white;
    --bs-btn-active-border-color: var(--itb-border-hover);
    --bs-btn-disabled-bg: var(--itb-bg-vg-color);
    --bs-btn-disabled-color: var(--itb-text-vg-light);
    --bs-btn-disabled-border-color: var(--itb-border-light);
}

.header-logo {
    width: 205px;
    margin-top: -8px;
}

header a:hover {
    color: #000;
}

header a.nav-link {
    border-bottom: 3px solid white !important;
}

header a.nav-link.active,
header a.nav-link:hover,
header .itb-sprachwechsel a.active,
header .itb-sprachwechsel a:hover {
    border-bottom: 3px solid #e3000f  !important;;
}

header .itb-sprachwechsel {
    font-size: var(--bs-nav-link-font-size);
}

header .itb-sprachwechsel a {
    border: none;
}

body {
    font-family: NeuzeitGroteskRegular, Helvetica, Arial, sans-serif;
    color: var(--itb-color-black);
}

h1, h2, h3, h4, h5, h6 {
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    font-weight: 300;
}

h1 {
    font-size: 2.0625rem;
    line-height: 2.625rem;
    font-weight: bolder;
}

h2 {
    font-size: 26px;
    line-height: 26px;
}

h3 {
    font-size: 24px;
    line-height: 24px;
    font-weight: 800;
}

h4 {
    font-size: 22px;
    line-height: 22px;
    font-weight: 600
}

footer {
    color: #fff;
    background-color: #4d4d4d;
}

footer a {
    color: white;
    border-bottom: 1px solid #4d4d4d;
}

footer a:hover {
    color: white;
    border-bottom: 1px solid white;
}

footer .card a {
    color: #212529;
}

footer .card {
    height: 100%;
}

footer .bottom-row {
    border-top: 1px solid white;
    padding-top: 5px;
}

footer .a-button__element {
    padding: 0 !important;
    width: 35px;
    height: 35px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

footer .a-button__element:hover {
    text-decoration: none;
}

footer  .m-follow-us__label span {
    font-size: 0.875rem;
    line-height: 1.375rem;
    letter-spacing: 0.39438rem
}

footer .col-6:has(.m-follow-us__label) {
    border-top: 1px solid white;
}

a {
    text-decoration-line: none;
}

a,
.card .card-body a:not(.btn) {
    color: #000;
    border-bottom: 3px solid #e3000f;
    transition: all .3s ease-in-out;
}

.bg-primary {
    --bs-bg-opacity: 1;
    background-color: var(--itb-bg-vg-color)!important;
}

.alert-info a {
    color: inherit !important;
    text-decoration: underline!important;
}

.card {
    color: var(--itb-color-black);
    background-color: var(--itb-bg-grey);
}

.pointer {
    cursor: pointer;
}

.card-header {
    border-bottom: 0;
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    background: none!important;
    font-size: 2rem;
    line-height: 2.575rem;
    color: var(--bs-heading-color);
}

.btn {
    border-radius: 24px;
    transition: all .3s ease-in-out;
    padding: 12px 20px 10px 20px;
    display: inline-flex;
    align-items: center;
    font-size: 1.175rem;
    line-height: 1.175rem;
}

.btn-primary  {
    background-color: var(--itb-bg-vg-color);
    border-color: var(--itb-bg-vg-color);
    color: var(--itb-text-vg-light);
}

btn-primary:hover {
    background-color: #2d2d2d!important;
    border-color: #2d2d2d!important;
}

.btn-primary:active {
    background-color: #87888a!important;
    border-color: #87888a!important;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding: 0;
    margin-right: 2rem;
    color: #000000;
}


#nav-UNTEN li {
    margin-bottom: 20px;
}

#nav-UNTEN .card,
#nav-UNTEN .accordion {
    border: none;
    background-color: #f2f2f2;
    border-radius: 24px;
}

#nav-UNTEN .accordion-header {
    border-radius: 24px;
    transition: all .3s ease-in-out;
    padding: 12px 12px 10px 20px;
    display: inline-flex;
    align-items: center;
    font-size: 1.175rem;
    line-height: 1.175rem;
}

#nav-UNTEN .card-body,
#nav-UNTEN .accordion-header{
    color: #212529!important;
}

.gelb {
    background-color: var(--itb-bg-color-gelb);
}

.gelb:hover {
    background-color: var(--itb-bg-color-gelb-dark);
}

.purple {
    background-color: #ece6ff;
}

.purple:hover {
    background-color: #e0d6ff;
}

.grau {
    background-color: #f2f2f2;
}

.grau:hover {
    background-color: #D3D3D3;
}

.rot {
    background-color: var(--itb-bg-vg-color-light);
    color:  var(--bs-heading-color);
}

.rot:hover {
    background-color: var(--itb-bg-vg-color);
    color: var(--itb-bg-white);
}

.violett {
    background-color: var(--itb-bg-color-violett);
}

.violett:hover {
    background-color: var(--itb-bg-color-violett-dark);
    color: var(--itb-bg-white);
}


.navbar {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23e3000f' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --bs-navbar-toggler-focus-width: 0;
}


#kunden-nr {
    font-size: 12px;
}


.btn:not(:has(i)):not(:has([class*='bs-'])):after {

    transition: all .3s ease-in-out;
    display: block;
    color: inherit;
    font-family: "Font Awesome 6 Free";
    content: "\f054";
    font-weight: 900; /* Für Solid-Icons notwendig */
    margin-left: 5px;
}


.accordion-header {
    border-bottom: 0;
    font-size: 2rem;
    line-height: 2.575rem;
    font-weight: bolder;
}

.text2html{
    white-space: pre-line;
}

.loader {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid var(--itb-bg-vg-color); /* Orange */
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 2s linear infinite;
}


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}