header {
  background-color: oklch(65.695% 0.09493 168.846);
}

.align {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.container-spacing {
  padding: 2rem 3rem;
}

@media (width <= 30rem) {
  .primary-navigation {
    justify-content: center;
    padding: 1rem 2rem;

    ul {
      display: none;
    }
  }
}

.hero-background,
.hero-curve {
  position: absolute;
}

.hero {
  position: relative;
  block-size: calc(clamp(25rem, 23.2143rem + 8.9286vw, 31.25rem) + 5rem);
  overflow: hidden;
}

.hero-curve {
  position: absolute;
  scale: 600% 1;
  block-size: calc(clamp(25rem, 23.2143rem + 8.9286vw, 31.25rem) + 5rem);
  animation: hero-curve-size 1.5s ease-in-out forwards;
  anchor-name: --hero-curve;
}

.hero-background {
  inline-size: 100%;
  object-fit: cover;
  padding-inline-start: 15rem;
  block-size: clamp(25rem, 23.2143rem + 8.9286vw, 31.25rem);
}

.spinner {
  opacity: 0;
  position: absolute;
  background-color: oklch(65.695% 0.09493 168.846);
  padding: 1rem;
  display: grid;
  place-content: center;
  border-radius: calc(1px * infinity);
  /* https://developer.chrome.com/blog/anchor-positioning-api?hl=de */
  position-anchor: --hero-curve;
  left: calc(anchor(right) - 13rem);
  bottom: calc(anchor(bottom) + -13rem);
  animation: fade-up 3s ease-in-out forwards;

  & > img {
    place-self: center;
  }

  & > * {
    /* https://web.dev/articles/6-css-snippets-every-front-end-developer-should-know-in-2023#3_grid_pile */
    grid-area: 1/1;
  }
}

.rotating-text {
  animation: infinite-rotate 3s infinite linear;
}

.highlights {
  padding: 2rem;
}

h2 {
  font-size: 3rem;
  color: oklch(65.695% 0.09493 168.846);
  text-align: center;
}

p {
  text-align: center;
}

@keyframes hero-curve-size {
  50% {
    scale: 200% 1;
  }

  60% {
    scale: 200% 1;
  }

  100% {
    scale: 100% 1;
  }
}

@keyframes fade-up {
  70% {
    opacity: 0;
    bottom: calc(anchor(bottom) + -13rem);
  }
  100% {
    opacity: 1;
    bottom: calc(anchor(bottom) + 3rem);
  }
}

@keyframes infinite-rotate {
  from {
    rotate: 0;
  }
  to {
    rotate: 1turn;
  }
}

/* ------------------------- nav links hover */
a[href="#highlights"] {
  position: relative;

  &:where(:hover, :focus-visible)::after {
    content: "";
    display: block;
    position: absolute;
    top: 70%;
    left: 0;
    width: 110%;
    height: 12px;
    background-image: url(../assets/highlight-link-hover.svg);
    background-size: 100% 100%;
    overflow: hidden; /* ← das hier */
  }
}

/*--------------------------*/
.carousel-container {
  position: relative;
  max-inline-size: 70rem;
  inline-size: 100%;
  height: 30rem;
  display: flex;
  justify-content: center;
  align-items: end;
  justify-self: center;

  overflow: hidden;

  input {
    z-index: 2;
  }
}

.image-slider-wrapper {
  z-index: 1;
  width: 400%;
  height: 100%;

  position: absolute;
  display: flex;

  transition: all 1s ease-in-out;
}

.slide {
  inline-size: calc(100% / 4);
  height: 100%;
  object-fit: cover;
}

.carousel-container input[value="one"]:checked ~ .image-slider-wrapper {
  transform: translateX(calc(150% / 4));
}

.carousel-container input[value="two"]:checked ~ .image-slider-wrapper {
  transform: translateX(calc(50% / 4));
}

.carousel-container input[value="three"]:checked ~ .image-slider-wrapper {
  transform: translate(calc(-50% / 4));
}

.carousel-container input[value="four"]:checked ~ .image-slider-wrapper {
  transform: translate(calc(-150% / 4));
}