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

img {
    height: 85px;
    width: 300px;
    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: 130px;
    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: 80px;
        width: 370px;
        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: 30%;
  left: 50%;
  transform: translate(-50%, -50%); /* Zentriert den Text im Bild */
  color: rgba(0, 0, 0, 0.848); /* 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: 770px;
    max-width: 770px; 

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

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

    font-size: 18px; 
    font-weight:350;
    font-family: 'Franklin Gothic Medium', sans-serif;
    /* font-family: Avenir Next, Arial; */
    line-height: 1.8;

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

    border:0px solid black;
    }

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

    font-size: 18px; 
    font-weight: 700;
    font-family: 'Franklin Gothic Medium', sans-serif;
    /* font-family: Avenir Next, Arial; */
    line-height: 1.8;

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

    border: none; 
    }

    .center {
    font-weight: 350;
    font-size: 18px;
    font-family: 'Franklin Gothic Medium', sans-serif;
    line-height: 1.8;
    border: 0px solid black;
    padding-left: 0px;
    padding-right: 0px;
    text-align: justify;
    margin-bottom: -15px;
    /*text-align-last: justify;*/
    }


.center-grid {
    display: flex;
    grid-template-columns: 770px;
    max-width: 770px; /* Nicht größer als Full HD */
    margin: auto;
    margin-top: 60px;
    margin-bottom: 0px;
    border: 0px solid black;
    justify-items: center;
    }

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

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

    font-size: 18px; 
    font-weight:300;
    font-family: "Goudy Bookletter 1911", sans-serif;
    /* font-family: Avenir Next, Arial; */
    line-height: 1.8;

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


    border: none 
    }