/* Sidebar */
.offcanvas-header {
    height: 90px;
}

.offcanvas-header>button {
    width: 90px;
}

.offcanvas i {
    font-size: 1rem !important;
    margin-right: 10px !important;
    line-height: 3rem !important;
}

.offcanvas i:hover {
    color: rgb(255, 255, 255);
}

.text-bg-dark {
    background-color: rgba(var(--main-color), 0.9) !important;
    color: rgb(255, 255, 255);
}

.sidebar-navigation {
    display: none;
}

.social-media i {
    padding: 10px;
    margin-right: 20px;
    background-color: rgba(var(--white), 1.0);
    font-size: 1.5rem;
    color: rgba(var(--main-color), 1.0);
}

.second-section {
    width: 100%;
    height: 500px;
    display: block;
    background-color: rgb(243, 211, 87);
}

/* Breakpoint 1200px and smaller*/
@media (max-width: 1200px) {
    .offcanvas-header {
        height: 80px;
    }
    
    .offcanvas-header>button {
        width: 80px;
    }
}

/* Breakpoint 992px and smaller*/
@media (max-width: 992px) {
    .sidebar-navigation {
        display: block;
    }

    .sidebar-contact {
        display: none;
    }

    .offcanvas-header {
        height: 50px;
    }
    
    .offcanvas-header>button {
        width: 50px;
    }
}

/* Breakpoint 576px and smaller*/
@media (max-width: 576px) {
    .offcanvas {
        width: 300px !important;
    }
}

/* ===== SIDEBAR KONTAKTFORMULAR ===== */

/* KONSOLIDIERT: Sidebar verwendet jetzt universelle modal-input CSS-Klassen 
   aus css/modals.css für einheitliche Darstellung auf allen Seiten */

/* Submit-Button */
#sidebar-submit-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#sidebar-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Fehlermeldungen */
.sidebar-contact .invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
}

/* ===== VISUELLE VALIDIERUNG FÜR SIDEBAR-FORMULARE ===== */

/* Validierte Felder - grüner Hintergrund und Border (wie Modal-Formulare) */
.form-control.sidebar-input.field-valid {
    border-color: #198754 !important;
    background-color: #f0fff0 !important; /* Ganz helles Grün für validierte Felder */
    box-shadow: 0 0 0 0.1rem rgba(25, 135, 84, 0.25) !important; /* Grüner Schatten */
}

/* Ungültige Felder - rote Border (wie Modal-Formulare) */
.form-control.sidebar-input.field-invalid {
    border-color: #dc3545 !important;
    background-color: white !important;
    box-shadow: 0 0 0 0.1rem rgba(220, 53, 69, 0.25) !important; /* Roter Schatten */
}

/* Leere Felder - Standard-Styling */
.form-control.sidebar-input.field-empty {
    border-color: #ced4da !important;
    background-color: white !important;
}

/* Focus-State für Sidebar-Inputs */
.form-control.sidebar-input:focus {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15) !important;
    background-color: white !important;
}

/* Browser-Autofill für Sidebar-Inputs */
.form-control.sidebar-input:-webkit-autofill,
.form-control.sidebar-input:-webkit-autofill:hover,
.form-control.sidebar-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    -webkit-text-fill-color: #333 !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Autofill für validierte Sidebar-Felder */
.form-control.sidebar-input.field-valid:-webkit-autofill,
.form-control.sidebar-input.field-valid:-webkit-autofill:hover,
.form-control.sidebar-input.field-valid:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #f0fff0 inset !important;
    -webkit-text-fill-color: #333 !important;
    border-color: #198754 !important;
}

/* Rotes Sternchen */
.sidebar-contact .text-danger {
    font-size: 0.9em;
}