/* vars */
:root {
	--margin: var(--letter);
	--gap: var(--line);

	--white: #fff;
	--yellow: #ffdf32;
	--light: #d1c912;
	--medium: #75a14f;
	--dark: #136f37;
	--black: #000;
	--gray: #e7f0eb; /* 10% dark */
}



/* tags */
a,
a:link,
a:visited {
	color: var(--dark);
}
a:focus {
	color: var(--black);
	outline: 3px solid var(--yellow);
}
a:hover,
a:active {
	color: var(--black);
}
strong a,
strong a:link,
strong a:visited,
button,
input[type="submit"] {
	background-color: var(--dark);
	border-width: 0;
	color: var(--white);
	cursor: pointer;
	display: inline-block;
}
strong a:focus,
button:focus,
input[type="submit"]:focus {
	background-color: var(--dark);
	color: var(--yellow);
	outline: 3px solid var(--yellow);
}
strong a:hover,
strong a:active,
button:hover,
input[type="submit"]:hover {
	color: var(--yellow);
}
html {
	font-size: 14px;
	scroll-behavior: smooth;
}
iframe {
	max-width: 100%;
}
img {
	height: auto;
	max-width: 100%;
}
input,
select,
textarea {
	background: var(--gray);
	border-width: 0;
}
input:focus,
select:focus,
textarea:focus {
	background-color: var(--white);
	outline: 3px solid var(--yellow);
}
input:hover,
select:hover,
textarea:hover {
	/**/
}
input[type="checkbox"] {
	display: inline-block;
	height: var(--line);
	margin-right: var(--small);
	padding: 0;
	position: relative;
	vertical-align: middle;
	width: var(--line);
}
input[type="checkbox"]:checked {
	background-color: var(--dark);
}
label {
	color: var(--dark);
	cursor: pointer;
}
label:focus {
	color: var(--black);
	outline: 3px solid var(--yellow);
}
label:hover {
	color: var(--black);
}
nav ul {
	margin: 0;
}



/* classes */
.bg-white {
	background-color: var(--white);
	color: var(--black);
}
.bg-light {
	background-color: var(--light);
	color: var(--black);
}
.bg-medium {
	background-color: var(--medium);
	color: var(--white);
}
.bg-medium h1 {
	color: var(--dark);
}
.bg-dark {
	background-color: var(--dark);
	color: var(--white);
}
.bg-dark a,
.bg-dark a:link,
.bg-dark a:visited {
	color: var(--white);
}
.bg-dark a:focus,
.bg-dark a:hover,
.bg-dark a:active {
	color: var(--yellow);
}
.extrapadding {
	padding-bottom: var(--large);
	padding-top: var(--large);
}
.teaser strong {
	color: var(--yellow);
}
.teaser-dark .teaser,
.teaser-dark .teaser strong {
	color: var(--dark);
}
.teaser-yellow .teaser {
	color: var(--yellow);
}
.icon h3::before {
	background-size: contain;
	content: "";
	display: inline-block;
	height: var(--large);
	margin-right: var(--small);
	width: var(--large);
}
.icon.icon-amount h3::before {
	background-image: url(/wp-content/themes/mosterei/img/amount.svg);
	width: calc(var(--large) * 25 / 40 );
}
.icon.icon-date h3::before {
	background-image: url(/wp-content/themes/mosterei/img/date.svg);
	width: calc(var(--large) * 51 / 40 );
}
.icon.icon-fruit h3::before {
	background-image: url(/wp-content/themes/mosterei/img/fruit.svg);
	width: calc(var(--large) * 33 / 40 );
}
.icon.icon-helper h3::before {
	background-image: url(/wp-content/themes/mosterei/img/helper.svg);
	width: calc(var(--large) * 55 / 40 );
}
.icon.icon-place h3::before {
	background-image: url(/wp-content/themes/mosterei/img/place.svg);
	width: calc(var(--large) * 27 / 40 );
}
.icon.icon-waste h3::before {
	background-image: url(/wp-content/themes/mosterei/img/waste.svg);
	width: calc(var(--large) * 32 / 40 );
}
.mosterei-video {
	background-color: var(--light);
	margin-bottom: var(--line);
	padding: var(--line) var(--line) 0.1px;
}
.mosterei-video-wrapper {
	height: 0;
	padding: 56.25% 0 0; /* 16:9 */
	position: relative;
	width: 100%;
}
.mosterei-video-wrapper iframe {
	bottom: 0;
	height: 100%;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}
