/* Förderverein German Garrison e. V. - Stil angelehnt an enlist (Bootstrap 5),
   Farben aus dem Vereinslogo. */

:root,
[data-bs-theme="light"] {
    --fv-blue: #2b3189;
    --fv-blue-rgb: 43, 49, 137;
    --fv-orange: #e8632f;
    --fv-orange-rgb: 232, 99, 47;
    /* Orange als Textfarbe: dunkler, damit es auf Weiß lesbar bleibt (4,6:1) */
    --fv-orange-text: #b9471a;

    --fv-body-bg: #f8f9fa;
    --fv-card-bg: #fff;
    --fv-navbar-bg: #f5f5f5;
    --fv-link: var(--fv-blue);
    --fv-link-hover: var(--fv-orange-text);
    --fv-active-bg: var(--fv-blue);
    --fv-active-color: #fff;
    --fv-accent-text: var(--fv-orange-text);
    --fv-shadow: 0 2px 12px rgba(0, 0, 0, .08);
    --fv-shadow-hover: 0 4px 20px rgba(0, 0, 0, .12);

    --bs-primary: var(--fv-blue);
    --bs-primary-rgb: var(--fv-blue-rgb);
    --bs-link-color: var(--fv-link);
    --bs-link-color-rgb: var(--fv-blue-rgb);
    --bs-link-hover-color: var(--fv-link-hover);
    --bs-link-hover-color-rgb: 185, 71, 26;
    --bs-body-bg: var(--fv-body-bg);
}

[data-bs-theme="dark"] {
    --fv-body-bg: #181818;
    --fv-card-bg: #212529;
    --fv-navbar-bg: #212529;
    /* Das Logo-Blau ist auf Dunkel zu dunkel für Text - aufgehellt */
    --fv-link: #a4aaf2;
    --fv-link-hover: #f39a72;
    --fv-active-bg: #4a52c4;
    --fv-active-color: #fff;
    --fv-accent-text: #f39a72;
    --fv-shadow: 0 2px 12px rgba(0, 0, 0, .4);
    --fv-shadow-hover: 0 4px 20px rgba(0, 0, 0, .5);

    --bs-link-color: var(--fv-link);
    --bs-link-color-rgb: 164, 170, 242;
    --bs-link-hover-color: var(--fv-link-hover);
    --bs-link-hover-color-rgb: 243, 154, 114;
    --bs-body-bg: var(--fv-body-bg);
}

/* ===== Grundlage ===== */

html {
    scroll-padding-top: 80px;
}

body {
    padding-top: 64px;
    background-color: var(--fv-body-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

a {
    color: var(--fv-link);
    text-underline-offset: .15em;
}

a:hover {
    color: var(--fv-link-hover);
}

h1, h2, h3 {
    font-weight: 600;
}

/* ===== Navbar (wie enlist: hell, Pill-Links, aktiver Punkt farbig) ===== */

.navbar {
    background-color: var(--fv-navbar-bg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .075);
    min-height: 64px;
}

.navbar-brand {
    color: var(--bs-body-color);
    font-weight: 600;
    font-size: 1.05rem;
}

.navbar-brand img {
    width: 40px;
    height: auto;
}

.navbar-nav .nav-link {
    color: var(--bs-body-color);
    border-radius: 6px;
    padding: .5rem .9rem !important;
    display: flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible {
    color: var(--fv-accent-text);
    background: rgba(var(--fv-orange-rgb), .08);
}

.navbar-nav .nav-link.active {
    background: var(--fv-active-bg);
    color: var(--fv-active-color);
}

.navbar-nav .nav-link .bi-box-arrow-up-right {
    font-size: .7em;
    opacity: .6;
}

/* ===== Karten ===== */

.card-fv {
    background: var(--fv-card-bg);
    border: none;
    border-radius: 12px;
    box-shadow: var(--fv-shadow);
}

.card-fv-hover {
    transition: transform .2s, box-shadow .2s;
}

.card-fv-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--fv-shadow-hover);
}

/* Überschrift mit orangem Akzentstrich */
.fv-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
}

.fv-title::before {
    content: "";
    width: 5px;
    height: 1.1em;
    border-radius: 3px;
    background: var(--fv-orange);
    flex: none;
}

.fv-kicker {
    color: var(--fv-accent-text);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .8rem;
    font-weight: 600;
}

/* ===== Startseite ===== */

.fv-hero {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    color: #fff;
    background: url("../img/home-hero.jpg") center / cover no-repeat;
    box-shadow: var(--fv-shadow);
}

