body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f4f8; /* Helles Hintergrundfarbe */
    color: #333; /* Dunkle Schriftfarbe */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    overflow-x: hidden;
    transition: background-color 0.3s, color 0.3s;
}

body.dark-mode {
    background-color: #121212; /* Dunkler Hintergrund für den Darkmode */
    color: #f0f4f8; /* Helle Schriftfarbe im Darkmode */
}

.switch {
    position: fixed; /* Fixiert die Position des Schalters */
    bottom: 20px; /* Abstand vom unteren Rand */
    right: 20px; /* Abstand vom rechten Rand */
    z-index: 1000; /* Sicherstellen, dass es über anderen Inhalten liegt */
    width: 50px; /* Breite des Umschalters */
    height: 24px; /* Höhe des Umschalters */
}

.switch input {
    opacity: 0; /* Unsichtbar, um nur den Slider anzuzeigen */
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc; /* Hintergrundfarbe des Umschalters */
    transition: .4s; /* Übergang für den Umschalters */
    border-radius: 34px; /* Abgerundete Ecken für den Umschalters */
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px; /* Höhe des Schiebereglers */
    width: 20px; /* Breite des Schiebereglers */
    left: 2px; /* Abstand vom linken Rand */
    bottom: 2px; /* Abstand vom unteren Rand */
    background-color: white; /* Hintergrundfarbe des Schiebereglers */
    border-radius: 50%; /* Abgerundete Ecken für den Schieberegler */
    transition: .4s; /* Übergang für den Schieberegler */
}

/* Zustand für den aktiven Schieberegler */
input:checked + .slider {
    background-color: #3b82f6; /* Hintergrundfarbe des Umschalters bei Aktivierung */
}

input:checked + .slider:before {
    transform: translateX(26px); /* Bewege den Schieberegler nach rechts */
}

.container {
    display: flex;
    justify-content: space-between;
    width: 90%; /* Stelle sicher, dass es nicht mehr als 100% des Viewports einnimmt */
    max-width: 1200px; /* Maximale Breite für größere Bildschirme */
    margin: 0 auto; /* Zentrieren der Container */
    margin-top: 200px; /* Negativer Margin, um den Container nach unten zu verschieben */
    overflow: hidden; /* Verhindert Überlauf */
}

main {
    flex: 1;
    padding: 20px;
    background-color: #1f2937; /* Hintergrund für den Hauptbereich */
    transition: background-color 0.3s; /* Übergang für den Hintergrund */
    border-radius: 15px; /* Optional: Abgerundete Ecken */
    border: 4px solid #3b82f6;
    color: #ffff;
}

body.dark-mode main {
    background-color: #1f2937; /* Dunkler Hintergrund für den Hauptbereich im Darkmode */
    color: #ffff;
}

.movies-box {
    background-color: #fff; /* Hintergrund für die Filme */
    margin-top: 40px; /* Abstand nach oben */
    padding: 20px; /* Innenabstand */
    border-radius: 12px; /* Abgerundete Ecken */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten */
    display: flex;
    flex-direction: column; /* Kolonne */
    align-items: center; /* Zentriert horizontal */
    justify-content: center; /* Zentriert vertikal */
    max-width: 100%; /* Maximale Breite */
    margin-bottom: 20px; /* Abstand nach unten */
}

/* Dark Mode Styles */
body.dark-mode .movies-box {
    background-color: #1f2937; /* Dunkler Hintergrund für Darkmode */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Stärkere Schatten für Darkmode */
    color: #fff; /* Weiße Schriftfarbe */
}

#movies-list {
    display: flex; /* Damit die Bilder nebeneinander angezeigt werden */
    flex-wrap: wrap; /* Damit die Bilder in die nächste Zeile umbrechen, wenn sie nicht mehr passen */
    justify-content: center; /* Zentriert die Filme im Container */
    list-style-type: none; /* Entfernt Aufzählungszeichen */
    padding: 0; /* Entfernt Padding */
    margin: 0; /* Entfernt Margin */
}

.movie-item {
    margin: 10px; /* Abstand zwischen den Bildern */
    opacity: 0; /* Startwert für die Opazität */
    transition: opacity 0.5s ease-in; /* Übergang für die Opazität */
    display: flex; /* Flex-Container für die Inhalte */
    flex-direction: column; /* Vertikale Anordnung */
    align-items: center; /* Zentriert den Inhalt (Cover und Titel) */
}

.movie-item img {
    border-radius: 5px; /* Abgerundete Ecken für die Bilder */
    width: 120px; /* Breite anpassen */
    height: 180px; /* Höhe anpassen */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten für die Bilder */
}

.movie-item.loaded {
    opacity: 1; /* Sichtbar wenn geladen */
}

