::selection {
  color: white !important;
  background: black !important;
}

/* Container */
.container {
  width: 100%;
  margin-inline: auto;
  padding: var(--spacing-6) var(--spacing-3) var(--spacing-6);
  transition: max-width 200ms;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: 1440px;
  }
}

@media (width < 768px) {
  .container {
    padding: var(--spacing-7) var(--spacing-3);
  }
}

.heading {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  margin-bottom: var(--spacing-6);
  margin-top:0;
}

/* Button Styles */
.btn {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-3) var(--spacing-5);
  background-color: var(--color-primary);
  color: var(--color-surface);
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.btn__icon {
  margin-left: var(--spacing-2);
}

.btn:hover {
  background-color: var(--color-primary-dark);
}

.btn--arrow-right {
  margin-left: var(--spacing-2);
}

.btn__mobile {
  display: none;
}

.btn__icon {
  margin-left: var(--spacing-2);
}

.btn__icon svg {
  width: 0.7rem;
  height: 0.7rem;
}

@media (max-width: 768px) {
  .btn {
    padding: var(--spacing-3);
  }
  .btn__mobile {
    display: inline-flex;
    align-items: center;
    max-width: 75%;
    margin-top: var(--spacing-4);
  }

  .heading {
    margin-bottom: var(--spacing-3);
  }
}

.section {
  margin-bottom: var(--spacing-8);
}

@media (max-width: 768px) {
  .section {
    margin-bottom: var(--spacing-5);
  }
}

/* Full Width Section Styles */
.section-full-width {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Farbvarianten */
.section-full-width--primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.section-full-width--light {
  background-color: var(--color-surface-light);
}

/* Inner Container für Content-Begrenzung */
.section-full-width__inner {
  max-width: var(--container-width, 1440px);
  margin: 0 auto;
  padding: var(--spacing-8) var(--spacing-3);
}

@media (max-width: 768px) {
  .section-full-width__inner {
    padding: var(--spacing-6) var(--spacing-3);
  }
}

/* POSTS */

.post__content p {
  margin-bottom: var(--spacing-3);
}