@font-face {
    font-family: "Alegreya";
    src: url("../fonts/Alegreya/Alegreya-VariableFont_wght.ttf");
    font-weight: 400 900;
    font-style: normal;
}
@font-face {
    font-family: "Alegreya";
    src: url("../fonts/Alegreya/Alegreya-Italic-VariableFont_wght.ttf");
    font-weight: 400 900;
    font-style: italic;
}

#main p,
#main li,
#main dd,
#main dt {
	font-family: 'Alegreya';
	font-size: 1em
}

#main p a,
#main li a,
#main dd a,
#main dt a {
	color: #567b19;
	transition: color .5s ease, border-color .5s ease
}

#main p a:hover,
#main li a:hover,
#main dd a:hover,
#main dt a:hover {
	color: black;
	border-bottom: 2px solid #9dd73d
}

#main p strong,
#main p b,
#main li strong,
#main li b,
#main dd strong,
#main dd b,
#main dt strong,
#main dt b {
	font-weight: 600;
	font-family: "Alegreya"
}

#main p strong i,
#main p strong em,
#main p b i,
#main p b em,
#main li strong i,
#main li strong em,
#main li b i,
#main li b em,
#main dd strong i,
#main dd strong em,
#main dd b i,
#main dd b em,
#main dt strong i,
#main dt strong em,
#main dt b i,
#main dt b em {
	font-family: Alegreya
}

#main p i,
#main p em,
#main li i,
#main li em,
#main dd i,
#main dd em,
#main dt i,
#main dt em {
	font-style: italic;
	font-family: Alegreya;
	font-weight: 400
}

#main p i strong,
#main p i b,
#main p em strong,
#main p em b,
#main li i strong,
#main li i b,
#main li em strong,
#main li em b,
#main dd i strong,
#main dd i b,
#main dd em strong,
#main dd em b,
#main dt i strong,
#main dt i b,
#main dt em strong,
#main dt em b {
	font-family: Alegreya;
	font-weight: 600;
	font-style: italic
}

#main p {
	margin-bottom: 1.5em
}

body {
	background-color: #e3e6e3;
	font-family: Alegreya;
	font-weight: 400
}

.wrapper {
	background-color: #fff;
	margin: 0 auto 0 auto;
	max-width: 62.5em;
	width: 100%;
	box-shadow: 0px 0px 50px rgba(0, 10, 31, 0.5)
}

header {
	height: 250px;
	color: #fff
}

header .row {
	height: 250px;
	background-color: #81B28A
}

header .Logo-Bereich {
	height: 100%;
	background: url("../img/Schachtelhalm_web_lowerleft.jpg");
	background-size: cover
}

.Adresse {
	padding-top: 1.5em
}

.Adresse p {
	font-size: 1em;
	margin-top: 1em;
	margin-left: 1em;
	text-shadow: 1px 1px 2px #619f6d
}

.Adresse p a {
	color: #fff
}

.Header-Logo {
	height: 190px;
	width: 480px;
	margin-top: 1.5em;
	margin-left: 2em;
	background-image: url("../img/Shiatsu-head-02.svg");
	background-repeat: no-repeat
}

.mainnav {
	background-color: #C2D98D
}

.mainnav li {
	font-family: "Alegreya";
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.8em
}

.mainnav li a {
	color: #000
}

ul.menu {
	margin-left: 1.2em
}

ul.menu>li>a {
	padding-left: 0.8em;
	padding-right: 0.8em
}

ul.menu>li {
	background-color: #C2D98D;
	transition: background-color 2s ease
}

ul.menu>li:hover {
	background-color: #EDF1C8;
	transition: background-color .5s ease
}

ul.menu .active>a {
	background-color: #EDF1C8;
	color: #000
}

.margin {
	background-color: #B1CCB2
}

.sidebar {
	background-color: #EDF1C8
}

.sidebar img {
	margin-bottom: 3em
}

.main {
	background-color: #FFFEF2
}

.maintextmargin {
	padding: 0 5em 0 3em
}

.top-padding,
.bottom-padding {
	height: 3em
}

