body {
    /* background-color: sandybrown; */
    background-color: #f9d2e7;
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row; /* Richtung der Hauptachse auf horizontal setzen */
    align-items: center;
    justify-content: center; /* Zentrierung auf der Hauptachse */
}

h1 {
    position: absolute;
    top: 10px; /* Abstand von oben */
    left: 10px; /* Abstand von links */
    font-size: 3.0rem;
    color: #ffeddf;
    z-index: 2; /* Stellt sicher, dass die Überschrift über dem Bild liegt */
}




/* Container für Bild und Text */
.container {
    display: flex;
    flex-direction: row; /* Horizontale Ausrichtung */
    width: 100%;
    flex-wrap: wrap; /* Ermöglicht das Umfließen von Elementen */
}
/* Container für Bild, Bildunterschrift und Musik-Links */
.image-caption-links-container {
    display: flex;
    flex-direction: column; /* Vertikale Ausrichtung der Elemente */
    align-items: center; /* Zentrierung der Elemente horizontal */
    justify-content: center; /* Zentrierung auf der Kreuzachse */
    margin-top: 60px; /* Abstand zum oberen Rand des Containers */
    margin-right: auto;
    margin-left: 5%;
    max-width: 450px; /* Maximale Breite auf die des Bildes setzen */
  

}
/* Container für Bild und Bildunterschrift */
.image-container {
    flex: 0 0 auto; /* Flexibilität deaktivieren, Größe beibehalten */
    margin-bottom: 20px; /* Abstand zwischen Bildunterschrift und Musik-Links */
    align-self: flex-start; /* Ausrichtung am Anfang des Containers */
    margin-right: auto; /* Abstand zur rechten Seite, um das Element nach links zu schieben */
    padding: 10px 0px 0px 0px;
}



img {
    max-width: 450px; /* Maximale Breite des Bildes */
    max-height: 450px; /* Maximale Höhe des Bildes */
    width: auto;
    height: auto;
}


.caption {
    /* width: 100%; Breite der Unterschrift auf 100% setzen */

    position: relative;
    bottom: 10px;
    left: 0;
    right: 0;
    /* transition: transform 1.2s; */
    text-align: center;
    /* color: #ede5de; */
    color: #edb887;
    font-size: 1.6vw;
    font-size: min(1.6vw, 19px);
}

/* Container für Musik-Links */
.music-links {
    text-align: center; /* Zentriert die Überschrift und die Liste */
    width: 100%; /* Breite auf 100% setzen, um die Elemente darunter zu zwingen */
    order: 1; /* Platziert die Musik-Links über dem Bild und Text */
}


.music-links h2 {
    color: #ffeddf; /* Farbe der Überschrift */
    margin-bottom: 10px; /* Abstand unter der Überschrift */
}

.music-links ul {
    list-style-type: none; /* Entfernt die Listensymbole */
    padding: 0; /* Entfernt den Standardabstand */
}

.music-links li {
    display: inline; /* Stellt die Links nebeneinander dar */
    margin-right: 20px; /* Abstand zwischen den Links */
}

.music-links a {
    color: #edb887; /* Farbe der Links */
    text-decoration: none; /* Entfernt die Unterstreichung */
}

.music-links a:hover {
    text-decoration: underline; /* Fügt eine Unterstreichung beim Hover hinzu */
}

.text-container {
    display: flex;
    max-height: auto; /* Maximale Höhe des Text-Containers */
    flex-direction: column; /* Vertikale Ausrichtung der Elemente */
    align-items: flex-start; /* Zentrierung des Bildes und der Unterschrift horizontal */
    justify-content:flex-start; /* Zentrierung auf der Kreuzachse */
    flex: 1; /* Flexibilität, um 50% der Breite einzunehmen */
    padding: 30px 90px 0px 0px; /* Padding auf beiden Seiten */
    width: 450px;
    max-width: none; /* Maximale Breite auf die Breite des Viewports setzen */
    left: 0;
    margin: 10vh;
    text-align: left;
    box-sizing: border-box; /* Damit padding und border in der Breite inkludiert sind */
    font-size: min(1.6vw, 29px); /* Setzt eine Mindestgröße von 16px, während es auf größeren Bildschirmen relativ bleibt */
    margin-top: 30px;
    order: 2; /* Stellt sicher, dass der Text-Container nach dem Bild kommt */
    overflow: hidden;
}

p{
    font-size: min(11.6vw,19px) ;
}

/* @media screen and (orientation: portrait) { */

  /* and (min-device-width: 810px) 
  and (max-device-width: 1024px)  */
  /* and (max-width: 1024px) and (max-height: 1366px) */
/*  and (orientation: portrait) */
  /* and (-webkit-min-device-pixel-ratio: 1.3) */

  @media screen and (orientation: portrait) {
    body {
        /* background-color: aqua; */
        width: auto;
        min-height: 100vh;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column; /* Vertikale Ausrichtung */
        align-items: center;
        justify-content: flex-start; /* Zentrierung auf der Hauptachse */
    }
    h1 {
        position:absolute;
        top: 0px; /* Abstand von oben */
        left:auto; /* Abstand von links */
        font-size: 3.0rem;
        color: #ffeddf;
        z-index: 2; /* Stellt sicher, dass die Überschrift über dem Bild liegt */
    }
    .container {
        display: flex;
        flex-direction: column; /* Vertikale Ausrichtung */
        align-items: center;
        justify-content: flex-start;
        width: 100%;
    }

    .image-caption-links-container {
        display: flex;
        flex-direction: column; /* Vertikale Ausrichtung */
        align-items: center;
        justify-content: center;
        margin-top: 0px;
        margin-right: auto;
        margin-left: auto;
        max-width: 450px;
    }

    .image-container {
        flex: 0 0 auto;
        margin-bottom: 20px;
        margin-top: 20%;
        align-self: center;
        padding: 0px;
    }

    .text-container {
        max-height: auto;
        height: auto;
        margin-left:8%;
        margin-right: 8%;
        padding: 0px;
        order: 2;
        max-width: 100%;
        text-align: left;
        overflow: hidden;
        /* color: red; */
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        flex: 2;
        box-sizing: border-box;
        margin-top: 20px;
    }

    .music-links {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        width: 100%;
        order: 3;
    }

    .music-links h2 {
        color: #ffeddf;
        margin-bottom: 10px;
        font-size: 2.0vh;
    }

    .music-links a {
        color: #edb887;
        text-decoration: none;
        font-size: 2.0vh;
    }

    p {
        font-size: 1.5vh;
    }
}