/* timeline-process
---------------------------------------*/

:root {
  --tricks_content_width: 50%;
  --tricks_content_group_gap: 20rem;
}

@media (min-width: 1024px) {
  :root {
    --tricks_content_width_oversize: 5rem;
  }
}

@media (max-width: 1690px) {
  :root {
    --tricks_content_width: 50%;
  }
}

@media (min-width: 768px){
	.cg_item_inner {
	  width: calc(100% + (var(--tricks_content_width_oversize)));
	  margin-right: calc((var(--tricks_content_width_oversize)) * -1);
	}

	.tm_wrapper{
		width: calc(100% - (var(--tricks_content_width_oversize)));
	}
}


/* timeline tricks/lines
---------------------------------------*/

/*-- desktop --*/

.tricks_module {
  --tm-tick-h: 46px;
  --tm-major-h: 135px
}


.tricks_module .ticks-grafik {
  position: relative;
  width: 100%;
  pointer-events: none;

}

/* Major */
.tricks_module .ticks-grafik .tm-major {
  position: absolute;
  height: 10px;
  width: 100%;
  background: var(--tm-bgcolor_major);
}

.tricks_module .ticks-grafik .tm-major.tm-major--top {
  bottom: 0;
}

/* Child ticks */
.tricks_module .ticks-grafik .tm-tick {
  width: 50%;
  height: 5px;
	background-color: var(--tm-bgcolor_small);
}

.tm-mode-mobile .tm-major,
.tm-mode-mobile .tm-tick {
  top: var(--tm-y);
  left: var(--tm-x);
}


@media (max-width: 768px) {
  .ticks-grafik_wrapper {
    top: auto !important;
  }
}

@media (min-width: 768px) {
  .ticks-grafik_wrapper {
    height: var(--tricks_content_group_gap);
    width: 100%;
    position: absolute;
  }

  .tricks_module .ticks-grafik {
    height: var(--tm-tick-h);
    top: 50%;
    transform: translateY(-50%);
  }

  .tricks_module .ticks-grafik .ticks-layer {
    position: absolute;
    inset: 0;
  }

  /* Major */
  .tricks_module .ticks-grafik .tm-major {
    height: var(--tm-major-h);
  }

  /* Child ticks */
  .tricks_module .ticks-grafik .tm-tick {
    position: absolute;
    height: var(--tm-tick-h);
    background: rgba(255, 255, 255, .9);
  }
}


/*-- mobile --*/

.tricks_module.tm-mode-mobile .tm-major--mobile,
.tricks_module.tm-mode-mobile .tm-tick--mobile {
  top: calc(var(--tm-y) - (var(--tm-h) / 2));
  height: var(--tm-h);
  width: var(--tm-w);
}

.tricks_module.tm-mode-mobile .tm-major--mobile,
.tricks_module.tm-mode-mobile .tm-tick--mobile {
  top: calc(var(--tm-y) - (var(--tm-h) / 2));
  height: var(--tm-h);
}

.tricks_module.tm-mode-mobile .tm-major--mobile {
  width: 90%;
}

.tricks_module.tm-mode-mobile .tm-tick--mobile {
  width: 55%;
	background: var(--tm-bgcolor_small);
}

.cg_item_topline{
	line-height: 1;
}