/* Allgemeine Stile */
body {
  font-family: "sofia-pro", sans-serif;
  background-color: #FFEFDE;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-y:scroll;
  padding:0;
  margin:0;
  width:100%;
}



.topcolumn {
  display: flex;
  flex-direction: column;
  align-items: center; /* Zentriert das h4-Element horizontal */
  justify-content: flex-start; /* Bezieht sich auf die vertikale Ausrichtung */
  padding: 10px;
  height: 50px; /* Höhe des Headers festlegen */
  position: relative;
  top: -20px;
  margin-top: 30px;
 
}

.menu {
  display: flex;
  flex-direction: column; /* Links untereinander anordnen */
  justify-content: flex-end;
  align-items: flex-end; /* Rechtsbündig */
  position:fixed; /* Fixiert das Menü oben rechts */
  top: 20px; /* Abstand vom oberen Rand */
  right: 30px; /* Abstand vom rechten Rand */
  transition: color 0.3s ease, transform 0.3s ease;
}

.menu a {
  margin-left: 20px; 
  text-decoration: none; /* Kein Unterstrich */
  color: black; /* Schwarzer Text */
  font-weight: normal;
  font-size: 20px;
}

.menu a:hover {
  color: #4a0eff; /* Farbe beim Hover */
  transform: translateY(-5px) scale(1.1); /* Bewegung beim Hover */
}

.title {
display:flex;
margin-left: 30px; 
margin-bottom: 100px;
flex-direction: column; /* Ordnet die Elemente vertikal an */
align-items: flex-start; /* Links ausgerichtet */




}


h1 {
  font-family: "sofia-pro", sans-serif; 
  font-size: 100px; 
  font-weight: normal; 
  color: #000000; 
  margin: 0

}
h1 span {
  display: block; /* Damit der Text in einer neuen Zeile ist */
  line-height: 0.5; /* Verringert den Abstand nur zwischen Illustrator und & Designer */
}


h4 {
  font-family: "sofia-pro", sans-serif; 
  font-size: 20px; 
  font-weight: normal; 
  color: #000000; 
  margin: 0;
  margin-top: 50px;
 
}

h3 {
  font-family: "sofia-pro", sans-serif; 
  font-size: 60px; 
  font-weight: normal; 
  color: #000000; 
  margin: 0;
  margin-top: 250px;
  margin-left: 30px;
 
}

#star{
  position: absolute;
  width: 87px;
  aspect-ratio: 1 / 1;
  top: 245px;
  left: 451px;
}

/* Container für die Buttons */
.button-container {
  display: flex; /* Flexbox aktivieren */
  justify-content: center; /* Gleicher Abstand zwischen den Buttons */
  align-items: center; /* Vertikale Zentrierung der Buttons */
  padding-top: 200px;
  padding-left: 10%;
  padding-right: 10%;
  width: 100%;
  box-sizing: border-box; 
  gap: 10%;
}

.button-1, .button-2, .button-3 {
  appearance: none;
  background-color: #000000;
  border: 2px solid #1A1A1A;
  border-radius: 25px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  font-family: "sofia-pro";
  font-size: 16px;
  padding: 16px 24px;
  text-align: center;
  text-decoration: none;
  transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
  width: 27%; 
  min-width: 20%;
}



.button-1:hover, .button-2:hover, .button-3:hover {
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  transform: translateY(-2px);
}

.button-1:active, .button-2:active, .button-3:active  {
  box-shadow: none;
  transform: translateY(0);
}

.button-4
{
  display: none;
  appearance: none;
  background-color: #000000;
  border: 2px solid #1A1A1A;
  border-radius: 25px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  font-family: "sofia-pro";
  font-size: 16px;
  padding: 16px 24px;
  text-align: center;
  text-decoration: none;
  transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
  width: 27%; 
  min-width: 20%;
}

.button-4:hover
{
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  transform: translateY(-2px);
}

.button-4:active {
  box-shadow: none;
  transform: translateY(0);
}

#button1-img{
  width: 87px;
  aspect-ratio: 1 / 1;
  margin: -72px 0 0 -92px;
  position: absolute;
}

#button2-img{
  width: 282px;
  aspect-ratio: 1 / 1;
  margin: -203px 0 0px -151px;
  position: absolute;
}

#button3-img{
  width: 119px;
  aspect-ratio: 1 / 1;
  margin: -12px 0 0 -52px;
  position: absolute;
  transform: rotate(105deg);
}


.portfolio {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 200px;
  margin: 40px 0;
}


.portfolio img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 15px;
  transition: transform 0.3s ease;
}

.portfolio img:hover {
  transform: scale(1.05);
}

.about-container {
  display: flex;
  justify-content: center;
  width: 80%; /* Breite auf 80% setzen */
  margin: 0 auto;
  margin-top: 300px;
  margin-bottom: 80px;
}

