/* Container für das Video */
.video-container {
    position: relative;
    width: 100%;
    height: 100vh; /* Korrigiert, damit es genau eine Bildschirmhöhe hat */
    overflow: hidden;
}

/* Das Video selbst */
.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Logo auf dem Video */
.overlay-logo {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    max-width: 600px;
}

/* Container für die Buttons */
.button-container {
    position: absolute;  /* Wichtig: Absolute Positionierung */
    top: 35%;  /* Direkt unter das Logo */
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    gap: 20px;
}

/* Buttons Styling */
.btn {
    text-decoration: none;
    font-size: 18px;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: bold;
    display: inline-block;
    transition: all 0.3s ease;
}

/* Buy-Button */
.buy-btn {
    background-color: #ff4d00;
    color: white;
}

.buy-btn:hover {
    background-color: #cc3d00;
}

/* Trailer-Button */
.trailer-btn {
    background-color: transparent;
    color: white;
    border: 2px solid white;
}

.trailer-btn:hover {
    background-color: white;
    color: black;
}

/* Hintergrund mit Farbverlauf über die ganze Seite */

body {
    background: linear-gradient(to bottom, black, #8B2252); /* Von Schwarz zu dunklem Pink */
    color: grey !important;
    font-family: 'Nova Square', sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh; /* Mindestens die Höhe des Viewports */
    width: 100%;
    overflow-x: hidden; /* Verhindert horizontales Scrollen */
    background-attachment: fixed; /* Verhindert das Neustarten des Verlaufs */
	font-family: 'Nova Square', sans-serif !important;
    text-shadow: 1px 1px 0px black, -1px -1px 0px black, 1px -1px 0px black, -1px 1px 0px black;
}

/* Sicherstellen, dass der Farbverlauf über die gesamte Seite geht */
html, body {
    height: 100%;
}


/* Absätze mit Platzhalter-Text */
.section h1 {
    text-align: center;  /* Zentriert den Text */
    margin-top: 60px; /* Optional: Abstand nach oben */
    margin-bottom: 60px; /* Optional: Abstand nach unten */
}

.section h2{
	text-align: center;
}

/* Platzhalter-Text zentrieren */
.section p {
    text-align: center;  /* Zentriert den Text */
    margin-bottom: 50px;  /* Optional: Abstand nach unten */
}

.section iframe {
    display: block; /* Verhindert zusätzliche Abstände durch Inline-Block-Element */
    margin: 0 auto; /* Zentriert das Video horizontal */
    max-width: 100%; /* Stellt sicher, dass das Video responsive bleibt */
    /*height: auto; /* Setzt die Höhe automatisch, um das Seitenverhältnis zu wahren */
}


/* Sicherstellen, dass der Container gut funktioniert */
#zwei iframe {
    position: relative;
    width: 100%; /* Video soll die Breite des Containers einnehmen */
    height: 70vh; /* Höhe ist 70% der Bildschirmhöhe */
    max-width: 1200px; /* Maximale Breite für große Bildschirme */
    margin: 0 auto; /* Zentrieren des Videos */
    display: block; /* Block-Layout für das Zentrieren */
    border-radius: 15px; /* Abgerundete Ecken */
     border: 2px solid black; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Schattierung rund um das Video */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Übergangseffekte für Hover */
}

/* Hover-Effekt für das Video */
#zwei iframe:hover {
    transform: scale(1.05); /* Video leicht vergrößern */
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4); /* Stärkerer Schatten bei Hover */
}





section#vier p:nth-of-type(n+1),
section#vier ul li {
    font-size: 1.5em; /* Textgröße */
    color: cyan; /* Farbcode deiner Wahl */
}

section#vier {
    padding: 0 100px; /* Abstand links und rechts */
}



/* Navigation */

/* Schriftfarbe für die Navigation */
.navbar .navbar-brand,
.navbar .nav-link {
   /* color: white !important; /* Weiß setzen */
   color: cyan !important;
   font-size: 21px !important; /* Größere Schrift für den Button */
   /* background-color: rgba(1, 0, 0, 1.0); /* Schwarzer Hintergrund mit 20% Deckkraft */
   width: 100%
   position: absolute; /* Damit sie sich nicht an einen Container bindet */
   background-image: linear-gradient(to bottom, #2F4F4F, rgba(0, 255, 255, 0)); /* Cyan oben, transparent unten */
}

.navbar .container {
    max-width: 100%; /* Container innerhalb der Navbar auf 100% Breite setzen */
}

/* Falls du möchtest, dass sich die Farbe beim Hover ändert */
.navbar .nav-link:hover {
    /* color: #ff4d00 !important; /* Orange beim Hover */
	color: #D02090 !important;
}

.navbar-brand:hover{
	color: #D02090 !important;
}

.navbar-toggler {
    border-color: cyan !important; /* Rahmenfarbe des Buttons */
}

.navbar-toggler-icon {
    filter: invert(63%) sepia(94%) saturate(300%) hue-rotate(160deg) brightness(90%) contrast(100%);
}




.navbar {
    position: relative;  /* Ermöglicht die Positionierung des Bildes relativ zur Navbar */
    height: 50px;        /* Setzt die Höhe der Navbar */
}

.navbar-img {
    position: absolute;
    top: -10px;         /* Verschiebt das Bild nach oben, damit es aus der Navbar herausragt */
    left: 200px;         /* Positioniert das Bild am rechten Rand der Navbar */
    width: 140px;       /* Größe des Bildes */
    height: 140px;       /* Größe des Bildes */
    object-fit: cover;
}





/* Buy-Button */
.buy-btn {
    background-color: transparent;
    color: cyan !important; /* Schrift cyan */
    border: 2px solid white;
	font-size: 21px !important; /* Größere Schrift für den Button */
}

.buy-btn:hover {
    background-color: white;
    color: #D02090 !important; /* Schriftfarbe ändert sich auf Pink */
	/* font-size: 22px !important; /* Größere Schrift für den Button beim Hovern */
}

/* Trailer-Button */
.trailer-btn {
    background-color: transparent;
    color: cyan !important; /* Schrift cyan */
    border: 2px solid white;
	font-size: 21px !important; /* Größere Schrift für den Button */
}

.trailer-btn:hover {
    background-color: white;
    color: #D02090 !important; /* Schriftfarbe ändert sich auf Pink */
	/* font-size: 22px !important; /* Größere Schrift für den Button beim Hovern */
}




/* Container für die Bilder */
.image-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); /* Automatische Spaltenbreite */
    gap: 20px;  /* Abstand zwischen den Bildern */
    justify-items: center;  /* Zentriert die Bilder innerhalb der Spalten */
}

