/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: black;
    color: white;
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden; /* Verhindert horizontales Scrollen */
}

/* Header Styling */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
}

.branding {
    text-align: left;
    display: flex;
    flex-direction: column;  /* Stellt sicher, dass Elemente übereinander stehen */
    align-items: flex-start; /* Links ausgerichtet wie im Original */
    z-index: 100000;
}

.branding h1 {
    font-size: 100px;
    font-weight: 800;
    text-transform: lowercase;
    margin: 0;
    letter-spacing: -0.05em;
    
}

.branding p {
    font-size: 20px;
    font-weight: 100;
    margin-left: 6px;
    margin-top: -10px;
    letter-spacing: -0.05em;
}

.branding-link {
    text-decoration: none;        /* Entfernt die Unterstreichung */
    color: inherit;               /* Behält die Textfarbe der Überschrift */
    display: inline-block;        /* Block-Level für Klickfläche */
}

.branding-link h1 {
    margin: 0;                    /* Entfernt zusätzlichen Abstand */
}

nav {
    display: flex;               /* Verwendet flexbox für eine horizontale Ausrichtung */
    gap: 20px;                   /* Einheitlicher Abstand zwischen Links */
    align-items: center;
}

nav a {
    font-size: 20px;
    font-weight: 100;
    text-decoration: none;
    color: white;
    padding: 5px 10px;           /* Zusätzlicher Abstand innen für besseres Klickgefühl */
}

nav a:hover {
    border-bottom: 2px solid white;
}

.nav-link.active {
    font-weight: bold; /* Beispiel: Fett darstellen */
    color: white;    /* Aktiver Zustand farblich hervorheben */
    border-bottom: 2px solid white;
}

footer {
    bottom: 0px;
    left: 0;
    width: 100%;
    text-align: center; /* Zentriert den Text */
    padding: 10px 0;
    color: white;
}

footer p {
    font-size: 1rem;
    margin: 0;
    font-weight: 100; /* Ultra light Schrift */
}

footer .footer-links {
    margin-top: 70px; /* Zusätzlicher Abstand nach oben für Impressum-Link */
}

footer .impressum-link {
    font-size: 14px;       /* Schriftgröße */
    color: white;          /* Textfarbe */
    text-decoration: none; /* Entfernt Unterstreichung */
   

}

footer .impressum-link:hover {
    text-decoration: underline; /* Unterstreichen beim Hover */
}

main.impressum + footer {
    position: absolute;    /* Platziere den Footer relativ zum Viewport */
    bottom: 0;             /* Positioniere ihn am unteren Rand */
    left: 0;
    width: 100%;           /* Breite des Footers bleibt 100% */
    background-color: black; /* Fußzeilen-Stil bleibt */
    color: white;
    text-align: center;
    padding: 10px 0;
}


/* Video Wrapper Styling */
.video-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    width: 100%;
    padding-top: 65px;
    padding-bottom: 100px;
    padding-left: 50px;  /* Abstand am linken Rand */
    padding-right: 50px; /* Abstand am rechten Rand */
    scroll-behavior: smooth;

}

.video-wrapper::-webkit-scrollbar {
    display: none; /* Scrollbalken unsichtbar */
}

/* Video Styling */
.video {
    position: relative;
    flex-shrink: 0;
    width: 300px;
    height: calc(300px * 16 / 9); 
    opacity: 0.5;
    border-radius: 10px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    cursor: pointer;
    scroll-snap-align: center;
    z-index: 1;
    margin-left: 60px;  /* Abstand nach dem ersten Video */
}

/* Video Vergrößerung beim Hover */
.video:hover {
    transform: scale(1.15);
    opacity: 1;
    z-index: 10;
}

.video .video-element {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}

/* Video Information Styling */
.info {
    position: absolute;
    bottom: -60px;
    left: 0;
    width: 100%;
    padding: 10px 15px;
    transition: all 0.3s ease;
    color: white;
    text-align: left;
    z-index: 2;
}

