/* Grundlegende Zurücksetzung für ein sauberes Layout */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #000; /* Schwarzer Hintergrund passt gut zu Videos */
    color: #fff;
    overflow-x: hidden;
}

/* === Sektion 1: Hero Video === */
.hero {
    position: relative;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Wird durch JS transparent gemacht */
    transition: opacity 0.1s ease-out; 
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; /* Verhindert Klicks auf das Video */
    z-index: 1; /* Stellt sicher, dass das Video im Hintergrund bleibt */
}

/* Das lokale HTML5 Video perfekt einpassen */
.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Das Video füllt immer den ganzen Bildschirm aus, ohne Verzerrung! */
}

.hero-content {
    position: relative;
    z-index: 10; /* Text liegt sicher ÜBER dem Video */
}

.hero-content {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Das Styling für dein animiertes Logo */
.logo-video {
    width: 90%;
    max-width: 600px; /* Bestimmt, wie groß das Logo maximal wird */
    height: auto;
    
    /* === DER ZAUBERTRICK FÜR DEN SCHWARZEN HINTERGRUND === */
    /* Wenn dein Video einen schwarzen Hintergrund hat, blendet dieser Befehl 
       das Schwarz komplett aus und lässt nur die hellen Farben (dein Logo) übrig! 
       (Wenn dein Video bereits von Natur aus transparent ist, kannst du diese Zeile löschen) */
    mix-blend-mode: screen; 
    
    /* Optional: Ein leichter Schatten, damit es sich besser abhebt */
    filter: drop-shadow(0px 0px 15px rgba(0,0,0,0.5));
}

/* === Sektion 2 NEU: Produkte im Grid mit Tap-Funktion === */
.products-grid-section {
    padding: 10vh 5%;
    background-color: #000;
    position: relative;
    z-index: 10;
}

.products-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Teilt den Platz in zwei gleich große Spalten */
    gap: 30px; /* Abstand zwischen den beiden Produkten */
    max-width: 1000px;
    margin: 0 auto;
}

/* Auf Handys (unter 768px Breite) setzen wir die Produkte untereinander */
@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: 1fr; 
    }
}

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

/* Der Container für die Bilder */
.image-stack {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 15px;
    cursor: pointer;
    background-color: transparent; /* Hintergrund transparent machen */
    margin-top: 40px; /* WICHTIG: Platz nach oben machen, damit die Tabs nicht abgeschnitten werden */
    
    /* WICHTIG: overflow: hidden MUSS entfernt werden, 
       damit die hinteren Karten oben herausschauen dürfen! */
}

/* Basis-Styling für alle Bilder */
.image-stack img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Starker Schatten für die Tiefenwirkung */
    
    /* Weicher Übergang für das Aufrücken der Karten */
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.5s ease;
    transform-origin: bottom center; /* Skalierung passiert von unten, damit sie oben rausschauen */
}

/* === Die Magie: Karten je nach Position verschieben === */

/* 1. Karte (Die vorderste, sichtbarste Karte) 
   nth-last-child(2) greift auf das letzte Bild zu (da das absolute Ende der .tap-hint Text ist) */
.image-stack img:nth-last-child(2) {
    transform: translateY(0) scale(1);
    opacity: 1;
    z-index: 3;
}

/* 2. Karte (Der erste Tab direkt dahinter) */
.image-stack img:nth-last-child(3) {
    transform: translateY(-20px) scale(0.95); /* Zieht die Karte 20px nach oben und macht sie 5% schmaler */
    opacity: 0.8; /* Leicht abgedunkelt */
    z-index: 2;
}

/* 3. Karte (Der zweite Tab ganz hinten) */
.image-stack img:nth-last-child(4) {
    transform: translateY(-40px) scale(0.90); /* Zieht die Karte 40px nach oben und macht sie 10% schmaler */
    opacity: 0.5; /* Stärker abgedunkelt */
    z-index: 1;
}

/* Wisch-Animation anpassen */
.image-stack img.swipe-out {
    /* Da overflow: hidden weg ist, fliegt die Karte jetzt richtig schön über den Bildschirmrand hinaus! */
    transform: translateX(-150%) translateY(20px) rotate(-20deg) !important;
    opacity: 0 !important;
}

/* Der Text-Hinweis soll immer über allen Bildern liegen */
.tap-hint {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    z-index: 10; /* Hoher Wert, damit er immer oben ist */
    pointer-events: none;
}

/* Ein kleiner Text auf dem Bild, der dem User das Tippen erklärt */
.tap-hint {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    z-index: 3;
    pointer-events: none; /* Damit Klicks durch den Text hindurch aufs Bild gehen */
}

/* Styling für Text und Preis unter dem Bild */
.product-info {
    margin-top: 20px;
}

.product-info h3 {
    font-size: 1.3rem;
    margin-bottom: 8px;
    font-weight: 400;
    letter-spacing: 1px;
}

.product-info .price {
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
}

.paypal-container {
    margin-top: 20px;
    width: 100%;
    max-width: 250px; /* Hält den Button in einer schönen, eleganten Größe */
    margin-left: auto;
    margin-right: auto;
}

/* === Sektion 3: Zweites Video === */
.second-video-section {
    padding: 10vh 5%;
    background-color: #0a0a0a;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Format */
    height: 0;
    max-width: 1000px;
    margin: 0 auto;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px;
}

/* === Sektion 4: Instagram Feed === */
.instagram-section {
    padding: 10vh 5%;
    text-align: center;
}

.instagram-section h2 {
    margin-bottom: 5vh;
    font-size: 2rem;
    font-weight: 300;
}

.instagram-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    max-width: 1200px;
    margin: 0 auto;
}

.instagram-grid img {
    width: 100%;
    aspect-ratio: 1 / 1; /* Macht die Bilder perfekt quadratisch */
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.instagram-grid img:hover {
    transform: scale(1.05); /* Leichter Zoom-Effekt beim Darüberfahren */
}

/* === Sektion 5: Links & Buttons === */
.links-section {
    padding: 15vh 5%;
    text-align: center;
    background: linear-gradient(to bottom, #000 0%, #111 100%);
}

.link-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.btn {
    display: inline-block;
    padding: 15px 40px;
    font-size: 1.2rem;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 50px;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 400px;
}

.btn-insta {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
}

.btn-insta:hover {
    box-shadow: 0 0 20px rgba(220, 39, 67, 0.5);
    transform: translateY(-3px);
}

.btn-shop {
    background-color: #fff;
    color: #000;
}

.btn-shop:hover {
    background-color: #ccc;
    transform: translateY(-3px);
}