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

img {
    height: 250px;
    width: 284px;
    border-radius: 10px;
    }

.choreo-grid {
    display: flex;
    grid-template-columns: 880px;
    max-width: 880px; 
    margin: 0px auto;
    margin-top: 0px;
    border: 0px solid black;
    justify-content: center;

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

    padding-left: 0px;
    padding-right: 0px;
    }   

.choreo-center {
    max-width: 880px; /* Nicht größer als Full HD */

    justify-items: center;
    
    margin: 0px auto;
    margin-top: 35px;
    margin-bottom: 0px;

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

    text-align: center;
    text-align-last: center;

    border: 1px solid black;

    padding-left: 10px;
    padding-right: 10px;
    padding-top: 15px;
    padding-bottom: 15px;

    }

.choreo-done {
    display: flex;
    grid-template-columns:1fr 1fr 1fr;
    justify-content: center;

    width: 880px;
    height: 180px;
    margin-top: 20px; 
    column-gap: 20px ;
    row-gap: 20px;

    background-size: cover ;
    transition-duration: 0.3s;

    border: 0px solid black;
    }

    .choreo-done .choreo-item { /*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 */
        }

    .choreo-done img {
        height: 180px;
        width: 284px;
        border-radius: 10px;

        transition-duration: 0.3s;  
        display: block;
        }

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

    .choreo-done a {
        display: block; /* Macht das gesamte a-Tag klickbar */ 
        }

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

.text-overlay {
  position: absolute;
  top: 28%;  /* Text beginnt an der oberen Kante */
  left: 50%;  /* Horizontal zentriert */
  transform: translateX(-50%); /* Nur horizontal verschieben */

  color: rgb(255, 255, 255); /* Farbe des Textes */
  font-size: 30px; /* Schriftgröße */
  font-weight: 700; /* Optional, für dickeren Text */
  text-transform: none;
  text-decoration: underline;
  
  opacity: 0; /* Text ist zu Beginn unsichtbar */

  max-height: 100%;    /* oder fester Wert wie 120px */
  overflow: auto;
  width: 270px;
  
  transition-duration: 0.3s;
  pointer-events: none; /* Verhindert, dass der Text die Interaktion mit dem Bild blockiert */
  }

.videoModal {
    display:none;
    position:fixed;
    top:0; 
    left:0; 
    width:100%; 
    height:100%;
    background-color:rgba(0,0,0,0.8);
    z-index:1000;
    overflow-y: auto;
}

.video-set1 {
    position:relative;
    width:80%; 
    max-width:800px; 
    margin-top: 20px; 
    background:#000;
      overflow-y: auto;
}

.inside {
    margin-top:0px;
    font-size:20px;
    font-weight: 300;
    font-family: Avenir Next, Arial;
    line-height: 1.5;
    color:whitesmoke;
    }   

.inside2 {
    margin-top:0px;
    font-size:20px;
    font-weight: 300;
    font-family: Avenir Next, Arial;
    line-height: 1.5;
    color:whitesmoke;
    text-transform: none;
    }   

h2 {
    font-size: 22px;
    margin-bottom: 0px;
    }

.button {
    position:absolute;
    top:10px;
    right:5px;
    font-size:28px;
    background:none;
    color:white;
    border:none;
}