:root {
    --fliesstext: #0f3548;
    --headline: #2a4d69;
    --bereich-blau: #d2e1ec;
    --hintergrund-hell: #f7f7f7;
    --hintergrund-gruen: #ecefeb;
    --bereich-gruen: #cad2c5;
    --button: #ec3e39;
    --button-blue: #4b86b4;
}

body {
    background-color: var(--hintergrund-hell);
}

a, p, li {
    color: var(--fliesstext);
}

/* Color Classes */
.color-fliesstext {
    color: var(--fliesstext) !important;
}

.color-headline {
    color: var(--headline) !important;
}

.color-bereich-blau {
    color: var(--bereich-blau) !important;
}

.color-hintergrund-hell {
    color: var(--hintergrund-hell) !important;
}

.color-hintergrund-gruen {
    color: var(--hintergrund-gruen) !important;
}

.color-bereich-gruen {
    color: var(--bereich-gruen) !important;
}

.color-button {
    color: var(--button) !important;
}

/* Background Color Classes */
.bg-fliesstext {
    background-color: var(--fliesstext) !important;
}

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

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

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

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

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

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

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

.lang-switch {
    color: var(--fliesstext);
}

h1, h2, h3, h4, h5 {
    fill: var(--headline);
    color: var(--headline);
}

p, a {
    fill: var(--fliesstext);
    color: var(--fliesstext);
}

footer {
    & h1, & h2, & h3, & h4, & h5, & p, & a {
        fill: var(--fliesstext) !important;
        color: var(--fliesstext) !important;
    }
}

.nav-link {
    color: var(--fliesstext);

    &:hover {
        color: var(--fliesstext);
    }
}

.btn {
    color: white !important;
    background-color: var(--button);
    border: none;

    &:hover, &:active {
        background-color: var(--button) !important;
    }

    &.btn-blue {
        background-color: var(--button-blue) !important;

        &:hover {
            background-color: var(--headline) !important;
        }

        &.active {
            background-color: var(--headline) !important;
        }
    }

    &.btn-blue-dark {
        background-color: var(--headline) !important;

        &:hover {
            background-color: var(--headline) !important;
        }

        &.active {
            background-color: var(--headline) !important;
        }
    }
}

.btn.dropdown-toggle {
    color: var(--fliesstext) !important;
    padding: 0 0.5rem;

    &:hover {
        background-color: var(--hintergrund-hell) !important;
    }
}

.btn-text {
    color: inherit !important;
    background-color: inherit !important;
}

.navbar {
    background: none;
    border-bottom: none;
}

.border-top {
    border-top: 3px solid var(--hintergrund-hell) !important;
}

.accordion-button:not(.collapsed) {
    background-color: white;
}

.form-control {
    background-color: var(--hintergrund-hell) !important;
    border: 2px solid var(--hintergrund-gruen) !important;
    color: var(--headline) !important;
    font-family: 'Nunito', sans-serif;
}

.form-control::placeholder {
    color: var(--button-blue) !important;
    opacity: 1
}

.form-check-input:checked {
    background-color: var(--headline) !important;
    border-color: var(--button-blue) !important;
}

.form-check-input {
    border-color: var(--hintergrund-gruen) !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(49%) sepia(83%) saturate(323%) hue-rotate(164deg) brightness(84%) contrast(85%);
}

.invalid-feedback {
    color: var(--button) !important;
}

footer {
    & a, & p, & h1, & h2 {
        color: var(--hintergrund-hell) !important;
    }

    background-color: var(--headline);
}

.lg-backdrop, .lg-outer .lg-thumb-outer {
    background: white !important;
}

.lg-sub-html {
    color: var(--fliesstext) !important;
}

.lg-next, .lg-prev, .lg-toolbar .lg-icon, .lg-counter {
    background: none !important;
    color: var(--fliesstext) !important;
}

@media (min-width: 992px) {
    .contact-section {
        background: var(--bereich-blau);
    }
}