.sidebar {
    width: 300px; /* Feste Breite für die Sidebar */
    padding: 5px;
    background-color: #ffffff00; /* Weißer Hintergrund für die Sidebar */
    border-radius: 8px; /* Abgerundete Ecken für die Sidebar */
    margin-left: 20px;
    max-width: 100%; /* Verhindert, dass die Sidebar breiter als der Container wird */
    
}

body.dark-mode .sidebar {
    background-color: #2c2c2c00; /* Dunkler Hintergrund für die Sidebar im Darkmode */
}

.newsletter-box {
    background-color: #f9f9f9; /* Heller Hintergrund für die Newsletter-Box */
    padding: 20px; /* Innenabstand für die Newsletter-Box */
    border-radius: 8px; /* Abgerundete Ecken */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten für die Newsletter-Box */
    border: 4px solid #3b82f6;
}

body.dark-mode .newsletter-box {
    background-color: #1f2937; /* Dunkler Hintergrund für die Newsletter-Box im Darkmode */
}

h2 {
    color: #1f2937; /* Titel für die Filme */
    margin-bottom: 10px; /* Abstand unter dem Untertitel */
}

h3 {
    color: #ffff; /* Titel für die Filme */
    margin-bottom: 10px; /* Abstand unter dem Untertitel */
}

body.dark-mode h2 {
    color: #3b82f6; /* Helle Schriftfarbe für die Titel im Darkmode */
}

input {
    margin: 10px 0;
    padding: 10px;
    width: calc(100% - 22px); /* Vollständige Breite abzüglich Padding */
    border: 1px solid #ccc; /* Rahmen für Eingabefelder */
    border-radius: 5px; /* Abgerundete Ecken für Eingabefelder */
    transition: border-color 0.3s; /* Übergang für die Rahmenfarbe */
}

button {
    padding: 10px;
    background-color: #3b82f6; /* Hintergrund für den Button */
    color: white;
    border: none;
    border-radius: 5px; /* Abgerundete Ecken für den Button */
    cursor: pointer;
    transition: background-color 0.3s; /* Übergangseffekt für Hintergrundfarbe */
    font-size: 1em; /* Schriftgröße anpassen */
}

button:hover {
    background-color: #2274f8; /* Dunkleres bei Hover */
}

body.dark-mode button:hover {
    background-color: #2274f8; /* Dunkleres im Darkmode bei Hover */
}

.telegram-connect-box {
    background-color: #3b82f6; /* Grüner Hintergrund für die Telegram-Box */
    padding: 10px; /* Innenabstand für die Telegram-Box */
    border-radius: 8px; /* Abgerundete Ecken */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten für die Telegram-Box */
    margin: 20px auto; /* Abstand nach oben und unten, zentriert horizontal */
    text-align: center; /* Zentrierter Text */
    width: auto; /* Automatische Breite */
    max-width: 90%; /* Maximale Breite auf 90% des Containers */
}

.telegram-connect-box p {
    color: white; /* Weiße Schriftfarbe */
    margin: 0 0 10px 0;
}

body.dark-mode .telegram-connect-box p {
    color: #f0f4f8; /* Helle Schriftfarbe für den Telegram-Box im Darkmode */
}

.telegram-connect-box a {
    display: inline-block; /* Inline-Block für den Link */
    padding: 10px 15px; /* Innenabstand für den Link */
    background-color: #fff; /* Weißer Hintergrund für den Link */
    color: #3b82f6; /* Grüner Text für den Link */
    border-radius: 5px; /* Abgerundete Ecken für den Link */
    text-decoration: none; /* Keine Unterstreichung für den Link */
    transition: background-color 0.3s; /* Übergang für den Hintergrund */
}

.telegram-connect-box a:hover {
    background-color: #e0e0e0; /* Hellerer Hintergrund bei Hover */
}

body.dark-mode .telegram-connect-box a {
    background-color: #3a3a3a; /* Dunkler Hintergrund für den Link im Darkmode */
    color: #3b82f6; /* Helle Schriftfarbe für den Link im Darkmode */
}

.gitea-box {
    background-color: #f9f9f9; /* Heller Hintergrund für die Gitea-Box */
    padding: 10px; /* Innenabstand für die Gitea-Box */
    border-radius: 8px; /* Abgerundete Ecken */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten für die Gitea-Box */
    margin-top: 20px; /* Abstand zur vorherigen Box */
    text-align: center; /* Zentrierter Text */
    border: 4px solid #3b82f6;
}

body.dark-mode .gitea-box {
    background-color: #1f2937; /* Dunkler Hintergrund für die Gitea-Box im Darkmode */
}

body.dark-mode .gitea-box p,
body.dark-mode .gitea-box a {
    color: #f0f4f8; /* Helle Schriftfarbe im Darkmode für Text und Links */
}

.links-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0;
    list-style: none;
    max-width: 600px;
    margin: 0 auto;
}

