.kp__headline {
	min-height: calc(var(--vh, 1vh) * 100);
}

.kp__download {
	display: flex;
	gap: 1em 0.5em;
	flex-wrap: wrap;
	justify-content: center;
	
	margin-top: 2em;
}


.kp__teaser {
	color: var(--color__yellow);
	font-family: var(--fontFamily2);
	font-size: var(--fontSize3);
	font-weight: 400;
}

.bPaths {
	grid-column:
	var(--wrapper__gridOffsetLeft) / var(--wrapper__gridOffsetRight);
	
	row-gap: calc(var(--wrapper__gridGap) * 2);
}

.bPaths > div {
	display: grid;
	grid-template-columns: 
		repeat(1, minmax(1em, 1fr));
	
	align-content: start; 
	gap: calc(var(--wrapper__gridGap) * 2);
}



.bikePath {
	display: none;
	flex-direction: column;
	overflow: hidden;
	
	border: 1px solid var(--color__silver--light);
	border-radius: var(--borderRadius1);
	text-decoration: none;
}

	.bikePath--active {
		display: flex;
	}

	.bikePath picture {
		overflow: hidden;
	}
	
	.bikePath img {
		transition: transform .3s ease-in-out;
	}
	
	.bikePath:hover img {
		transform: scale(1.2);
	}

.bikePath__info {
	flex: 1 1 auto;
	
	display: flex;
	flex-direction: column;
	padding: 1em;
	
	background-color: var(--color__silver--light);
	text-align: center;
	font-family: var(--fontFamily2);
}

	.bikePath__info p {
		flex: 1 1 auto;
	}


.bikePath__properties {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.5em;
	
	
	font-weight: 500;
}

.bikePath__property {
	display: flex;
	align-items: center;
	gap: 0.5em;
	flex: 0 0 auto;
}

	.bikePath__property > div {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2em;
		height: 2em;
		
		background-color: #fff;
		border: 2px solid var(--color__black);
		border-radius: 50%;
	}
	
	.bikePath__property .icon {
		font-size: 1.3em;
	}



.kp__stats {
	display: flex;
	align-items: flex-start;
	gap: 1em;
	
	font-family: var(--fontFamily2);
	font-size: 1em;
	line-height: 1.2;
}

.kp_stat {
	display: flex;
	flex-direction: column;
	align-items: center;
}

	.kp_stat strong {
		font-size: var(--fontSize2);
		font-weight: medium;
	}
	
	.kp_stat span {
		color: var(--color__yellow);
		width: min-content;
		text-align: center;
		font-weight: 500;
	}
	
	.kp_stat .icon {
		margin-top: 1rem;
		font-size: 2.5em;
	}



#btnFilterToggle .icon {
	font-size: 0.6em;
}

	#btnFilterToggle[aria-expanded="true"] .icon {
		transform: rotate(180deg);
	}


.bFilter {
	padding-bottom: 0;
}

.bFilter h2 {
	font-size: 1em;
}

.bFilter__groups {
	display: none;
	flex-direction: column;
}

	.bFilter__groups--active {
		display: flex;
	}
	
	.bFilter__group {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	
	.bFilter__group h3 {
		width: 6em;
		margin-bottom: 0.5em;
		font-size: 1em;
	}

	.bFilter__options {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5em;
		
		font-size: 0.8em;
	}





.bikePath__stats {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em 2em;
	flex-wrap: wrap;
	
	padding: 2em;
}

.bikePath__stat {
	font-family: var(--fontFamily2);
	text-align: center;
}

	.bikePath__stat div {
		margin-bottom: 0.5em;
		color: var(--color__red);
	}

.bike__map {
	grid-column: 1 / - 1; 
	padding: 0;
	margin-bottom: 2em;
}

	#bikeMap {
		height: 80vh;
		max-height: 70em;
	}



	
	.visit-theme {
		--ele-bg: var(--color__silver--light);
		--ele-sum-margin: 1em;
		font-family: var(--fontFamily1);
	}

	.visit-theme.elevation-control .area path.altitude,
	.visit-theme .legend-altitude rect.area {
		fill: var(--color__yellow);
	}
	
	.visit-theme .elevation-control .background {
		
	}


	.visit-theme.height-focus.circle-lower {
		fill: #fff; 
	}
	
	.visit-theme.elevation-detached {
		font-size: 1em;
		font-family: var(--fontFamily1);
	}
	
	.visit-theme .elevation-summary {
		margin: 0;
		padding: 1em;
		
		font-family: var(--fontFamily1);
		font-size: 1em;
		background-color: var(--color__silver--light);
	}
	
	.visit-theme .multiline-summary {
		display: flex;
		justify-content: center; 
		gap: 1em;
	}
	
	.visit-theme .multiline-summary > span {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.visit-theme .elevation-summary .summaryvalue {
		font-family: var(--fontFamily2);
	}
	
	#bikeMap .leaflet-control-layers {
		display: none !important; 
	}



