.logo-box-me {
    display: flex;
    justify-content: end;
    align-items: center;
    width: 100%; 
    position: relative;
}

.logo-box-me img {
    width: 40%;
    
}

.hero-logo-box {
    z-index: -2;
}

#logo {
    margin-left: 80px;
}

header {
    position: relative;
}

#karsten {
    height: 100%;
    
    position: absolute;
    top: 25%;
    right: 5%;
}

#welle {
  width: 30%;
  position: absolute;
  top: 50%;
  left: 5%;
}

/* ===== GRID (Content) ===== */

.me-item1 { grid-area: text1; }
.me-item2 { grid-area: bild1; }
.me-item3 { grid-area: bild2; }
.me-item4 { grid-area: text2; }

#me-grid {
    display: grid;
    grid-template-columns: auto auto; 
    gap: 10px; 
    align-items: center;
}

.me-item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  width: 90%;
  font-size: 18px;
  line-height: 1.5;
  text-align: justify;
  margin: 5% 5%;
}

.me-item2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.me-item2 > img {
    width: 80%;
}

.me-item3 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.me-item3 > img {
    width: 100%;
}

.me-item4 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  width: 85%;
  font-size: 18px;
  line-height: 1.5;
  text-align: justify;
  margin: 0 10% 0 5%;
}

.me-item5 {
  grid-column: 1 / 3;
  grid-row: 4 / 5;
  width: 90%;
  font-size: 18px;
  line-height: 1.5;
  text-align: justify;
  margin: 5%;
}

.me-item5 a {
    color: #093B43;
    font-weight: normal;
    text-decoration: underline;
}

@media (max-width: 767px) {
  #me-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Reihenfolge neu festlegen */
  .me-item1 { order: 1; width: 90%; margin: 5% 0; }
  .me-item4 { order: 2; width: 90%; margin: 5% 0; }
  .me-item3 { order: 3; width: 100%; margin: 5% 0; }
  .me-item5 { order: 4; width: 90%; margin: 5% 0; }

  /* Schriftgröße anpassen */
  #me-grid p, 
  #me-grid h2, 
  #me-grid h3 {
    font-size: 16px;
    text-align: left;
  }
}