/* @group Variablen */

:root {
	--color-red: hsl(339, 98%, 23%);
	--color-apricot: hsl(36, 85%, 92%);
}

/* @end */

/* @group Basics */

* {
	box-sizing: border-box;
}

html {
	font-size: 17px;
}

img {
	vertical-align: bottom;
}

.float_left {
	float: left
}

.float_right {
	float: right
}

.block {
	overflow: hidden
}

.clear, #clear {
	height: .1px;
	font-size: .1px;
	line-height: .1px;
	clear: both
}

.invisible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px
}

@media (max-width: 767px) {
	a[href^="mailto:"], a[href^="tel:"] {
		outline: none;
		-webkit-tap-highlight-color: transparent;
	}
}

/* @end */

/* @group Layout */

body {
	font-size: 1rem;
	line-height: 1.5em;
	color: #444;
	font-family: 'Ubuntu Sans', sans-serif;
	background-color: hsl(34, 20%, 92%);
}


/* Grid-Layout */

.layout {
	background-color: #fff;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: ;
	grid-template-areas: "header"
    "main"
    "footer";
	gap: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.layout {
		max-width: 1280px;
		margin-inline: auto;
		min-height: 100vh;
		/*		box-shadow: 0 1px 10px #847d7d;*/
	}
}


header .logo img {
	grid-area: header;
	background-color: #fff;
	height: auto;
}

@media (min-width: 768px) {
	header {
		background-color: #eeeae6;
		position: relative;
		height: 7rem;
	}
}

main {
	grid-area: main;
	background: var(--color-apricot);
	/*    background: hsl(36, 85%, 92%);*/
}

footer {
	grid-area: footer;
	background: var(--color-red);
	text-align: center;
	padding-top: 3rem;
	padding-bottom: 3rem;
}

footer p, footer a {
	color: #fff;
}



/* Gemeinsame Formatierung */

header, main, footer {
	
}

/* Responsives Layout */

@media (max-width: 767px) {
	.layout {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-template-areas: "header"
        "main"
        "footer";
	}
}

/* @end */

/* @group Text */

p {
	line-height: 1.5em;
}

h2 {
	font-weight: 500;
	color: var(--color-red);
}

h3 {
	font-weight: 500;
	color: var(--color-red);
	line-height: 1.25em;
}

h4 {
	font-size: 1rem;
	font-weight: 500;
	color: var(--color-red);
	line-height: 1.25em;
}

a {
	color: var(--color-red);
	text-decoration: none;
}

a.linkbutton {
	display: inline-block;
	padding: 1rem;
	background-color: #eeac51;
	border-radius: 0.5rem;
}

p.marginal {
	font-size: 0.875rem;
}

/* @end */

/* @group Elements */

.logo a {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
	margin: 0;
	padding: 0;
}

.logo img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.content_wrapper {
	padding: 3rem;
}

@media (min-width: 768px) {
	.logo {
		width: 20rem;
		position: absolute;
		right: 3rem;
		top: 3rem;
		box-shadow: 0 3px 5px black;
	}
}

/* @end */

/* @group Über mich */

.aboutme {
	background-color: var(--color-red);
	color: #fff;
}

.aboutme h2 {
	color: #edac50;
}

.portrait {
	text-align: center;
}

.portrait img {
	width: 15rem;
	border-radius: 0.5rem;
	box-shadow: 0 3px 3px #3f0c1e;
}

@media (min-width: 768px) {
	.aboutme {
		display: flex;
		align-items: center;
		gap: 3rem;
		padding-top: 5rem;
		padding-bottom: 5rem;
	}
	
	.aboutme_text {
		transform: translateY(33.333%);
	}
}

@media (min-width: 768px) {
	.aboutme {
		padding-inline: clamp(3rem, calc(3rem + (100vw - 768px) * 0.2), 12rem);
	}
}

/* @end */

/* @group Angebote */

.angebot_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	padding-right: 0;
	padding-left: 0;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.angebot {
	background-color: #fff;
	border-radius: 0.25rem;
	box-shadow: 0 3px 3px #ccc;
	scroll-margin-top: 1rem;
	border-radius: 0.5rem;
}

.angebot_img {
	background-color: #fff;
}

.angebot_img img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0.25rem 0.25rem 0 0;
}

.angebot_text {
	background-color: #fff;
	padding: 1rem;
	border-radius: 0 0 0.25rem 0.25rem;
	hyphens: auto;
}

.angebot_text h3 {
	font-weight: 500;
	color: var(--color-red);
	margin-top: 0.5rem;
}

/* @end */

/* @group Call to action */

.calltoaction {
	text-align: center;
	background-color: #fff;
}

.calltoaction a {
	color: #fff;
	font-size: 1.125rem;
	font-weight: 500;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

/* @end */

/* @group Impressum */

.imprint {
	background-color: #fff;
}

/* @end */

/* @group offene Klassen */

.mt1 {
	margin-top: 1rem;
}

.mt2 {
	margin-top: 2rem;
}

.mt3 {
	margin-top: 3rem;
}

.mt4 {
	margin-top: 4rem;
}

.mt5 {
	margin-top: 5rem;
}

.mb1 {
	margin-bottom: 1rem;
}

.mb2 {
	margin-bottom: 2rem;
}

.mb3 {
	margin-bottom: 3rem;
}

.mb4 {
	margin-bottom: 4rem;
}

.mb5 {
	margin-bottom: 5rem;
}

p.shy {
	hyphens: auto;
}

/* @end */