.bike__description h2 {
	text-align: center;
}



.bWrap {
	text-align: center;
}

.bike__providers h2 {
	text-align: center;
}  

.bikeMapPopup {
	font-family: var(--fontFamily1);
	font-size: 1rem;
}

	
	.leaflet-container .bikeMapPopup a {
		color: #fff;
	}

	.bikeMapPopup a {
		font-family: var(--fontFamily2);
		text-decoration; none;
	}
	
	.bikeMapPopup strong {
		display: block;
		
		font-weight: 600;
		font-family: var(--fontFamily2);
		font-size: 1.2em;
		color: var(--color__red);
	}
	
	.bikeMapPopup__intro {
		margin: 0.5em 0;
	}
		
		.bikeMapPopup .leaflet-popup-content p {
			margin: 0;
		}
	
	.bikeMapPopup__city, 
	.bikeMapPopup__intro {
		font-size: 0.9em;
	}



.bike__favourite .addToFavourites {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2em;
}

.bike__filter {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 0.5em 1em;	
	padding: 1em;
}

	.bike__filter h2 {
		margin-bottom: 0.5em;
	}

	.bike__filter .b--ghost2 {
		background-color: #fff;
	}
	
	.bike__filter button {
		position: relative;
		
		display: flex;
		gap: 0.6em;
		align-items: baseline;
		text-align: left;
		
		accent-color: var(--accentColor);
	}
	
	.bike__filter button label:after {
		position: absolute;
		inset: 0;
		
		content: "";
	}
	
	.bike__filter .b--ghost2:hover {
		color: var(--accentColor);
	}
	
@media (max-width: 65em) {	 
	.bike__filter button + button {
		margin-top: 0.3em;
	}	
	
	.bike__filter .b--ghost2 {
		padding: 0;
		border: 0;   
	}
	
	
}



@media (min-width: 48em) {	
	.bPaths > * {
		grid-column: var(--wrapper__gridOffset);
	}
	
	.bPaths > div {
		grid-template-columns: 
			repeat(2, minmax(1em, 1fr));
	}
	
	.bikePath__info {
		padding: 2em;
	}
	
	.bikePath__stats {
		gap: 1em 4em;
	}
	
	.bikePath__stat {
		position: relative;
	}
	
	.bikePath__stat + .bikePath__stat:after {
		position: absolute;
		left: -2em;
		top: 0;
		width: 1px;
		height: 100%;
		
		content: "";
		background-color: var(--color__black);
	}
	
	
	
	.bFilter__group {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.bFilter__group h3 {
		margin-bottom: 0;
		margin-right: 1em;
	}
	
	.bFilter__options .b:first-child {
		margin-right: 1em;
	}
}

@media (min-width: 65em) {
	.kp__stats {
		gap: 2em;
		font-size: 1.3em;
		
	}
	
	.bikePath__stats {
		gap: 1em 6em;
	}
	
	.bikePath__stat + .bikePath__stat:after {
		left: -3em;
	}
	
	.bike .bike__map {
		position: relative;
	}  

	.bike .elevation-control  {
		position: absolute;
		left: 0;
		bottom: -1em; 
		width: 25%; 
		height: 40%;
	} 

	.bike .elevation-summary {
		display: none;
	}
	
	.bike .elevation-toggle-icon {
		display: none;
	}
	
	.bike__map--combi {
		overflow: hidden;
	}
	
	.bike__map--combi #bikeMap {
		flex: 1 1 auto;
	}
	
	.bike__filter {
		position: absolute;
		top: 50%;
		right: 0;
		z-index: 500;
		
		transform: translateY(-50%) translateX(75%);
		
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
		padding: 1em;
		
		background-color: rgba(255, 255, 255, 0.8);
		border-top-left-radius: 1em;
		border-bottom-left-radius: 1em;
		font-size: 0.8em;
		
		transition: transform .7s;
	}
	
		.bike__filter:hover {
			transform: translateY(-50%) translateX(0);
		}
}
	

@media (min-width: 100em) {
	.kp__stats {
		gap: 4em;
	}
}