.about-image {
  width: 300px;
  height: auto;
  margin-right: 20px; /* Abstand zwischen Bild und Text */
  border-radius: 15px; /* Optional: rundes Bild */
}

.about-text h3, .about-text h4 {
  margin: 0;
}

.contact-super-container-grid{
  display: grid;
}

.contact-container, #mailboxImage {
  grid-column: 1;
  grid-row: 1;
}

.contact-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;

  width: 80%; /* Breite auf 80% setzen */
  margin: 0 auto;
  margin-top: 150px;
  /* margin-right: 200px; /* TODO: This creates some problems!!! (should be removed) */
   margin-bottom: 50px; 

  .contact-text{
    z-index: 2;
  }
}

#mailboxImage {
  width: 45%;
  aspect-ratio: 1 / 1;
  z-index: 1;
  padding: 0 0 0 50%;
}

.contact-text h3, .contact-text h4 {
  margin: 0;
}

#contact-title {
  align-self: center;
}

.contact-text {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-bottom: 40px;
}


#email-text {
  margin-top: 30px;
  font-size: 25px;
}

.black-bar {
  background-color: black;
  width: 60%; /* Bestimme die Breite des Balkens */
  height: 30px; /* Bestimme die Höhe des Balkens */
  margin: 0 auto; /* Zentriert den Balken horizontal */
  margin-top: 10%;
}

#footer-bar {
  background: black;
  width: 100%; /* Bestimme die Breite des Balkens */
  height: 40px; /* Bestimme die Höhe des Balkens */
  margin: 0 auto; /* Zentriert den Balken horizontal */
  margin-top: 10%;

  display: flex;
  justify-content: flex-end;
  
  span{
    color: white;
    margin: 3px 20px 0 20px;
  }

  #footer-text-spacer{
    width: 60%
  }
}



/* ------------------------ media query ---------------------------------*/

@media (max-width: 768px) {
  
  h4 {
    font-size: 16px;
  }


  .menu {
    display: none; 
  }

  /* Zentriere den .title Container */
  .title {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert den Container horizontal */
    justify-content: center; /* Zentriert den Container vertikal */
    text-align: center; /* Zentriert den Text */
    width: 100%; /* Breite des Containers */
    height: auto;
    margin: 0; /* Entferne die Standardränder */
  }

  .topcolumn{
  align-items: flex-start;
  margin-top: 20px;
}

  /* Schriftgröße für h1 auf 50px */
  h1 {
    font-size: 50px; /* Verkleinere die Überschrift */
    text-align: center; /* Zentriere den Text in der Mitte */
  }

  /* Entferne den Abstand zwischen Illustrator und & Designer */
  h1 span {
    line-height: 1; /* Normale Zeilenhöhe für einen engeren Abstand */
  }


  #star{
    position: absolute;
    width: 87px;
    aspect-ratio: 1 / 1;
    top: 93px;
    left: 45px;
  }



  .button-4
{
  appearance: none;
  background-color: #000000;
  border: 2px solid #1A1A1A;
  border-radius: 25px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  font-family: "sofia-pro";
  font-size: 16px;
  padding: 16px 24px;
  text-align: center;
  text-decoration: none;
  transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
  width: 27%; 
  min-width: 20%;
  display: block;
}

  .button-container {
    flex-direction: column; /* Ordnet die Buttons untereinander an */
    align-items: stretch; /* Streckt die Buttons auf die volle Breite */
    padding-left: 20px; /* Reduziere das Padding für kleine Bildschirme */
    padding-right: 20px; /* Reduziere das Padding für kleine Bildschirme */
  }



  .button-1, .button-2, .button-3, .button-4 {
    width: 100%; /* Buttons füllen die gesamte Breite auf kleinen Bildschirmen */
    margin-bottom: 30px; /* Abstand zwischen den Buttons */
  }

  #button1-img{
    width: 47px;
    margin: -47px 0 0 -92px;
  }
  
  #button2-img{
    width: 91px;
    margin: -78px 0 0px -151px;
  }
  
  #button3-img{
    width: 84px;
    margin: 4px 0 0 33px;
}

  .about-image {
    width: 40%;
  }

  .about-container {
    display: flex;
    flex-direction: column;
    width: 80%; /* Breite auf 80% setzen */
    margin: 0 auto;
    margin-top: 400px;
  }


  .portfolio img {
    width: 100%;
    height: auto;
    }


  .contact-container{
    margin-top: 125px;
  }

  #contact-title{
    align-self: center;
  }

  #mailboxImage {
    width: 35%;
    aspect-ratio: 1 / 1;
    z-index: 1;
    padding: 8% 0% 24% 40%;
    overflow: visible;
  }

  #footer-bar {
    span{
      color: white;
      margin: 3px 10px 0 10px;
      font-size: 12PX;
    }
  
    #footer-text-spacer{
      width: 10%
    }
  }
}