@font-face {
  font-family: 'GT Alpina';
  src:  url('fonts/GT-Alpina-Standard-Thin.woff2') format('woff2')
}



html, body {
  background: #fff;
  z-index: 1;
  font-family: "GT Alpina", serif;
  font-weight: 100;
  font-style: normal;
  color: black;
  padding: 0.5vw;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a, button, input, label {
  cursor: pointer
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

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


/* CURSOR */

body {
cursor:url(images/Cursor_20.png), pointer;
}

a:active {
	cursor:url(images/Cursor_20_circle.png), pointer;
}

a:hover{
cursor:url(images/Cursor_20_circle.png), pointer;
}






/* Headline */


        .logo-headline {
            user-select: none; /* Prevent text selection */
            margin-top: -1vw;
            position: fixed;
            top: 0;
            width: 98vw;

            font-size: 9.2vw;
            text-transform: uppercase;
            display: flex;
            justify-content: space-between;
            letter-spacing: -.3rem;
            align-items: center;
            z-index: 1000;
        }


        .logo-headline .left {
        }

        .logo-headline .right {
        }





/* TEXT */



      h1 {
      font-size: 2vw;
      font-weight: normal;
      }


      h2 {
        font-size: 1.25vw;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        font-weight: normal;
        margin-top: 4em;
      }     

      h3 {
        font-size: 1.25vw;
        /*text-transform: uppercase;*/
        font-weight: normal;
      }     

      h4 {
        font-size: 1.25vw;
        /*text-transform: uppercase;*/
        font-weight: normal;
      }  



     p {
      font-size: 2vw;
      margin-bottom: 2vw;
     }

     .BU {
      font-size: 1.25vw;
      margin-bottom: 2vw;
      margin-top: -1.5vw;
      margin-left: 2vw;
     }

     .BU-first {
      font-size: 1.25vw;
      margin-bottom: 2vw;
        margin-top: -1.5vw;
  }




a {
  text-decoration: none;
  color: black;
}


.container {
  display: flex;
  /*position: relative;*/
  width: 100vw;
  xheight: 100vh; 
  align-items: flex-start;
  xflex-wrap: wrap; /* Allow wrapping if needed */
  xjustify-content: space-between; /* Space between the boxes */
}


.text-container {
  width: 50vw;
}

.margin-left {
  margin-left: 46vw;
}

.vita {
  width: 30vw;
  margin-left: 46vw;
  margin-top: 4.4vw;
}

.reiter {
  width: 30vw;
  margin-left: 46vw;
  margin-top: 4.4vw;
}

.menu {
  width: 30vw;
  margin-left: 46vw;
  margin-top: 10vw;
}



/* test */


.menu a {
  display: block;
  text-decoration: none;
  color: #000;
  padding: 5px 10px;
  transition: transform 0.3s ease;
}

.menu a:hover {
  transform: translateX(10px);
}




/* IMG */ 


.image-container {
    display: inline-block;
    margin: 1vw;
    background-size: cover;
    background-position: center;
    aspect-ratio: 2  / 3;

    /* Start der Animation */
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.image-container.fade-in {
    opacity: 1; /* Endzustand: Voll sichtbar */
}


/* PROJEKT IMG */

.project-big img{
  width: 52vw;
  /*margin-left: 2vw;*/
  display: inline-block;
  aspect-ratio: 2  / 3;
  margin-bottom: 2vw;
}

.project img{
  width: 40vw;
  margin-left: 2vw;
  margin-top: 18vw;
  display: inline-block;
  aspect-ratio: 3  / 2;
  margin-bottom: 2vw;
}


.project-ls-big
img{
  width: 60vw;
  margin-left: 10vw;
  display: inline-block;
  aspect-ratio: 3  / 2;
  margin-bottom: 2vw;
}

.project-4 img {
  width: 20vw;
  margin-left: 60vw;
  display: inline-block;
  aspect-ratio: 2  / 3;
  margin-bottom: 2vw;
  margin-top: -22vw;
}


/* PRINTS */



.print img{
  width: 20vw;
  margin-left: 2vw;
  display: inline-block;
  aspect-ratio: 2  / 3;
  margin-bottom: 2vw;
}

.print-first img{
  width: 20vw;
  margin-left: 0;
  display: inline-block;
  aspect-ratio: 2  / 3;
  margin-bottom: 2vw;
}

.print-kl img{
  width: 10vw;
  margin-left: 2vw;
  display: inline-block;
  aspect-ratio: 3  / 4;
  margin-bottom: 2vw;
}

.print-kl-first img{
  width: 10vw;
  margin-left: 0;
  display: inline-block;
  aspect-ratio: 3  / 4;
  margin-bottom: 2vw;
}

.print-big-first img{
  width: 40vw;
  margin-left: 0;
  display: inline-block;
  aspect-ratio: 2  / 3;
  margin-bottom: 2vw;
}


/* ROW 1 */

#image1 {
  width: 45vw; 
  margin-top: 20vh;  

}

#image2 {
  width: 20vw;
  xposition: absolute;
  margin-left: 2vw;
  xtop: 0; /* Align to the top of box1 */ 

}

#image3 {
  width: 25vw;
   xposition: absolute;
  margin-left: 2vw;
  xtop: 50%; /* Start from the middle of the container */
  xtransform: translateY(-50%); /* Adjust to truly center vertically */
  align-self: center; /* Align this box vertically in the middle */
}