.slick-slider .slick-list {
	margin: 0 calc(0px - var(--gap) / 2);
}
.slick-slider .slick-slide {
	margin: 0 calc(var(--gap) / 2);
}
.slick-slider .slick-next,
.slick-slider .slick-prev {
	background-color: var(--dark);
	border-radius: 50%;
	color: transparent;
	display: block;
	font-size: 0;
	height: var(--large);
	padding: 0;
	position: absolute;
	top: 0;
	transition: all .3s;
	width: var(--large);
	z-index: 1;
}
.slick-slider .slick-next {
	right: var(--margin);
}
.slick-slider .slick-next::after,
.slick-slider .slick-next::before {
	background-color: var(--white);
	content: "";
	display: block;
	height: var(--letter);
	position: absolute;
	right: 36%; 
	width: 1.5px;
}
.slick-slider .slick-next::after {
	top: 50%;
	transform: rotate(45deg);
	transform-origin: top right;
}
.slick-slider .slick-next::before {
	bottom: 50%;
	transform: rotate(-45deg);
	transform-origin: bottom right;
}
.slick-slider .slick-prev {
	right: calc(var(--large) + var(--margin) + var(--small));
}
.slick-slider .slick-prev::after,
.slick-slider .slick-prev::before {
	background-color: var(--white);
	content: "";
	display: block;
	height: var(--letter);
	position: absolute;
	left: 36%; 
	width: 1.5px;
}
.slick-slider .slick-prev::after {
	top: 50%;
	transform: rotate(-45deg);
	transform-origin: top left;
}
.slick-slider .slick-prev::before {
	bottom: 50%;
	transform: rotate(45deg);
	transform-origin: bottom left;
}
.slick-slider .slick-next:focus::after,
.slick-slider .slick-next:focus::before,
.slick-slider .slick-next:hover::after,
.slick-slider .slick-next:hover::before,
.slick-slider .slick-next:active::after,
.slick-slider .slick-next:active::before,
.slick-slider .slick-prev:focus::after,
.slick-slider .slick-prev:focus::before,
.slick-slider .slick-prev:hover::after,
.slick-slider .slick-prev:hover::before,
.slick-slider .slick-prev:active::after,
.slick-slider .slick-prev:active::before {
	background-color: var(--yellow);
}
.slick-slider .slick-arrow.slick-disabled {
	background-color: var(--medium);
}
.wpcf7-form-control-wrap { 
	display: block;
}
.wpcf7-form-control-wrap[data-name="amount"]::after,
.wpcf7-form-control-wrap[data-name="place"]::after,
.wpcf7-form-control-wrap[data-name="amount"]::before,
.wpcf7-form-control-wrap[data-name="place"]::before {
	background-color: var(--dark);
	/*bottom: calc(var(--title) * 0.36); */
	content: "";
	display: block;
	height: 1.5px;
	pointer-events: none;
	position: absolute;
	top: calc(var(--xxlarge) * 0.36);
	width: var(--letter);
}
.wpcf7-form-control-wrap[data-name="amount"]::after,
.wpcf7-form-control-wrap[data-name="place"]::after { 
	right: var(--letter);
	transform: rotate(-45deg);
	transform-origin: bottom left;
}
.wpcf7-form-control-wrap[data-name="amount"]::before,
.wpcf7-form-control-wrap[data-name="place"]::before {
	right: calc(var(--letter) * 2);
	transform: rotate(45deg);
	transform-origin: bottom right;
}
span.wpcf7-not-valid-tip {
	background-color: var(--light);
	color: var(--black);
	padding: var(--small);
}
input.wpcf7-not-valid,
select.wpcf7-not-valid,
textarea.wpcf7-not-valid {
	border: 3px solid var(--light);
}
.wpcf7 form .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.validating .wpcf7-response-output {
	background: var(--light);
	border-width: 0;
	flex-basis: 100%;
	margin: 0 0 var(--line);
	padding: var(--line);
}
.wpcf7 form .wpcf7-response-output:empty {
	margin: 0;
	padding: 0;
}
.wpcf7 form .wpcf7-spinner {
	background-color: var(--light);
	margin: 0 0 0 var(--small);
	opacity: 1;
}


