.twoColumns{ 
	container-type: inline-size;
	container-name: twoColumnsContainer;
	
}

.ticket-booking {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	_grid-template-rows: 2fr;
	grid-gap: 2rem;
	padding:var(--sectionPadding) 0px;
	
}



/*  Booking section   */
.booking{
	_padding:30px;
	display: flex;
	flex-flow: column nowrap;
	padding: 0rem;
	max-width:none;
	overflow: hidden;
}

.booking a{
	text-decoration:none;
}
.bookingHeader{
	
}
.bookingBoxHeadline {
	font-size: clamp(2rem, 3.5vw, 5rem);
	font-weight:800;
	text-decoration:none;
	line-height:1em;
	margin-top:0px;
}
.bookingBoxSubHeadline {
	font-size: var(--bookingBoxSubHeadline);
	font-weight:600;
	
}
.bookingContent{
	background-color: var(--backgroundGrey);
	padding:3em 1.5em;
	height: 100%;
	
}
.bookingContent .layerButtonContent .buttonLayerText {
	color:#000!important;
}
.layerButton.left.onGrey .layerButtonContent {
	background-color:oklch(from #eaeaea 80% c h)!important;
	_mix-blend-mode: multiply;
}
.bookingContent .layerButton {
	margin-top:5vh;
}
/*  ticket Charts  */
.ticketCharts{
	_container-name: ticketChartsContainer;
	_container-type: inline-size;
	_padding:30px;
	display: flex;
	flex-flow: column nowrap;
	max-width:none;
}
.ticketCharts * a {text-decoration:none;}
.ticketHeader {
	margin-bottom:var(--header-margin);
}
.ticketChartList {
}
.ticketChartElement {
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	padding:0 0 .3em 0;
	margin-bottom: .3em;
	border-bottom: 1px solid var(--lineColor);
	text-decoration:none;
	font-size:var(--titel-size);
	position:relative;
	
}

.ticketChartElement a:hover {
	color: #D51130;
}


.ticketChartNumber {
	width: 30px;
	height: 30px;
	aspect-ratio: 1/1;
	background-color: #D51130;
	align-content: center;
	color: #fff;
	text-align: center;
	font-weight: 700;
	border-radius: 100em;
	cursor: pointer;
	transition: all .2s ease-in-out;
	z-index: 1;
	display: inline-block;
	align-content: inherit;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	margin-right: 5px;
	position: absolute;
}

.ticketChartListName {
	font-weight: 500;
}

.ticketChartListName:hover {
	background-color: #fff;
}

.ticketChartListLink {
	margin-left: 40px;
}

@container twoColumnsContainer ( min-width: 200px ){
	.ticket-booking {
		display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 2fr;
	padding:30px;
	}
}




@container twoColumnsContainer ( min-width: 1100px ){
	.ticket-booking {
		grid-template-columns: 1fr 1fr;
	}
}
@container twoColumnsContainer ( min-width: 1919px ){
	.ticket-booking {
		padding: 30px 0px;
	}
}