.team { margin: 14rem 0; position: relative; }
@media screen and (width >= 1025px) { .team { margin: 18rem 0; } }
@media screen and (width >= 1729px) { .team { margin: 22rem 0; } }

.team__raster { flex-direction: column; display: flex; }
@media screen and (width >= 1025px) {
  .team__raster {
    display: grid;
    grid-template-columns: repeat(var(--raster-spalten), 1fr);
    gap: var(--raster-abstand);
    padding: 0;
  }
}

.team__text { flex-direction: column; gap: 3rem; display: flex; }
@media screen and (width >= 1025px) { .team__text { grid-column: 1 / span 7; } }
@media screen and (width >= 1441px) { .team__text { grid-column: 1 / span 14; } }

.team__titel { letter-spacing: -0.1rem; font: 800 2.6rem/102% Inter, sans-serif; }
@media screen and (width >= 1025px) { .team__titel { letter-spacing: -0.12rem; font: 800 3rem/102% Inter, sans-serif; } }
@media screen and (width >= 1441px) { .team__titel { letter-spacing: -0.14rem; font: 800 3.6rem/100% Inter, sans-serif; } }
@media screen and (width >= 1729px) { .team__titel { letter-spacing: -0.16rem; font: 800 4rem/100% Inter, sans-serif; } }

.team__lauf {
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  gap: 2rem;
  display: flex;
  overflow-x: auto;
  z-index: 2;
  margin-top: 8rem;
  position: relative;
  padding-left: .8rem;
  padding-right: .8rem;
}
.team__lauf::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) {
  .team__lauf { cursor: grab; -webkit-user-select: none; user-select: none; }
  .team__lauf * { cursor: grab; }
  .team__lauf:active, .team__lauf:active * { cursor: grabbing; }
  .team__lauf .mitkarte__knopf, .team__lauf .mitkarte__knopf * { cursor: pointer; }
}
.team__lauf.wird-gezogen { scroll-snap-type: none; scroll-behavior: auto; }
@media screen and (width <= 1024px) { .team__lauf { scroll-snap-type: x mandatory; } }
@media screen and (width >= 1025px) {
  .team__lauf {
    grid-column: 1 / -1;
    min-width: 0;
    padding-bottom: 2rem;
    padding-left:  max(.8rem, calc((100% - var(--behaelter-breite)) / 2));
    padding-right: max(.8rem, calc((100% - var(--behaelter-breite)) / 2));
  }
}

.team__kartenhuelle {
  flex: none;
  width: calc(100vw - 4rem);
  display: flex;
  height: auto;
}
@media screen and (width <= 1024px) { .team__kartenhuelle { max-width: 40rem; scroll-snap-align: center; } }
@media screen and (width >= 1025px) { .team__kartenhuelle { scroll-snap-align: none; } }
@media screen and (width >= 1025px) { .team__kartenhuelle { width: 46rem; } }
@media screen and (width >= 1441px) { .team__kartenhuelle { width: 51rem; } }
@media screen and (width >= 1729px) { .team__kartenhuelle { width: 56rem; } }

.team__navhuelle { width: 100%; display: flex; position: absolute; top: 100%; left: 0; }
.team__navhuelle .behaelter { display: flex; }
.team__nav {
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 40px;
  display: flex;
}
.team__punkt {
  appearance: none;
  background-color: var(--farbe-text-blass);
  border: 0;
  border-radius: 4px;
  width: 8px; height: 8px;
  margin: 0; padding: 0;
  display: block;
  cursor: pointer;
  transition: background-color var(--dauer-3) var(--kurve-weich);
}
.team__punkt.ist-aktiv { background-color: var(--farbe-tinte); }