/* Allgemeine Einstellungen */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Jersey 15', sans-serif;
    font-size: 24px;
    color: #000;
    display: flex;
    flex-direction: column; /* Vertikale Anordnung der Inhalte */
    min-height: 100vh; /* Mindestens volle Höhe des Bildschirms */
}


h1 {
    padding: 0px 20px;
}

/* Navigation */
nav {
    background-color: #ffffff;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0; /* Befestige die Navigationsleiste am oberen Rand */
    width: 100%; /* Lasse die Navigationsleiste die gesamte Breite einnehmen */
    z-index: 1000; /* Stelle sicher, dass die Navigationsleiste über anderen Inhalten liegt */
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo */
.nav-logo {
    display: flex;
    align-items: center;
}

.nav-logo img {
    margin-right: -10px;
}

/* Hamburger-Menü */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.bar {
    height: 4px;
    width: 30px;
    background-color: black;
    margin: 2px 0;
}


/* Navigation Links */
.nav-links {
    display: flex;
    list-style: none;
    align-items: center; /* Zentriert die Elemente vertikal */
}

.nav-links li {
    margin: 0 10px; /* Reduzierter seitlicher Abstand */
}

.nav-links a {
    color: black;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.nav-links a:hover {
    background-color: #f0f0f0;
}

/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    z-index: 1;
}

.hero-text h1 {
    font-size: 150px;
}

.hero button {
    margin-top: 20px;
    padding: 15px 30px;
    font-size: 20px;
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
    font-family: 'Jersey 15', sans-serif;
}

.hero button:hover {
    background-color: darkred;
}

/* Container für alle Karten */
.container.card-wrapper {
    padding: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Flexbox für die Kartenreihen */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
    align-items: stretch;
}

/* Allgemeine Kartengestaltung */
.card {
    align-self: center;
    display: flex;
    background-color: #f9f9f9;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    overflow: hidden; /* Verhindert, dass Inhalte über die abgerundeten Ecken hinausragen */
    height: 300px; /* Feste Höhe für alle Karten */
}

/* Textstil innerhalb der Karten */
.card-text {
    flex: 1;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Bildstil innerhalb der Karten */
.card-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Verhindert, dass Bilder über den Container hinausragen */
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Behält das Seitenverhältnis bei und füllt den Container */
}

/* Umkehrung der Reihenfolge für gerade Karten */
.card:nth-child(even) {
    flex-direction: row-reverse;
}

/* Responsive Anpassungen für mobile Bildschirme */
@media (max-width: 768px) {
    .card {
        flex-direction: column;
        height: auto; /* Automatische Höhe für mobile Ansicht */
    }

    .card:nth-child(even) {
        flex-direction: column;
    }

    .card-text, .card-image {
        width: 100%;
    }

    .card-image {
        height: 200px; /* Feste Höhe für Bilder in der mobilen Ansicht */
    }
}

/* Verschiedene Farbthemen für die Karten */
.c-primary {
    background-color: #007bff; /* Primäre Kartenfarbe */
    color: white; /* Schriftfarbe */
}

.c-orange {
    background-color: #fd7e14; /* Orange Kartenfarbe */
    color: white; /* Schriftfarbe */
}

.c-purple {
    background-color: #6f42c1; /* Lila Kartenfarbe */
    color: white; /* Schriftfarbe */
}

.c-green {
    background-color: #28a745; /* Grüne Kartenfarbe */
    color: white; /* Schriftfarbe */
}

/* Textstil innerhalb der Karten */
.card-text {
    padding: 5px; /* Reduzierter Innenabstand des Textes für mobile Ansicht */
}

/* Bildstil innerhalb der Karten */
.card-image img {
    max-width: 100%; /* Maximale Breite für Bilder */
    border-radius: 10px; /* Runde Ecken für Bilder */
    display: block;
}

/* Responsive Anpassungen für mobile Bildschirme */
@media (max-width: 768px) {
    /* Für Bildschirme kleiner als 768px */
    .card-image, .card-text {
        flex: 0 0 100%; /* Vollständige Breite für mobile Bildschirme */
        max-width: 100%; /* Maximale Breite für mobile Bildschirme */
    }

    .card {
        flex-direction: column; /* Stellt die Richtung auf vertikal um */
        text-align: center; /* Zentriert den Text */
        padding: 10px; /* Reduzierter Innenabstand für mobile Ansicht */
        margin: 20px 0; /* Abstand zwischen den Karten (reduziert) */
        width: calc(100% - 20px); /* Boxen etwas schmaler als 100% der Containerbreite */
        max-width: 90%; /* Maximale Breite auf 90% der Bildschirmbreite beschränken */
    }

    .card-image {
        order: 1; /* Bild wird unter den Text verschoben */
    }

    .card-text {
        order: 0; /* Text bleibt über dem Bild */
    }
}



/* Footer */
footer {
    color: black;
    display: flex; /* Flexbox aktivieren */
    justify-content: space-between; /* Raum zwischen den Elementen */
    align-items: center; /* Vertikale Ausrichtung */
    padding: 20px 20px; /* Padding für Abstand */
    width: 100%; /* Vollbreite */
    margin-top: auto;
    
}

.footer-links {

    display: flex; /* Flexbox aktivieren */
    list-style: none; /* Listenstil entfernen */
    padding: 0; /* Padding entfernen */
    margin: 0; /* Margin entfernen */
}

.footer-links li {

    margin: 0 10px; /* Abstand zwischen den Links */
}

.footer-links a {
    color: black;
    text-decoration: none; /* Unterstreichung entfernen */
    padding: 10px 15px;
}

.footer-html a:hover {
    border-radius: 5px;
    transition: background-color 0.3s;
    background-color: #f0f0f0;
}

.footer-links img {
    width: 32px;
    height: auto;
}




/* Mobile Styles */
@media (max-width: 768px) {
    .nav-links {
        display: none; /* Menü ist standardmäßig ausgeblendet */
        flex-direction: column; /* Links untereinander anordnen */
        position: absolute; /* Über den Inhalt legen */
        top: 70px; /* Unter der Navbar platzieren */
        right: 0; /* Rechts ausgerichtet */
        background-color: white; /* Weißer Hintergrund */
        width: 100%; /* Nimmt die ganze Breite ein */
        z-index: 10; /* Über anderen Elementen anzeigen */
    }

    .nav-links.active {
        display: flex; /* Menü anzeigen, wenn aktiv */
    }

    .nav-links li {
        margin: 15px 0; /* Abstand zwischen den Links */
    }

    .nav-links a {
        font-size: 24px; /* Größere Schrift */
        line-height: 1; /* Erhöhter Zeilenabstand */
    }
    .nav-links a:hover {
        background-color: white;
    }

    .menu-toggle {
        display: flex; /* Hamburger-Menü anzeigen */
    }
    .hero-text h1 {
        font-size: 100px;
    }
    .hero button {
        margin-top: 20px;
        padding: 15px 30px;
        font-size: 20px;
        background-color: red;
        color: white;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        transition: background-color 0.3s;
        font-family: 'Jersey 15', sans-serif;
    }

    footer {
        font-size: 15px;
        color: black;
        display: flex; /* Flexbox aktivieren */
        justify-content: space-between; /* Raum zwischen den Elementen */
        align-items: center; /* Vertikale Ausrichtung */
        padding: 20px 20px; /* Padding für Abstand */
        
        
    }


    .footer-links {
        display: flex; /* Flexbox aktivieren */
        list-style: none; /* Listenstil entfernen */
        padding: 0; /* Padding entfernen */
        margin: 0; /* Margin entfernen */
    }
    
    .footer-links li {
        margin: 0 0px; /* Abstand zwischen den Links */
    }
    
    .footer-links p {
        color: black;
        text-decoration: none; /* Unterstreichung entfernen */
        padding: 10px 0; /* Padding um den Text */
    }

    .footer-links img {
        width: 24px; /* Kleinere Größe für Mobilgeräte */
        height: auto; /* Proportional skalieren */
    }


   
}

/* Spezieller Stil für den Dashboard-Button */
.nav-links .dashboard-btn {
    background-color: #007bff;
    color: white;
    padding: 8px 16px; /* Angepasstes Padding */
    border-radius: 20px; /* Etwas weniger rund für bessere Integration */
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
    line-height: 1.5;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.nav-links .dashboard-btn:hover {
    background-color: #0056b3;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Anpassung für mobile Ansicht */
@media (max-width: 768px) {
    .nav-links .dashboard-btn {
        margin-top: 10px; /* Fügt etwas Abstand oberhalb des Buttons in der mobilen Ansicht hinzu */
    }
}