/* Basis-Stile für den gesamten Body */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #0A1F44;
    color: white;
}

/* Header Container */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #0A1F44;
    position: relative;  /* Sicherstellen, dass das Dropdown innerhalb des Headers angezeigt wird */
    z-index: 10; /* Setzt den Header über die Slideshow */
}

/* Logo und Text nebeneinander */
.logo-container {
    display: flex;
    align-items: center;
}

/* Logo anpassen */
.logo-container img {
    height: 50px; /* Logo-Höhe anpassen */
    width: auto;  /* Breite wird automatisch angepasst */
    margin-right: 10px;  /* Abstand zwischen Logo und Text */
}

/* Text neben dem Logo */
.logo-text {
    font-size: 1.5rem; /* Textgröße */
    color: white;
    font-weight: bold;
}

/* Header Navigation rechtsbündig */
nav {
    display: flex;
    justify-content: flex-end;
}

nav ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

nav ul li {
    margin-left: 15px;
    position: relative; /* Wichtig für das Dropdown-Menü */
}

nav ul li a {
    color: white;
    text-decoration: none;
}

/* Footer */
footer {
    text-align: center;
    padding: 10px;
    background: #071B3D;
}

/* === Slideshow Container === */
.slideshow-container {
    position: relative;
    width: 100%;
    height: 80vh; /* Anpassen je nach Wunsch */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1; /* Slideshow bleibt hinter dem Header und Dropdown */
}

/* === Slideshow Hintergrund === */
.slideshow {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    transition: transform 1s ease-in-out; /* Glatter Übergang für das Wechseln der Bilder */
}

/* === Jede einzelne Folie === */
.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;  /* Alle Folien sind zunächst unsichtbar */
    transition: opacity 1s ease-in-out;
}

/* === Sichtbare Folie === */
.slide.active {
    opacity: 1;  /* Nur die Folie mit der Klasse 'active' wird sichtbar */
    z-index: 2; /* Diese Folie wird oben angezeigt */
}

/* === Überschrift im Vordergrund === */
.slideshow-text {
    text-align: center;
    color: white;
    z-index: 3;
    padding: 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

.slideshow-text h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.slideshow-text p {
    font-size: 1.2rem;
}

/* === Button Styling === */
.btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: 1rem;
    color: white;
    background: #007BFF;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s, transform 0.2s;
}

.btn:hover {
    background: #0056b3;
    transform: scale(1.05);
}

/* Dropdown-Styling */
.nav-links ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.nav-links ul li {
    margin-left: 15px;
    position: relative; /* Wichtig für das Dropdown-Menü */
}

.nav-links ul li a {
    color: white;
    text-decoration: none;
}

.nav-links .dropdown {
    position: relative;
}

.nav-links .dropdown .dropbtn {
    background-color: transparent;
    color: white;
    font-size: 1rem;
    border: none;
    cursor: pointer;
}

.nav-links .dropdown-content {
    display: none; /* Standardmäßig nicht anzeigen */
    position: absolute;
    background-color: #0A1F44;
    min-width: 160px;
    z-index: 20; /* Setzt das Dropdown über die Slideshow */
    top: 100%;
    left: 50%; /* Setzt das Dropdown in die Mitte des Elements */
    transform: translateX(-50%); /* Korrigiert die Position des Dropdowns */
}

.nav-links .dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.nav-links .dropdown-content a:hover {
    background-color: #007BFF;
}

.nav-links .dropdown:hover .dropdown-content {
    display: block; /* Zeigt das Dropdown an, wenn das Element gehovt wird */
}

.nav-links .dropdown:hover .dropbtn {
    background-color: #0A1F44;
}

/* Allgemeine Seite-Stile */
.commands-main {
    padding: 20px;
    background-color: #0A1F44;
    color: white;
    font-family: Arial, sans-serif;
}

.page-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.page-description {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 30px;
}

