:root {
	--red: #e3000b;
	--red-darker: #cd000a;
	--white: #fff;
	--black: #000;
	--beige: #efe3cd;
	--beige-structure: #dcceb5;
	--produkte: #a4a4b4;
	--rezepte:  #f5bd2c;
	--ueber-uns: #be9393;;
	--magazin:  #bdcc19;
	--swiper-preloader-color: #efe3cd;
}

html {
	box-sizing: border-box;
}

*, *::before, *::after {
	box-sizing: inherit;
}

body {
	margin: 0;
	padding: 0;
	font-family: "LDFabiolPro_W", Helvetica, sans-serif;
	font-weight: 400;
	line-height: 1.2;
	overflow-x: hidden;
}

figure {
	margin: 0 0 1rem;
}
figcaption {
	margin-top: 5px;
	font-size: 1rem;
}

img {
	max-width: 100%;
}

.no-js .lazyimage {
	display: none;
}

.page-filters {
	max-width: 62.5rem;
	margin: 0 auto;
}

.content-stage {
	max-width: 62.5rem;
	margin: 0 auto;
	padding: 50px 20px 0;
	background-color: var(--beige);
	background-image: url(/assets/css/images/taifun-background-dirt--optimised.svg);
	background-repeat: repeat;
	background-size: 100%;
}

.home.content-stage {
	padding: 0 20px;
}

.content-stage-inner--default {
	max-width: 50rem; /* 800px */
	margin: 0 auto;
}

.content-stage-inner--narrow {
	max-width: 38.75rem; /* 620px */
	margin: 0 auto;
}

[class^="content-stage"] + [class^="content-stage"] {
	padding-top: 3rem;
}

p,
ul {
	font-size: 1.35rem;
	line-height: 1.3;
}

main > header {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.chevron-right {
	margin-bottom: 0.125rem;
	font-family: "Lilita One", Helvetica, sans-serif;
	font-size: 1.25rem;
	font-weight: normal;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--red);
}

.chevron-right::before {
	content: '›';
	display: inline-block;
	margin-right: 0.125em;
	margin-left: 0;
	transform: translateY(-1px);
}

/* Recipe Detailseite: Link zu weiteren Rezepten mit diesem Produkt */
.more-recipes-link {
	padding-top: 2rem;
}


.product-title {
	margin-bottom: 0.125rem;
	font-family: "Lilita One", Helvetica, sans-serif;
	font-size: 1.25rem;
	font-weight: normal;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--red);
}

/* Common utilities */

[hidden="true"],
.hidden {
	display: none !important;
}

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px !important;
	white-space: nowrap;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
	white-space: inherit;
}

.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
	clip: auto !important;
	-webkit-clip-path: none !important;
	clip-path: none !important;
	height: auto !important;
	margin: auto !important;
	overflow: visible !important;
	width: auto !important;
	white-space: normal !important;
}
