/* allgemeine Homepagestile */

.homepage #contentWrapper {
	line-height: 1.7;
}

.homepage .slider-container {
	line-height: 0;
}

.homepage .roterText {
	color: var(--home-rot);
}

.homepage h1 {
	position: relative;
	--cms-color: var(--home-rot);
	font-family: var(--delicious-font);
	font-size: 4rem;
	text-align: center;
	text-transform: uppercase;
}

.homepage h2 {
	font-family: var(--raleway-font);
	font-size: 1.6rem;
	text-align: center;
}

.homepage #contentWrapper > .cmsFlexible > .cmsHeadline {
	margin-top: 50px;
}

.homepage .selected:not(.shopMenuBtn) > .gwm-content, 
.homepage .selected:not(.shopMenuBtn) > a {
	color: var(--home-rot);
}

.homepage .selected:not(.shopMenuBtn) > .gwm-content::after, 
.homepage .selected:not(.shopMenuBtn) > a::after {
	background-color: var(--home-rot);
	bottom: 6px;
	content: "";
	height: 2px;
	left: 26px;
	position: absolute;
	width: calc(100% - 52px);
  } 

.herz-unten::after {
	position: absolute;
	content: url(img/00_HEADLINE_Herz_rot.png);
	display: inline-block;
	transform: translate(-50%, 70px);
    left: 50%;
}

.homepage #top-of-page::before {
	content: url(img/zuruecknachoben-rot.png);
}

.homepage .shop-menu-back {
	background-image: url(img/NAVI_Shop-Button-rot.png);
	background-size: 65% 95%;
}

.homepage .gwTree .shop-menu-back {
	background-size: 22% 95%;
}

.homepage .bild-links,
.homepage .bild-rechts {
	display: flex;
	flex-direction: column;
}

.homepage .bild-links > *,
.homepage .bild-rechts > * {
	width: 100%;
	max-width: 100%;
}

.homepage .bild-links img,
.homepage .bild-rechts img {
	float: none;
	padding: 40px 0;
	text-align: center;
	max-width: 500px;
	align-self: center;
}

@media screen and (min-width: 800px) {
	.homepage .bild-links,
	.homepage .bild-rechts {
		display: block;
	}

	.homepage .bild-links img {
		float: left;
		padding-right: 50px;
	}

	.homepage .bild-rechts img {
		float: right;
		padding-left: 50px;
	}
}



/* cms */

.akkordeons {
	column-gap: 30px;
	row-gap: 0;
}

.akkordeons > div > .cmsCol {
	padding: 0;
}

.akkordeons li::marker {
	color: var(--orange);
}

.akkordeons td {
	font-size: 1.3rem;
	--line-height: 1.5;
}

.akkordeons td a {
	text-decoration: none;
}

.akkordeons td:first-child {
	padding-right: 20px;
}

.cmsAccordion {
	--akkordeon-padding: 20px;
	--cms-accordion-content: url('/public/Bioshop/css/img/02-AKKORDEON-Pfeil-runter.png');
	--cms-accordion-height: 70px;
	--cms-accordion-max-height: 800px;
	--cms-accordion-label-padding: 10px var(--cms-accordion-label-right) 10px 10px;
	--cms-accordion-label-font-size: min(4vw, 1.2rem);
	--cms-accordion-label-line-height: 1.3;
	--cms-accordion-background: var(--white);
	--cms-accordion-transform: rotate(180deg);
	--cms-accordion-right: 30px;
	--cms-accordion-label-left: var(--akkordeon-padding);
	--cms-accordion-label-right: 80px;	
	display: inline-block;
}

.cmsAccordion > label {
	font-weight: bold;
	font-size: 2rem;
	padding-left: var(--akkordeon-padding);
}


.cmsAccordion > input[type="checkbox"] ~ div,
.cmsAccordion > input[type="radio"] ~ div {
	background-color: var(--white);
	margin-top: 10px;
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	padding: 0px var(--akkordeon-padding);
}

.cmsAccordion > input:checked ~ div {
	padding: var(--akkordeon-padding);
	margin-bottom: 10px;
}


p:first-child {
	margin-top: 0;
}

#home-start h1.cmsHeadline,
#products-page h1.cmsHeadline,
.shop h1.cmsHeadline {
	font-size: 50px;
	line-height: 69px;
	text-transform: uppercase;
	color: var(--orange);
	font-weight: var(--semibold);
	font-family: var(--headline-font);
}

.shop h1.cmsHeadline {
	font-size: 30px;
	line-height: 1.4;
}

#home-start h2.cmsHeadline,
#products-page h2.cmsHeadline,
.shop h2.cmsHeadline   {
	font-size: 22px;
	line-height: 30px;
	color: var(--dunkelgruen);
	font-weight: bold;
}

#home-start h3.cmsHeadline,
#products-page h3.cmsHeadline,
.shop h3.cmsHeadline   {
	color: var(--dunkelgruen);
	font-weight: bold;
}

.shop {
	--dunkelgruen: var(--greendark);
}

.cmsCol div,
.cmsCol span,
.cmsCol p {
	line-height: var(--line-height);
}

.standardPadding {
	padding-left: var(--padding-left);
	padding-right: var(--padding-right);
}

