/* Le Font */
@font-face {
	font-family:'Open Sans';
	font-style:normal;
	font-weight:300;
	font-display:swap;
	src:local(''), url('/shared/font/open-sans-v28-latin-300.woff2') format('woff2'), url('/shared/font/open-sans-v28-latin-300.woff') format('woff');
}
@font-face {
	font-family:'Open Sans';
	font-style:normal;
	font-weight:700;
	font-display:swap;
	src:local(''), url('/shared/font/open-sans-v28-latin-700.woff2') format('woff2'), url('/shared/font/open-sans-v28-latin-700.woff') format('woff');
}
/* Le Basics */
* {
	margin:0;
	padding:0;
	font-size:16px;
	font-family:"Open Sans", Arial, Helvetica, sans-serif;
	font-weight:300;
	line-height:2;
	color:#333;
	cursor:default;
	box-sizing:border-box;
}
::selection {
	color:#fff;
	background:#00a2cf;
}
body {
	/*background:url(/shared/img/background.jpg) center / cover fixed;*/
	background:linear-gradient(-35deg, #eaf3f4, #fff) fixed;
}
a {
	cursor:pointer;
	text-decoration:none;
}
a:focus {
	outline:none;
}
strong {
	font-weight:700;
	margin-top:12px;
	display:block;
	color:#666;
	line-height:1.5;
}
strong a {
	font-weight:700;
	color:#999;
	line-height:1.5;
}
article {
	padding:20px;
	margin:50px auto;
	max-width:1190px;
}
h1 {
	font-size:32px;
	line-height:48px;
	margin-bottom:8px;
	background:#00a2cf;
	color:#fff;
	border-radius:4px;
	padding:4px 12px;
}
h2 {
	font-size:24px;
	line-height:32px;
	margin-bottom:8px;
	color:#999;
	text-transform:uppercase;
}
img {
	max-width:100%;
	height:auto;
	margin-bottom:24px;
	border-radius:4px;
}
ol, ul {
	list-style:none;
}
li.clicked {
	color:#00a2cf;
}
li.clicked:after {
	content:"✓";
	margin-left:8px;
}
p {
	color:#999;
	line-height:24px;
	margin-bottom:36px;
}
p a {
	color:#999;
	line-height:24px;
	transition:color .2s;
}
p a:focus, p a:hover, li a, strong a:focus, strong a:hover {
	color:#00a2cf;
	transition:color .2s;
}
li a:focus, li a:hover {
	color:#333;
}
p a:first-child {
	float:right;
}
p a:first-child:before {
	content:"› ";
	position:relative;
	top:-1px;
}
.cook-mode {
	display:none;
}
/* Le Suche */
section.suche input {
	width:100%;
	border:1px solid #ddd;
	padding:8px 12px;
	border-radius:4px;
	margin-bottom:20px;
	cursor:text;
	line-height:1.5;
	transition:border .2s;
}
section.suche input:hover, section.suche input:focus {
	border-color:#00a2cf;
	outline:none;
}
/* Le Tags */
section.tags nav:after {
	content:" ";
	clear:both;
	display:block;
}
section.tags a {
	line-height:24px;
	margin:0 4px 4px 0;
	padding:4px 8px;
	background:#666;
	color:#fff;
	display:block;
	border-radius:4px;
	float:left;
	transition:background .2s;
}
section.tags a:focus, section.tags a:hover, section.tags a.selected {
	background:#00a2cf;
}
/* Le Rezepte */
section.rezepte {
	padding-top:36px;
}
section.rezepte a {
	width:220px;
	border:1px solid #ddd;
	line-height:24px;
	float:left;
	display:block;
	background:#fff;
	padding:12px 16px;
	border-radius:4px;
	margin:0 10px 10px 0;
	transition:border .2s, background .2s, color .2s;
}
section.rezepte a:focus, section.rezepte a:hover {
	background:#00a2cf;
	color:#fff;
	border-color:#00a2cf;
}
section.rezepte span {
	color:#999;
	font-size:14px;
	line-height:24px;
	display:block;
	transition:color .2s;
	cursor:pointer;
}
section.rezepte a:focus span, section.rezepte a:hover span {
	color:#fff;
}
section.rezepte + p {
	padding:32px 10px 0 0;
}
section.rezepte del {
	display:none;
}
/* Le Zutaten */
section.zutaten {
	float:left;
	width:30%;
	margin-bottom:48px;
}
section.zutaten li {
	line-height:24px;
	padding:6px 8px 6px 12px;
	position:relative;
}
section.zutaten li:before {
	content:"•";
	margin-right:8px;
	left:0;
	position:absolute;
}
/* Le Zubereitung */
section.zubereitung {
	float:right;
	width:65%;
}
section.zubereitung li {
	counter-increment:zubereitung;
	line-height:24px;
	padding:6px 0 14px 34px;
	position:relative;
}
section.zubereitung li:before {
	left:0;
	top:6px;
	position:absolute;
	width:24px;
	height:24px;
	background:#666;
	color:#fff;
	border-radius:50%;
	display:block;
	content:counter(zubereitung)".";
	text-align:center;
	float:left;
	font-size:14px;
}
section.zubereitung li.clicked:before {
	background:#00a2cf;
}
section.zubereitung p:last-child {
	padding-top:32px;
	padding-bottom:48px;
}
/* Le Media Queries */
@media (max-width:960px) {
	article {
		border:0;
		margin:0;
	}
	p a:first-child {
		float:none;
		display:block;
	}
	section.rezepte a {
		width:23%;
	}
}
@media (max-width:640px) {
	h1 {
		font-size:22px;
		line-height:32px;
		padding:4px 8px;
	}
	section.rezepte a {
		width:45%;
	}
	section.zutaten, section.zubereitung {
		width:100%;
	}
	section.zubereitung, section.zubereitung p:last-child {
		margin-bottom:0;
	}
}
@media (max-width:480px) {
	section.rezepte a {
		width:100%;
	}
	.cook-mode {
		display:flex;
		align-items:center;
		gap:12px;
		margin:4px 0;
	}
	.label {
		color:#999;
	}
	.switch {
		position: relative;
		width:48px;
		height:24px;
	}
	.switch input {
		opacity:0;
		width:0;
		height:0;
	}
	.slider {
		position:absolute;
		inset:0;
		background-color:#ccc;
		border-radius:999px;
		cursor:pointer;
		transition:background-color .4s;
	}
	.slider::before {
		content:"";
		position:absolute;
		height:20px;
		width:20px;
		left:2px;
		top:2px;
		background-color:white;
		border-radius:50%;
		transition:transform .4s;
	}
	.switch input:checked + .slider {
		background-color:#00a2cf;
	}
	.switch input:checked + .slider::before {
		transform:translateX(24px);
	}
}