/* =======================================
   Variables
   ======================================= */
:root {
    /* smooth height transition */
    interpolate-size: allow-keywords;
    
    /* color theme vars */
    --TA-main-blue-dark: 0,35,45;
    --TA-main-blue-normal: 0,80,153;

    --TA-background-gray-darkest: 33,43,53;
    --TA-background-gray-darker: 63,75,89;
    --TA-background-gray-dark: 100,112,126;
    --TA-background-gray-medium: 208,209,210;
    --TA-background-gray-light: 248,249,250;
    --TA-background-gray-lighter: 240,244,248;
    --TA-background-gray-hover: 222,226,230;
    --TA-background-white: 255,255,255;
    --TA-border-gray-dark: 173,181,189;
    --TA-border-gray-medium: 108,117,125;
    --TA-border-gray-light: 222,226,230;
    --TA-border-gray-lighter: 240,244,248;
    
    --TA-textcolor-gray-darkest: 33,43,53;
    --TA-textcolor-gray-darker: 73,85,99;
    --TA-textcolor-gray-dark: 173,181,189;
    --TA-textcolor-gray-medium: 108,117,125;
    --TA-textcolor-gray-light: 222,226,230;
    --TA-textcolor-gray-lighter: 240,244,248;
    --TA-textcolor-white: 255,255,255;
    
    --TA-linkcolor-gray-light: 222,226,230;
    --TA-linkcolor-darkest: 33,43,53;
    --TA-linkcolor-darker: 73,85,99;
    --TA-linkcolor-medium: 108,117,125;
    --TA-linkcolor-blue-dark: 0,80,153;
    --TA-linkcolor-blue-light: 102,35,238;

    --TA-focusvisible-lighttheme: rgba(13,110,253,.25);
    --TA-focusvisible-darktheme: rgba(240,244,248,.5);
}

/* =======================================
   Animations
   ======================================= */

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-180deg);
    }
}
/* spin used, search: #animation spin */

/* =======================================
   Global Overrides and Resets
   ======================================= */
*:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem var(--TA-focusvisible-lighttheme);
}
body {
    font-family: Roboto, Arial, Helvetica, sans-serif;
    /* bootstrap overrides */
    --bs-body-line-height: 1.25;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
h1,h2,h3,h4,h5,h6 {
    font-family: "Roboto Slab";
}
h1 {font-size: 2.5rem;}
h2 {font-size: 2rem;}
h3 {font-size: 1.625rem;}
h4 {font-size: 1.375rem;}
h5 {font-size: 1.125rem;}
h6 {font-size: 1rem;}

a,a:active,a:visited {
    text-decoration: none;
    color: rgb(var(--TA-linkcolor-blue-dark));
}
a:hover,a:focus,a:focus-visible {
    text-decoration: none;
    color: rgb(var(--TA-linkcolor-blue-light));
}
a>svg {
    fill: rgb(var(--TA-linkcolor-blue-dark));
}
a:hover>svg {
    fill: rgb(var(--TA-linkcolor-blue-light));
}

button {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
}
button.btn:hover,
button.btn:focus-visible,
button:hover,
button:focus-visible {
    background: rgb(var(--TA-background-gray-light));
    color: rgb(var(--TA-textcolor-gray-medium));
}

button.btn:focus-visible,
button:focus-visible {
    box-shadow: 0 0 0 .25rem var(--TA-focusvisible-lighttheme);
}

/* =======================================
   Component: Header
   ======================================= */

header#site-header {
    position: fixed;
    width: 100vw;
    z-index: 9000;
    box-shadow: 0px 0px 4px 0px #000;
}

header#site-header:has(.navbar-toggler.collapsed) {
    box-shadow:none;
}
header#site-header .theme-toggler {
    height: 2.375rem;
    width: 2.375rem;
    border-radius: .375rem;
    font-size: 1.25rem;
    line-height: 1.25rem;
    padding: 5px;
}
header#site-header button.btn {
    color: rgb(var(--TA-linkcolor-darkest));
}

/* =======================================
   Component: Header Top
   ======================================= */

header#site-header .header-top {
    background: rgb(var(--TA-background-white));
}


