#header {
     background: url("../../images/redstone.webp") no-repeat center;
     min-width: 100%;
     min-height: 400px;
     height: 30vh;
     background-size: cover;
     z-index: 0;
     display: flex;
     align-items: center;
     background-attachment: scroll;
 }

 /* Contacts-Section: Grundlayout */
 #contacts .content {
     display: flex;
     flex-direction: column;
     /* untereinander */
     align-items: flex-start;
     justify-content: flex-start;
     gap: 32px;
     /* ⬅ Abstand zwischen den Blöcken (p, Folia-Block, nächste h2, …) */
     height: auto;
     padding: 80px 150px;
 }

 /* Folia-Block: Text links, Bild rechts */
 #contacts .folia-layout {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 32px;
     /* ⬅ Abstand zwischen Text und Bild */
     width: 100%;
 }

 /* Elemente im Textblock vertikal mit Abstand */
 #contacts .folia-text {
     display: flex;
     flex-direction: column;
     gap: 24px;
     /* ⬅ Abstand zwischen h2 und dem Folia-Text */
     flex: 1 1 60%;
 }

 /* Überschriften-Abstand ggf. noch etwas anpassen */
 #contacts .folia-text .section-title {
     margin-bottom: 0.5rem;
     /* global sind 2.5rem, hier etwas kompakter möglich */
 }

 /* Beschreibungstexte im Contacts-Bereich */
 #contacts .description {
     width: 100%;
     margin: 0 0 0.75rem;
     /* ⬅ Abstand NACH unten – hilft auch überlappungsfrei zum nächsten Element */
 }

 /* Bild rechts */
 #contacts .folia-image {
     flex: 0 0 40%;
     max-width: 400px;
     width: 100%;
     height: auto;
     display: block;
     border-radius: 12px;
 }

 /* --- Responsive: unter 768px alles untereinander --- */
 @media (max-width: 768px) {
     #contacts .content {
         padding: 60px 20px;
     }

     #contacts .folia-layout {
         flex-direction: column;
     }

     #contacts .folia-image {
         max-width: 100%;
         margin-top: 10px;
     }
 }

 /* Tablet: Bild etwas kleiner */
 @media (max-width: 1024px) {
     #contacts .folia-image {
         max-width: 300px;
         /* statt 400px */
     }
 }

 /* Tablet + Mobile: Bild unter dem Text */
 @media (max-width: 1024px) {
     #contacts .folia-layout {
         flex-direction: column;
         /* ⬅ ab hier untereinander */
     }

     #contacts .folia-image {
         max-width: 260px;
         /* etwas kleiner für Tablet */
         width: auto;
         margin-top: 16px;
         margin-left: auto;
         margin-right: auto;
         /* zentriert */
     }
 }

 /* Optional: spezielle Anpassungen nur für kleine Phones */
 @media (max-width: 768px) {
     #contacts .content {
         padding: 60px 20px;
     }

     /* Wenn du hier andere Werte brauchst, kannst du sie
     nochmal überschreiben – z.B. noch kleineres Logo */
     #contacts .folia-image {
         max-width: 220px;
     }
 }