/* Command Section */
.command-section {
    background-color: #1A3553;
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.command-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.command-logo {
    height: 60px;
    margin-right: 20px;
}

.command-title {
    font-size: 2rem;
    color: #FFD700; /* Goldene Schriftfarbe */
}

.command-info {
    font-size: 1.1rem;
    line-height: 1.6;
}

.command-info p {
    margin-bottom: 10px;
}

.command-info strong {
    font-weight: bold;
}

/* Hover Effekte für Command Section */
.command-section:hover {
    background-color: #1A4366;
    transition: background-color 0.3s ease-in-out;
}

.command-section:hover .command-title {
    color: #FF6347; /* Orange */
}

/* Abschnitt mit Formular und Header */
.form-section {
    max-width: 1200px;
    margin: 30px auto;
    padding: 20px;
    background-color: #1E1E1E; /* Dunkler Hintergrund für den Formularbereich */
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Dunklerer Schatten für den Dark Mode */
}

/* Header innerhalb des Formulars */
.form-header {
    text-align: center;
    margin-bottom: 20px;
}

.form-header h1 {
    font-size: 2.5rem;
    color: #FFCC00; /* Helle Akzentfarbe für den Titel */
    margin-bottom: 10px;
}

.intro-text {
    font-size: 1.2rem;
    color: #BBBBBB; /* Heller Text für die Einführung */
}

/* Inhalt des Formulars */
.form-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Link zum Formular */
.form-link a {
    font-size: 1.1rem;
    color: #FFCC00; /* Helle Akzentfarbe für den Link */
    text-decoration: none;
    margin: 15px 0;
    padding: 10px;
    background-color: #333333; /* Dunkler Hintergrund für den Button */
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.form-link a:hover {
    background-color: #555555; /* Dunklerer Hintergrund beim Hover */
}

/* Kalender eingebettet */
.calendar {
    width: 100%;
    max-width: 1000px;
    margin: 30px auto;
    border-radius: 8px;
    overflow: hidden;
}

/* Fußzeile */
footer {
    background-color: #1E1E1E; /* Dunkler Hintergrund für den Footer */
    color: #BBBBBB; /* Heller Text für den Footer */
    text-align: center;
    padding: 15px;
    font-size: 1rem;
}

/* Für den Link und Hover-Effekt */
a {
    color: #FFCC00; /* Helle Akzentfarbe für Links */
    text-decoration: none;
}

a:hover {
    color: #FF9900; /* Helleres Gelb beim Hover */
}

.officer-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.officer-level {
    display: flex;
    justify-content: space-between;
}

.officer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.officer img {
    width: 100px;  /* Bildgröße anpassen */
    height: 100px;
    object-fit: cover;
    border-radius: 50%;  /* Rundes Bild */
    margin-bottom: 10px;
}

.officer p {
    font-size: 1.1rem;
    color: #E0E0E0; /* Heller Text */
}

.officer-level .officer {
    flex: 1;
    margin-right: 15px;
}

.officer-level .officer:last-child {
    margin-right: 0;
}

.officer-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px; /* Abstand zwischen den einzelnen Offizieren */
}

.officer-level {
    display: flex;
    justify-content: center;
    gap: 40px; /* Abstand zwischen den Reihen */
}

.officer {
    text-align: center;
}

.officer-img {
    width: 400px !important;  /* Vergrößere das Bild */
    height: 400px !important; /* Vergrößere das Bild */
}

.rank {
    font-size: 1.2rem;
    font-weight: bold;
    color: #FFD700; /* Gold für den Rang */
    margin-bottom: 5px; /* Abstand zwischen Rang und Name */
}

.name {
    font-size: 1.1rem;
    color: #E0E0E0; /* Heller Text für den Namen */
}
main {
    text-align: center; /* Zentriert den Text im Main-Bereich */
}

main h1, main p {
    margin: 0 auto; /* Setzt die Außenabstände */
    padding: 10px 0; /* Fügt oben und unten etwas Abstand hinzu */
}

.officer-list {
    display: flex;
    flex-direction: column;
    align-items: center;  /* Zentriert die Offizier-Elemente */
    gap: 20px;
}

/* Basis-Stile für den gesamten Body */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #0A1F44;
    color: white;
}

/* === Abteilungsseite === */
.department-section {
    max-width: 1200px;
    margin: 50px auto;
    padding: 20px;
    background: #0A1F44;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.department-section h1 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #FFD700;
    margin-bottom: 10px;
}

.department-section p {
    font-size: 1.2rem;
    color: #E0E0E0;
    margin-bottom: 30px;
}

/* Abteilungs-Container */
.department {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1A3553;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: background 0.3s ease, transform 0.2s ease;
}

.department:hover {
    background: #1A4366;
    transform: translateY(-5px);
}

/* Logo-Styling */
.department-logo {
    flex: 0 0 150px;
    text-align: center;
}

.department-logo img {
    width: 100%;
    max-width: 120px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Abteilungsinformationen */
.department-info {
    flex: 1;
    text-align: left;
    padding-left: 20px;
}

.department-info h2 {
    font-size: 1.8rem;
    font-weight: bold;
    color: #FFD700;
    margin-bottom: 10px;
}

.department-info p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #E0E0E0;
    margin-bottom: 15px;
}

