:root {
  --accent-color: #009cbe;
  --secondary-color: #b7e3ed;
  --background-dg-color: #535353;
  --background-color-lg-2: #30afca1c;
  --background-btn-lg-color: #f0f0f0;
  --text-color-dk: #000;
  --text-color-lg: #fff;
  --headline-color: #121212;
  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
}
/* Fonts */
body {
  font-size: calc(15px + 0.5vw);
  line-height: calc(22px + 0.7vw);
  overflow-x: hidden;
}
@font-face {
  font-family: "OpenSans Regular";
  src: url("/assets/fonts/OpenSans/OpenSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "OpenSans Bold";
  src: url("/assets/fonts/OpenSans/OpenSans-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "AntonSC";
  src: url("/assets/fonts/Anton_SC/AntonSC-Regular.ttf") format("truetype");
}
/* Hero */
.hero-overlay {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 10%;
  z-index: 2;
}
.hero-overlay h1 {
  font-family: AntonSC, sans-serif;
  font-size: 5rem;
  line-height: 125%;
  text-align: left;
  color: var(--text-color-lg);
}
.hero-overlay h1 span {
  color: var(--secondary-color);
}
/* End Hero */
/* Footer */
.footer-wrapper {
  background: var(--accent-color);
}
.footer-row-1,
.footer-row-2,
.footer-row-3 {
  font-family:
    OpenSans Regular,
    sans-serif;
  font-size: 0.9rem;
  color: var(--text-color-lg);
  line-height: 1.3rem;
}
.footer-row-1 span,
.footer-row-2 span,
.footer-row-3 span {
  font-family:
    OpenSans Bold,
    sans-serif;
}
.footer-row-1 a,
.footer-row-2 a,
.footer-row-3 a {
  font-family:
    OpenSans Regular,
    sans-serif;
  font-size: 0.9rem;
  color: var(--text-color-lg);
  line-height: 1.3rem;
}
.footer-row-1 a:hover,
.footer-row-2 a:hover,
.footer-row-3 a:hover {
  color: rgba(255, 255, 255, 0.7);
}
/* End Footer */
/* Content */
.content-rg p {
  font-family:
    OpenSans Regular,
    sans-serif;
  font-size: 2rem;
  color: var(--text-color-dk);
  text-align: center;
}
.content-rg h2 {
  font-family:
    OpenSans Bold,
    sans-serif;
  font-size: 2rem;
  color: var(--text-color-dk);
  text-align: center;
}
.background-lg-2 {
  background: var(--background-color-lg-2);
}
/* End Content */
/* Bild-Grid */
.img-grid {
  display: grid;
  gap: 25px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

/* Items placement (Desktop) */
.img-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
.img-2 {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
.img-3 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}
.img-4 {
  grid-column: 4 / 5;
  grid-row: 1 / 3;
}

/* Make images fill their cells */
.img {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive (Smartphone): 2 columns, 4 rows */
@media (max-width: 767px) {
  .img-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }

  .img-1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }
  .img-2 {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }
  .img-3 {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
  }
  .img-4 {
    grid-column: 2 / 3;
    grid-row: 3 / 5;
  }
}
/* End Bild-Grid */