/* Bild-Styling */
.image-container img {
    width: 100%; /* Bilder füllen den Container */
    height: auto; /* Höhe wird proportional angepasst */
    border-radius: 8px;  /* Optional: Abgerundete Ecken */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);  /* Optional: Schattierung der Bilder */
	transition: transform 0.3s ease; /* Bild beim Hover vergrößern */
}

/* Hover-Effekt: Bild vergrößern */
.image-container img:hover {
    transform: scale(1.1);
}

/* Modal */
.modal {
    display: none; /* Modal ist standardmäßig unsichtbar */
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

/* Modal-Inhalt */
.modal-content {
    margin: auto;
    display: block;
    width: 100%;
    /* max-width: 700px; */
	max-width: 70%;
}

/* Schließen-Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* Close Hover */
.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}







.gallery {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.image-item {
    text-align: center;
    position: relative;
    width: 200px;
}

.image-item img {
    width: 100%;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
}

.image-item:hover img {
    transform: scale(1.1); /* Bild wird beim Hover vergrößert */
}

.image-textOben {
    margin-top: 1px;
    font-size: 20px;
    color: orange;
}

.image-textUnten {
    margin-top: 1px;
    font-size: 20px;
    color: cyan;
}


h2 {
    font-size: 20px !important; /* Oder jede andere gewünschte Größe */
}




/* Allgemeines Styling für die Buttons */
.social-btn {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-size: cover;  /* Verhindert Verzerrung des Bildes */
    background-position: center;  /* Bild bleibt zentriert */
}

/* Icons für die Plattformen */
.insta-btn {
    background-image: url('../images/instagram.png');
}

.youtube-btn {
    background-image: url('../images/youtube.png');
}

.tiktok-btn {
    background-image: url('../images/tiktok.png');
}

/* Hover-Effekt */
.social-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.3);
}



.button-container a {
    display: inline-block;
    text-align: center;
    /*padding: 10px 20px;*/
}

.buttons-wrapper {
    display: flex;
    gap: 15px; /* Abstand zwischen BUY NOW und WATCH TRAILER */
}

.button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Abstand zwischen den Gruppen */
}

.social-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
	margin-top: 20px;
}


.impressum p {
    margin: 5px 0;  /* Kleinerer Abstand */
    font-size: 12px; /* Kleinere Schrift */
    line-height: 1.2; /* Angepasster Zeilenabstand */
}

.impressum {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}



#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 15px;
    text-align: center;
    font-size: 14px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#cookie-banner a {
    color: cyan;
    text-decoration: underline;
    display: block;
    margin-top: 5px;
}

#cookie-banner button {
    background-color: #ff4d00;
    color: white;
    border: none;
    padding: 10px 20px;
    margin-top: 10px;
    cursor: pointer;
    font-weight: bold;
    border-radius: 5px;
    font-size: 14px;
}

#cookie-banner button:hover {
    background-color: #cc3d00;
}

/* Anpassungen für kleinere Bildschirme */
@media (max-width: 600px) {
    #cookie-banner {
        font-size: 12px;
        padding: 10px;
    }

    #cookie-banner button {
        width: 80%;
        max-width: 250px;
    }
}


@media (max-width: 768px) {  /* Gilt für Geräte mit einer Bildschirmbreite von maximal 768px */
    .navbar-img {
        width: 70px;  /* Kleinere Größe für Smartphones */
        height: 70px;
    }
}




/* Optionale Responsivität (Stellen sicher, dass bei kleinen Bildschirmen alles gut aussieht) */
@media (max-width: 768px) {
    .image-container {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Bei kleinen Bildschirmen etwas kleinere Bilder */
    }
}




@media (max-width: 768px) {
    section#vier p:nth-of-type(n+1),
    section#vier ul li {
        font-size: 1em; /* Kleinere Schriftgröße für Smartphones */
        padding: 0 20px; /* Mehr Abstand zum Rand links und rechts */
    }

    section#vier {
        padding: 0 20px; /* Gleiche Anpassung für den gesamten Bereich */
    }
    
}



.trailer-container {
    position: relative;
    width: 100%;
    max-width: 1200px; /* Maximale Breite auf großen Bildschirmen */
    margin: 0 auto; /* Zentriert das Video */
}

.trailer-container::before {
    content: "";
    display: block;
   /* padding-top: 56.25%; /* 16:9 Seitenverhältnis */
}

.trailer-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 👇 Auf Smartphones kleiner machen */
@media (max-width: 768px) {
    .trailer-container {
        max-width: 90vw;  /* 90% der Bildschirmbreite */
    }
}