body {
    font-family: Arial, sans-serif;
    /* Alter Hintergrund: background-image: url('snoopy.jpg'); */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #333;
    margin: 0;
    padding: 0;
    display: block;
    min-height: 100vh;
}

/* NEU: Taj Mahal Hintergrund für die Startseite (index.php) */
.taj-hintergrund {
    background-image: url('Taj.jpg'); 
}

/* NEU: Klasse für die Galerieansicht (Tagesordner) - bleibt erhalten */
.holz-hintergrund {
    background-image: url('holz.jpg'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Anpassungen für alle Haupt-Container (Login, Hauptordner, Tagesordner) */
.login-container,
.container {
    background-color: rgba(255, 255, 255, 0.3); /* Milchglaseffekt */
    backdrop-filter: blur(10px); /* Moderner Milchglaseffekt */
    color: #FF0000; /* Rote Schriftfarbe für alle Container */
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 90%;
    max-width: 900px;
    margin: 20px auto;
}

/* Spezifische Anpassung für die Startseite, damit der Blur-Effekt den Hintergrund nicht zu stark verdeckt */
.main-folder-page {
    background-color: rgba(255, 255, 255, 0.1); /* Weniger und transparenter */
    backdrop-filter: blur(5px); /* Weniger Blur, um Taj Mahal besser zu zeigen */
    padding-top: 50px; /* Mehr Platz nach oben für die große Überschrift */
}

h1 {
    text-align: center;
    color: #FF0000; /* Rote Schrift für alle Überschriften */
}

/* NEU: Große, weiße Überschrift mit 3D-Effekt */
.main-heading-effect {
    font-size: 4.5rem; /* Sehr groß */
    font-weight: bold;
    color: white; /* Weiße Schrift */
    text-shadow: 
        -2px -2px 0 #CC0000,  /* Dunkles Rot oben links */
        2px 2px 0 #990000,    /* Noch dunkleres Rot unten rechts für 3D-Tiefe */
        0 0 15px rgba(0, 0, 0, 0.7); /* Weicher Schatten für bessere Lesbarkeit */
    margin-bottom: 40px;
    letter-spacing: 2px;
}

/* Spezifische Positionierung für den Login-Container */
.login-container {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
}
.login-container form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-container label {
    margin-bottom: 10px;
}

.login-container input {
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 200px;
}

/* Roter Button für den Anmeldebereich */
.login-container button {
    padding: 10px 20px;
    background-color: #FF0000; /* Roter Hintergrund */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.login-container button:hover {
    background-color: #CC0000; /* Dunkleres Rot beim Hover */
}

.error {
    color: red;
    margin-top: 10px;
}

/* Original Folder Grid (Desktop oder sehr breit) - Auto-Fit verursacht 5 Spalten auf X200 */
.folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* Klasse für die mobilen Ordner-Buttons (BITTE DIESE KLASSE IM HTML/PHP VERWENDEN) */
.folder-grid-mobile {
    display: grid;
    /* Dies wird in der 1024px Media Query auf 3 Spalten überschrieben! */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
    gap: 20px;
    margin-top: 20px;
}

.folder-link {
    text-decoration: none;
    color: #333;
}

.folder-link div {
    background-color: rgba(255, 255, 255, 0.5); /* Leichter Milchglaseffekt für Ordner */
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    transition: transform 0.2s;
}

.folder-link div:hover {
    transform: translateY(-5px);
    background-color: rgba(255, 255, 255, 0.7);
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.image-grid img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s;
}

.image-grid img:hover {
    transform: scale(1.05);
}

.video-placeholder {
    background-color: #333;
}

.video-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 3em;
    pointer-events: none;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.thumbnail-link {
    position: relative;
    display: block;
}

/* Styling für die "Zurück"-Buttons mit 3D-Effekt */
.back-link {
    display: inline-block;
    margin-bottom: 20px;
    padding: 10px 20px;
    text-decoration: none;
    color: white;
    background-color: #FF0000; /* Hauptfarbe Rot */
    border: 2px solid #CC0000; /* Dunklerer Rahmen für den 3D-Effekt */
    border-radius: 8px;
    font-weight: bold;
    font-size: 1rem;
    box-shadow: 0 6px 0 #990000, /* Tieferer Schatten für 3D-Effekt */
                0 0 15px rgba(0, 0, 0, 0.3); /* Zusätzlicher weicher Schatten */
    transition: all 0.1s ease;
    cursor: pointer;
}

.back-link:hover {
    background-color: #CC0000; /* Dunkleres Rot beim Hover */
    border-color: #990000;
    box-shadow: 0 3px 0 #660000, /* Schatten wird kleiner */
                0 0 20px rgba(0, 0, 0, 0.4); /* Schatten wird intensiver */
    transform: translateY(3px); /* Button bewegt sich nach unten */
}

.back-link:active {
    background-color: #990000; /* Noch dunkleres Rot beim Klicken */
    border-color: #660000;
    box-shadow: 0 0px 0 #660000, /* Schatten verschwindet */
                0 0 10px rgba(0, 0, 0, 0.2);
    transform: translateY(6px); /* Button wird ganz eingedrückt */
}

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 60px; /* Bietet Platz für den Schließen-Button */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    text-align: center;
    display: flex; /* Flexbox für Zentrierung des Wrappers */
    align-items: center; /* Vertikale Zentrierung */
    justify-content: center; /* Horizontale Zentrierung */
}

.lightbox-content-wrapper {
    width: 100%; /* Den gesamten verfügbaren Platz im flex-Container nutzen */
    height: 100%; /* Den gesamten verfügbaren Platz im flex-Container nutzen */
    margin: auto;
    display: flex; /* Erneut Flexbox, um Bild/Video zu zentrieren */
    justify-content: center;
    align-items: center;
}

.lightbox-content-wrapper img,
.lightbox-content-wrapper video {
    max-width: 100%; /* Stellt sicher, dass es nicht breiter als der Wrapper wird */
    max-height: 100%; /* Stellt sicher, dass es nicht höher als der Wrapper wird */
    object-fit: contain; /* Skaliert das Medium so, dass es in den Container passt und das Seitenverhältnis beibehält */
    display: block; /* Wichtig für die korrekte Anwendung von margin: auto */
    margin: auto; /* Zentriert das Element im Wrapper */
    transition: transform 0.3s ease; /* Behält die Übergänge bei */
}

/* Separate Regeln für img, falls spezifische Effekte (wie Transition) nur dort angewendet werden sollen */
.lightbox-content-wrapper img {
    transition: transform 0.3s ease;
}

/* Styling für den Schließen-Button */
.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    font-size: 1rem;
    padding: 10px 20px;
    background: #FF0000;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 5px 0 #CC0000; /* Der 3D-Effekt */
    transition: all 0.1s ease;
}

