/* RESPONSIVE DESIGN - Media Queries */
/* Tablets (768px-1024px) */
@media (max-width: 1024px) {
    .side-banner {
        width: 150px;
    }
    
    #main-content-wrapper .video-container video {
        max-width: calc(100% - 300px);
    }
    
    .multiplier-container {
        width: 120px;
        height: 120px;
    }
    
    .multiplier-text {
        font-size: 32px;
    }
    
    .price-box {
        margin: 5px 8px;
        padding: 6px;
    }
    
    .price-label {
        font-size: 10px;
    }
    
    .price-value {
        font-size: 14px;
    }
    
    .social-btn img {
        width: 35px;
        height: 35px;
    }
    
    /* Buy-Button anpassen */
    .buy-button {
        width: auto;
        max-width: 250px;
    }
}

/* Mobile Geräte (bis 767px) */
@media (max-width: 767px) {
    /* Alternative Layout für mobile Geräte */
    /* Seitliche Banner nach oben und unten verschieben */
    .side-banner {
        position: fixed;
        width: 100%;
        height: auto;
        padding: 5px 0;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        border: none;
    }
    
    .left-side-banner {
        top: 40px;
        left: 0;
        height: 70px;
        border-bottom: 1px solid rgba(245, 232, 186, 0.1);
    }
    
    .right-side-banner {
        bottom: 80px;
        right: 0;
        height: 70px;
        border-top: 1px solid rgba(245, 232, 186, 0.1);
    }
    
    /* Video auf volle Breite */
    #main-content-wrapper .video-container video {
        max-width: 100%;
        max-height: calc(100% - 200px);
        margin-top: 80px;
    }
    
    /* Reduzierte Inhalte in den Bannern */
    .side-banner > *:not(.price-box):not(.multiplier-container) {
        display: none;
    }
    
    /* Anpassung für den Container */
    .multiplier-container {
        width: 70px;
        height: 70px;
        margin: 0 10px;
        flex-shrink: 0;
    }
    
    .multiplier-text {
        font-size: 24px;
    }
    
    /* Preisboxen kleiner */
    .price-box {
        width: auto;
        max-width: 120px;
        margin: 0 5px;
        padding: 4px;
    }
    
    /* Social Buttons und How To Buy kleiner */
    .social-buttons {
        margin-bottom: 100px;
        gap: 15px;
    }
    
    .social-btn img {
        width: 30px;
        height: 30px;
    }
    
    /* Buy-Button anpassen */
    .buy-button {
        width: 150px;
        margin-bottom: 10px;
    }
    
    /* Sound-Button neu positionieren */
    .sound-button {
        bottom: 10px;
        right: 10px;
        width: 35px;
        height: 35px;
    }
    
    /* Modal kleiner */
    .modal-content {
        width: 90%;
        padding: 15px;
    }
    
    .modal-title {
        font-size: 20px;
    }
    
    .step-text {
        font-size: 14px;
    }
}

/* Kleine Mobilgeräte (bis 480px) */
@media (max-width: 480px) {
    .left-side-banner, .right-side-banner {
        padding: 3px 0;
    }
    
    .multiplier-container {
        width: 50px;
        height: 50px;
    }
    
    .multiplier-text {
        font-size: 18px;
    }
    
    .price-box {
        max-width: 90px;
        padding: 2px;
    }
    
    .price-label {
        font-size: 8px;
        margin-bottom: 2px;
    }
    
    .price-value {
        font-size: 10px;
    }
    
    .price-change {
        font-size: 9px;
    }
    
    .social-btn img {
        width: 25px;
        height: 25px;
    }
    
    .buy-button {
        width: 120px;
    }
}

/* Desktop-Styles explizit definieren */
@media screen and (min-width: 1025px) {
    .buy-button {
        width: 300px; /* Feste Breite für Desktop statt auto */
        margin-bottom: 20px;
    }
    
    .buy-button img {
        width: 100%; /* Füllt den Container aus */
        max-width: 300px; /* Maximale Breite begrenzen */
    }
}