/* ids */
#header {
	background-color: var(--white);
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	transition: all .3s;
	z-index: 100;
}
#header .container {
	align-items: flex-start;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 1200px;
	padding: var(--margin);
	transition: all .3s;
}
.scrolled #header .container {
	padding-bottom: var(--small);
	padding-top: var(--small);
}
#sitename {
	display: block;
}
#sitename svg {
	height: auto;
	transition: all .3s;
	vertical-align: top;
	width: 150px;
}
.scrolled #sitename svg {
	width: 100px;
}
#navigation {
	align-self: center;
	text-align: right;
	transition: all .3s;
}
#navigation.open {
	align-self: flex-start;
}
#hmbrgr {
	background-color: transparent;
	display: inline-block;
	font-size: 0;
	height: var(--large);
	padding: 0;
	position: relative;
	width: var(--large);
}
#hmbrgr span,
#hmbrgr::after,
#hmbrgr::before {
	background-color: var(--dark);
	content: "";
	display: block;
	height: 2px;
	left: 0;
	position: absolute;
	transition: all .3s;
	width: var(--large);
}
#hmbrgr span {
	top: calc(50% - 1px);
}
#hmbrgr::after {
	bottom: 20%;
}
#hmbrgr::before {
	top: 20%;
}
.open #hmbrgr span {
	left: 50%;
	width: 0;
}
.open #hmbrgr::after {
	bottom: calc(50% - 1px);
	transform: rotate(45deg);
}
.open #hmbrgr::before {
	top: calc(50% - 1px);
	transform: rotate(-45deg);
}
#menu {
	display: none;
	font-size: var(--line);
	margin: var(--line) 0;
	text-align: left;
}
#menu a,
#menu a:link, 
#menu a:visited {
	color: var(--medium);
}
#menu a:focus,
#menu a:hover,
#menu a:active {
	color: var(--dark);
}
#menu a.active {
	border-bottom: 1px solid var(--dark);
	color: var(--dark);
	font-weight: 700;
}
#main::before {
	content: "";
	display: block;
	height: calc(71px + 2 * var(--margin)); /* height of logo if 150 wide + header padding */
	transition: all .3s;
}
.scrolled #main::before {
	height: calc(47px + 2 * var(--small)); /* height of logo if 100 wide + header padding */
}
#main section {
	scroll-margin-top: calc(47px + 2 * var(--small)); /* height of logo if 100 wide + header padding */
}
#main section div.wp-block-group .wp-block-group__inner-container { 
	margin: 0 auto;
	max-width: 1200px;
	padding: var(--line) var(--margin) 0.1px;
}
#main section div.wp-block-group.nopadding-bottom .wp-block-group__inner-container { 
	padding-bottom: 0.1px;
}
#main section div.wp-block-group.nopadding-top .wp-block-group__inner-container { 
	padding-top: var(--line);
}
#main .wp-block-columns p.has-text-align-right { 
	margin-bottom: 0;
}
#footer {
	background-color: var(--dark);
	color: var(--white);
}
#footer .container {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--line);
	margin: 0 auto;
	max-width: 1200px;
	padding: var(--large) var(--margin);
	position: relative;
}
#footer a,
#footer a:link,
#footer a:visited {
	color: var(--white);
}
#footer a:focus,
#footer a:hover,
#footer a:active {
	color: var(--yellow);
}
#footer svg {
	flex-basis: 150px;
	flex-grow: 0;
	flex-shrink: 0;
	height: auto;
	width: 150px;
}
#footer svg .medium {
	fill: var(--white);
}
#card {
	flex-basis: 50%;
	flex-grow: 1;
	flex-shrink: 1;
	margin: 0;
}
#legal {
	flex-basis: 100%;
}
#legal li {
	display: inline-block;
	margin-right: var(--letter);
}
#toplink {
	background-color: var(--dark);
	border-radius: 50%;
	color: transparent;
	bottom: var(--line);
	display: block;
	font-size: 0;
	height: var(--large);
	position: absolute;
	right: var(--margin);
	width: var(--large);
	z-index: 10;
}
#toplink::after,
#toplink::before {
	background-color: var(--white);
	content: "";
	display: block;
	height: 1.5px;
	position: absolute;
	top: 36%;
	width: var(--letter);
}
#toplink::after { 
	right: 50%;
	transform: rotate(-45deg);
	transform-origin: top right;
}
#toplink::before {
	left: 50%;
	transform: rotate(45deg);
	transform-origin: top left;
}
#toplink:focus,
#toplink:hover,
#toplink:active {
}
#toplink:focus::after,
#toplink:focus::before,
#toplink:hover::after,
#toplink:hover::before,
#toplink:active::after,
#toplink:active::before {
	background-color: var(--yellow);
}
.scrolled #toplink {
	position: fixed;
}



