/* Styling für die Datenfelder */
.daten-fakten {
  position: relative;
  margin-bottom: 1.875rem;
}

.coordinates {
  position: absolute;
  left: auto;
  right: 10%;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 10vw;
  font-weight: var(--font-weight-heading);
  line-height: 1;
  opacity: 0.05;
  text-align: right;
}

.daten {
  margin-bottom: 120px;
  padding: 2.5rem;
  background-color: var(--background-04);
  position: relative;
}

.daten .inner-wrap {
  display: grid;
  grid-template-columns: repeat(4, 25%);
}

.data-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--foreground-01);
}

.data-item .label {
  font-size: calc(var(--body-text-size) * 1.25);
}

.daten .value {
  font-weight: var(--font-weight-heading);
  font-size: var(--headline-m);
  position: relative;
}

/* Layout für die Flexbox */
.einwohner-gemeinderat {
  display: flex;
  justify-content: space-between;
  margin-top: 1.25rem;
}

.einwohner-grid,
.gemeinderat-grid {
  width: 48%;
}

.einwohner-grid h4,
.gemeinderat-grid h4 {
  font-size: var(--headline-xs);
  color: var(--foreground-01);
  margin-bottom: 2.5rem;
}

/* Styling für Tabellen */
.ortsteil-tabelle table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

/* Grundstyle für die Tabelle */
.ortsteil-tabelle th,
.ortsteil-tabelle td {
  padding: 1rem;
  text-align: left;
}

/* Grundstyle für die Tabelle */
.ortsteil-tabelle th,
.ortsteil-tabelle td {
  padding: 1rem;
  text-align: left;
}

/* Stil für die Kopfzeilen */
.ortsteil-tabelle th {
  background-color: var(--background-04);
  color: var(--foreground-05);
  font-weight: var(--font-weight-heading);
}

/* Hintergrundfarbe für die Zellen */
.ortsteil-tabelle td {
  background-color: transparent;
  color: var(--foreground-02);
}

/* Abwechselnde Hintergrundfarben für Zeilen */
.ortsteil-tabelle tr:nth-child(odd) {
  background-color: var(--background-04);
}

.ortsteil-tabelle tr:nth-child(even) {
  background-color: var(--background-05);
}

/*MEDIA QUERIES*/

@media (max-width: 992px) {
  .einwohner-gemeinderat {
    flex-direction: column;
  }

  .einwohner-grid,
  .gemeinderat-grid {
    width: 100%;
  }

  .gemeinderat-grid {
    margin-top: 3.125rem;
  }

  .coordinates {
    font-size: 12vw;
  }
}

@media (max-width: 850px) {
  .daten .inner-wrap {
    grid-template-columns: repeat(2, 50%);
    row-gap: 1.875rem;
  }

  .coordinates {
    width: 100%;
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%);
    text-align: center;
  }
}

@media (max-width: 600px) {
  .daten .inner-wrap {
    grid-template-columns: repeat(1, 100%);
  }

  .data-item {
    align-items: center;
  }
}