.close-btn:hover {
    background: #CC0000;
    box-shadow: 0 3px 0 #990000;
    transform: translateY(2px);
}

.close-btn:active {
    background: #990000;
    box-shadow: 0 0px 0 #990000;
    transform: translateY(5px);
}

/* KORRIGIERTE POSITION: "Zurück zum Hauptmenü"-Button */
.main-menu-btn {
    top: 90px; /* Erhöht, um den "Schließen"-Button freizuhalten */
    font-size: 0.9rem; 
}

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 50px; /* Standardgröße für Desktop/Tablets */
    color: #FF0000; /* Rote Navigationspfeile */
    cursor: pointer;
    transition: 0.3s;
    user-select: none;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.7); 
}

.prev-btn {
    left: 20px;
}

.next-btn {
    right: 20px;
}

---
## Mobile Optimierung: 3 Spalten und kleine Pfeile
---

/* ******************************************************* */
/* ERSTE MEDIA QUERY: ALLE Mobile Geräte und Tablets (max-width: 1024px) */
/* ******************************************************* */
@media (max-width: 1024px) { 
    body {
        font-size: 1.1rem;
    }

    h1 {
        font-size: 1.6rem;
    }
    
    .main-heading-effect {
        font-size: 3.0rem; 
    }

    .login-container {
        width: 90%;
        top: 20px;
    }

    .login-container input {
        width: 100%;
    }

    .container {
        padding: 15px; 
    }
    
    /* WICHTIG: Erzwungen 3 Spalten für ALLE Mobile Geräte, die kleiner oder gleich 1024px sind. */
    .folder-grid,
    .folder-grid-mobile {
        grid-template-columns: repeat(3, 1fr); 
    }
    
    /* ANPASSUNG: Button-Größen für Tablets/iPads (1024px) */
    
    /* Anpassung der mobilen Ansicht für den Schließen-Button (.close-btn) */
    .close-btn {
        font-size: 1.0rem; 
        padding: 10px 20px; 
        right: 10px; 
        top: 10px; 
        box-shadow: 0 4px 0 #CC0000; 
    }

    .close-btn:active {
        transform: translateY(4px); 
    }

    /* Anpassung für mobile Geräte (Zurück-Button - .back-link) */
    .back-link {
        padding: 10px 20px; 
        font-size: 1.0rem; 
        box-shadow: 0 6px 0 #990000;
    }
    
    .back-link:hover {
        transform: translateY(3px);
    }

    .back-link:active {
        transform: translateY(6px);
    }

    /* KORRIGIERTE POSITION: "Zurück zum Hauptmenü" für Mobile (1024px) */
    .main-menu-btn {
        top: 65px; /* Angepasst */
        right: 10px; 
        font-size: 0.9rem;
    }

    /* ANPASSUNG: Deutlich kleinere Navigations-Buttons auf ALLEN Mobilgeräten */
    .nav-btn {
        font-size: 40px; /* Kleinere Pfeile */
        background-color: rgba(0, 0, 0, 0.25); 
        padding: 0 10px; 
        border-radius: 8px; 
        text-shadow: none;
    }

    .prev-btn {
        left: 0px; 
    }

    .next-btn {
        right: 0px; 
    }
}

