:root {
    --color-primary: #003398;
    --color-dark-primary: #112855;
    --color-secondary: #ffeb00;
    --color-white: #fff;
    --color-grey: #ccc;
    --color-dark: #000;
    --bs-primary: #003398;
    --bs-accordion-active-bg: #003398;
    --bs-primary-rgb: 0, 51, 152;
    --bs-light: #fff;
    --bs-dark: #000;
    --bs-breadcrumb-item-active-color: var(--color-grey);
}

body {
    font-family: 'Ubuntu', sans-serif!important;
    color: var(--color-primary);
}

.navbar-nav {
    --bs-nav-link-color: var(--color-white);
    --bs-nav-link-hover-color: var(--color-grey);
    --bs-nav-link-disabled-color: var(--color-dark-primary);
}

.nav a {
    --bs-link-color: var(--color-white);
    --bs-link-color-rgb: 255, 255, 255;
}

.nav a:hover {
    --bs-nav-link-hover-color: var(--color-grey);
}

.navbar .nav-link,
.navbar a {
    text-decoration: none !important;
}

.navbar .nav-link:hover,
.navbar a:hover {
    text-decoration: underline; /* oder color change, je nach Geschmack */
}

.breadcrumb-item.active {
    color: var(--color-grey);
}

.accordion {
    --bs-accordion-active-bg: var(--color-primary);
    --bs-accordion-active-color: var(--color-white);
}

.btn-primary {
    --bs-btn-color: var(--color-white);
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);

    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: var(--color-dark-primary);
    --bs-btn-hover-border-color: var(--color-dark-primary);

    --bs-btn-active-bg: var(--color-dark-primary);
    --bs-btn-active-border-color: var(--color-dark-primary);

    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);

    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
}

body { scroll-behavior: smooth; }


.bg-primary { background-color: var(--color-primary) !important; }


.scroll-fade {
    opacity: 0;
    transform: translateY(40px) rotate(-2deg);
    transition: all 0.8s ease-out;
}

.scroll-fade.visible {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

.hero-light {
    background: #ffffff;
    color: #112855;
    border-bottom: 6px solid var(--color-primary);
}

.hero-light h1 {
    font-weight: 700;
}

.hero-light p {
    max-width: 720px;
    margin: 0 auto;
}

.hero-logo {
    max-width: 360px;
    width: 100%;
    height: auto;
}


@media (max-width: 768px) {
    .hero-logo {
        max-width: 140px;
    }
}

@media (max-width: 480px) {
    .hero-logo {
        max-width: 120px;
    }
}

.floating-buttons {
    transform: translateX(50px);
    opacity: 0;
    transition: all 0.5s ease-out;
}

.floating-buttons.visible {
    transform: translateX(0);
    opacity: 1;
}