/* Allgemeine Stile */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
}

/* Header-Sektion (Hero) */
#hero {
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

#hero h1 {
    font-size: 3.5rem;
    font-weight: bold;
    color: #005546; /* Dunkelgrün für die Hauptüberschrift */
}

#hero p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

/* Navbar */
.navbar {
    transition: background-color 0.3s ease-in-out;
    background-color: white; /* Helle Hintergrundfarbe für Navbar */
}

.navbar .navbar-brand {
    color: #005546 !important; /* Dunkelgrün für das Logo */
}

.navbar .nav-link {
    color: #005546; /* Dunkelgrün für Links */
}

.navbar .nav-link:hover {
    color: #000000; /* Schwarz für Links bei Hover */
}

/* Hover-Effekt für Karten */
.card {
    border: none;
    transition: transform 0.3s ease-in-out;
  	/*padding: 10px 0;*/
}

.card:hover {
    transform: scale(1.05);
}

.card img {
    border-radius: 10px 10px 0 0;
}

.card-body {
    padding: 1.5rem;
}

.card-title {
    color: #005546; /* Dunkelgrün für die Titel der Karten */
    font-weight: 600;
}

.card-text {
    color: #555;
}

.btn-outline-primary {
    border-radius: 20px;
    border-color: #005546; /* Dunkelgrün für die Schaltflächen */
    color: #005546; /* Dunkelgrün für den Text */
    font-weight: 500;
    transition: background-color 0.3s;
}

.btn-outline-primary:hover {
    background-color: #005546; /* Dunkelgrün als Hintergrund bei Hover */
    color: white;
}

/* Footer */
footer {
    background-color: #333;
    color: white;
}

footer p {
    margin-bottom: 0;
}

/* Überschreibe die Standard-Stile für .btn-primary */
.btn-primary {
    background-color: #005546 !important; /* Dunkelgrün als Hintergrund */
    border-color: #005546 !important; /* Dunkelgrün als Rand */
    color: #ffffff !important; /* Weißer Text */
}

/* Überschreibe die Standard-Stile für .text-primary */
.text-primary {
    color: #005546 !important; /* Dunkelgrün als Textfarbe */
}

/* Responsivität */
@media (max-width: 768px) {
    #hero h1 {
        font-size: 2.5rem;
    }

    #hero p {
        font-size: 1rem;
    }
}