/* Hover-Effekte für die Buttons */
.desktop-button.btn-success {
    background-color: #28a745; /* Standardfarbe für Kundenportal */
    transition: background-color 0.3s ease; /* Sanfte Übergangsanimation */
}

.desktop-button.btn-success:hover {
    background-color: #218838; /* Dunklere Farbe für Hover */
}

.desktop-button.btn-warning {
    background-color: #F76707; /* Standardfarbe für Mieterportal (angepasst an deine Farbe) */
    transition: background-color 0.3s ease;
}

.desktop-button.btn-warning:hover {
    background-color: #e06c00; /* Dunklere Farbe für Hover */
}

/* Hover-Effekt für mobile Links (bereits in deinem Style definiert, hier nur ergänzt) */
.mobile-link.highlighted.kundenportal:hover {
    background-color: #555; /* Konsistenter Hover-Effekt */
}

.mobile-link.highlighted.mieterportal:hover {
    background-color: #555; /* Konsistenter Hover-Effekt */
}

/* Hover-Effekt für normale Nav-Links */
.nav-link.text-white-dark-mode {
    transition: background-color 0.3s ease;
}

.nav-link.text-white-dark-mode:hover {
    background-color: #555;
}

/* Neue Stile für die überarbeitete Startseite */
.card:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Subtiler Schatten beim Hover */
}

.btn-outline-light {
    border-color: #fff;
    color: #fff;
    transition: all 0.3s ease;
}

.btn-outline-light:hover {
    background-color: #fff;
    color: #1a1a1a;
}

.hero-section {
    background-attachment: fixed; /* Fixierter Hintergrund für Parallax-Effekt */
}

/* Zusätzliche Optimierung für Karten */
.card.bg-dark {
    background-color: #2a2a2a !important;
    transition: background-color 0.3s ease;
}

.card.bg-dark:hover {
    background-color: #333 !important;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .hero-section {
        background-attachment: scroll; /* Kein Parallax auf Mobilgeräten */
    }
    .card {
        margin-bottom: 1rem;
    }
}

/* Verbesserung der Lesbarkeit */
.text-white-50 {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Animationen für Buttons */
.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.btn-lg:hover {
    transform: scale(1.05);
}