/* screens */
@media screen and (min-width: 600px) {
	figure {
		text-align: center;
	}
	html {
		font-size: 15px;
	}
	#main section div.wp-block-group .wp-block-group__inner-container { 
		padding: var(--large) var(--margin) var(--line);
	}
	#main .wp-block-columns,
	#main .wpcf7-form {
		display: flex;
		flex-wrap: wrap;
		gap: var(--gap);
	}
	#main .wp-block-columns .wp-block-column,
	#main .wpcf7-form fieldset {
		flex-basis: 45%;
		flex-grow: 1;
		flex-shrink: 1;
	}
	#main .wp-block-columns.reverse { 
		flex-direction: row-reverse;
	}
	#main .teaser + .wp-block-columns,
	#main .teaser + .wp-block-heading,
	#main .wp-block-columns + .wp-block-columns {
		padding-top: var(--gap); /* ist ja nicht mehr innerhalb eines flex */
	}
	#main .teaser-right .teaser {
		margin-left: 50%;
		padding-left: calc(var(--gap) / 2);
	}
	#main .teaser-center .teaser {
		text-align: center;
	}
	#main .teaser-line .teaser strong { /* !TODO jetzt p.teaser */
		background-color: var(--white); 
		display: inline-block;
		padding-right: var(--line);
	}
	#main .teaser-line.teaser-center .teaser strong {
		padding-left: var(--line);
	}
	#main .teaser-line.bg-light .teaser strong {
		background-color: var(--light); 
	}
	#main .teaser-line.bg-medium .teaser strong {
		background-color: var(--medium); 
	}
	#main .teaser-line.bg-dark .teaser strong {
		background-color: var(--dark); 
	}
	#main .teaser-line .teaser::before {
		background-color: var(--white); 
		content: "";
		display: block;
		height: 1px;
		margin-bottom: calc(0px - var(--line) / 2);
		margin-top: calc(var(--line) / 2);
	}
	#main .teaser-line.teaser-dark .teaser::before {
		background-color: var(--dark); 
	}
	#main .teaser-line.teaser-yellow .teaser::before {
		background-color: var(--yellow); 
	}
	#main section div.wp-block-group.nopadding-bottom .teaser { 
		padding-bottom: var(--line);
	}
	#main .wp-block-columns .has-text-align-right {
		text-align: right;
	}
	#main .splash { 
		background-image: url(/wp-content/themes/mosterei/img/splash-light.svg);
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}
	#main .splash.splash-dark {
		background-image: url(/wp-content/themes/mosterei/img/splash-dark.svg);
	}
	#main .splash.splash-yellow {
		background-image: url(/wp-content/themes/mosterei/img/splash-yellow.svg);
	}
}

@media screen and (min-width: 900px) {
	:root {
		--margin: var(--line);
		--gap: var(--large);
	}
	html {
		font-size: 16px;
	}
	#header .container {
		align-items: center;
	}
	#navigation.open {
		align-self: center;
	}
	#hmbrgr {
		display: none;
	}
	#menu {
		display: block !important;
		font-size: var(--letter);
		margin: 0;
	}
	#menu li {
		display: inline-block;
		margin-left: var(--letter); 
	}
	#main section div.wp-block-group .wp-block-group__inner-container {
		padding: var(--xlarge) var(--margin) var(--large);
	}
	#main .wp-block-columns.three-columns .wp-block-column { /* three */
		flex-basis: 25%;
	}
	#footer .container {
		flex-wrap: nowrap;
	}
	#legal {
		align-self: flex-start;
	}
	#legal ul {
		text-align: right;
	}
	#legal li {
		margin-left: var(--letter);
		margin-right: 0;
	}
	#toplink {
		bottom: var(--line);
	}
}

@media screen and (min-width: 1200px) {
	html {
		font-size: 17px;
	}
}

@media (display-mode: standalone) {
	/* progressive web app */
	body {
		overscroll-behavior-y: contain;
	}
}