/********** Effizient Bau - Vollständig Optimiertes CSS **********/
:root {
    --primary: #00BFFF;   /* Hellblau */
    --secondary: #34AD54; /* Mittelgrün */
    --light: #EEF9FF;
    --dark: #004300;      /* Dunkelgrün */
}

/*** Grundgerüst & Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

.spinner {
    width: 40px;
    height: 40px;
    background: var(--primary);
    margin: 100px auto;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@keyframes sk-rotateplane {
    0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
    50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
    100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); }
}

/*** Headings ***/
h1, h2, .fw-bold { font-weight: 800 !important; }
h3, h4, .fw-semi-bold { font-weight: 700 !important; }
h5, h6, .fw-medium { font-weight: 600 !important; }

/*** Buttons & Icons ***/
.btn {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    transition: .5s;
}

.btn-outline-light {
    border-color: var(--primary) !important;
    color: #FFFFFF !important;
}

.btn-outline-light:hover {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--dark) !important;
}

.btn-primary {
    color: #FFFFFF;
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover {
    background-color: var(--dark);
    border-color: var(--dark);
}

.btn-square { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.btn-sm-square { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.btn-lg-square { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }

/*** Navbar ***/
.navbar-dark .navbar-nav .nav-link {
    font-family: 'Nunito', sans-serif;
    padding: 15px 15px;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
    transition: .5s;
}

.sticky-top.navbar-dark .navbar-nav .nav-link { color: var(--dark); }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active { color: var(--primary) !important; }
.navbar-toggler { color: var(--primary) !important; border-color: var(--primary) !important; }

/*** Carousel CAPTION FULLSCREEN FIX ***/
.carousel-caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 67, 0, 0.55) !important; /* Volles Dunkelgrün-Overlay */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 1;
}

/* Stabilität für Carousel Bilder */
.carousel-item { position: relative; }
.carousel-item img { object-fit: cover; }

@media (max-width: 768px) {
    .carousel-item, .carousel-item img {
        height: 450px !important;
    }
    .carousel-caption h1 { font-size: 28px !important; }
    .carousel-caption h2 { font-size: 22px !important; }
    .carousel-caption img.img-fluid { max-width: 160px !important; }
}

/*** Section Title Animation ***/
.section-title::before {
    position: absolute;
    content: "";
    width: 150px;
    height: 5px;
    left: 0;
    bottom: 0;
    background: var(--primary);
}

.section-title::after {
    position: absolute;
    content: "";
    width: 6px;
    height: 5px;
    bottom: 0;
    background: var(--dark);
    animation: section-title-run 5s infinite linear;
}

@keyframes section-title-run {
    0% { left: 0; } 50% { left: 145px; } 100% { left: 0; }
}

/*** Back to Top ***/
.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 99;
}

/* --- Mobile Korrektur für Logo und Banner --- */
@media (max-width: 768px) {
    /* 1. Logo im Banner deutlich verkleinern */
    .carousel-caption img.img-fluid {
        max-width: 140px !important; /* Begrenzt die Breite des EB-Logos */
        height: auto !important;
        margin: 15px 0 !important; /* Erzeugt Abstand nach oben und unten */
    }

    /* 2. Den Text darüber verkleinern, damit er nicht gequetscht wird */
    .carousel-caption h1.display-1 {
        font-size: 20px !important;
        margin-top: 10px !important;
    }

    /* 3. Das dunkle Overlay etwas transparenter machen für bessere Optik */
    .carousel-caption {
        background: rgba(0, 67, 0, 0.6) !important;
        padding: 20px !important;
    }

    /* 4. Den weißen Bereich "Über Uns" oben etwas mehr Luft geben */
    .py-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}