.navbar {
  transform: translate(-50%, 0);
}
@media screen and (max-width: 1024px) {
  .navbar {
    transform: translate(0, 0);
  }
}

.template--car {
  max-width: 1440px;
  margin: 0 auto;
  padding: 112px 64px;
}
.template--car[data-brand=BMW] .car .car__sidebar--container .car__sidebar .car__informations .car__information.car__information--price .car__key, .template--car[data-brand=MINI] .car .car__sidebar--container .car__sidebar .car__informations .car__information.car__information--price .car__key {
  color: var(--white);
}
.template--car .car {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(12, 1fr);
  gap: 48px;
}
.template--car .car .car__data {
  grid-column: 1/9;
  grid-row: 1/2;
}
.template--car .car .car__data .car__hero {
  position: relative;
  margin: 0 0 32px 0;
}
.template--car .car .car__data .car__hero > img {
  width: 100%;
  opacity: 1;
}
.template--car .car .car__data .car__hero::after {
  content: url("../../../media/icn/icon_magnify.svg");
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: var(--black_50);
  opacity: 0;
  transition: opacity 350ms cubic-bezier(0.21, 0.4, 0.48, 1);
}
.template--car .car .car__data .car__hero:hover, .template--car .car .car__data .car__hero:focus-visible {
  cursor: pointer;
}
.template--car .car .car__data .car__hero:hover::after, .template--car .car .car__data .car__hero:focus-visible::after {
  opacity: 1;
}
.template--car .car .car__data .car__placeholder {
  position: relative;
  margin: 0 0 32px 0;
}
.template--car .car .car__data .car__placeholder > img {
  width: 100%;
  opacity: 1;
}
.template--car .car .car__data .car__intro {
  color: var(--grey_900);
  margin: 16px 0 24px 0;
}
.template--car .car .car__data .car__headline {
  margin: 0 0 16px 0;
}
.template--car .car .car__data .car__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 32px 0;
}
.template--car .car .car__data .car__pills .car__pill {
  color: var(--white);
  background-color: var(--black);
  padding: 2px 12px;
  border-radius: 50px;
  text-wrap: nowrap;
}
.template--car .car .car__data .car__gallery {
  grid-column: span 12;
}
.template--car .car .car__data .car__gallery .car__images.car__images--visible {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}
.template--car .car .car__data .car__gallery .car__images.car__images--visible .car__image {
  position: relative;
  grid-row: 1/2;
}
.template--car .car .car__data .car__gallery .car__images.car__images--visible .car__image:nth-child(1) {
  grid-column: 1/2;
  grid-row: 1/2;
}
.template--car .car .car__data .car__gallery .car__images.car__images--visible .car__image:nth-child(2) {
  grid-column: 2/3;
  grid-row: 1/2;
}
.template--car .car .car__data .car__gallery .car__images.car__images--visible .car__image:nth-child(3) {
  grid-column: 3/4;
  grid-row: 1/2;
}
.template--car .car .car__data .car__gallery .car__images.car__images--visible .car__image::after {
  content: url("../../../media/icn/icon_magnify.svg");
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: var(--black_50);
  opacity: 0;
  transition: opacity 350ms cubic-bezier(0.21, 0.4, 0.48, 1);
}
.template--car .car .car__data .car__gallery .car__images.car__images--visible .car__image:hover, .template--car .car .car__data .car__gallery .car__images.car__images--visible .car__image:focus-within {
  cursor: pointer;
}
.template--car .car .car__data .car__gallery .car__images.car__images--visible .car__image:hover::after, .template--car .car .car__data .car__gallery .car__images.car__images--visible .car__image:focus-within::after {
  opacity: 1;
}
.template--car .car .car__data .car__gallery .car__images.car__images--visible .car__image.no-after::after {
  height: 0;
  opacity: 0;
}
.template--car .car .car__data .car__gallery .car__images.car__images--invisible {
  height: 0;
  overflow: hidden;
  width: calc(100% + 4px);
  margin-left: -2px;
  transition: height 350ms cubic-bezier(0.21, 0.4, 0.48, 1);
}
.template--car .car .car__data .car__gallery .car__images.car__images--invisible .car__drawer {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  padding: 16px 2px 2px 2px;
}
.template--car .car .car__data .car__gallery .car__images.car__images--invisible .car__drawer .car__image {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 350ms cubic-bezier(0.21, 0.4, 0.48, 1), transform 350ms cubic-bezier(0.21, 0.4, 0.48, 1);
}
.template--car .car .car__data .car__gallery .car__images.car__images--invisible .car__drawer .car__image::after {
  content: url("../../../media/icn/icon_magnify.svg");
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: var(--black_50);
  opacity: 0;
  transition: opacity 350ms cubic-bezier(0.21, 0.4, 0.48, 1);
}
.template--car .car .car__data .car__gallery .car__images.car__images--invisible .car__drawer .car__image:hover, .template--car .car .car__data .car__gallery .car__images.car__images--invisible .car__drawer .car__image:focus-within {
  cursor: pointer;
}
.template--car .car .car__data .car__gallery .car__images.car__images--invisible .car__drawer .car__image:hover::after, .template--car .car .car__data .car__gallery .car__images.car__images--invisible .car__drawer .car__image:focus-within::after {
  opacity: 1;
}
.template--car .car .car__data .car__gallery .car__images.car__images--invisible .car__drawer .car__image.no-after::after {
  height: 0;
  opacity: 0;
}
.template--car .car .car__data .car__overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--black_85);
  z-index: 100000;
  opacity: 0;
  padding: 88px;
  transform: translateX(-100vw);
  transition: opacity 350ms ease;
}
.template--car .car .car__data .car__overlay .overlay__control {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 50%;
  width: 64px;
  height: 64px;
  cursor: pointer;
  transform: translateY(50%);
}
.template--car .car .car__data .car__overlay .overlay__control > svg {
  width: 32px;
}
.template--car .car .car__data .car__overlay .overlay__control > svg > path {
  fill: var(--white);
}
.template--car .car .car__data .car__overlay .overlay__control.overlay__control--prev {
  left: 24px;
  transform: translateY(50%) rotate(180deg);
}
.template--car .car .car__data .car__overlay .overlay__control.overlay__control--next {
  right: 24px;
}
.template--car .car .car__data .car__overlay .overlay__image {
  user-select: none;
}
.template--car .car .car__data .car__overlay .overlay__close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 24px;
  right: 24px;
  width: 64px;
  height: 64px;
  cursor: pointer;
}
.template--car .car .car__data .car__overlay .overlay__close > svg {
  width: 32px;
}
.template--car .car .car__data .car__overlay .overlay__close > svg > path {
  fill: var(--white);
}
.template--car .car .car__data .car__overlay.car__overlay--visible {
  opacity: 1;
  transform: translateX(0);
}
.template--car .car .car__data .car__emission--mobile {
  display: none;
  margin: 0;
}
.template--car .car .car__data .co2__efficiency--mobile {
  display: none;
}
.template--car .car .car__data .car__loadmore {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  grid-column: 3/4;
  grid-row: 1/2;
  gap: 8px;
  color: var(--white);
  cursor: pointer;
  background-color: var(--black_50);
  opacity: 0;
  height: 0;
  transition: opacity 345ms cubic-bezier(0.21, 0.4, 0.48, 1), height 5ms ease 325ms;
}
.template--car .car .car__data .car__loadmore.visible {
  opacity: 1;
  height: 100%;
  transition: height 5ms ease, opacity 345ms cubic-bezier(0.21, 0.4, 0.48, 1) 5ms;
}
.template--car .car .car__data .car__loadmore .car__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 100%;
  border: 1px solid var(--white);
}
.template--car .car .car__data .car__loadmore .car__circle svg {
  transition: transform 350ms cubic-bezier(0.21, 0.4, 0.48, 1);
}
.template--car .car .car__data .car__loadmore .car__imagecount > span:nth-child(1) {
  color: var(--turquoise);
}
.template--car .car .car__data .car__loadmore .car__imagecount span + span {
  margin: 0 0 0 2px;
}
.template--car .car .car__data .car__loadmore .car__imagecount.black {
  color: var(--primary_black);
}
.template--car .car .car__data .car__loadmore:hover .car__circle svg {
  transform: scale(1.25);
}
.template--car .car .car__data .car__loadless {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.template--car .car .car__data .car__loadless:focus:not(:focus-visible) {
  outline: none;
}
.template--car .car .car__data .car__loadless svg {
  transition: transform 350ms cubic-bezier(0.21, 0.4, 0.48, 1);
}
.template--car .car .car__data .car__loadless:hover {
  cursor: pointer;
}
.template--car .car .car__data .car__loadless:hover svg {
  transform: translateX(-4px);
}
.template--car .car .car__details {
  grid-column: 1/9;
  grid-row: 2/3;
  display: grid;
  align-items: start;
  gap: 24px;
  grid-template-columns: repeat(4, 1fr);
}
.template--car .car .car__details .car__col {
  grid-column: span 12;
  padding: 16px;
  background-color: var(--grey_100);
}
.template--car .car .car__details .car__col.no-bgc {
  background-color: transparent;
}
.template--car .car .car__details .car__col .car__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.template--car .car .car__details:not(.car__details--bmw) .car__col.car__col--features {
  order: 2;
}
.template--car .car .car__details:not(.car__details--bmw) .car__col.car__col--interior {
  order: 1;
}
.template--car .car .car__details:not(.car__details--bmw) .car__col.car__col--form {
  order: 3;
}
.template--car .car .form__headline {
  margin-bottom: 48px;
}
.template--car .car .car__sidebar--container {
  grid-column: 9/13;
  position: sticky;
  top: 112px;
}
.template--car .car .car__sidebar--container .car__sidebar {
  padding: 32px;
  margin-bottom: 18px;
  background-color: var(--black);
}
.template--car .car .car__sidebar--container .car__sidebar .car__informations .button {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 12px 0;
}
.template--car .car .car__sidebar--container .car__sidebar .car__informations .button--loading .loader {
  width: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 4px solid var(--black);
  transition: border-color 350ms cubic-bezier(0.21, 0.4, 0.48, 1);
  animation: l20-1 1.6s infinite linear alternate, l20-2 3.2s infinite linear;
}
@keyframes l20-1 {
  0% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }
  12.5% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
  }
  25% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
  }
  50% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
  }
  62.5% {
    clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
  }
  75% {
    clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
  }
  100% {
    clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
  }
}
@keyframes l20-2 {
  0% {
    transform: scaleY(1) rotate(0deg);
  }
  49.99% {
    transform: scaleY(1) rotate(135deg);
  }
  50% {
    transform: scaleY(-1) rotate(0deg);
  }
  100% {
    transform: scaleY(-1) rotate(-135deg);
  }
}
.template--car .car .car__sidebar--container .car__sidebar .car__informations .button--loading:hover .loader {
  border-color: var(--white);
}
.template--car .car .car__sidebar--container .car__sidebar .car__informations .button.first {
  margin: 0 0 32px 0;
}
.template--car .car .car__sidebar--container .car__sidebar .car__informations .button[data-overlay=testdrive] {
  margin: 0 0 32px 0;
}
.template--car .car .car__sidebar--container .car__sidebar .car__informations .button:disabled, .template--car .car .car__sidebar--container .car__sidebar .car__informations .button[disabled=true] {
  opacity: 0.5;
  pointer-events: none;
}
.template--car .car .car__sidebar--container .car__sidebar .car__informations .button:nth-last-of-type() {
  margin: 0;
}
.template--car .car .car__sidebar--container .car__sidebar .car__informations .car__information {
  color: var(--white);
  padding: 8px 0;
  border-bottom: 1px solid var(--grey_900);
}
.template--car .car .car__sidebar--container .car__sidebar .car__informations .car__information .car__key {
  color: var(--grey_500);
  margin: 0 0 8px 0;
}
.template--car .car .car__sidebar--container .car__sidebar .car__informations .car__information .car__value {
  display: block;
  color: var(--white);
}
.template--car .car .car__sidebar--container .car__sidebar .car__informations .car__information .car__value .price--old {
  position: relative;
}
.template--car .car .car__sidebar--container .car__sidebar .car__informations .car__information .car__value .price--old:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 50%;
  width: 100%;
  height: 3px;
  transform: translateY(50%) rotate(12deg);
  background-color: var(--error);
}
.template--car .car .car__sidebar--container .car__sidebar .car__informations .car__information:nth-last-child(1) {
  margin: 0 0 32px 0;
}
.template--car .car .car__sidebar--container .car__sidebar .car__informations .car__information.car__information--price {
  margin-bottom: 32px;
  border: none;
}
.template--car .car .car__sidebar--container .car__sidebar .car__informations .car__information.car__information--price .car__key {
  color: var(--turquoise);
}
.template--car .car .car__sidebar--container .car__sidebar .car__informations .car__export-msg {
  transition: color 350ms cubic-bezier(0.21, 0.4, 0.48, 1), height 350ms cubic-bezier(0.21, 0.4, 0.48, 1);
}
.template--car .car .car__sidebar--container .car__sidebar .car__informations .car__export-msg--loading {
  color: var(--white);
}
.template--car .car .car__sidebar--container .car__sidebar .car__informations .car__export-msg--error {
  color: var(--error);
}
.template--car .car .car__sidebar--container .car__sidebar .car__informations .car__export-msg--success {
  color: var(--success);
}
.template--car .car .car__sidebar--container .car__sidebar .car__informations .show__more {
  display: none;
}
.template--car .car .car__wltp {
  margin: 0 0 18px 0;
}
.template--car .car .car__wltp.car__wltp--mobile {
  opacity: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
}
.template--car .car .car__wltp .wltp .wltp__headline {
  margin: 0 0 16px 0;
}
.template--car .car .car__wltp .wltp .wltp__model {
  margin: 0 0 16px 0;
}
.template--car .car .car__wltp .wltp .wltp__data {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.template--car .car .car__wltp .wltp .wltp__data .wltp__spacer {
  height: 1px;
  background-color: var(--grey_400);
}
.template--car .car .car__wltp .wltp .wltp__data .wltp__entry {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, 1fr);
}
.template--car .car .car__wltp .wltp .wltp__efficiency.wltp__efficiency--weighted {
  position: relative;
}
.template--car .car .car__wltp .wltp .wltp__efficiency.wltp__efficiency--weighted img:nth-child(1) {
  width: 75%;
}
.template--car .car .car__wltp .wltp .wltp__efficiency.wltp__efficiency--weighted img:nth-child(2) {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  height: 100%;
}
.template--car .car .uvp-hint {
  display: block;
}
.template--car .car .uvp-hint--desktop {
  opacity: 1;
  height: auto;
  margin: 0 0 18px 0;
  overflow: visible;
}
.template--car .car .uvp-hint--mobile {
  display: none;
  opacity: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
}

