Simple WordPress Loop result completely wrong and full of breaks and <p> elements

I am trying to make a simple loop through my wordpress posts but when it comes to output the whole thing the loop puts it anywhere but not where I said, it should be. For example the loop adds breaks and

but they are not in my posts. I had this problem once but dont know anymore what i have done to get over this problem.

MY LOOP:

<?php
$args = array(
    'post_type' => 'post',
    'posts_per_page' => 4
);

$loop = new WP_Query($args);
if ($loop->have_posts()) {
    while ($loop->have_posts()) : $loop->the_post();
        $post_id = get_the_ID();
        $content = the_content();
        $headline = get_post_meta($post_id, 'headline', true);
        $subtitle = get_post_meta($post_id, 'untertitel', true);
        $class = wp_get_post_terms( $post_id, 'post_tag', $termsargs );
        $bgimage = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );

        echo '<section class="section zutaten '.$class[0].'" style="background-image: url('.$bgimage.')">';
        echo '<article class="zutaten-beschreibung">';
        echo '<header>';
        echo '<h2><strong>'.$headline.'</strong></h2>';
        echo '<h3>'.$subtitle.'</h3>';
        echo '<div class="zutaten-beschreibung-content">';
        echo $content;
        echo '</div>';
        echo '</header>';
        echo '</article>';
        echo '</section>';

    endwhile;
} else {
    echo __('Fehler!');
}
wp_reset_postdata();
?>

RESULT:

What is going wrong here?