/* ROW 2 */

#image4 {
  width: 45vw;
  margin-left: 15vw;
  
}

#image5 {
  width: 20vw;
  xalign-self: flex-end; /* Align this box at the bottom */
  xmargin-top: auto; /* Push the box to the bottom */
  margin-top: 10vw;
  margin-left: 2vw;
}


/* ROW 3 */

#image6 {
  width: 20vw;
    align-self: center; /* Align this box vertically in the middle */
}




#image7 {
  width: 20vw;
  margin-right: 12vw;
  /*margin-left: 2vw;*/
}

#image8 {
  width: 40vw;
  margin-top: 10vw;
  margin-left: 2vw;
}

/* ROW 4 */


#image9 {
  width: 25vw;
 /* z-index: 9999;*/
}

#image10 {
  width: 40vw;
  margin-left: 2vw;
  /*margin-top: 10vw;*/
}







/* Media Queries */

@media screen and (max-width:500px){
 /* h1{
    color: blue;
  }*/


      h1 {
      font-size: 6vw;
      font-weight: normal;
      }


      h2 {
        font-size: 4vw;
        text-transform: uppercase;
        font-weight: normal;

      }     

      h3 {
        font-size: 4vw;
        /*text-transform: uppercase;*/
        font-weight: normal;
      }     

      h4 {
        font-size: 4vw;
        /*text-transform: uppercase;*/
        font-weight: normal;
      }  



     p {
      font-size: 6vw;
      margin-bottom: 2vw;
     }


     .BU {
      font-size: 4vw;
      margin-bottom: 6vw;
      margin-top: -1.5vw;
      margin-left: 0vw;
     }

     .BU-first {
      font-size: 4vw;
      margin-bottom: 3vw;
        margin-top: -1.5vw;
  }





 .logo-headline {
    letter-spacing: -.05rem;
    font-size: 11vw;
}


 .container {
    flex-direction: column; 
    align-items: center; 
    height: auto;
    width: 99vw;
  }


.reiter {
  width: 60vw;
  margin-left: 4vw;
  /*margin-left: 46vw;*/
  margin-top: 16vw;
  margin-bottom: 12vw;
}




.vita {
  /*width: 48vw;*/
  width: 90vw;
  margin-left: 4vw;
}

.menu {
  width: 90vw;
  margin-left: 4vw;
  margin-top: 20vw;
  margin-bottom: 24vw;
}



.menu a {
  padding: 0px 0px;
}

.margin-left {
  margin-left: 0vw;
}







/* PROJEKT IMG */

.project-big img{
  width: 90vw;
  margin-left: 0vw;
  margin-bottom: 2vw;
  margin-top: 6vw;
}

.project img{
  width: 90vw;
  margin-left: 0vw;
  margin-bottom: 2vw;
  margin-top: 0vw;
}


.project-ls-big
img{
}

.project-4 img {
  width: 90vw;
  margin-left: 0vw;
  margin-bottom: 2vw;
  margin-top: 0vw;
}











.print img{
  width: 90vw;
  margin-left: 0vw;
  margin-bottom: 2vw;
}

.print-first img{
  width: 90vw;
  margin-left: 0;
  margin-bottom: 2vw;
}

.print-kl img{
  width: 90vw;
  margin-left: 0vw;
  margin-bottom: 2vw;
}

.print-kl-first img{
  width: 90vw;
  margin-left: 0;
  margin-bottom: 2vw;
}

.print-big-first img{
  width: 90vw;
  margin-left: 0;
  margin-bottom: 2vw;
}





.image-container {
width: 90vw;
}

#image1 {
  margin-top: 5vh; 
}


#image5 {
  margin-top: 0vh;
}

#image7 {
  margin-right: 0vw;
}

#image8 {
  margin-top: 0vw;
}




#image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8, #image9, #image10 {
    width: 90vw;
    margin-left: 0; /* Reset margin */
    margin-bottom: 10px; /* Add some space between boxes */  
}
/*
#image1, #image3, #image5, #image7, #image9 {
{
  width: 90vw;
}

#image2, #image4, #image6, #image8, #image10{
  width: 50vw;
}
*/







}