h1,
h2,
h3 {
	font-family: "Alegreya";
	font-weight: 500;
	color: #83BB26
}

h1 {
	font-size: 1.4em;
	margin-bottom: 1.3em
}

h1 .subtitle {
	color: #222;
	font-family: Alegreya;
	font-style: italic;
	letter-spacing: 1px;
	font-size: 0.9em
}

h2 {
	font-size: 1.1em;
	margin-bottom: 0.2em
}

h2 .subtitle {
	color: #222;
	font-family: Alegreya;
	font-weight: 500;
	font-style: italic
}

h3 {
	font-size: 1.1em;
	margin-bottom: 0.2em;
	color: #222;
	font-family: Alegreya;
	font-weight: 500;
	font-style: italic
}

#main a {
	position: relative
}

#main a:before {
	font-family: FontAwesome;
	top: 0;
	left: -5px;
	padding-right: 6px;
	content: "\f0da"
}

.g-captcha {
	margin-bottom: 1.4em
}

.kontaktformular {
	margin: 3em 0
}

.kontaktformular input,
.kontaktformular textarea {
	background-color: #EDF1C8;
	border: none;
	border-radius: 0;
	font-size: 1em;
	box-shadow: none
}

.kontaktformular input:focus,
.kontaktformular textarea:focus {
	background-color: #EDF1C8;
	box-shadow: 0 0 0 1px #666;
	border: none
}

.kontaktformular .error input,
.kontaktformular .error textarea {
	box-shadow: 0 0 0 1px #922
}

.button {
	color: #fff;
	background-color: #81B28A;
	font-family: "Alegreya";
	font-weight: 500;
	text-shadow: 0px 1px 3px #3a6041;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.9em;
	padding: 1.1em
}

.button[type=submit] {
	margin-top: 1em
}

.button:hover {
	background-color: #39944a;
	text-shadow-color: #000
}

span.error {
	display: block;
	font-size: 0.9em;
	color: #922;
	font-family: Alegreya;
	font-weight: 500;
	font-style: italic;
	margin-top: -1em;
	margin-bottom: 1em
}

.hamburger {
	float: right;
	margin-top: 0.5em;
	color: #FFFEF2;
	font-family: "Alegreya";
	font-weight: 500;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 1.6em
}

.off-canvas {
	background-color: #C2D98D
}

.off-canvas ul.menu.vertical {
	margin-top: 1em
}

.off-canvas ul.menu.vertical li {
	background-color: transparent;
	margin-top: 0.5em
}

.off-canvas ul.menu.vertical li a {
	color: #222;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 1em
}

p.dsgvo-link {
	margin-top: 3em
}

p.dsgvo-link a {
	font-size: .9em;
	color: #83BB26 !important
}

@media screen and (max-width: 39.9375em) {
	.Header-Logo {
		margin-top: 1em;
		margin-left: 0%;
		width: 100%;
		height: 80%;
		padding: 0;
		margin-bottom: 0
	}

	header {
		height: 180px
	}

	header .row {
		height: 180px
	}

	header .Logo-Bereich {
		height: 180px
	}

	.top-padding {
		visibility: hidden;
		display: none
	}

	#main {
		background-color: #FFFEF2;
		border-top: 2em solid #81B28A
	}

	.maintextmargin {
		padding: 0 1.5em
	}

	h1 {
		margin-bottom: 0.5em
	}

	.sidebar {
		margin-bottom: 1.5em
	}
}

@media screen and (min-width: 40em) and (max-width: 64.9375em) {
	.Header-Logo {
		margin: 1em 0 0 0;
		padding: 0;
		width: 100%
	}

	.Adresse {
		padding: 1em 0 0 0.5em;
		margin: 0 0 0 0
	}

	header {
		height: 14em
	}

	header .row {
		height: 14em
	}

	header .Logo-Bereich {
		height: 14em;
		padding-bottom: 1em
	}
}

@media screen and (min-width: 64em) {
	.wrapper {
		margin-bottom: 3em
	}
}

.Fruehstuecksfleisch {
	weight: 0;
	height: 0;
	opacity: 0;
	margin-bottom: 0;
}