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

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

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

    height: 380px;
    margin-top: 30px; 
    column-gap: 20px ;
    row-gap: 30px;
    }

    .works-done .work-item { /*damit der text auf dem bild bleibt*/
        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 */
        }

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

    .works-done img {
        height: 380px;
        width: 284px;
        border-radius:10px;
        transition: opacity 0.3s ease; /* Sanfter Übergang der Opazität */  
        display: block;
        }

    .works-done img:hover {
        opacity: 0.3; /* Setzt die Opazität auf 30% beim Hover */
        }

    .works-done a {
        display: block; /* Macht das gesamte a-Tag klickbar */
        text-decoration: none;
        }

.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Zentriert den Text im Bild */
  color: tomato; /* Farbe des Textes */
  font-size: 45px; /* Schriftgröße */
  font-weight: 500; /* Optional, für dickeren Text */
  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 */
  }

.comp-center1 {
    display: flex;
    grid-template-columns: 880px;
    max-width: 880px; 

    margin:0px auto;
    margin-top: 35px;
 
    justify-content: center;

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

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

    text-align: justify;
    text-align-last: left;

    border:0px solid black;
    }

.comp-center2 {
    width: 65vw; /* n% fesnterbbreite */
  
    margin: 0px auto;
    margin-top: 15px;
    margin-bottom: 20px; 

    font-size: 20px; 
    font-weight: 700;
    font-family: Avenir Next, Arial;
    line-height: 1.5;

    text-transform: lowercase;
    text-align: center;
    text-align-last: center;

    border: none; 
    }

.comp-center3 {
    width: 62vw; /* n% fesnterbbreite */
    

    margin: 0px auto;
    margin-top:0px;
    margin-bottom:20px;

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

    text-align: justify; 
    text-align-last:left;


    border: none 
    }