@font-face {
  font-family: 'Avenir Next Bold';
  src: url('/avenir/AvenirNext-Bold-01.ttf') format('truetype');
  font-weight: bold;
}

@font-face {
  font-family: 'Avenir Next Bold Italic';
  src: url('/avenir/AvenirNext-BoldItalic-02.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'Avenir Next Demi Bold';
  src: url('/avenir/AvenirNext-DemiBold-03.ttf') format('truetype');
  font-weight: 600;
}

@font-face {
  font-family: 'Avenir Next Demi Bold Italic';
  src: url('/avenir/AvenirNext-DemiBoldItalic-04.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: 'Avenir Next Heavy';
  src: url('/avenir/AvenirNext-Heavy-09.ttf') format('truetype');
  font-weight: 900;
}

@font-face {
  font-family: 'Avenir Next Heavy Italic';
  src: url('/avenir/AvenirNext-HeavyItalic-10.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: 'Avenir Next Italic';
  src: url('/avenir/AvenirNext-Italic-05.ttf') format('truetype');
  font-style: italic;
}

@font-face {
  font-family: 'Avenir Next Medium';
  src: url('/avenir/AvenirNext-Medium-06.ttf') format('truetype');
  font-weight: 500;
}

@font-face {
  font-family: 'Avenir Next Medium Italic';
  src: url('/avenir/AvenirNext-MediumItalic-07.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'Avenir Next Regular';
  src: url('/avenir/AvenirNext-Regular-08.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: 'Avenir Next Ultra Light';
  src: url('/avenir/AvenirNext-UltraLight-11.ttf') format('truetype');
  font-weight: 100;
}

@font-face {
  font-family: 'Avenir Next Ultra Light Italic';
  src: url('/avenir/AvenirNext-UltraLightItalic-12.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
}


body {
    font-family: "Avenir Next Medium", sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
}


/* --------------workpage-----------------*/

.containerwork {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
  }
  .containertest {
    margin-bottom: 0px;
    position: relative;
  }
  .imagework {
    width: 100%; /* Bildbreite auf 100% setzen */
    height: auto; /* Bildhoehe auf auto setzen */ 
    min-width: 350px; 
    object-fit: cover;
    position: relative;
    top: -10%;
    transition: top 0.4s ease-out;
  }

  .image-link {
    display: inline-block;
    text-decoration: none;
  }

  .imagecontainerwork {
    width: 100%; /* Breite des Bildcontainers anpasses */
    height: 250px; /* Höhe des Bildcontainers anpassen */
    position: relative;
    top: 0px; left: 0px;
    overflow: hidden; /* Ãœberlauf ausblenden */
    filter: grayscale(100%); /* Filtereffekt entfernen, um das Bild in Farbe zu aendern */
    transition: filter 0.5s ease-out, transform 0.5s ease-out, height 0.4s ease-out;
    z-index: 50; /* Setze die Stapelreihenfolge auf einen höheren Wert als die umgebenden Elemente */
  }
/*
.imagecontainerwork::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.724);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
  
  .imagecontainerwork:hover::after {
    opacity: 0; 
    z-index: 0; 
  }
  */


  .imagecontainerwork:hover {
    filter: grayscale(0%); /* Filtereffekt entfernen, um das Bild in Farbe zu ändern */
    transform: scale(1.025);
  }

  .imagecontainerwork:hover .text-overlay .overlay-link {
    font-family: "Avenir Next Regular", sans-serif;
  }

/* Textoverlay-Stil */
.text-overlay {
  position: absolute; /* Absolut positionieren, um den Text über das Bild zu legen */
  top: 10px;
  left: 0;
  padding: 10px 30px; /* Innenabstand des Textoverlays */
  background-color: rgba(0, 0, 0, 0.); /* Hintergrundfarbe mit 70% Transparenz */
  z-index: 10; /* Setze die Stapelreihenfolge auf einen höheren Wert als die umgebenden Elemente */
}


/* Linkstil */
.overlay-link{
  display: block; /* Link als Blockelement behandeln, um den Text zu überlagern */
  font-family: "Avenir Next Regular", sans-serif;
  text-align: justify; 
  font-size: 15px;
  transition: font-size 0.5s ease-in-out;
  color: #cdcdcd;
  margin: 0;
  text-decoration: none; /* Unterstreichungen entfernen */
  text-shadow: 0 0 10px rgba(0, 0, 0, 1);
}



/* --------------Arbeiten-----------------*/


.headder {
  width: 100%; /* Breite des Bildcontainers anpasses */
  height: 300px; /* Höhe des Bildcontainers anpassen */
  position: relative;
  top: 0px; left: 0px;
  overflow: hidden; /* Ãœberlauf ausblenden */
  transition: transform 0.5s ease-out, height 0.4s ease-out;
  z-index: 2;
  margin-bottom: 0px;
  min-width: 350px; 
}


.imageheadder {
  width: 100%; /* Bildbreite auf 100% setzen */
  height: auto; /* Bildhoehe auf auto setzen */ 
  min-width: 350px; 
  object-fit: cover;
  position: relative;
  top: 0%;
  transition: top 0.4s ease-out;
  margin: 0px;
}



.containertext {
    display: inline-block; /* Text als Inline-Block-Element behandeln */
    text-align: justify; /* Text im Container zentrieren */
    max-width: 800px; /* Maximale Breite des Containers */
    min-width: 350px; 
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 30px;
  }

.horizontalillu {
  width: 49%; /* Bildbreite auf 100% setzen */
  height: 85%; /* Bildhoehe auf auto setzen */  
  min-width: 350px; 
  margin-bottom: 0px;
  margin-bottom: 20px; /* Ändere den unteren Abstand für Überschriften und Absätze auf 10px */
}
.portfolio {
    text-align: center;
    color: #000000;
}

.portfolio img  {
    width: 100%; /* Bildbreite auf 100% setzen */
    height: 85%; /* Bildhoehe auf auto setzen */  
    min-width: 350px; 
    top: 100; /* Abstand von oben */
    margin-bottom: 0px;
    object-fit: cover;    
    margin-bottom: 20px; /* Ändere den unteren Abstand für Überschriften und Absätze auf 10px */
  }

.portfolio h1 {
    text-align: left; 
    font-size: 48px;
    margin-top: 0;
    margin-bottom: 20px; /* Ändere den unteren Abstand für Überschriften und Absätze auf 10px */
    padding-left: 100px; 
    padding-right: 100px;
    font-family: "Avenir Next Bold", sans-serif;
  }

.portfolio h2 {
    text-align: left; 
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 40px; /* Ändere den unteren Abstand für Überschriften und Absätze auf 10px */
    padding-left: 100px; 
    padding-right: 100px;
    font-family: "Avenir Next Demi Bold", sans-serif;
}

.portfolio p {
    font-family: "Avenir Next Regular", sans-serif;
    font-size: 18px;
    text-align: left; 
    padding-right: 100px;
    padding-left: 100px;
    margin-bottom: 0px;
    transition: padding-left 0.4s ease-out;
    transition: padding-right 0.4s ease-out;
}

body::after {
    content: "";
    display: block;
    height: 10px;
}

.containerhome {
  position: relative;
  top: 0px; left: 0px;
  font-family: "Avenir Next Regular", sans-serif;
  background-color: #ffffff;
  margin: 0px;
  padding: 6px;
  text-align: center;
  font-size: 18px;
  line-height: 2.05;
  transition: background-color 0.5s ease-out;
  white-space: nowrap;
  justify-content: center;
  z-index: 1;
}

.containerhome:hover {
  background-color: #eee;
  transition: background-color 0.5s ease-out;
  z-index: 1;
}

.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    padding-right: 100px; 
    padding-left: 100px; 
    margin-bottom: 40px;
  }



.container {
    margin: 0;
    padding: 0;
    max-width: 960px;
    margin: 0 auto;
    padding: 40px;
    text-align: center;
    font-size: 18px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    display: inline;
    margin-right: 20px;
}

a {
    text-decoration: none;
    color: #000;
    font-size: 18px;
}

/* Schriftgröße für mobile Geräte mit Hilfe von User-Agent-Strings */
@media screen and (max-width: 508px) {
	.containertext {
        margin-top: 15px;
    	margin-bottom: 30px;
    }
    
    .portfolio h1 {
    	text-align: left; 
    	font-size: 40px;
    	margin-top: 0;
    	margin-bottom: 15px; 
    	padding-left: 30px; 
    	padding-right: 30px; 
	}

	.portfolio h2 {
	    font-size: 24px;
    	margin-top: 0;
    	margin-bottom: 20px; 
    	padding-left: 30px; 
        }


.portfolio p {
    font-size: 18px;
    padding-right: 30px; 
    padding-left: 30px; 
    margin-bottom: 0px; 
    transition: padding-left 0.4s ease-out;
    transition: padding-right 0.4s ease-out;
}
}


.video-container {
  justify-content: center;
  align-items: center;
  height: auto;
  padding-right: 0px; 
  padding-left: 0px; 
}

/* --------------contact-----------------*/

.containercontact {
    display: inline-block; /* Text als Inline-Block-Element behandeln */
    text-align: start; /* Text im Container zentrieren */
    max-width: 750px; /* Maximale Breite des Containers */
    justify-content: center;
  }


/*---------------INDEX------------------*/

.logo-containerindex {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10%; /* Optional: Fügen Sie einen unteren Abstand hinzu, um Platz für andere Inhalte zu schaffen */

  }
  
  .logoindex {
    max-width: 35%;
  }
  



/*---------------SCETCHBOOK------------------*/


.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 0px;
  margin: 0 -5px;
  padding: 0;
}


.grid-item {
  position: relative;
  padding: 0;
  filter: grayscale(100%);
  transition: filter 2s ease-out, transform 0.5s ease-in;
  }


.grid-item img {
  display: block;
  width: 100%;
  height: auto;
}

.grid-item:hover {
  transform: scale(1.03);
  cursor: pointer;
  filter: grayscale(0%); /* Filtereffekt entfernen, um das Bild in Farbe zu ändern */
  transition: filter 0.4s ease-in, transform 0.3s ease-out;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  z-index: 999;
  justify-content: center;
  align-items: center;
}

.overlay img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  margin: auto;
    cursor: pointer;

}

.overlay.active {
  display: flex;
}



/* ..............responsive...................*/

@media screen and (max-width: 500px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
  }



@media screen and (orientation: landscape) {
    .grid {
        grid-template-columns: repeat(6, 1fr);
    }
  }



  @media screen and (min-width: 808px) {
    .imagework {
      top: -80%;
    }
    .imageheadder {
      top: -10%;
    }
    .headder {
      height: 400px; /* Höhe des Bildcontainers anpassen */
    }
    .imagecontainerwork {
      height: 200px; /* Höhe des Bildcontainers anpassen */
    }
    .overlay-link {
      font-size: 20px; /* Schriftgröße für mobile Geräte mit maximal 768px Bildschirmbreite oder im Portrait-Modus */
      }
    .text-overlay {
      padding: 15px 35px; /* Innenabstand des Textoverlays */
    }
  }

  @media screen and (min-width: 1108px) {
    .imagework {
      top: -80%;
    }
    .imageheadder {
      top: -10%;
    }
    .headder {
      height: 600px; /* Höhe des Bildcontainers anpassen */
    }
    .imagecontainerwork {
      height: 300px; /* Höhe des Bildcontainers anpassen */
    }
    .overlay-link {
      font-size: 30px; /* Schriftgröße für mobile Geräte mit maximal 768px Bildschirmbreite oder im Portrait-Modus */
      }
    .text-overlay {
      padding: 30px 40px; /* Innenabstand des Textoverlays */
    }
  }

  @media screen and (min-width: 1608px) {
    .imagework {
      top: -80%;
    }
    .imageheadder {
      top: -10%;
    }
    .headder {
      height: 800px; /* Höhe des Bildcontainers anpassen */
    }
    .imagecontainerwork {
      height: 400px; /* Höhe des Bildcontainers anpassen */
    }
    .overlay-link {
      font-size: 40px; /* Schriftgröße für mobile Geräte mit maximal 768px Bildschirmbreite oder im Portrait-Modus */
      }
    .text-overlay {
      padding: 40px 50px; /* Innenabstand des Textoverlays */
    }
  }

  @media screen and (min-width: 2108px) {
    .imagework {
      top: -80%;
    }
    .imageheadder {
      top: -12%;
    }
    .headder {
      height: 1000px; /* Höhe des Bildcontainers anpassen */
    }
    .imagecontainerwork {
      height: 500px; /* Höhe des Bildcontainers anpassen */
    }
    .overlay-link {
      font-size: 50px; /* Schriftgröße für mobile Geräte mit maximal 768px Bildschirmbreite oder im Portrait-Modus */
      }
    .text-overlay {
      padding: 50px 60px; /* Innenabstand des Textoverlays */
    }
      
  }

  /* Schriftgröße für mobile Geräte mit Hilfe von User-Agent-Strings */
@media screen and (max-width: 508px) {
  .overlay-linkx {
    font-size: 28px; /* Schriftgröße für mobile Geräte mit maximal 768px Bildschirmbreite oder im Portrait-Modus */
  }
  .overlay-link {
  font-size: 20px; /* Schriftgröße für mobile Geräte mit maximal 768px Bildschirmbreite oder im Portrait-Modus */
  }
  .imagecontainerwork {
    width: 100%; /* Breite des Bildcontainers anpasses */
    height: 150px; /* Höhe des Bildcontainers anpassen */
    transition: height 0.4s ease-out;
  }
  .imagework {
    width: 100%; /* Bildbreite auf 100% setzen */
    height: auto; /* Bildhoehe auf auto setzen */  
    object-fit: cover;
    position: relative;
    top: -30%;
    transition: top 0.4s ease-out;
    margin-bottom: 0px;
  }
  .imageheadder {
    width: 100%; /* Bildbreite auf 100% setzen */
    height: auto; /* Bildhoehe auf auto setzen */  
    object-fit: cover;
    position: relative;
    top: -10%;
    transition: top 0.4s ease-out;
    margin-bottom: 0px;
  }
  .headder{
    width: 100%; /* Breite des Bildcontainers anpasses */
    height: 250px; /* Höhe des Bildcontainers anpassen */
    transition: height 0.4s ease-out;  }
}