body {
    margin: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #411212;
    color: #fff;
    padding: 10px 20px;
    height: 40px;
}

header .logo {
    display: flex;
    align-items: center;
}

header .logo img {
    height: 40px;
    margin-right: 10px;
}

header nav {
    position: relative;
}

header nav .menu-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

header nav .menu {
    display: none;
    position: absolute;
    right: 0;
    top: 40px;
    background: #444;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    z-index: 1000;
}

header nav:hover .menu {
    display: block; /* Sichtbar bei Hover auf das nav-Element */
}

header nav .menu.visible {
    display: block; /* Sichtbar, wenn die Klasse "visible" hinzugefügt wird */
}

header nav .menu li {
    padding: 10px 20px;
    border-bottom: 1px solid #555; /* Linie zwischen den Menüpunkten */
}

header nav .menu li a {
    color: #fff;
    text-decoration: none;
}

header nav .menu-btn:hover + .menu, 
header nav .menu:hover {
    display: block;
}

/* Entfernt Standard-Link-Stile */
.logo a {
    display: flex; /* Ermöglicht, dass Logo und Name nebeneinander stehen */
    align-items: center; /* Vertikale Ausrichtung */
    text-decoration: none; /* Entfernt die Unterstreichung */
    color: inherit; /* Übernimmt die Textfarbe vom Header */
}
/* Logo-Bild-Stil */
.logo img {
    height: 40px; /* Höhe des Logos */
    margin-right: 10px; /* Abstand zwischen Logo und Name */
}

/* Name-Stil */
.logo h1 {
    font-size: 1.5rem; /* Schriftgröße für den Namen */
    margin: 0; /* Entfernt Standardabstand des h1-Tags */
}
.hero {
    background: url('images/banner.jpg') no-repeat center center/cover;
    color: #fff;
    text-align: center;
    padding: 100px 20px;
    font-size: 25px;
    font-weight: bold;
}

.introduction {
    text-align: center;
    padding: 20px;
}

.tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 20px;
}

.tile {
    color: #ffffff;
    text-align: center;
    width: 30%;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Individuelle Hintergründe */
.tile-1 {
    background-image: url('images/hintergrund_kachel_story.jpg'); /* Ersetze durch dein Bild */
}

.tile-2 {
    background-image: url('images/hintergrund_kachel_spacemarine.jpg'); /* Ersetze durch dein Bild */
}

.tile-3 {
    background-image: url('images/hintergrund_kachel_feinde.jpg'); /* Ersetze durch dein Bild */
}

.tile-4 {
    background-image: url('images/hintergrund_kachel_eusar.jpg'); /* Ersetze durch dein Bild */
}

.tile-5 {
    background-image: url('images/hintergrund_kachel_anleitung.jpg'); /* Ersetze durch dein Bild */
}

.tile-6 {
    background-image: url('images/hintergrund_kachel_kurzanleitung.jpg'); /* Ersetze durch dein Bild */
}

.banner {
    background: url('images/banner.jpg') no-repeat center center/cover;
    color: #ffffff;
    text-align: center;
    padding: 100px 20px;
    margin-top: 20px;
}

footer {
    text-align: center;
    background: #ffffff;
    color: #fff;
    padding: 10px;
}

.container {
    display: flex;
    flex-direction: column; /* Ordnet die Bilder vertikal an */
    justify-content: center; /* Zentriert sie vertikal (falls der Container mehr Platz hat) */
    align-items: center; /* Zentriert die Bilder horizontal */
    gap: 20px; /* Abstand zwischen den Bildern */
    height: auto; /* Höhe passt sich an die Inhalte an */
    padding: 20px; /* Optional: Innenabstand des Containers */
}

.responsive-image {
    width: 100%; /* Bilder füllen die Breite des Containers */
    height: auto; /* Beibehaltung des Seitenverhältnisses */
/*    max-width: 800px; /* Optional: Begrenze die maximale Breite der Bilder */
}