:root {
	--color-1: hsl(339, 98%, 23%);
}

* {
	box-sizing: border-box;
}

/* @group Text */

html {
	font-size: 16px;
}

body {
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-size: 1rem;
	line-height: 1.5em;
}

body {
	font-family: system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
}

p {
	font-size: 1rem;
	line-height: 1.5em;
}

h1 {
	font-size: 2.074rem; /* 33.18px */
	line-height: 1.2;
}

h2 {
	font-size: 1.728rem; /* 27.65px */
	line-height: 1.25;
}

h3 {
	font-size: 1.44rem;  /* 23.04px */
	line-height: 1.3;
}

h4 {
	font-size: 1.2rem;   /* 19.2px */
	line-height: 1.35;
}

h5 {
	font-size: 1rem;     /* 16px */
	line-height: 1.4;
}

ol {
	padding-left: 1.5em;
	margin-left: 0;
	list-style-position: outside;
	font-size: 1rem;
	line-height: 1.5em;
}

ol li {
	margin-bottom: 0.5em;
}

ul {
	list-style-type: disc;
	padding-left: 1.5em;
	margin-left: 0;
	list-style-position: outside;
	font-size: 1rem;
	line-height: 1.5em;
}

ul li {
	margin-bottom: 0.5em;
}

/* @end */

/* @group Layout */

#container{
	min-height: calc(100vh - 12rem);
}

#container {
	padding-top: 1rem;
	padding-bottom: 3rem;
}

#footer{
}

.footerinfo{
		width: 80vw;
	max-width: 1280px;
	margin-inline: auto;
}

.footerinfo p{
	text-align: center;
	padding-top: 2rem;
	padding-bottom: 2rem;
	font-size: 0.875rem;
}


@media (min-width: 768px){
	.footerinfo p{
	text-align: left;

}
}

.footerinfo a{
	text-decoration: none;
	color: #777;
}

.logo {
	background-color: var(--color-1);
	font-weight: bold;
}

.logo a {
	width: 80vw;
	max-width: 1280px;
	margin-inline: auto;
	padding-top: 2rem;
	padding-bottom: 2rem;
	font-size: 3rem;
	color: #fff;
	text-decoration: none;
	display: block;
}

main {
	width: 80vw;
	max-width: 1280px;
	margin-inline: auto;
}



@media (min-width: 768px) {
	.rezept {
		grid-area: rezept;
	}
	
	.zutaten {
		grid-area: zutaten;
	}
	
	main .inside {
		display: grid;
		grid-template-columns: 1fr 2fr;
		grid-template-areas: "zutaten rezept";
		gap: 4rem
	}
	
	.grid12 main .inside {
    grid-template-columns: 1fr;
    grid-template-areas: none;

}
}

/* @end */

/* @group Zutaten */

.zutaten h2, .zutaten h3, .zutaten h4, .zutaten h5 {
	font-size: 1.2rem;
	line-height: 1.35;
}

.zutaten p {
	hyphens: auto;
}

@media (min-width: 768px) {
	.zutaten {
		padding-top: 4rem;
	}
}


table {
	width: 100%;
}

td {
	padding: 0.5rem;
}

table td:nth-child(1) {
	text-align: right;
	padding-right: 0.75rem;
	min-width: 5rem;
}

table td:nth-child(2) {
	border-bottom: 1px solid #ccc;
	padding-left: 0;
}

/* @end */

/* @group Sitemap */

body.ihv{
background-color: hsl(43, 13%, 94%);
}


.mod_sitemap {
	display: block;
}

div#artikle-1.mod_article.block {
	width: 100%;
}

.mod_sitemap ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}

.mod_sitemap li {
	list-style-type: none;
	margin: 0;
	padding: 0;
		background-color: #fff;
			box-shadow: 0 1px 2px #bbb;
	border-radius: 0.2rem;

}

.mod_sitemap a {
	text-decoration: none;
	color: #000;
	display: block;
	padding: 1rem;
	height: 100%;
}

.mod_sitemap h4 {
	padding-left: 1rem;
	color: var(--color-1);
	margin-bottom: 1rem;
}





/* @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;
}
/* @end */