/* Allgemeines Styling */
body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background-color: #f4f9fd; /* Hellblauer Hintergrund */
    color: #003366; /* Dunkelblauer Text */
}

header {
    background-color: rgba(0, 51, 102, 0.9); /* Dunkelblauer semi-transparenter Header */
    padding: 20px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.navbar {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-container {
    text-align: center;
}

.logo {
    width: 300px;
    margin-bottom: 10px;
}

h1 {
    font-size: 36px;
    color: #ffffff; /* Weißer Text für den Header */
    margin: 0;
}

/* Intro-Bereich */
.intro-section {
    text-align: center;
    padding: 50px;
    background: linear-gradient(180deg, #f0f8ff 0%, #e0f2ff 100%);
}

.intro-section h2 {
    font-size: 32px;
    margin-bottom: 20px;
    color: #0066cc;
}

.intro-section p {
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto;
    color: #003366;
}

/* Projektbereich */
.project-section {
    padding: 20px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    
}

.project-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap; /* Ermöglicht das Umbruchverhalten */
    justify-content: center; /* Zentriert die Boxen */
    text-decoration: none;
    
}

.project-link {
    text-decoration: none; /* Stellt sicher, dass beim Hover der Unterstrich auch weg bleibt */
    
}

.card {
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 250px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.card h3 {
    font-size: 22px;
    margin-bottom: 10px;
    color: #003366;
}

.card p {
    font-size: 16px;
    color: #666;
}

/* Footer */
footer {
    background-color: #003366;
    padding: 20px;
    text-align: center;
    color: white;
    font-size: 14px;
    margin-top: 50px;
}

footer p {
    margin: 0;
}


/* Media Queries für Responsive Design */

/* Für kleinere Bildschirme (Tablets und Smartphones) */
@media (max-width: 1024px) {
    .card {
        width: 45%; /* Sorgt dafür, dass die Karten auf mittleren Bildschirmen kleiner sind */
        
    }
    .card {
        background-color: #ffffff;
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        padding: 20px;
        width: 250px;
        text-align: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        
    }
}



@media (max-width: 480px) {
    .card {
        width: 90%; /* Eine Box pro Reihe bei sehr kleinen Bildschirmen */
    }
}