#blog, #hotel {
	grid-column: full-width;
	grid-template-columns: var(--grid);	
	gap: 0;
	
	article {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0;
		align-items: center;
		
		* {
			hyphens: auto;
			text-wrap: balance;
		}
		
		figure {
			img {
				display: block;
			}
		}
		
		hgroup {
			padding: calc(var(--gap) * 3);
			* {
				display: block;
			}
			small {
				margin-block: var(--gap);
			}
			a {
				scroll-margin-top: 15vh;
			}
			p * {
				display: initial;
			}
		}
		
		@media(min-width:1000px) {
			&:nth-child(even) {
				figure {
					order: 2;
				}
				hgroup {
					order: 1;
					text-align: right;
				}
			}
		}
		@media(max-width:1000px) {
			grid-template-columns: 1fr !important;
			* {
				text-wrap: pretty;
				text-align: left;
			}
		}
		&.not-found {
			grid-template-columns: 1fr !important;
			padding: var(--gap);
			> * {
				text-align: center;
			}
		}
	}
}

.blog-start {
	
	/*grid-template-columns: var(--columns-fit-3);
	> * {
		background: var(--primary-light);
		padding: var(--gap);
		small {
			font-size: .75rem;
		}
	}*/
	section {
		margin-block: var(--gap);
	}
	h2 {
		a {
			font-size: .7rem !important;
			font-weight: 100 !important;
			text-decoration: none !important;
			&:after {
				content: " >";
			}
		}
	}
	div {
		display: grid;
		gap: var(--gap);
		grid-template-columns: var(--columns-fit-3);
				
		> article {
			display: grid;
			grid-template-rows: subgrid;
			grid-row: span 5;
			gap: calc(var(--gap) / 4);
		
			figure {
				aspect-ratio: 3 / 2;
				overflow: clip;
				img {
					display: block;
					height: 100%;
					width: 100%;
					object-fit: cover;
					transition: all 1s ease;
					&:hover {
						transform: scale(1.05);
					}
				}
			}
			* {
				hyphens: auto;
			}
			*:not(h2) {
				margin-block: calc(var(--gap) / 42);
				font-size: .9rem;
			}
			h3 {
				margin-block: calc(var(--gap) / 4);
				* {
					font-size: 1rem;
				}
			}
			small {
				font-size: .7rem;
			}
		}
	}
	
	@media(min-width: 1500px) {
	
		#heimatliebe-bmp {
			> *:last-child {
				grid-column: span 2;
				figure {
					aspect-ratio: 3 / 1;
					height: calc(100% - calc(var(--gap) / 9));
				}
			}
		}
		#gesundheit {
			> *:first-child {
				grid-column: span 2;
				figure {
					aspect-ratio: 3 / 1;
					height: calc(100% - calc(var(--gap) / 9));
				}
			}
		}
		#interview {
			> * {
				grid-template-rows: auto 1fr auto 1fr;
				grid-template-columns: 1fr 1fr;
				gap: var(--gap);
				h2 {
					grid-column: span 2;
				}
				h3 {
					display: flex;
					align-content: flex-end;
					align-items: flex-end;
				}
				figure {
					grid-row: span 3;
				}
			}
		}
	}
}

form {
	section:has(input[type=search]) {
		flex: 4 !important;
	}
}



div.hotels {
	grid-column: full-width;
	display: grid;
	.hotel-filter {
		padding: 1rem;
		background: var(--lightgrey);
		position: sticky;
		top: var(--headerheight);
		overflow: scroll;
		height: calc(100vh - var(--headerheight));
		> div {
			margin: 0 -1rem;
			> div {
				padding: 0.5rem 1rem;
				display: grid;
				&:hover {
					background-color: #ddd;
				}
				> label {
					display: block;
					position: relative;
					padding-left: 35px;
					cursor: pointer;
					-webkit-user-select: none;
					-moz-user-select: none;
					-ms-user-select: none;
					user-select: none;
					input[type=checkbox] {
						opacity: 0;
						position: absolute;
						cursor: pointer;
						height: 0;
						width: 0;
					}
					> .checkmark {
						position: absolute;
						top: 0;
						left: 0;
						height: 25px;
						width: 25px;
						background-color: #fff;
						&:after {
							content: "";
							position: absolute;
							display: none;
							left: 9px;
							top: 5px;
							width: 5px;
							height: 10px;
							border: solid white;
							border-width: 0 3px 3px 0;
							-webkit-transform: rotate(45deg);
							-ms-transform: rotate(45deg);
							transform: rotate(45deg);
						}
					}
					> input:checked ~ .checkmark {
						background-color: #ccc;
					}

					/* Show the checkmark when checked */
					> input:checked ~ .checkmark:after {
						display: block;
					}
					:has(input:checked) {
						background: var(--btn-color);
						label {
							color: #fff;
						}
					}
				}
			}
		}
		a.open-menu {
			text-decoration: none;
			font-size: inherit;
			color: var(--fontcolor);
			display: none;
			align-items: center;
			justify-content: center;
			padding: calc(var(--gap) / 2) !important;
			margin-bottom: var(--gap);
			width: 100%;
			line-height: calc(var(--fontsize) * 1.75);
			height: calc(var(--fontsize) * 3.75);
			&.first {
				background-color: rgb(from var(--primary-light) r g b / 50%);
			}
			&:active {
				text-decoration: none;
			}
			> * {
				max-height: 100%;
			}
		}
	}
}

@media(max-width: 800px) {
	div.hotels {
		display: block;
		.hotel-filter {
			position: initial;
			height: fit-content !important;
			> div {
				display: none;
				grid-template-columns: 1fr 1fr;
			}
			a.open-menu {
				display: flex;
			}
		}
	}
}

@media(max-width: 500px) {
	div.hotels .hotel-filter > div {
		grid-template-columns: 1fr;
	}
}

body.mobilenav .hotel-filter {
	top: 0;
	height: 100vh;
}

a {
	:hover {
		cursor: pointer;
	}
	small:hover {
		color: inherit;
	}
}