/* Listen-Styling */
.department-info ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 15px;
}

.department-info ul li {
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: #FFD700;
    position: relative;
    padding-left: 25px;
}

.department-info ul li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #FF6347;
    font-weight: bold;
}

/* Responsive Anpassungen */
@media (max-width: 900px) {
    .department {
        flex-direction: column;
        text-align: center;
    }

    .department-logo {
        margin-bottom: 15px;
    }

    .department-info {
        padding-left: 0;
    }
}

@media (max-width: 600px) {
    .department-section h1 {
        font-size: 2rem;
    }

    .department-section p {
        font-size: 1rem;
    }

    .department-info h2 {
        font-size: 1.6rem;
    }

    .department-info p {
        font-size: 1rem;
    }
}

/* === Über Uns Seite === */
.about-main {
    max-width: 1200px;
    margin: 50px auto;
    padding: 20px;
    background: #0A1F44;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    text-align: center;
}

/* Titel & Beschreibung */
.page-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #FFD700;
    margin-bottom: 10px;
}

.page-description {
    font-size: 1.2rem;
    color: #E0E0E0;
    margin-bottom: 30px;
}

/* Allgemeine Stile für Abschnitte */
.about-section {
    background: #1A3553;
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: background 0.3s ease;
}

.about-section:hover {
    background: #1A4366;
}

.section-title {
    font-size: 2rem;
    font-weight: bold;
    color: #FFD700;
    margin-bottom: 15px;
}

.section-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #E0E0E0;
}

/* Listen-Styling */
.mission-list, .values-list {
    text-align: left;
    margin-top: 15px;
    padding-left: 20px;
}

.mission-list li, .values-list li {
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: #FFD700;
    position: relative;
    padding-left: 25px;
}

.mission-list li::before, .values-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #FF6347;
    font-weight: bold;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .about-main {
        padding: 15px;
    }

    .page-title {
        font-size: 2rem;
    }

    .page-description {
        font-size: 1rem;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .section-text {
        font-size: 1rem;
    }
}

/* Allgemeine Formatierungen */
body {
    font-family: Arial, sans-serif;
    background-color: #0A1F44;
    color: #fff;
    margin: 0;
    padding: 0;
}

/* Überschriften */
h1, h2 {
    color: #FFD700;
    text-align: center;
}

h1 {
    font-size: 3rem;
    margin-top: 20px;
}

h2 {
    font-size: 2rem;
    margin-top: 10px;
}

/* Absätze */
p {
    font-size: 1rem;
    line-height: 1.6;
    color: #E0E0E0;
    margin: 10px 0;
}

/* Listen */
ul {
    list-style-type: none;
    padding: 0;
}

ul li {
    font-size: 1rem;
    color: #E0E0E0;
}

/* Fahrzeug-Sektion */
.vehicle-section {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #1A3553;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

/* Fahrzeugbox */
.vehicle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 20px 0;
    border-bottom: 1px solid #444;
    padding-bottom: 20px;
}

/* Fahrzeug-Logo */
.vehicle-logo {
    flex: 0 0 250px; /* Bildbreite auf 250px setzen */
    max-width: 250px;
    height: 250px; /* Bildhöhe auf 250px setzen */
    margin-right: 20px;
    overflow: hidden; /* Verhindert das Überlaufen der Bilder */
    border-radius: 8px;
    position: relative;
}

.vehicle-logo img {
    width: 100%;  /* Bild füllt die Box */
    height: 100%; /* Bild füllt die Box */
    object-fit: cover; /* Bild wird skaliert, um die Box zu füllen */
    border-radius: 8px;
}

/* Fahrzeug-Info */
.vehicle-info {
    flex: 1;
    background-color: #1A4366;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    height: 250px; /* Gleiche Höhe wie das Bild */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.vehicle-info p {
    margin-bottom: 15px;
}

.vehicle-info h2 {
    margin-bottom: 10px;
    font-size: 1.5rem;
    color: #FFD700;
}

/* Design-Details */
.vehicle-info strong {
    font-weight: bold;
    color: #FFD700;
}

/* Mobile Optimierung */
@media (max-width: 768px) {
    .vehicle {
        flex-direction: column;
        align-items: flex-start;
    }

    .vehicle-logo {
        margin-bottom: 15px;
    }

    .vehicle-info {
        width: 100%;
    }
}