@media screen and (max-width: 1024px) {
  .template--car {
    padding: 16px;
  }
  .template--car .car {
    display: flex;
    flex-direction: column;
  }
  .template--car .car .car__data {
    max-width: 100%;
  }
  .template--car .car .car__data .car__overlay {
    padding: 14px;
  }
  .template--car .car .car__data .car__overlay .overlay__control.overlay__control--prev {
    left: 4px;
  }
  .template--car .car .car__data .car__overlay .overlay__control.overlay__control--next {
    right: 4px;
  }
  .template--car .car .car__data .car__hero {
    margin: 0 0 8px 0;
  }
  .template--car .car .car__data .car__gallery {
    grid-column: span 12;
    margin-bottom: 12px;
  }
  .template--car .car .car__data .car__gallery .car__images.car__images--visible {
    gap: 8px;
  }
  .template--car .car .car__data .car__gallery .car__loadmore {
    gap: 0;
  }
  .template--car .car .car__data .car__gallery .car__loadmore .car__circle {
    width: 32px;
    height: 32px;
  }
  .template--car .car .car__data .car__gallery .car__loadmore .car__circle svg {
    scale: 0.75;
  }
  .template--car .car .car__data .car__gallery .car__loadless {
    grid-column: 1/4;
    padding: 12px;
  }
  .template--car .car .car__data .car__gallery .car__loadless svg {
    rotate: 90deg;
  }
  .template--car .car .car__data .car__emission--mobile {
    display: block;
    margin-bottom: 12px;
  }
  .template--car .car .car__data .car__emission--mobile h3 {
    margin-bottom: 4px;
  }
  .template--car .car .car__data .co2__efficiency--mobile {
    display: block;
  }
  .template--car .car .car__details .car__col .car__list {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  .template--car .car .car__sidebar--container {
    width: 100vw;
    margin-left: -16px;
    margin-bottom: -72px;
    position: sticky;
    bottom: 0;
    left: 0;
  }
  .template--car .car .car__sidebar--container .car__sidebar {
    position: relative;
    border-radius: 12px 12px 0 0;
    padding: 12px;
    margin-bottom: 0;
    background-color: var(--black);
  }
  .template--car .car .car__sidebar--container .car__sidebar .car__informations .car__information {
    padding: 0;
  }
  .template--car .car .car__sidebar--container .car__sidebar .car__informations .car__information.car__information--price {
    margin: 0 0 16px 0;
  }
  .template--car .car .car__sidebar--container .car__sidebar .car__informations .car__information.car__information--price .car__value {
    line-height: 100%;
  }
  .template--car .car .car__sidebar--container .car__sidebar .car__informations .car__buttons {
    display: flex;
    gap: 16px;
  }
  .template--car .car .car__sidebar--container .car__sidebar .car__informations .car__buttons .button {
    padding: 16px;
    margin: 0;
  }
  .template--car .car .car__sidebar--container .car__sidebar .car__informations .other_buttons {
    height: 100%;
    max-height: 0;
    opacity: 0;
    margin: 0;
    pointer-events: none;
    transition: max-height 550ms cubic-bezier(0.21, 0.4, 0.48, 1), opacity 550ms cubic-bezier(0.21, 0.4, 0.48, 1), margin 550ms cubic-bezier(0.21, 0.4, 0.48, 1);
  }
  .template--car .car .car__sidebar--container .car__sidebar .car__informations .show__more {
    display: flex;
  }
  .template--car .car .car__sidebar--container .car__sidebar .car__informations--extended .car__information.car__information--price {
    max-height: 120px;
    opacity: 1;
  }
  .template--car .car .car__sidebar--container .car__sidebar .car__informations--extended .other_buttons {
    max-height: 320px;
    opacity: 1;
    margin: 12px 0 0 0;
  }
  .template--car .car .car__sidebar--container .car__sidebar .car__informations--extended .other_buttons {
    pointer-events: all;
  }
  .template--car .car .car__wltp.car__wltp--mobile {
    opacity: 1;
    height: auto;
    overflow: visible;
  }
  .template--car .car .car__wltp.car__wltp--desktop {
    opacity: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
  }
  .template--car .car .uvp-hint--desktop {
    opacity: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
  }
  .template--car .car .uvp-hint--mobile {
    display: block;
    opacity: 1;
    height: auto;
    margin: 0 0 18px 0;
    overflow: visible;
  }
}

/*# sourceMappingURL=car.css.map */