@media screen and (max-width: 768px) {


    h1 {
        letter-spacing: 3px;
    }

    h2 {
        font-family: var(--body-font), sans-serif;
        font-size: 2.15rem;
        line-height: 1.1;
        font-weight: 500;
    }

    h2.medium {
        font-family: var(--body-font), sans-serif;
        font-size: 2rem;
        line-height: clamp(1.35rem, 1.5rem, 1.75rem);
        font-weight: 500;
    }

   h2.big {
      font-size: 2.5rem;
   }

   h2.extrabig {
       font-size: 2.5rem;
   }

   h3 {
      font-size: 1.25rem;
      line-height: 1.5;
   }

    p {
        font-family: var(--body-font), sans-serif;
        font-size: 1rem;
        line-height: 1.75rem;
        letter-spacing: 1px;
        font-weight: 400;
        color: var(--text-color);
    }

  ul.workpiece li {
      font-size: 0.8rem;
      line-height: 1.15rem;
   }

    .container-text {
        width: 80%;
    }

  .container-image .media-layer video {
      height: 100svh;
      object-fit: cover;
  }

   .container-flex {
      max-width: 600px;
      margin: 0 auto;
      flex-direction: column;
      justify-content: center;
   }

   .container-flex-text {
      width: 80%;
   }

   .container-flex-column {
      width: 80%;
       flex-direction: column;
   }

   /* Hintergrund-Panel bleibt 96vw breit (wie das Bild) ... */
   .container-flex:has(> .container-flex-column.drehtechnik),
   .container-flex:has(> .container-flex-column.fraestechnik),
   .container-flex:has(> .container-flex-column.hochglanz) {
      max-width: 96vw;
      margin-left: auto;
      margin-right: auto;
   }

   .container-flex-column.drehtechnik,   .container-flex-column.fraestechnik,   .container-flex-column.hochglanz {
       width: 100%;
       padding-left: 0;
       padding-right: 0;
   }

   /* ... der Inhalt (h2 + Listen) nimmt die Breite der übrigen Textelemente an
      (80%, gedeckelt auf 480px = 80% von 600px), zentriert im Panel. */
   .container-flex-column.drehtechnik > .column,
   .container-flex-column.fraestechnik > .column,
   .container-flex-column.hochglanz > .column {
      width: 80%;
      max-width: 480px;
      margin-left: auto;
      margin-right: auto;
   }

   .container-flex-image {
       width: 100%;
   }

    .container-flex-text h2 {
        width: 90%;
    }

   .container-flex-text h3 {
      width: 90%;
   }

   .container-flex-text p {
      width: 90%;
   }

   .main__container-text h2 {
      line-height: 1;
   }

   .main__container-text h3 {
      font-size: 1rem;
      line-height: 1.1rem;
   }

   .main__container-text p {
      font-size: 0.9rem;
      line-height: 1.1rem;
      padding-bottom: 2rem;
   }

   .main__container-overlay {
      height: 60%;
   }

   .main__container-logo img {
      width: 80px;
   }

   .main__container-logo button {
      width: 120px;
      height: 30px;
   }

   .container-image-content.bottom {
      top: 60%;
   }

   .container-image-content h2 {
      width: 100%;
      font-size: 1.65rem;
      line-height: 1.75rem;
   }

   .container-image-content h3 {
      font-size: 1rem;
      line-height: 1.1rem;
   }

   .table-flex {
      flex-direction: column;
      width: 80%;
   }

   .table-flex-text {
      width: 100%;
   }

    .history__timeline {
        width: 80%;
    }

}