/* Navbar Toggler (Bootstrap override) */
header#site-header .header-top .navbar .navbar-toggler {
    border: none;
    height: 54px;
}
header#site-header .header-top .navbar .navbar-toggler:focus {
    box-shadow: none;
}
header#site-header .header-top .navbar .navbar-toggler:focus-visible {
    box-shadow: inset 0 0 0 .25rem var(--TA-focusvisible-lighttheme);
}
header#site-header .header-top .navbar .navbar-toggler .custom-toggler {
    display: inline-block;
    width: 30px;
    height: 20px;
    position: relative;
    transition: transform .35s ease;
    transform: rotate(0deg);
}
header#site-header .header-top .navbar .navbar-toggler .custom-toggler .line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
    border-radius: 2px;
    transition: all .35s ease;
}
header#site-header .header-top .navbar .navbar-toggler .custom-toggler .line1 {
    top: 0;
}
header#site-header .header-top .navbar .navbar-toggler .custom-toggler .line2 {
    top: 50%;
    transform: translateY(-50%);
}
header#site-header .header-top .navbar .navbar-toggler .custom-toggler .line3 {
    bottom: 0;
}

/* bootstrap navbar toggler expanded states */
header#site-header .header-top .navbar .navbar-toggler:not(.collapsed) .custom-toggler {
    transform: rotate(180deg); /* Spin full circle during transition */
}
header#site-header .header-top .navbar .navbar-toggler:not(.collapsed) .custom-toggler .line1 {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
header#site-header .header-top .navbar .navbar-toggler:not(.collapsed) .custom-toggler .line2 {
    opacity: 0;
    transform: translateY(0%) rotate(180deg); /* Slide out for fade effect */
}
header#site-header .header-top .navbar .navbar-toggler:not(.collapsed) .custom-toggler .line3 {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

/* =======================================
   Component: Header Bottom
   ======================================= */

header#site-header .header-bottom {
    background: rgb(var(--TA-background-gray-light));
}
header#site-header .header-bottom .navbar-collapse {
    max-width: 100%;
}
/*
header#site-header .header-bottom .searchbar-m {
}*/
header#site-header .header-bottom .searchbar-m form {
    flex: 1;
}
header#site-header .header-bottom ul.navbar-nav {
    background: none;
}
header#site-header .header-bottom ul.navbar-nav a,
header#site-header .header-bottom ul.navbar-nav a:active,
header#site-header .header-bottom ul.navbar-nav a:visited {
    color: rgb(var(--TA-linkcolor-darkest));
}
header#site-header .header-bottom ul.navbar-nav a:hover {
    background: rgb(var(--TA-background-gray-hover));
    color: rgb(var(--TA-linkcolor-medium));
}
header#site-header .header-bottom ul.navbar-nav a:focus-visible {
    box-shadow: inset 0 0 0 .25rem var(--TA-focusvisible-lighttheme);
}
header#site-header .header-bottom ul.navbar-nav>li.nav-item {
    border-bottom: solid 1px rgb(var(--TA-border-gray-dark));
}
header#site-header .header-bottom ul.navbar-nav>li.nav-item a {
    padding: 1rem .5rem 1rem .4375rem;
}
header#site-header .header-bottom ul.navbar-nav>li.nav-item.dropdown a {
    border-right: solid 1px rgb(var(--TA-border-gray-light));
}
header#site-header .header-bottom ul.navbar-nav>li.nav-item>ul.dropdown-menu {
    padding: 0;
    border-radius: 0;
}
header#site-header .header-bottom ul.navbar-nav>li.nav-item>ul.dropdown-menu>li.nav-item {
    border-bottom: solid 1px rgb(var(--TA-border-gray-light));
}
header#site-header .header-bottom ul.navbar-nav>li.nav-item>ul.dropdown-menu>li.nav-item a {
    border: none;
    padding: .5625rem 0 .5rem 1rem;
}
header#site-header .header-bottom ul.navbar-nav>li.nav-item>ul.dropdown-menu>li.nav-item.nav-item-last {
    margin-bottom: .5rem;
    border-bottom: none;
}
header#site-header .header-bottom ul.navbar-nav li.nav-item:last-child,
header#site-header .header-bottom ul.navbar-nav li.nav-item>ul.dropdown-menu>li.nav-item.nav-item-last a {
    border-bottom: none;
}
/* desktop media query, search: #desktop header */