.cmsAnchorFormatted {
	text-align: left;
	padding: 10px 0;
	text-decoration: none;
	font-weight: bold;
}

.cmsAnchorFormatted::after {
	content: '>';
	padding-left: 10px;
}

.kasten.cmsAnchorFormatted {
	position: relative;
	display: inline-block!important;
	background-color: var(--dunkelgruen);
	color: var(--textaufdunkel);
	font-size: 20px;
	line-height: 28px;
	font-weight: bold;
	padding: 15px 45px 15px 15px;
	width: fit-content;
	vertical-align: middle;
}

.kasten.cmsAnchorFormatted::after {
	content: url(img/02_SLIDER_Textkasten_Pfeil.png);
	position: absolute;
	right: 10px;
	top: 50%;
  	transform: translateY(-44%);
}

.cmsGrid-4 {
	--col1: var(--cms-col1, 100%);
	--col2: var(--cms-col2, 100%);
	--col3: var(--cms-col3, 100%);
	--col4: var(--cms-col4, 100%);
	grid-template-columns: calc(var(--col1));
}

.cmsGrid-4 > * {
	grid-column: auto!important;
}

.fb-content {
	--fontsize: 16px;
	--line-height: 2;
	font-size: var(--fontsize);
}

.fb-content li {
	line-height: var(--line-height);
}

.fb-content h1,
.fb-content h2 {
	color: var(--text-color)!important;
	text-align: center;
}

.overline {
	padding-top: 30px;
	padding-bottom: 10px;
	font-family: var(--delicious-font);
	font-size: 3rem;
	color: var(--orange);
	text-align: center;
	text-transform: uppercase;

	display: flex;
    justify-content: center;
    margin: 20px auto;
}

.overline::before {
	content: url(img/00-overline-links.png);
	padding-right: 10px;
}

.overline::after {
	content: url(img/00-overline-rechts.png);
	padding-left: 10px;
}

.herztext {
	position: relative;
	color: var(--orange);
	font-size: 2rem;
	padding-top: 60px;
	padding-bottom: 50px;
	margin-bottom: 40px;
	text-align: center;
}

.herztext::before {
	position: absolute;
	content: url(img/01_CONTENT_Rezept_Herz.png);
	display: inline-block;
	transform: translate(-50%, -50px);
    left: 50%;
}

.jetzt-bestellen {
    font-size: 1.5rem;
	--link-color: var(--text-color);
    color: var(--text-color);
    background-color: var(--white);
    display: flex;
    width: max-content;
    padding: 10px 20px 10px 10px;
    justify-content: center;
    margin: 20px auto;
}

.jetzt-bestellen::after {
	content: url(img/01_NAVI_Pfeil_rechts.png);
	padding-left: 20px;
}

.center-x {
	left: 50%!important;
	transform: translateX(-50%)!important;
}

.center-y {
	top: 50%!important;
	transform: translateY(-50%)!important;
}


/* tipps */

.tipps .col-container .cmsColLeft {
	position: relative;
	text-align: center;
}

.tipps .col-container .cmsColRight {
	position: relative;
}

.tipps .col-container .cmsColLeft > .cmsCol {
	position: relative;
  	z-index: 0;
}

.tipps .huhn {
/* 	position: relative;
	left: 50%;
  	bottom: 0px;
	transform: translateX(-50%); */
	margin-bottom: 40px;
}

@media screen and (max-width: 1000px) {
	.tipps .col-container .cmsColLeft {
		text-align: center;
	}

	.tipps .col-container .cmsColLeft .cmsCol {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.tipps .col-container .cmsColLeft .cmsImage {
		float: none;
		max-width: 33%;
	}

	.tipps .col-container .cmsColLeft,
	.tipps .col-container .cmsColRight,
	.tipps .col-container .cmsCol {
		width: 100%;
		float: none;
	}	
}

@media screen and (min-width: 1001px) {
	.tipps .birne {	
		position: absolute; 
		left: 115px; 
		top: 0;
	}
	
	.tipps .moehre {	
		position: absolute; 
		left: 0; 
		top: 300px;
	}
	
	.tipps .kuerbis {	
		position: absolute; 
		left: 135px; 
		top: 600px;
	}
}





/* narrow page */

.narrow-page {
	--line-height		: 1.5;
	--padding-top		: 10px;
	--padding-bottom	: 50px;
	--page-min: min(100vw, var(--page-width));
	--page-padding: calc((var(--page-min) - var(--narrow-text-width, 600px)) / 2 );

	padding:  var(--padding-top) max(var(--padding-left), var(--page-padding)) var(--padding-bottom);	
	width: var(--page-min);
	max-width: var(--page-min);
	margin-left: auto;
	margin-right: auto;
	display: table;
}

.narrow-page div,
.narrow-page span,
.narrow-page p {
	line-height: var(--line-height);
}

.narrow-page .cmsCol > h1:first-child,
.narrow-page .cmsCol > h2:first-child {
	margin-top: 0;
}

.narrow-page .cmsCol {
	padding-bottom: 30px;
}

.narrow-page > h1:first-child {
	margin-top: 10px;
}

.homepage #contentWrapper > .cmsFlexible:not(.page100, .narrow-page) {
	display: block;
	width: var(--page-width);
	max-width: 100vw;
	margin-left: auto;
	margin-right: auto;
}