---
## Sehr kleine mobile Geräte Optimierung
---

/* ******************************************************* */
/* ZWEITE MEDIA QUERY: Sehr kleine mobile Geräte (unter 480px) */
/* ******************************************************* */
@media (max-width: 480px) {
    
    /* Das 3-Spalten-Layout wird von der 1024px-Regel geerbt. */
    
    /* Spezifische Anpassung der Hauptüberschrift für sehr kleine Bildschirme */
    .main-heading-effect {
        font-size: 2.5rem; 
    }

    /* ******************************************************* */
    /* MAXIMIERT: Buttons für kleine mobile Geräte */
    /* ******************************************************* */

    /* Anpassung der mobilen Ansicht für den Schließen-Button (.close-btn) */
    .close-btn {
        font-size: 1.6rem; 
        padding: 20px 40px; /* Maximierte Klickfläche */
        right: 5px; 
        top: 5px; 
        box-shadow: 0 4px 0 #CC0000; 
    }

    .close-btn:active {
        transform: translateY(4px); 
    }

    /* Anpassung für mobile Geräte (Zurück-Button - .back-link) */
    .back-link {
        padding: 20px 40px; /* Maximierte Klickfläche */
        font-size: 1.4rem; 
        box-shadow: 0 6px 0 #990000,
                    0 0 15px rgba(0, 0, 0, 0.3);
    }
    
    /* KORRIGIERTE POSITION: "Zurück zum Hauptmenü" für Mobile (480px) */
    .main-menu-btn {
        top: 110px; /* Erhöht, um den "Schließen"-Button freizuhalten */
        right: 5px; 
        font-size: 1.2rem;
    }

    /* Navigations-Buttons (werden nur minimal vergrößert, bleiben aber klein) */
    .nav-btn {
        font-size: 50px; 
        background-color: rgba(0, 0, 0, 0.45); 
        padding: 0 15px; 
        border-radius: 10px; 
    }
}

/* ******************************************************* */
/* AKTUALISIERT: RETRO-ZÄHLER STYLE (Kleiner & Milchglas-3D) */
/* ******************************************************* */

.retro-counter {
    /* Tiefer setzen: Etwas reduzierte Marge */
    margin-top: 40px; 
    /* Padding reduziert */
    padding: 10px 20px;
    
    /* Hintergrund: Milchglaseffekt (wie .container, aber etwas transparenter) */
    background-color: rgba(255, 255, 255, 0.2); 
    backdrop-filter: blur(8px); /* Blur-Effekt */
    
    /* Rahmen im Retro-Stil: Doppelte Linie (Bleibt) */
    border: 3px solid #FF0000; /* Roter Rahmen */
    border-radius: 10px; 
    
    /* Text: Kleiner */
    color: white; 
    font-size: 1.4em; /* Auf 1.4em reduziert */
    font-weight: bold;
    text-shadow: 
        -1px -1px 0 #FF0000,  /* Roter Schatten oben links */
        1px 1px 0 #990000,    /* Dunkles Rot unten rechts für 3D-Tiefe */
        0 0 10px rgba(0, 0, 0, 0.8); /* Weicher Schatten für Lesbarkeit */
    
    /* 3D-Effekt und Glow */
    box-shadow: 0 5px 0 #CC0000, /* Tiefe (wie bei den Buttons) */
                0 0 20px rgba(255, 0, 0, 0.7); /* Roter Glow um den Container */
    
    /* Zentrierung des Containers */
    display: inline-block;
    max-width: 90%; 
    
    transition: all 0.1s ease;
}

/* Hover-Effekt: Zeigt an, dass der Zähler ein "Element" ist */
.retro-counter:hover {
    box-shadow: 0 3px 0 #990000,
                0 0 25px rgba(255, 0, 0, 0.9);
    transform: translateY(2px); /* Simuliert leichtes Eindrücken */
}


/* Anpassung des Zählers für sehr kleine Bildschirme */
@media (max-width: 480px) {
    .retro-counter {
        margin-top: 30px;
        font-size: 1.2em;
        padding: 8px 15px;
        box-shadow: 0 4px 0 #CC0000,
                    0 0 15px rgba(255, 0, 0, 0.6);
    }
    
    .retro-counter:hover {
        transform: translateY(1px);
    }
}