/* Navbar Firefox/Safari Fix (Bootstrap override) */
.ua-ff #header-navbar,
.ua-ios #header-navbar {
    display:block !important;
    overflow:hidden !important;
    height: auto !important;
    max-height: 0;
    transition: max-height .35s ease-in-out !important;
}
.ua-ff #header-navbar.show,
.ua-ios #header-navbar.show,
.ua-ff #header-navbar.collapsing,
.ua-ios #header-navbar.collapsing {
    height: auto !important;
    max-height: var(--WA-max-height) !important;
}

/* =======================================
   Component: Dropdown Menu (Submenu)
   ======================================= */

header#site-header .header-bottom .dropdown-menu {
    margin-top: 0;
    display: block !important;
    height: 0;
    transition: height .35s ease-in-out;
    overflow: hidden;
    background: transparent;
    border: none;
}
header#site-header .header-bottom .dropdown-menu.show,
header#site-header .header-bottom .dropdown-menu:has(:focus-visible) {
    height: auto;
}

.ua-ff header#site-header .header-bottom .dropdown-menu,
.ua-ios header#site-header .header-bottom .dropdown-menu {
    height: auto;
    transition: max-height .35s ease-in-out;
    max-height: 0;
}
.ua-ff header#site-header .header-bottom .dropdown-menu.show,
.ua-ios header#site-header .header-bottom .dropdown-menu.show,
.ua-ff header#site-header .header-bottom .dropdown-menu:has(:focus-visible),
.ua-ios header#site-header .header-bottom .dropdown-menu:has(:focus-visible) {
    max-height: var(--WA-max-height);
}

/* bootstrap submenu-toggler */ 

header#site-header .header-bottom ul.navbar-nav .submenu-toggler {
    outline: 0;
    aspect-ratio : 1 / 1;
    height: 3.25rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0;
    border: none;
    font-weight: bold;
    font-size: 1.5rem;
    background: transparent;
    overflow: hidden;
    flex-shrink: 0;
}
header#site-header .header-bottom ul.navbar-nav .submenu-toggler:hover {
    background: rgb(var(--TA-background-gray-hover));
}
header#site-header .header-bottom ul.navbar-nav .submenu-toggler:focus-visible {
    box-shadow: inset 0 0 0 .25rem var(--TA-focusvisible-lighttheme);
}
header#site-header .header-bottom ul.navbar-nav .submenu-toggler i.bi {
    line-height: 0;
    color: rgb(var(--TA-textcolor-gray-darkest));
}

header#site-header .header-bottom ul.navbar-nav .submenu-toggler i.spinning {
    animation: spin .35s ease-in-out;
}
header#site-header .header-bottom ul.navbar-nav .submenu-toggler i.expanded.spinning {
    animation: spin .35s ease-in-out reverse;
}
/* spin used, search: #animation spin */
/* desktop media query, search: #desktop dropdown */


/* =======================================
   Component: Main
   ======================================= */

/* main {

} */

/* =======================================
   Component: Site-Footer
   ======================================= */

footer#site-footer {
    position: relative;
    background: rgb(var(--TA-main-blue-dark));
    color: rgb(var(--TA-textcolor-white));
    overflow: hidden;
}
footer#site-footer::before {
    content: "";
    position: absolute;
    background-image: url('/assets/img/footer-bg.webp');
    opacity: .25;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}


/* =======================================
   Media Query: Desktop only
   ======================================= */