.info .project {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
}

.info .artist {
    font-size: 14px;
    font-weight: 300;
}

/* Pagination Styling */
.pagination {
    display: flex;
    justify-content: center;
    gap: 20px;
    position: relative;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease, transform 0.3s ease;
}

.dot.active {
    width: 14px;
    height: 14px;
    background-color: white;
    transform: scale(1.2);
}

.sound-toggle-btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.sound-icon {
    width: 32px;   /* Größe der Icons anpassen */
    height: 32px;
    transition: transform 0.3s ease;  /* Optional: Hover-Effekt */
    filter: brightness(0) invert(1);
}

.sound-toggle-btn:hover .sound-icon {
    transform: scale(1.1);  /* Vergrößerung bei Hover */
}

/* Hamburger Menü */
.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    z-index: 100000;
}

.hamburger .line {
    width: 30px;
    height: 1px;
    background-color: white;
    border-radius: 5px;
}

/* Mobile Navigation */
.mobile-menu {
    display: none;
}

.mobile-menu a {
    display: block;
    margin-bottom: 10px;
    color: white;
    text-decoration: none;
    text-align: center;
    border-bottom: none;
    font-size: 26px;
}

.mobile-menu.active {
    display: flex; /* Verwendet Flexbox, um die Links zu zentrieren */
    position: fixed; /* Menü wird über andere Elemente angezeigt */
    top: 0; /* Menü startet ganz oben */
    bottom: 0;
    left: 0; /* Menü startet ganz links */
    height: 100vh; /* Höhe des Menüs soll den gesamten Bildschirm ausfüllen */
    width: 100vw; /* Breite des Menüs soll den gesamten Bildschirm ausfüllen */
    background-color: rgba(0, 0, 0, 0.9); /* Schwarzer Hintergrund */
    z-index: 10000; /* Sehr hoher z-index stellt sicher, dass das Menü oben liegt */
    justify-content: center; /* Zentriert die Menü-Elemente horizontal */
    align-items: center; /* Zentriert die Menü-Elemente vertikal */
    flex-direction: column; /* Organisiert die Links untereinander */
    padding-top: 60%; /* Padding für das Menü */
}

#mobile-menu a.impressum-link {
    font-size: 15px; /* Andere Schriftgröße für den Impressum-Link */
    font-family: 'Arial', sans-serif; /* Andere Schriftart für den Impressum-Link */
    font-weight: normal;  /* Entfernen von fett, falls verwendet */
    text-transform: none;  /* Entfernen von Großbuchstaben */
    margin-top: 40px;  /* Abstand zwischen Impressum und den anderen Links */
    padding-top: 130px; /* Padding hinzufügen, um den Abstand weiter anzupassen */
    color: #f8f8f8; /* Andere Farbe */
    z-index: 9099;
}

main.impressum {
    padding-left: 50px;
    padding-top: 20px;
    padding-right: 50px;     /* Für besseren horizontalen Abstand */
    padding-bottom: 40px;    /* Unten auch etwas Luft */
    line-height: 1.2;        /* Erhöht den Zeilenabstand für bessere Lesbarkeit */
    font-size: 18px;         /* Etwas größere Schrift für besseren Lesekomfort */
}

main.impressum h1 {
    font-size: 36px;         /* Auffällige Überschrift */
    margin-bottom: 20px;     /* Abstand nach unten */
    text-transform: lowercase;/* Stilvolle Großbuchstaben */
    padding-bottom: 10px;
}

main.impressum p {
    margin-bottom: 10px;     /* Abstand zwischen den Absätzen */
}

