/* Hauptnavigation – Farben (gilt auch im transparenten Header) */
#page-header .navbar-nav .nav-link,
.navbar-default-transition:not(.navbar-transition) .navbar-nav > li > .nav-link {
    --bs-nav-link-color: #1d1d1b;
    --bs-nav-link-hover-color: #1d1d1b;
    --bs-navbar-active-color: var(--nav-highlight);
}

/* Hauptnavigation – Buttons (Desktop) */
@media (min-width: 992px) {
    #mainnavigation .navbar-nav {
        gap: .75rem;
        align-items: center;
    }

    #mainnavigation .navbar-nav > .nav-item {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        background: #fff;
        border: 1.5px solid #1d1d1b;
        border-radius: 10px;
        transition: border-color .2s ease;
    }

    #mainnavigation .navbar-nav > .nav-item:has(> .nav-link-main.active) {
        border-color: var(--nav-highlight);
    }

    /* Fokus-Rahmen um den ganzen Button statt nur um den Pfeil */
    #mainnavigation .navbar-nav .nav-link:focus,
    #mainnavigation .navbar-nav .nav-link:focus-visible {
        box-shadow: none;
        outline: none;
    }

    #mainnavigation .navbar-nav > .nav-item:has(> .nav-link:focus-visible),
    #mainnavigation .dropdown-nav > .nav-item:has(> .nav-link:focus-visible) {
        outline: 2px solid var(--nav-highlight);
        outline-offset: 2px;
    }

    #mainnavigation .navbar-nav > .nav-item > .nav-link-main {
        padding: .6rem 1.1rem;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
    }

    #mainnavigation .navbar-nav > .nav-item:has(> .nav-link-toggle) > .nav-link-main {
        padding-right: .35rem;
    }

    /* Unterstrich des Bootstrap Package entfernen */
    #mainnavigation .navbar-nav > .nav-item > .nav-link-main:before {
        display: none;
    }

    #mainnavigation .navbar-nav > .nav-item > .nav-link-toggle,
    #mainnavigation .navbar-nav > .nav-item > .nav-link-toggle.show {
        color: #1d1d1b;
        padding: .6rem 1.1rem .6rem .35rem;
        border: 0;
        background: transparent;
    }

    /* Chevron */
    #mainnavigation .nav-link-toggle .nav-link-indicator:before {
        border-width: 2px 0 0 2px;
        padding: .3em 0 0 .3em;
        margin-top: -.25em;
        transform: rotate(-135deg);
    }

    #mainnavigation .nav-link-toggle.show .nav-link-indicator:before {
        margin-top: .25em;
        transform: rotate(45deg);
    }

    /* Dropdown: kein Container, jeder Unterpunkt ist ein eigener Button */
    #mainnavigation .navbar-nav > .nav-item > .dropdown-menu {
        top: 100%;
        left: .5rem;
        width: max-content;
        min-width: 0;
        margin-top: .35rem;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* unsichtbare Brücke, damit das Menü beim Hinüberfahren offen bleibt */
    #mainnavigation .navbar-nav > .nav-item > .dropdown-menu:before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: calc(.35rem + 2px);
    }

    #mainnavigation .dropdown-menu .dropdown-nav {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .35rem;
    }

    #mainnavigation .dropdown-nav > .nav-item {
        background: #fff;
        border: 1.5px solid #1d1d1b;
        border-radius: 8px;
    }

    #mainnavigation .dropdown-menu .nav-link-dropdown {
        padding: .45rem .7rem;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
    }

    #mainnavigation .dropdown-menu .nav-link-dropdown:before {
        display: none;
    }

    #mainnavigation .dropdown-menu .nav-link-dropdown:hover,
    #mainnavigation .dropdown-menu .nav-link-dropdown:focus,
    #mainnavigation .dropdown-menu .nav-link-dropdown:active {
        background: transparent;
    }

    #mainnavigation .dropdown-menu .nav-link-dropdown.active {
        color: var(--nav-highlight);
    }
}


/* Fonts */

@font-face {
    font-family: 'BerlinType';
    font-style: normal;
    font-weight: 400;
    src: url('/typo3conf/ext/braincity_sitepackage/Resources/Public/Fonts/BerlinTypeWeb-Regular.eot');
    /* IE9 Compat Modes */
    src: url('/typo3conf/ext/braincity_sitepackage/Resources/Public/Fonts/BerlinTypeWeb-Regular.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('/typo3conf/ext/braincity_sitepackage/Resources/Public/Fonts/BerlinTypeWeb-Regular.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('/typo3conf/ext/braincity_sitepackage/Resources/Public/Fonts/BerlinTypeWeb-Regular.woff') format('woff');
    /* Modern Browsers */
    font-display: swap;
}

@font-face {
    font-family: 'BerlinType';
    font-style: normal;
    font-weight: 700;
    src: url('/typo3conf/ext/braincity_sitepackage/Resources/Public/Fonts/BerlinTypeWeb-Bold.eot');
    /* IE9 Compat Modes */
    src: url('/typo3conf/ext/braincity_sitepackage/Resources/Public/Fonts/BerlinTypeWeb-Bold.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('/typo3conf/ext/braincity_sitepackage/Resources/Public/Fonts/BerlinTypeWeb-Bold.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('/typo3conf/ext/braincity_sitepackage/Resources/Public/Fonts/BerlinTypeWeb-Bold.woff') format('woff');
    /* Modern Browsers */
    font-display: swap;
}

body {
    font-family: 'BerlinType', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h5,
.h5,
h6,
.h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bs-heading-color);
}




h1,
.h1,
h2,
.h2 {
    font-size: calc(1.625rem + 0.9vw);
}

@media (min-width: 1200px) {

    h1,
    .h1 {
        font-size: 2.5rem;
    }

    h2,
    .h2 {
        font-size: 30px;
    }
}

.frame-background-light .element-header,
h1.h1 {
    color: var(--nav-highlight);
}

:root {
    --cardgroup-gap: 2rem;
    --swiper-theme-color: #E40422 !important;
    --swiper-pagination-bottom: 0px;
    --nav-highlight: #E40422;
    /* rot – aktives Element */
    --nav-hover: #d9d9d9;
    /* hellgrau – Hover anderer Elemente */
    --nav-highlight-text: #fff;
    --nav-divider: rgba(0, 0, 0, .2);
}