.das_bin_ich{
  padding: 20px 20px 0 20px;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  line-height: 0;
  position: relative; /* Basis für absolute Kinder */
}

.das_bin_ich img{             /* top/right/bottom/left = 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}


.page-wrap{
    background-color: #F7F3E3;

}





.über_mich_content{
    display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}

.page-title{
  margin-top: 20px;
}

@media (min-width: 900px) {
.page-title{
 text-align: left;
}

.the_content{
  padding: 25px 40px 25px 40px;

}

.das_bin_ich{
  padding: 20px;
  
}

    .page-wrap{
      display: flex;
      flex-direction: row;
    }
  }

@media (min-width: 1200px) {
    /* Wrap bleibt normaler Block, keine Grid-Aufteilung */
    .page-wrap{
      display: flex;
      max-width: 2000px;  /* optional, damit es wie im Screenshot nicht zu breit wird */
      margin: 0 auto;
      flex-direction: row;
    }
    

    .das_bin_ich{
        max-width: 500px;
        aspect-ratio: auto;
        height: auto;
        margin-right: 20px; /* Abstand zum Text */
        
    }
  
    .über_mich_content{
      /* Multi-Column Layout */
      column-count: 2;
      column-gap: 5%;        /* Abstand zwischen Spalten */
      column-fill:initial;    /* verteilt Text möglichst gleichmäßig */
      align-items:normal;   /* überschreibt dein flex-align */
      display: block;          /* wichtig: nicht flex, sonst keine columns */
    }
  
    /* Überschriften über beide Spalten */
    .über_mich_content h1,
    .über_mich_content h2{
      column-span: all;
      margin-top: 0;
    }

  }