/* Media Queries */
@media (max-width: 820px) {

    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    header {
        display: flex;
        justify-content: space-between; /* Stellt sicher, dass Branding und Hamburger-Menü getrennt sind */
        align-items: center;            /* Vertikal ausgerichtet */
        width: 100%;                    /* Volle Breite */
        padding: 20px;                  /* Genügend Abstand zum Rand */
    }

    .video-wrapper {
        display: flex;
        flex-direction: column;  /* Vertikale Anordnung der Videos */
        align-items: center;     /* Zentriert die Videos */
        height: 100vh;           /* Der Container nimmt den gesamten Bildschirm ein */
        overflow-y: scroll;      /* Ermöglicht vertikales Scrollen */
        overflow-x: hidden;      /* Verhindert horizontales Scrollen */
        scroll-snap-type: y mandatory; /* Erzwingt das Snap-Scrolling */
        -webkit-overflow-scrolling: touch; /* Bessere Scroll-Performance auf mobilen Geräten */
        padding-bottom: 200px;
        
    }
    
    /* Videos proportional verkleinern */
.video {
    width: 78vw; /* Maximale Breite 100% des Containers */
    height: auto; /* Automatische Höhe basierend auf der Breite */
    max-width: 100vw; /* Maximale Breite = 100% des Viewports */
    max-height: calc(100vw * 16 / 9); /* Maximale Höhe basierend auf dem 16:9 Verhältnis */
    scroll-snap-align: start; /* Stoppt das Scrollen an jedem Video */
    margin: 0 auto;  /* Zentriert das Video innerhalb des Containers */
    object-fit: contain;
    transform-origin: center;
    margin: 15px;
    opacity: 1;
    z-index: 1; /* Standard Z-Index */
}

    .branding h1 {
        display: inline;          /* Elemente nebeneinander anzeigen */
        white-space: nowrap;      /* Zeilenumbruch verhindern */
        font-size: 8vw;          /* Kleinere Schrift für mobile Ansicht */
    }
    
    .branding p {
        font-size: 3vw;          /* Kleinere Schrift für mobile Ansicht */
        display: inline;          /* Nebeneinander mit H1 anzeigen */
        margin-left: 3px; 
        padding-top: 5px;     
    }

    /* Beschreibungen immer sichtbar */
    .info {
        bottom: 0; /* Statisch, immer am unteren Rand des Videos */
        transition: all 0.3s ease;
    }


    /* Verhindert das wischen nach oben und unten */
    .video-wrapper::-webkit-scrollbar {
        height: 0;
        display: none;
    }

    /* Beim Hover keine Veränderung - nur Touch-Bedienung */
    .video:hover {
        transform: none; /* Entfernt die Hover-Effekte auf mobilen Geräten */
        opacity: 1;
        z-index: 1; /* Standard Z-Index */
    }

    nav {
        display: none;  /* Standardmäßig wird die Desktop-Navigation versteckt */
    }

    .nav-link.active {
        font-weight: 600;
        border-bottom: 0px;
    }
    
    nav a:hover {
        border-bottom: 0px;
        font-weight: 600;
    }

    /* Hamburger-Menü anzeigen */
    .hamburger {
        display: flex;
    }

    /* Aktiviertes Menü (wird angezeigt) */
    .mobile-menu.active {
        display: block;
    }

    .sound-toggle-btn {
        bottom: 40px;
        right: 60px;
    }

    main.impressum {
        padding-left: 20px;
        line-height: 1.0;        /* Erhöht den Zeilenabstand für bessere Lesbarkeit */
        font-size: 12px;         /* Etwas größere Schrift für besseren Lesekomfort */
    }
    
    main.impressum h1 {
        font-size: 20px;         /* Auffällige Überschrift */
        margin-bottom: 20px;     /* Abstand nach unten */
        text-transform: lowercase;/* Stilvolle Großbuchstaben */
        padding-bottom: 10px;
    }
    
    main.impressum p {
        margin-bottom: 10px;     /* Abstand zwischen den Absätzen */
    }
   
    footer p {
        font-size: 12px; /* Kleinere Schrift für den Footer */
    }

}