/* mobile.css */

/* Musik-Sektion für mobile Geräte */
.album-grid {
    display: flex !important;
    flex-wrap: wrap !important;  /* Die Alben werden in mehreren Zeilen angezeigt */
    gap: 20px !important;        /* Abstand zwischen den Alben */
    justify-content: center !important; /* Zentriert die Alben horizontal */
    margin: 0 auto; /* Automatischer Abstand links und rechts */
    max-width: 90%; /* Maximiert die Breite, damit sie nicht ganz an den Rändern sind */
}

.album {
    flex: 1 1 45%;  /* Jedes Album nimmt 45% der Breite ein (damit 2 Alben nebeneinander passen) */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    height: auto;
    max-width: 45%;  /* Maximale Breite von jedem Album */
}

.album img {
    width: 100%;
    height: auto;
    object-fit: cover;  /* Das Bild wird so zugeschnitten, dass es den Container ausfüllt */
}

.video iframe {
    width: 90% !important;  /* Video kleiner auf mobilen Geräten */
    height: 250px !important;
}

/* Newsletter Formular: Anpassung für mobile Geräte */
.section-social-media form {
    margin-top: 20px;
    display: flex;
    flex-direction: column; /* Elemente untereinander anordnen */
    align-items: center;    /* Elemente horizontal zentrieren */
}

.section-social-media input[type="email"] {
    padding: 8px;            /* Weniger Padding für kleinere Eingabefelder */
    font-size: 14px;         /* Kleinere Schriftgröße */
    width: 100%;             /* Volle Breite auf mobilen Geräten */
    max-width: 250px;        /* Maximalbreite des E-Mail-Felds kleiner machen */
    box-sizing: border-box;  /* Damit die Breite korrekt berechnet wird */
    margin-bottom: 8px;      /* Abstand zum Button */
}

.subscribe-btn {
    padding: 0 !important;              /* Kein Padding, damit es nur als Text erscheint */
    font-size: 14px !important;          /* Schriftgröße für den Text */
    cursor: pointer !important;
    background-color: transparent !important; /* Kein Hintergrund */
    color: white !important;             /* Weißer Text */
    border: none !important;             /* Keine Umrandung */
    width: auto !important;              /* Automatische Breite entsprechend des Texts */
    max-width: none !important;
    box-sizing: border-box !important;   /* Damit die Breite korrekt berechnet wird */
    text-decoration: underline;          /* Optional: Unterstreichung als Hinweis auf Klickbarkeit */
    -webkit-appearance: none !important; /* Webkit-Browser (z. B. Safari) */
    -moz-appearance: none !important;    /* Firefox */
    appearance: none !important;         /* Standard */
}

/* Anpassungen für sehr kleine Bildschirme */
@media (max-width: 480px) {
    .section-social-media input[type="email"],
    .subscribe-btn {
        width: auto !important;
        max-width: none !important;
    }
}