CSS

<style>
  .thin-box {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 2rem;
    border-style: solid;
    border-width: thin;
    border-color: steelblue;
    border-radius: 10px;
    background: #F4F9FF;
  }

  img,
  audio,
  video {
    max-width: 100%; height: auto;
  }

  figure {
    margin-left:0;
    margin-right: 0;
    font-size: 0.8rem;
  }

  hr {
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
  }
</style>


   <!--  SITE-CONTENT  --------------------------------------------------------------------------------------------------------- -->
    <main class="site-content" id="content">

      <!-- BILD EINFÜGEN  -->
      <div class="thin-box">
          <h3>Bilder flexibel einbinden</h3>
          <hr>
          <figure>
            <img src="images/tom_780x1012.png" alt="Tom" width="390" height="506">
            <figcaption>Tom im Rockkonzert in Berlin</figcaption>
          </figure>
      </div>

      <!-- AUDIO EINFÜGEN -->
      <div class="thin-box">
      <h3>Audio-Dateien einbinden</h3>
      <hr>
        <figure>
          <!-- Bedienelemente anzeigen und Metadaten laden -->
          <audio src="audiovideo/tom.mp3" type="audio/mp3" controls>
            <!-- Fallback: MP3-Datei zum Downloaden für alte Browser -->
            <!-- <p><a href="audiovideo/tom.mp3">MP3-Datei herunterladen</a></p> -->
          </audio>
          <figcaption>Sänger: Tom -> Der Berliner</figcaption>
        </figure>
      </div>

      <! -- VIDEO EINFÜGEN  -->
      <div class="thin-box">
          <h3>Video-Dateien einbinden</h3>
          <hr>
          <figure>
            <video src="audiovideo/viehscheid.mp4" controls poster="bad-muenster-rotenfels-poster.jpg">
              <!-- Fallback: MP4-Datei als Download für alte Browser -->
              <!-- <p><a href="audiovideo/viehscheid.mp4">MP4-Datei herunterladen</a></p> -->
            </video>
            <figcaption>Viehscheid in Gunzesried (Allgäu)</figcaption>
          </figure>
      </div>

	  </main>