.links-list li {
    width: 48%; /* Zwei Links nebeneinander */
    margin-bottom: 10px;
}

.links-list a {
    text-decoration: none;
    color: #333;
    display: block;
    padding: 10px;
    background-color: #f0f4f8;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-align: center;
}

.links-list a:hover {
    background-color: #3b82f6;
    color: #fff;
}

.movie-item {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.movie-item.visible {
    opacity: 1;
}

.movie-popup {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 8px;
    padding: 20px;
    z-index: 1000;
    max-width: 300px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none; /* Standardmäßig ausgeblendet */
}

.movie-popup img {
    max-width: 100%;
    border-radius: 4px;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f4f8;
    color: #333;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    overflow-x: hidden;
    transition: background-color 0.3s, color 0.3s;
}

body.dark-mode {
    background-color: #121212;
    color: #f0f4f8;
}

.wunsch-box {
    background-color: #f9f9f9; /* Heller Hintergrund */
    border: 1px solid #ddd;    /* Rahmen um die Box */
    border-radius: 8px;        /* Abgerundete Ecken */
    padding: 20px;             /* Innenabstand */
    max-width: 800px;          /* Maximale Breite der Box */
    margin: 20px auto;         /* Zentriert auf der Seite */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatten für Tiefe */
}

/* Darkmode-Styles für Wunsch-Box */
body.dark-mode .wunsch-box {
    background-color: #333;    /* Dunkler Hintergrund im Darkmode */
    border: 1px solid #555;    /* Dunklerer Rahmen im Darkmode */
    color: #fff;                /* Weiße Schrift im Darkmode */
}

.wunsch-box h2 {
    text-align: center;        /* Überschrift zentrieren */
    color: #333;               /* Dunkle Schriftfarbe */
    margin-bottom: 20px;       /* Abstand unter der Überschrift */
}

/* Darkmode-Styles für Überschrift */
body.dark-mode .wunsch-box h2 {
    color: #fff;               /* Weiße Schrift im Darkmode */
}

.wunsch-box label {
    display: block;            /* Jeder Textblock auf eigener Zeile */
    font-weight: bold;         /* Fettdruck für Label */
    margin-bottom: 5px;        /* Abstand unter den Labels */
    color: #555;               /* Mittlere Schriftfarbe */
}

/* Darkmode-Styles für Labels */
body.dark-mode .wunsch-box label {
    color: #ddd;               /* Hellere Schrift im Darkmode */
}


.wunsch-box input[type="text"],
.wunsch-box select {
    width: 100%;               /* Eingabefeld und Auswahlfeld in voller Breite */
    padding: 10px;             /* Innenabstand */
    margin-bottom: 15px;       /* Abstand unter den Feldern */
    border: 1px solid #ccc;    /* Rahmenfarbe */
    border-radius: 4px;        /* Abgerundete Ecken */
    box-sizing: border-box;    /* Box-Inhalt inklusive Padding */
}

.wunsch-box button {
    width: 100%;               /* Button in voller Breite */
    padding: 10px;             /* Innenabstand */
    background-color: #3b82f6; /* Farbe für Button */
    color: white;              /* Weiße Schrift */
    border: none;              /* Kein Rahmen */
    border-radius: 4px;        /* Abgerundete Ecken */
    font-size: 16px;           /* Größere Schrift für den Button */
    cursor: pointer;           /* Mauszeiger ändert sich bei Hover */
}

.wunsch-box button:hover {
    background-color: #2274f8; /* Dunklere Farbe beim Hover */
}

#response-message {
    text-align: center;        /* Nachricht zentrieren */
    color: #d9534f;            /* Rote Farbe für Fehlernachrichten */
    margin-top: 15px;          /* Abstand über der Nachricht */
    font-size: 14px;           /* Kleinere Schriftgröße */
}

.popup {
    display: none; /* Standardmäßig ausgeblendet */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 80%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7); /* Halbtransparentes Hintergrund */
}

.popup-content {
    background-color: #fefefe; /* Heller Hintergrund im Normalmodus */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Breite des Popups */
    max-width: 600px; /* Maximale Breite */
    position: fixed; /* Fest im Fenster platziert */
    top: 50%; /* Vertikale Mitte */
    left: 50%; /* Horizontale Mitte */
    transform: translate(-160%, -86%); /* Zentrieren des Popups */
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Leichter Schatten */
    z-index: 1000; /* Über andere Elemente legen */
}

/* Darkmode-Styles für das Popup */
body.dark-mode .popup-content {
    background-color: #1f2937; /* Dunkler Hintergrund im Darkmode */
    color: #080808; /* Weiße Schrift im Darkmode */
    border: 1px solid #555; /* Dunklerer Rand im Darkmode */
}


.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: white; /* Helle Schriftfarbe beim Hover im Darkmode */
    text-decoration: none;
    cursor: pointer;
}

