/* 
  Author: Kai Strathmann
  Project: Audio
  Date: 09/2025
*/

img {
    height: 200px;
    width: 380px;
    border-radius: 10px;
    }

    img:hover {
        opacity: 0.1; /* Setzt die Opazität auf 30% beim Hover */
        transition-duration: 0.3s;
        }

.audio-grid {
    display: flex;
    flex-wrap: wrap;

    justify-content: center;
    align-items: center;
    width: 880px;
    max-width: 880px;
    border:0px solid black;
    }

.audio-frame {
    border: 0px solid black; 
    height: 280px; 
    width: 420px;
    max-width: 420px;
    margin-top: 25px;
    margin-bottom:0 px;
    gap: 20px;
    justify-content: center;
    align-items: center;
    }
  
.audio-pic {
    display: flex;
     justify-content: center;
    align-items: center;
    width: 400px;
    max-width: 420px;
    height: 200px;
    border: 0px solid black;
    background-size: cover;
    opacity: 1;
    margin-bottom:0px ;  
    }

.audio-player {
    margin-top: 10px;
    }

.audio-top {
    width: 880px;
    max-width: 880px;

    margin:0px auto;
    margin-top: 35px;
    padding-bottom: 0px;
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 10px;

    font-size: 21px; 
    font-weight:500;
    font-family: Avenir Next, Arial;
    line-height: 1.5;

    text-align: center;

    text-transform: uppercase;

    border:0.6px solid black;
    }

.text-title {
  text-transform: uppercase;
  position: absolute;
  text-decoration: underline;
  transition-duration: 0.2s;
  width: 380px;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%); /* Zentriert den Text im Bild */
  color: whitesmoke; /* Farbe des Textes */
  font-size: 30px; /* Schriftgröße */
  font-weight: 500; /* Optional, für dickeren Text */
  font-family: Avenir Next, Arial;
  line-height: 1.3;
  letter-spacing: 5px;
  opacity: 0; /* Text ist zu Beginn unsichtbar */
  transition: opacity 0.3s ease; /* Übergang der Sichtbarkeit */
  pointer-events: none; /* Verhindert, dass der Text die Interaktion mit dem Bild blockiert */
  border: 0px solid black;
  }


  .text-title2 {                 
  text-transform: none;
  position: absolute;
  text-decoration: none;
  transition-duration: 0.2s;
  width: 380px;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%); /* Zentriert den Text im Bild */
  color: whitesmoke; /* Farbe des Textes */
  font-size: 30px; /* Schriftgröße */
  font-weight: 500; /* Optional, für dickeren Text */
  font-family: Avenir Next, Arial;
  line-height: 1.3;
  letter-spacing: 5px;
  opacity: 0; /* Text ist zu Beginn unsichtbar */
  transition: opacity 0.3s ease; /* Übergang der Sichtbarkeit */
  pointer-events: none; /* Verhindert, dass der Text die Interaktion mit dem Bild blockiert */
  border: 0px solid black;
  }

  .text-input1 {
  text-transform: none;
  position: absolute;
  text-decoration: none;
  transition-duration: 0.3s;
  top: 26%;
  left: 50%;
  width: 340px;
  transform: translate(-50%); /* Zentriert den Text im Bild */
  color: rgb(255, 255, 255); /* Farbe des Textes */
  font-size: 15px; /* Schriftgröße */
  font-weight: 500; /* Optional, für dickeren Text */
  font-family: Avenir Next, Arial;
  line-height: 1.3;
  padding-right: 0px;
  padding-left: 0px;
  opacity: 0; /* Text ist zu Beginn unsichtbar */
  transition: opacity 0.3s ease; /* Übergang der Sichtbarkeit */
  pointer-events: none; /* Verhindert, dass der Text die Interaktion mit dem Bild blockiert */
  border: 0px solid black;
  
  }

    .audio-pic:hover .text-title {
        opacity: 1; /* Der Text wird sichtbar, wenn man über das Bild fährt */
        }
     
     .audio-pic:hover .text-title2 {
        opacity: 1; /* Der Text wird sichtbar, wenn man über das Bild fährt */
        }    

    .audio-pic:hover .text-input1 {
        opacity: 1; /* Der Text wird sichtbar, wenn man über das Bild fährt */
        }


    
    .audio-pic { /*damit die texte in der bild-box bleiben*/
        position: relative; /* Positionierung relativ zum Container (dem Bild)*/ 
        margin: 0 0px 0px 0px; /* Fester Abstand von 20px zwischen den Bildern */
        flex-basis: calc(25% - 30px); /* Setzt die Breite der Bilder auf ein Drittel der Containerbreite minus dem Abstand */
        box-sizing: border-box; /*Verhindert, dass der Abstand den Layoutbereich überschreitet */
        }