.fv-hero-inner {
    background: linear-gradient(110deg,
        rgba(var(--fv-blue-rgb), .92) 0%,
        rgba(var(--fv-blue-rgb), .7) 45%,
        rgba(var(--fv-orange-rgb), .45) 100%);
    padding: 3rem 2rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    min-height: 320px;
}

.fv-hero-logo {
    width: 180px;
    flex: none;
    background: #fff;
    border-radius: 50%;
    padding: 1.4rem 1.2rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}

.fv-hero h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    margin-bottom: .5rem;
}

.fv-hero .lead {
    max-width: 34rem;
    opacity: .95;
}

@media (max-width: 575.98px) {
    .fv-hero-inner {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1.25rem;
    }

    .fv-hero-logo {
        width: 140px;
    }
}

.fv-stat {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--fv-accent-text);
    line-height: 1;
}

.fv-events {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.fv-events li {
    padding: .35rem .8rem;
    border-radius: 999px;
    background: rgba(var(--fv-blue-rgb), .08);
    font-size: .92rem;
}

[data-bs-theme="dark"] .fv-events li {
    background: rgba(164, 170, 242, .12);
}

.fv-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fv-checklist li {
    display: flex;
    gap: .6rem;
    padding: .35rem 0;
}

.fv-checklist .bi {
    color: var(--fv-orange);
}

.fv-member img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--fv-card-bg);
    box-shadow: 0 0 0 3px rgba(var(--fv-orange-rgb), .6);
}

.fv-cta {
    border-left: 5px solid var(--fv-orange);
}

/* ===== Buttons in Vereinsfarben ===== */

.btn-fv {
    --bs-btn-bg: var(--fv-blue);
    --bs-btn-border-color: var(--fv-blue);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #232870;
    --bs-btn-hover-border-color: #232870;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #1d215d;
    --bs-btn-active-border-color: #1d215d;
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: var(--fv-blue-rgb);
}

[data-bs-theme="dark"] .btn-fv {
    --bs-btn-bg: #4a52c4;
    --bs-btn-border-color: #4a52c4;
    --bs-btn-hover-bg: #5c64d6;
    --bs-btn-hover-border-color: #5c64d6;
}

.btn-fv-outline {
    --bs-btn-color: var(--fv-link);
    --bs-btn-border-color: var(--fv-link);
    --bs-btn-hover-bg: var(--fv-link);
    --bs-btn-hover-border-color: var(--fv-link);
    --bs-btn-hover-color: var(--fv-card-bg);
    --bs-btn-active-bg: var(--fv-link);
    --bs-btn-active-color: var(--fv-card-bg);
    --bs-btn-focus-shadow-rgb: var(--fv-blue-rgb);
}

.btn-paypal {
    --bs-btn-bg: #ffc439;
    --bs-btn-border-color: #ffc439;
    --bs-btn-color: #111;
    --bs-btn-hover-bg: #f2ba36;
    --bs-btn-hover-border-color: #f2ba36;
    --bs-btn-hover-color: #111;
    --bs-btn-active-bg: #e6b032;
    --bs-btn-active-color: #111;
    font-weight: 600;
}

/* ===== Downloads ===== */

.fv-files .list-group-item {
    background: transparent;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 0;
    border-color: var(--bs-border-color-translucent);
}

.fv-files .list-group-item:first-child {
    border-top: 0;
}

.fv-files .bi {
    font-size: 1.4rem;
    color: var(--fv-accent-text);
    flex: none;
}

.fv-files .badge {
    margin-left: auto;
    background: rgba(var(--fv-blue-rgb), .1);
    color: var(--fv-link);
    font-weight: 600;
}

/* ===== Spenden ===== */

.fv-iban {
    font-family: var(--bs-font-monospace);
    font-size: 1.05rem;
    letter-spacing: .03em;
    word-spacing: .2em;
}

.fv-qr {
    width: 180px;
    max-width: 100%;
    border-radius: 8px;
    background: #fff;
    padding: 8px;
}

.fv-paypal-word .pay {
    color: #003399;
}

.fv-paypal-word .pal {
    color: #0066ff;
}

[data-bs-theme="dark"] .fv-paypal-word .pay {
    color: #6f9bff;
}

[data-bs-theme="dark"] .fv-paypal-word .pal {
    color: #8ab8ff;
}

/* ===== Footer ===== */

.fv-footer {
    background: var(--fv-navbar-bg);
    border-top: 3px solid var(--fv-orange);
    font-size: .92rem;
}

.fv-footer a {
    color: var(--bs-body-color);
    text-decoration: none;
}

.fv-footer a:hover {
    color: var(--fv-accent-text);
}