.footer {
    position: relative; /* Fügt eine relative Position für das Footer-Element hinzu */
}

.popup {
    display: none; /* Standardmäßig ausgeblendet */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7); /* Halbtransparentes Hintergrund */
}

.popup-content {
    background-color: #fefefe; /* Heller Hintergrund im Normalmodus */
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Breite des Popups */
    max-width: 600px; /* Maximale Breite */
    position: relative;
    color: #000; /* Schwarze Schriftfarbe im Normalmodus */
}

.popup-content.dark-mode {
    background-color: #333; /* Dunkler Hintergrund im Darkmode */
    color: #fff; /* Helle Schriftfarbe im Darkmode */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: white; /* Helle Schriftfarbe beim Hover im Darkmode */
    text-decoration: none;
    cursor: pointer;
}

.footer {
    position: relative; /* Fügt eine relative Position für das Footer-Element hinzu */
}

#changelog-icon {
    position: absolute; /* Macht das Symbol absolut positioniert */
    left: 20px; /* Abstand vom rechten Rand */
    top: 50%; /* Vertikale Zentrierung */
    transform: translateY(-50%); /* Vertikal zentrieren */
    font-size: 24px; /* Größe des Symbols */
}

.changelog-entry {
    margin-bottom: 15px; /* Abstand zwischen den Einträgen */
    padding: 10px; /* Padding für besseren Abstand innen */
    border: 1px solid #ccc; /* Rahmen um jeden Eintrag */
    border-radius: 5px; /* Abgerundete Ecken */
    background-color: #f9f9f9; /* Hintergrundfarbe */
    width: 100%; /* Damit die Einträge die volle Breite des Popups nutzen */
    max-width: 500px; /* Maximale Breite der Boxen */
}

/* Darkmode-Styles für Changelog-Einträge */
body.dark-mode .changelog-entry {
    background-color: #444; /* Dunkler Hintergrund im Darkmode */
    border: 1px solid #666; /* Dunklerer Rand im Darkmode */
    color: #fff; /* Weiße Schrift im Darkmode */
}


/* Content */
#content {
    margin-left: 260px;
    padding: 30px;
    background-color: #f8fafc;
    min-height: 90vh;
}

/* Header (Willkommensbox) */
.welcome-box {
    background-color: #1f2937;
    color: white;
    padding: 15px 20px; /* Padding verkleinert */
    border-radius: 0 0 15px 15px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    font-size: 1.2em; /* Schriftgröße verkleinert */
    font-weight: 300;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    border-bottom: 4px solid #3b82f6;
}


/* Footer */
.footer {
    background-color: #1f2937;
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 0.9em;
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    border-top: 4px solid #3b82f6;
}

/* Navbar Links */
.navbar {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.navbar-link {
    margin: 0 15px;
    text-decoration: none;
    color: white;
    font-size: 1em;
    transition: color 0.3s;
}

.navbar-link:hover {
    color: #3b82f6;
}

/* Logo-Container separat und links oben positionieren */
.logo-container {
    position: absolute;
    top: 40px;
    left: 40px;
    z-index: 1000; /* Über anderen Elementen */
}

.logo {
    height: 100px; /* Vergrößere das Logo nach Bedarf */
    position: fixed; /* Fixiere das Logo */
    top: 40px; /* Abstand vom oberen Rand */
    left: 40px; /* Abstand vom linken Rand */
    z-index: 1000; /* Stelle sicher, dass das Logo über anderen Inhalten liegt */
}

/* Beispiel CSS für das Bericht-Formular */
#report-form {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
}

#report-form label {
    margin-bottom: 5px;
}

#report-form input, #report-form select, #report-form textarea {
    margin-bottom: 15px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#report-form button {
    padding: 10px;
    background-color: #3b82f6;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#report-form button:hover {
    background-color: #2576f8;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
}

.faq-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.faq-item {
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 15px;
    cursor: pointer;
    transition: background-color 0.3s;
    background: rgb(241, 240, 240);
}

.faq-item:hover {
    background-color: #dfdbdb;
}

.faq-question {
    font-weight: bold;
    margin: 0;
    color: #000;
}

.faq-answer {
    display: none; /* Antwort standardmäßig ausblenden */
    margin-top: 10px;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 5px;
}

.faq-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: black;
}

.arrow {
    transition: transform 0.3s;
}

.faq-answer.show {
    display: block; /* Antwort anzeigen */
    color: #000;
}

/* Dark Mode */
body.dark-mode {
    background-color: #181818;
    color: #fff;
}

body.dark-mode .faq-container {
    background-color: #1f2937;
    color: #fff;
}

body.dark-mode .faq-item {
    border: 1px solid #444;
}

body.dark-mode .faq-answer {
    background-color: #ffff;
    border: 1px solid #444;
}