body {
	font-family: Arial, sans-serif;
	margin: 0;
	line-height: 1.6;
}

nav {
	margin-bottom: 2rem;
}




/* --------------------------------------------------
   Grundlayout
-------------------------------------------------- */

main {
	max-width: 1100px;
	margin: 0 auto;
	padding: 1rem;
}




/* --------------------------------------------------
   Hero
-------------------------------------------------- */

.hero {
/* 	margin-bottom: 2rem; */
	margin-bottom: 1rem;
}

.hero img {
	width: 100%;
	max-width: 600px;
	height: auto;
	display: block;
	margin-bottom: 1rem;
}

.hero-content h1 {
	margin: 0 0 1rem;
}

.lead {
	font-size: 1.2rem;
	line-height: 1.6;
	margin-bottom: 1rem;
}




/* --------------------------------------------------
   Offer Box
-------------------------------------------------- */

.treatment-offer-box {
/* 	margin: 2rem 0; */
	margin: 1rem 0;
	display: grid;
	gap: 1rem;
}

.treatment-offer-box h3 {
	margin-top: 0;
}




/* --------------------------------------------------
   Buttons
-------------------------------------------------- */

.btn {
	display: inline-block;
	padding: 0.75rem 1rem;
	text-decoration: none;
	border: 1px solid #333;
	border-radius: 6px;
}



.page-layout {
	display: grid;
/* 	gap: 2rem; */
	gap: 1rem;
}
/* --------------------------------------------------
   Content
-------------------------------------------------- */

.content {
	max-width: 900px;
	margin: 0 auto;
	line-height: 1.7;
}

.content h2 {
/* 	margin-top: 2rem; */
	margin-top: 1.5rem;
}




/* --------------------------------------------------
   Treatment Products
-------------------------------------------------- */

.treatment-product {

	border: 1px solid #ddd;
	border-radius: 8px;

	padding: 1rem;

	display: flex;
	flex-direction: column;
	gap: 0.5rem;

}

.treatment-product h4,
.treatment-product p {

	margin: 0;

}

/* 
.treatment-option {
	display: grid;
	grid-template-columns:
		1fr
		auto
		auto;
	gap: 1rem;
	align-items: center;
	padding: 0.75rem 0;
	border-top: 1px solid #eee;
}
 */
.treatment-option {
	display: grid;
	grid-template-columns:
		1fr
		120px
		90px;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 0;
	border-top: 1px solid #eee;
}

.treatment-option:first-of-type {
	border-top: none;
}

/* 
.book-link {
	text-decoration: none;
	font-size: 1.25rem;
}
 */
.price {
	text-align: right;
}

.book-link {
	text-align: right;
}




/* --------------------------------------------------
   Info Box
-------------------------------------------------- */

.info-box {

	border: 1px solid #ddd;
	border-radius: 8px;

	padding: 1rem;

	margin: 1rem 0;

	background: #fafafa;

}

.info-box h3 {

	margin-top: 0;

}




/* --------------------------------------------------
   Desktop Layout
-------------------------------------------------- */

@media (min-width: 768px) {
	.treatment-product {
		max-width: 700px;
		margin: 0 auto;
	}
}


@media (min-width: 1000px) {

	.page-layout {

		grid-template-columns:
			minmax(0, 1fr)
			320px;

		grid-template-areas:
			"content offer";

		align-items: start;

	}

	.content {
		grid-area: content;
	}

	.treatment-offer-box {
		grid-area: offer;
	}

	.treatment-product {

		max-width: none;
		margin: 0;

	}

}