@media (min-width: 62rem) { /* 992px */
    /* #desktop header */
    header#site-header {
        box-shadow: none;
    }
    header#site-header .header-bottom ul.navbar-nav>li.nav-item {
        border-bottom: none;
    }
    header#site-header .header-bottom ul.navbar-nav>li.nav-item a {
        padding-top: .5625rem;
        padding-bottom: .5rem;
        white-space: nowrap;
    }
    header#site-header .header-bottom ul.navbar-nav>li.nav-item>div>a:hover {
        background: transparent;
    }
    header#site-header .header-bottom ul.navbar-nav>li.nav-item.dropdown a {
        border-right: none;
    }
    header#site-header .header-bottom ul.navbar-nav>li.nav-item>ul.dropdown-menu {
        border-radius: 0.375rem;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    header#site-header .header-bottom ul.navbar-nav>li.nav-item:nth-last-child(-n+2)>ul.dropdown-menu {
        right: 0;
    }
    header#site-header .header-bottom ul.navbar-nav>li.nav-item>ul.dropdown-menu>li.nav-item.nav-item-last {
        margin-bottom: 0;
    }
    header#site-header .header-bottom ul.navbar-nav>li.nav-item>ul.dropdown-menu>li.nav-item a {
        padding: .5625rem 1rem .5rem 1rem;
    }

    /* #desktop dropdown */ 
    header#site-header .header-bottom .dropdown .dropdown-menu {
        top: 100%;
        background: rgb(var(--TA-background-gray-light));
        border: solid 1px rgb(var(--TA-border-gray-light));
        border-top: none;
        border-bottom: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    header#site-header .header-bottom .dropdown-menu.show {
        height: 0;
    }
    header#site-header .header-bottom .dropdown:hover .dropdown-menu,
    header#site-header .header-bottom .dropdown:has(:focus-visible) .dropdown-menu {
        height: auto;
    }
    header#site-header .header-bottom ul.navbar-nav li.nav-item>ul.dropdown-menu.show>li.nav-item.nav-item-last a,
    header#site-header .header-bottom ul.navbar-nav li.dropdown:hover ul.dropdown-menu>li.nav-item.nav-item-last a,
    header#site-header .header-bottom ul.navbar-nav li.dropdown:has(:focus-visible) ul.dropdown-menu>li.nav-item.nav-item-last a {
        border-bottom: solid 1px rgb(var(--TA-border-gray-light));
    }
    header#site-header .header-bottom ul.navbar-nav li.dropdown ul.dropdown-menu>li.nav-item a:focus-visible {
        box-shadow: inset 0 0 0 .25rem var(--TA-focusvisible-lighttheme);
    }
    header#site-header .header-bottom .dropdown .dropdown-menu li a:hover  {
        background: rgb(var(--TA-background-gray-hover));
    }

    
    /* Navbar Firefox/Safari Fix (Bootstrap override) */
    .ua-ff #header-navbar,
    .ua-ios #header-navbar {
        display: flex !important;
        max-height: initial !important;
        overflow: initial !important;
        /* height: initial !important; */
    }
    .ua-ios header#site-header .header-bottom .dropdown-menu.show,
    .ua-ios header#site-header .header-bottom .dropdown-menu.show {
        max-height: 0;
    }
    .ua-ff header#site-header .header-bottom .dropdown:hover .dropdown-menu,
    .ua-ios header#site-header .header-bottom .dropdown:hover .dropdown-menu,
    .ua-ff header#site-header .header-bottom .dropdown:has(:focus-visible) .dropdown-menu,
    .ua-ios header#site-header .header-bottom .dropdown:has(:focus-visible) .dropdown-menu {
        max-height: var(--WA-max-height);
    }
}

/* =======================================
   Misc
   ======================================= */


   /* dekra siegel */
    #dekrasiegel {
        position: fixed;
        left: 34px;
        z-index: 8;
        bottom: 30px;
        height: 113px;
        pointer-events: none;
    }

    #dekrasiegel img {
        display: block;
        opacity: .75;
    }

    @media (max-width: 1440px) {
        #dekrasiegel {
        filter: drop-shadow(0 0 2px #333);
        }

        #dekrasiegel img {
        opacity: 1;
        }
    }

    @media (max-width: 991px) {
        #dekrasiegel {
        height: 91px;
        left: 10px;
        }

        #dekrasiegel img {
        height: 91px;
        }
    }

    @media (max-width: 767px) {
        #dekrasiegel {
        height: 71px;
        }

        #dekrasiegel img {
        height: 71px;
        }
    }
/* =======================================
   Tests ++ NEW ++ TEMP
   ======================================= */