/* Optimierte Breakpoints */
@media (max-width: 768px) and (orientation: portrait) {
    .player-controls {
        bottom: 15px;
        right: 15px;
        gap: 10px;
    }
    
    .player-button {
        width: 48px;
        height: 48px;
        padding: 10px;
    }
    
    .image-container {
        width: 140%;
        height: 140%;
        left: -20%;
        top: -20%;
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    .player-controls {
        bottom: 10px;
        right: 10px;
        gap: 8px;
    }
    
    .player-button {
        width: 44px;
        height: 44px;
        padding: 8px;
    }
}

@media (max-width: 480px) {
    .player-controls {
        bottom: 12px;
        right: 12px;
        gap: 10px;
    }
    
    .player-button {
        width: 46px;
        height: 46px;
        padding: 10px;
    }
    
    .image-container {
        width: 150%;
        height: 150%;
        left: -25%;
        top: -25%;
    }
    
    .title {
        font-size: 1.2rem;
    }
}

@media (max-width: 320px) {
    .player-controls {
        bottom: 10px;
        right: 10px;
        gap: 8px;
    }
    
    .player-button {
        width: 44px;
        height: 44px;
        padding: 9px;
    }
    
    .title {
        font-size: 1rem;
    }
}

/* Desktop-specific styles (min-width: 9 inches ~ 768px) */
@media (min-width: 768px) {
    .fullscreen-button {
        display: block;
    }
}