/* Reset Styles: Standardisierung von Margen und Box-Model */
*,
*::before,
*::after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* General Settings  */
html {
  font-size: clamp(0.8rem, 0.5vw + 0.4rem, 1rem); /* Schriftgrößenanpassung entsprechend dem ursprünglichen Wert */
}

body {
  font-family: var(--primary-font);
  font-size: var(--font-size-base); /* Standard-Schriftgröße */
  background-color: var(--bg-color);
}

/* Sicherheit: horizontales Scrollen vermeiden, falls ein Element überläuft.
   (Besser: Ursachen beheben; diese Regel ist ein sanfter Schutz.) */
html, body { overflow-x: hidden; }

/* Sicherstellen, dass der Hintergrund des Dokuments korrekt gefüllt ist
   (verhindert sichtbare weiße Ränder, wenn ein Element leicht kleiner ist) */
html { background-color: var(--bg-color); }

/* Verhindere, dass Bilder oder iframes breiter als ihr Container werden */
img, picture, video, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

section {
  padding: 4rem 0; /* Anpassung der Abstände */
}

/* Überschriftstile */
.main-heading {
  display: block;
  font-size: var(--font-size-main-heading);
  text-transform: uppercase;
}

.sub-heading {
  font-size: var(--font-size-heading-sub); /* Kleinere Überschrift */
  font-weight: var(--font-weight-regular); /* Definiere einheitliches Gewicht */
}

.title {
  font-size: var(--font-size-title); /* Haupttitel */
  text-transform: uppercase;
  letter-spacing: 2px; /* Leicht verringertes Letter-Spacing */
  font-weight: var(--font-weight-bold);
  font-family: var(--secondary-font);
}

.subtitle {
  font-size: var(--font-size-subtitle); /* Untertitel */
  font-weight: var(--font-weight-regular);
  font-family: 'Frank Ruhl Libre', serif;
  margin-bottom: 1.5rem; /* Geringerer Abstand */
}

  /* ==============================
     Contact Section Headings
     ============================== */
     .section-head {
      text-align: center;
      margin-top: 4rem;
      margin-bottom: 6rem;
    }
    
    .section-head .main-heading {
      display: block;
      font-size: var(--font-size-main-heading);
      font-weight: var(--font-weight-bold);
      margin-bottom: 0.5rem;
    }
    
    .section-head .sub-heading {
      display: block;
      color: var(--secondary-color);
      font-size: var(--font-size-base);
      line-height: 1.4;
      max-width: 60ch;
      margin: 0.5rem auto 0 auto;
    }