/*
 * RESETS
———————————————————————————————————————————————
 */

* {
	box-sizing: border-box;
	}

/*
 * Remove the gutter between images, videos, audio and canvas and the bottom@import("main.css"); of@import("main.css");
 * their containers: h5bp.com/i/440
 */
audio,
canvas,
img,
video {
	vertical-align: middle;
	}
	
img, video {
	max-width: 100%;
}
/*
* Remove default fieldset styles.
*/
fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	}
/*
 * Allow only vertical resizing of textareas.
 */
textarea {
	resize: vertical;
	}
/*
*  RESET SPACINGS
*/
html, body,
h1, h2, h3, h4,
p, ul, li, strong,
header, nav, section, footer {
	margin: 0; padding: 0;
	}
/*
 * Eliminate h-Scroller on Windows
 */
body { overflow-x: clip; }

.nowrap {
	white-space: nowrap;
	}

/*
 * BASE STYLES
———————————————————————————————————————————————
 */

:root {
	--color-primary: #dd0a0a;
	--color-primary-muted: rgba(221, 10, 10, 0.4);
	--color-secondary: blue;
	--color-danger: #dd0a0a;
	--color-success: #0f875f;
	--color-orange: orange;
	--color-wine: #8a0f0a;
	--color-price: #dd0a0a;
	--color-yellow: #ffed3b;
	--color-light: #fff;
	--color-gray: #c6cdd0;
	--color-lightgray: #f3f6f7;
	--color-default:#111
	}

::-moz-selection {
		background: var(--color-yellow);
		text-shadow: none;
		}
::selection {
	background: var(--color-yellow);
	text-shadow: none;
	}

html {
	color:            white;
	background-color: var(--color-primary);
	}	

.darkred {
	background-color: var(--color-wine);
	}
	
/*
 * LOAD and APPLY FONTS
 */
@font-face {
   font-family: 'GothamNarrow-Book';
   src: url('fonts/GothamNarrow-Book.woff2') format('woff2');  
   font-weight: 400;
   font-style:  normal; 
   }
 @font-face {
   font-family: 'GothamNarrow-Bold';
   src: url('fonts/GothamNarrow-Bold.woff2') format('woff2');  
   font-weight: 700;
   font-style:  normal; 
   }
 @font-face {
   font-family: 'GothamXNarrow-Ultra';
   src: url('fonts/GothamXNarrow-UltraItalic.woff2') format('woff2');  
   font-weight: 700;
   font-style:  italic; 
   }

html,
.grillfieber-btn {
   font-family: 'GothamNarrow-Book', ui-sans-serif;
   text-rendering: optimizeLegibility;
   text-wrap: pretty;
   }

h1, h2, h3, h4,
.hero-flame-type-container p,
.accordion label,
.raffel-btn {
	font-family: 'GothamXNarrow-Ultra', 'Impact', ui-sans-serif;
	font-style: italic;
	text-rendering: optimizeLegibility;
	/* text-wrap: balance; */
	font-weight: 600;
	}
	h3, h4 {
		/* letter-spacing: .05rem; */
	}


h1, h2, h3, h4 {
	will-change: transform;
	}
		
header,
header button {
	font-family: 'GothamNarrow-Bold', ui-sans-serif;
	}


   
/*
 * LAYOUT
———————————————————————————————————————————————
 */

/* BASICS
——————————————————— */  

body {
	margin: 0; padding: 0;
	}

section {
	margin: 0; padding: 0;
	} 

.section-content-container {
	position: relative;
	
	max-width: 1280px;
	margin: 0 auto;
	
	padding: var(--p);
	} 


    
/* FONT SIZES
——————————————————— */  
/* https://clamp.font-size.app/ */
/* Minimum viewport width 300px */
/* Maximum viewport width 1280px */

:root {
	/* min 44 Px — max 90 Px */
	/* --h1:  	clamp(2.75rem, 1.8699rem + 4.6939vw, 5.625rem); */
	/* min 42 Px — max 80 Px */
	--h1:  	clamp(2.625rem, 1.898rem + 3.8776vw, 5rem);
	
	/* min 40 Px — max 60 Px */
	/* --h2: 	clamp(2.5rem, 2.1173rem + 2.0408vw, 3.75rem); */
	/* min 36 Px — max 56 Px */
	--h2: 	clamp(2.25rem, 1.8673rem + 2.0408vw, 3.5rem);
	
	/* min 28 Px — max 40 Px */
	--h3: 	clamp(1.75rem, 1.5204rem + 1.2245vw, 2.5rem);
	
	/* min 24 Px — max 32 Px */
	--h4: 	clamp(1.5rem, 1.3469rem + 0.8163vw, 2rem);
	
	/* min 20 Px — max 28 Px */
	/* --intro: clamp(1.25rem, 1.0969rem + 0.8163vw, 1.75rem); */
	/* min 24 Px — max 32 Px */
	--intro: clamp(1.5rem, 1.3469rem + 0.8163vw, 2rem);
	
	/* min 16 Px — max 24 Px */
	--p: clamp(1rem, 0.8469rem + 0.8163vw, 1.5rem);
	
	
	--gutter:   calc( var(--p) * 1 );
	--v-space:  calc( var(--p) * 4 );
	}
@media screen and (orientation:portrait) {
	:root {
	--v-space:  calc( var(--p) * 3 );
	}	
	}

html {
	font-size: 1rem;
	}

h1 {
	font-size: var(--h1);
	line-height:  calc( var(--h1) * 1 );
	}
h2 {
	font-size: var(--h2);
	line-height:  calc( var(--h2) * 1 );
	}
h3 {
	font-size: var(--h3);
	line-height:  calc( var(--h3) * 1 );
	}
h4 {
	font-size: var(--h4);
	line-height:  calc( var(--h4) * 1 );
	}
h4 a {
	color: black;
	text-decoration: none;
	border: none;
	font-size: var(--h4);
	line-height:  calc( var(--h4) * 1 );
	}

.intro {
	font-size:    var(--intro);
	line-height:  calc( var(--p) * 1.75 );
	}

p, a, ul, ol, li, table {
	font-size:    var(--p);
	line-height:  calc( var(--p) * 1.3 );
	}

header, header a, header button,
footer, footer a, footer p, footer button {
	font-size: calc( var(--p) * .75 );
	color: white;
	}
header a,
footer a {
	text-decoration: none;
	}
header .denner-link a:hover,
footer .denner-link a:hover {
	border-bottom: 1px solid  white;
	}

.denner-link {
	text-align: left;
}


/* ENTERVIEW Fx
——————————————————— */  

.enterview-fx {
	transform: translateY( var(--v-space) );
	transition: transform 0.75s ease-out;
	}
.enterview-fx.showfx {
	transform: translateY(0);
	}
	


/* AUSZEICHNUNGEN
——————————————————— */  
	
.highlight {
	position: relative;
	z-index: 5;
	margin: 0 .25rem;
	
	color: black;
	}
	
.highlight::after {
	content: '';
	display: block;
	background: var(--color-yellow);
	position: absolute;
	z-index: -1;
	
	top: .5rem; bottom: .25rem;
	left: -.5rem; right: .5rem;
	
	width: calc( 100% + ( .5rem * 2) );
	
	transform: skew(-13deg);
	}
	.recipe-teaser-headline-container .highlight::after {
		top: .25rem; bottom: 0rem;
		}
	
.red {
	color: white;
	}
.red::after {
	background: var(--color-primary);
	}
.highlight.red {
	font-size: 70%;
	}	

/* HERO / TVC TEASER
——————————————————— */

.hero-section {
	position: absolute;
	left: 0; top: 0;
	width: 	100vw;
	height: 100svh;
	}
	/* .hero-section::after {
		content: '';
		display: block;
		position: absolute;
		top: 100svh;
		width: 100vw;
		height: 100vh;
		z-index: -1;
		background-color: var(--color-primary);	
		background-color: blue;
		} */
	
.hero-video-container {
	margin: 0; padding: 0;
	position: absolute;
	left: 0; top: 0;
	z-index: -1;
	width: 	100vw;
	height: 100svh;
	}

.hero-video-container video {
	margin: 0; padding: 0;
	position: absolute;
	left: 0; top: 0;
	
	width: 100%;
	height: 100%;
	
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	
	-o-object-fit: cover;
	
	object-fit: cover;
	pointer-events: none;
	}



.tvc-teaser-section {
	overflow: clip;
	position: relative;
	height: 110vh;
	}
	.tvc-teaser-section h2 {
		margin-top: var(--gutter);
	}
	
.tvc-teaser-video-container {
	margin: 0; padding: 0;
	position: absolute;
	left: 0; top: 0;
	z-index: -1;
	width: 	100vw;
	height: 100svh;
	}
.tvc-teaser-video-container video {
	margin: 0; padding: 0;
	position: absolute;
	left: 0; top: 0;
	
	width: 100%;
	height: 120%!important;
	
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
	
	-o-object-fit: cover;
	
	object-fit: cover;
	pointer-events: none;
	}
	
	
.play-btn-container {
	position: absolute;
	left: 0; top: 0;
	
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	}
#play-btn {
	display: block;
	}
	
/* TVC MODAL
——————————————————— */  
.modal {
	position: fixed;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.9);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
	z-index: 1000;
	}
.hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	}

.modal.show {
	opacity: 1;
	visibility: visible;
	}

.modal-content {
	position: relative;
	background: black;
	border-radius: calc( var(--p) * .5 );
	width: 100%;

	max-width: 90vw;
	max-height: 80vh;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	}
.modal-content iframe,
	.modal-content video {
	width: 100%;
	height: 100%;
	border: none;
	border-radius: calc( var(--p) * .5 );
	}
.close-button {
	position: absolute;
	z-index: 10;
	
	top: var(--gutter);
	right: var(--gutter);
	width: var(--h2);
	height: var(--h2);;
	background: var(--color-primary);
	color: white;
	font-size: var(--h4);
	font-weight: bold;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	transition: background 0.3s ease;
	}
	.close-button:hover {
	  background: var(--color-wine);
	}


/* FLAME TYPE
——————————————————— */  

#bigtype {
	position: absolute;
	height: 100svh;
	}
.hero-flame-type-container {
	pointer-events: none;
	width: 100vw;
	overflow-x: clip;
	
	position: absolute;
	bottom: 0;
	}
	#bigtype::after {
	content: '';
	display: block;
	position: absolute;
	top: 99svh;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	background-color: var(--color-primary);	
	}
	
.hero-flame-type {
	color: var(--color-primary);
	/* display: block; */
	white-space: nowrap;
	height: 0;
	
	font-size: 23vw;
	
	position: relative;
	bottom: 9.75vw;

	}
	@media screen and (orientation:portrait) {
		.hero-flame-type {
			bottom: 11vw;
		}
	}
/* .hero-flame-type::after {
	content: '';
	display: block;
	
	width: 100%;
	height: 21vw;
	
	background: transparent url('../media/flames-de.png') no-repeat;
	background-size: 100%;
	
	position: absolute;
	bottom: -1.75vw;
	} */

.hero-flame-type-container video {
	width: 100vw;
	
	position: absolute;
	bottom: 8vw;
	}
.hero-flame-type {
	will-change: opacity;
	}

/* HEADER
——————————————————— */  
header {
	position: absolute;
	top: 0; left: 0;
	width: 100vw;
	padding: var(--gutter);
	
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

.logo-container {
	margin: 0; padding: 0;
	width: calc( var(--p) * 9 );
	height: auto;
	}
.logo-container .logo {
	/* height: 100%; */
	margin-bottom: var(--p);
	}

.nav-and-langchooser {
	display: flex;
	align-items: center;
	gap: var(--p);
	}
	@media screen and (orientation:portrait) {
		
	  .nav-and-langchooser {
		  gap: calc( var(--gutter) * .5 );
	  }
	  
	  }


/* LANG DROPDOWN
——————————————————— */  
.lang-dropdown {
	position: relative;
	display: inline-block;
	}
	
.lang-dropdown-button {
	padding: calc( var(--p) * .5 ) calc( var(--p) * .5 );
	background-color: transparent;
	color: white;
	border: none;
	cursor: pointer;
	}

.lang-dropdown-button img {
	width: calc( var(--p) * 1 );
	margin-right: calc( var(--p) *.4 );
	}

/* Dropdown Content */
.lang-dropdown-content {
	list-style-type: none;
	display: none;
	position: absolute;
	left: var(--p);
	background-color: var(--color-wine);
	box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
	z-index: 1;
	}

.lang-dropdown-content a {
  color: white;
  padding: calc( var(--p) * .5 ) calc( var(--p) * .5 );
  text-decoration: none;
  display: block;
  }

.lang-dropdown-content a:hover {
  background-color: var(--color-primary);
  }

/* Show on Hover */
.lang-dropdown:hover .lang-dropdown-content {
  display: block;
  }

.lang-dropdown:hover .lang-dropdown-button {
  /* background-color: var(--color-default); */
  }



/* SECTION HEADER
——————————————————— */  

.section-headline-container {
	min-height: 40vh;
	}

.section-headline-container h1 {
	margin-top: var(--v-space);
	margin-bottom: calc( var(--p) * 2 );
	}	

.section-headline-container h2, 
.section-headline-container h3, 
.section-headline-container h4 {
	margin-bottom: calc( var(--p) * 2 );
	}	

.section-header {
	position: relative;
	}
.section-header-visual-container {
	position: relative;
}
.section-header-visual {
	width: 60%;
	overflow: clip;
	
	position: absolute;
	z-index: 5;
	
	right: 0;
	/* Revisit this calc */
	top: calc( var(--p) * 9  * -1 );
	
	/* background: blue; */
	}
	.noah-peperoni {
		top: calc( var(--p) * 40  * -1 );
		right: calc( var(--p) * 2  * 1 ); 
	}
	.noah-zeigt {
		
	}
	.noah-gemuese {
		top: calc( var(--p) * 16  * -1 );
	}
	
	@media screen and (max-width: 900px) {
		.noah-geniesst {
			width: 100%;
			top: calc( var(--p) * 7  * 1 );
		}
		.noah-geniesst img {
			position: relative;
			left: calc( var(--p) * 3  * 1 ); 
		}
		.noah-peperoni {
			/* background: blue; */
			width: 100%;
			top: calc( var(--p) * 16  * -1 );
			/* top: 30vh; */
		}
		.noah-peperoni img {
			position: relative;
			left: calc( var(--p) * 4  * 1 ); 
		}
		
		.grill-deals-section .section-header {
			min-height: 50vh;
			/* background: blue; */
		}
		.noah-zeigt {
			width: 80%;
			top: calc( var(--p) * 8.5  * 1 );
		}
		.noah-zeigt img {
			position: relative;
			left: calc( var(--p) * 2  * 1 );
		}
		.noah-gemuese {
			width: 80%;
			top: calc( var(--p) * .5  * -1 );
		}
		.noah-gemuese img {
			position: relative;
			left: calc( var(--p) * 1  * 1 ); 
		}
		
		
	}
	@media only screen 
	  and (min-device-width: 768px) 
	  and (max-device-width: 834px) 
	  and (orientation: landscape) 
	  and (-webkit-min-device-pixel-ratio: 2) {
		.noah-peperoni {
			right: 0; 
			}
	  }
	@media only screen 
	  and (min-device-width: 768px) 
	  and (max-device-width: 834px) 
	  and (orientation: portrait) 
	  and (-webkit-min-device-pixel-ratio: 2) {
		 .noah-peperoni {
			 width: 100%;
			 top: calc( var(--p) * 29  * -1 );
			 /* top: 30vh; */
		 }
		 .noah-peperoni img {
			 position: relative;
			 left: calc( var(--p) * 4  * 1 ); 
		 }
	  }

	
#first-hl {
	position: relative;
	}

/* .noah-grillfieber-moment {
	position: relative;
	top: -30rem;
	}	 */
	

/* RECIPES
——————————————————— */  

.recipe-section {
	/* margin-top: 100vh; */
	margin-top: 100svh;
	}

.all-recipes {
	background-image: linear-gradient(var(--color-wine), var(--color-primary));
	padding-bottom: calc( var(--v-space) * 3 );
	}
.all-recipes .section-content-container {
	padding-top: calc( var(--v-space) * 1 );
	}

.recipe-container {
	position: relative;
	z-index: 5;
	
	color: black;
	background-color: var(--color-wine);
	
	padding: var(--gutter);
	}
.recipe-container .section-content-container {
	background: var(--color-lightgray);
	padding: calc( var(--gutter) * 2 ) calc( var(--gutter) * 3 );
	border-radius: calc( var(--p) * .5 );
	}
	@media screen and (max-width: 900px) {
		.recipe-container .section-content-container {
			padding: calc( var(--gutter) * 1 ) calc( var(--gutter) * 1 );
			/* background: blue;   */
		}
	}

.hidden-recipe {
	display: none;
	}
	
.prep-details ul {
	padding-top: calc( var(--p) * .5 );
	}	
.prep-details ul li {
	display: inline-block;
	margin-right: var(--p);
	}
	.prep-details ul li img {
		vertical-align: middle;
		margin-right: .5rem;
		}			

.recipe-visual-and-ingredients-container {
	padding: calc( var(--gutter) * 1 ) 0; 
	display: flex;
	gap: var(--gutter);
	}
	@media screen and (max-width: 900px) {
		.recipe-visual-and-ingredients-container {
			flex-direction: column; 
		}
	}
.recipe-visual-container {
	/* border-radius: calc( var(--p) * .5 ); */
	position: relative;
	width: 70%;
	height: 70vh;
	overflow: clip;
	}
.recipe-visual-container img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center;
	object-position: center;
	}
.recipe-visual-container iframe {	
	aspect-ratio: 9 / 16;
	}
	@media screen and (max-width: 900px) {
		.recipe-visual-container {
			width: 100%;
			height: 70vh;
		}
		.recipe-visual-container img {
			width: 100%;
			height: auto;	
		}
		.recipe-visual-container iframe {
			height: 100%;	
		}
		.recipe-visual-container {
			margin-bottom: var(--p);
		}
	}
.recipe-ingredients {
	position: relative;
	min-width: 30%;
	padding: calc( var(--p) * 1.5 ) var(--p);
	border: 1px solid black;
	border-radius: calc( var(--p) * .5 );
	
	display: flex;
	align-items: center;
	}
.recipe-ingredients h3 {
	display: inline-block;
	padding: 0 .5rem;
	background-color: var(--color-lightgray);
	position: absolute;
	top: calc( var(--h3) * .6 * -1 );
	}
.recipe-ingredients table tr td {
	padding-bottom: .5rem;
	}
.recipe-ingredients table tr td:first-child {
	min-width: 6ch;
	text-align: right;
	padding-right: 1rem;
	vertical-align: top;
	} 	

.recipe-prep {
	position: relative;
	
	display: flex;
	gap: calc( var(--gutter) * 3 );
	}
	@media screen and (max-width: 900px) {
		.recipe-prep {
			flex-direction: column; 
			gap: calc( var(--gutter) * 1 );
		}
	}
.recipe-prep h3,
.recipe-prep p,
.recipe-prep-images {
	margin-bottom: var(--p);
	}
	
.recipe-prep-images {
	display: flex;
	}
.recipe-prep-images img {
	width: 50%
	}
	
.prep-content {
	margin-bottom: var(--v-space);
	}
	
.prep-ol {
	counter-reset: custom-counter;
	list-style: none;
	padding-left: 2em;
	}

.prep-ol li {
	counter-increment: custom-counter;
	position: relative;
	margin-bottom: 0.5em;
	}

.prep-ol li::before {
	content: counter(custom-counter) ".";
	position: absolute;
	left: -2rem;
	font-family: 'GothamXNarrow-Ultra', sans-serif;
	}
.prep-ol li {
	margin-bottom: var(--p);
	}


.user-action-container {
	min-width: calc( var(--p) * 12 );
	padding-bottom: var(--p);
	}
	.user-action-container .sticky-container {
		position: sticky;
		top: var(--gutter);
		}
.share-recipe,
.download-recipe {
	margin-bottom: var(--p);
	}
	@media screen and (max-width: 900px) {
		
		.user-action-container {
			order: 2; 
		}
		
		.user-action-container .sticky-container {
			position: static; 
		}
	}

.share-recipe a,
.download-recipe a {
	line-height: calc( var(--p) * 1.2 );
	
	color: var(--color-primary);
	text-decoration: none;
	
	display: flex;
	gap: var(--p);
	align-items: center;
	/* background: blue; */
	
	padding: calc( var(--p) * .5 ) var(--p);
	border: 1px solid var(--color-primary);
	border-radius: calc( var(--p) * 2 );
	
	transform-origin: center;
	transition: background-color 350ms ease-out, transform 350ms ease-out;
	}
	.share-recipe a:hover,
	.download-recipe a:hover {
		color: white;
		background-color: var(--color-primary);
		
		transform: scale(.98);  
		transition: background-color 50ms ease-in, transform 100ms ease-in;
		}
	.share-recipe a:hover img,
	.download-recipe a:hover img {
		filter: brightness(10);	
	}

.share-recipe img,
.download-recipe img {
	display: block;
	width:  var(--p);
	height: var(--p);
	margin-left: .5rem;
	}
.share-recipe span,
.download-recipe span {
	display: block;
	}	

.prep {
	padding-top: var(--v-space);
	}	
.prep h2 {
	margin-bottom: calc( var(--v-space) * .5 );
	}	
.prep h3 {
	margin-top: calc( var(--v-space) * .75 );
	}	

.prep-toggle {
	
}

.prep-content-wrapper {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.4s ease-in-out;
	}

.prep-show-content {
	max-height: 400vh;
	}

.grillfieber-btn {
	display: inline-block;
	
	font-size: var(--p);
	
	line-height: calc( var(--p) * 1.2 );
	
	color: white;
	background-color: var(--color-primary);
	text-decoration: none;
	
	padding: calc( var(--p) * .75 ) calc( var(--p) * 1.25 );
	border: none;
	border-radius: calc( var(--p) * 2 );
	
	transform-origin: center;
	transition: transform 350ms ease-out;
	}
	.grillfieber-btn:hover {
		transform: scale(.98);  
		transition: transform 100ms ease-in;
		}

.prep-toggle .grillfieber-btn {
		display: flex;
		gap: calc( var(--p) * .5 );
		
		justify-content: center;
		align-items: center;
		}

.prep-toggle.opened a img {
	transform: rotate(180deg);
	transition: transform 350ms ease-out;
	}
	
.prep-toggle {
	/* position: relative;
	top: 5rem; */
	}
	
/* FLAME BUTTONS
		——————————————————— */  
	.flame-button-container {
		position: relative;
		/* display: inline-block; */
		/* overflow: hidden; */
		}
		
	.flames-overlay {
		position: absolute;
		/* bottom: calc( var(--p) * 1.5 ); */
		bottom: 60%;
		left: calc( var(--p) * -1 );
		
		width: calc( 100% + ( var(--p) * 2 ) );
		height: calc( var(--p) * 6 );
		pointer-events: none; /* allow clicks to go through */
		/* display: flex; */
		/* justify-content: space-between; */
		
		transition: opacity 0.3s ease;
		z-index: 2;
		
		opacity: 0;
		/* display: none; */
		/* background: rgba(255,0,0,.3); */
		}
		.raffel-button-container .flames-overlay {
			bottom: 75%;
		}

.play-btn-container .flame-button-container .flames-overlay {	
	/* background: blue; */
	width: calc( var(--h1) * 2 );
	margin-left: calc( var(--h1) * .8 );
	}
		
	.flames-left,
	.flames-right {
		height: calc( var(--p) * 5 );
		
		position: absolute;
		height: 100%;
		/* object-fit: cover; */
		
		/* background: blue; */
		}
	.flames-right {
		right: calc( var(--p) * 5 * .0005 );
		/* background: greenyellow; */
		}
		
	.flames-middle {
		/* flex-grow: 1; */
		width: calc( 100% - ( var(--p) * 5 * .5 ) );
		margin-left: calc( var(--p) * 5 * .25 );
		height: 100%;
		-o-object-fit: cover;
		object-fit: cover;
		
		/* background: aqua; */
		}
		
	.flame-button-container:hover .flames-overlay {
		/* display: block; */
		opacity: 1;
		}
		
	.flame-btn {
		position: relative;
		z-index: 1;
		}
	
	.teaser-btn {
		cursor: pointer;
		text-align: center;
		position: absolute;
		left: var(--p);
		bottom: var(--p);
		width: calc( 100% - (var(--p) * 2 ) );
		}
	.teaser-btn button, 
	.teaser-btn a,
	.raffel-button-container button {
		width: 100%;
		}	
	.teaser-btn a {
		color: white;
		text-decoration: none;
		}
			
	// hide on touch devices
	@media (hover: none) and (pointer: coarse) {
	  .flames-overlay {
		display: none;
	  }
	}
	@media screen and (max-width: 900px) {
		.flames-overlay {
			display: none;
		  }
	}


/* RECIPE TEASER / PARTICIPANTS / GRILLDEALS SWIPER
——————————————————— */  


.swiper-button-prev,
.swiper-button-next {
	background-color: var(--color-primary);
	border: 2px solid white;
	color: white;
	border-radius: 50%;
	width: var(--h1);
	height: var(--h1);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--h1);
	}
.swiper-button-prev {
	padding-right: calc( var(--h1) / 10 );
	}
.swiper-button-next {
	padding-left: calc( var(--h1) / 10 );
	}

.swiper-button-prev::after,
.swiper-button-next::after {
	transform: scale( .75 );
	}
	@media screen and (max-width: 900px) {
		.swiper-button-prev::after,
		.swiper-button-next::after {
			transform: scale( .4 );
			}
	}


	
/* SWIPER SETTINGS */  

.swiper-wrapper {
	padding-left: calc( ( 100vw - 1280px ) / 2 );	
	}
	@media screen and (max-width: 900px) {
		.swiper-wrapper {
			padding-left: calc( var(--gutter) * 3 );
		}
		}
/* .swiper-slide:first-child {
	margin-left: calc( ( 100vw - 1280px ) / 2 );
	}
.swiper-slide:last-child {
	margin-right: calc( ( 100vw - 1280px ) / 2 );
	}
	@media screen and (max-width: 900px) {
		.swiper-slide:first-child {
			margin-left: var(--gutter);
			}

	} */
	
.swiper-slide {
	width: 26vw;
	aspect-ratio: 2/3;
	
	border-radius: calc( var(--p) * .5 );
	overflow: clip;
	}
	.recipe-teaser-container,
	.participant-container,
	.grilldeal-container {
		/* width: 100%; */
		aspect-ratio: 2 / 3;
		}
	@media screen and (max-width: 900px) {
		.swiper-slide {
			width: 65vw;
			aspect-ratio: 2 / 3;	
		}
		.recipe-teaser-container,
		.participant-container,
		.grilldeal-container {
			/* width: 100%; */
			aspect-ratio: 2 / 3;
			}
	}

.recipe-teaser-visual-container,
.participant-visual-container,
.grilldeal-visual-container {
	position: relative;
	overflow: clip;
	
	width:  100%;
	height: 100%;
	}

.recipe-teaser-visual-container {
	height: 52%;		
	}	

.participant-visual-container {
	height: 85%;
	}
	@media screen and (max-width: 900px) {
		.participant-visual-container {
		height: 80%;
		}
	}


.grilldeal-container,
.recipe-teaser-container {
	position: relative;
	color: black;
	background-color: var(--color-light);
	}
	.grilldeal-container {
		background-color: #fff3cb;
		}
.recipe-teaser-headline-container {
	padding: var(--p);
	}


.participant-container {
	color: black;
	background-color: var(--color-yellow);
	padding: var(--p);
	border-radius: calc( var(--p) * .5 );
	}


	
.recipe-teaser-visual-container img,
.participant-visual-container img {
	margin: 0; padding: 0;
	position: absolute;
	left: 0; top: 0;
	
	width: 100%;
	height: 100%;
	
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	
	-o-object-fit: cover;
	
	object-fit: cover;
	pointer-events: none;
	}
.grilldeal-visual-container img {
	margin: 0; padding: 0;
	position: absolute;
	left: 0; top: 0;
	
	width: 100%;
	/* height: 100%; */
	}
.participant-name-container {
	padding-top: calc( var(--p) * .5 );
	}


/* RAFFEL SECTION
——————————————————— */  

.raffel-section .section-headline-container {
	min-height: 75vh;
	}
	
.raffel-section .section-headline-container h4 {
	max-width: 28ch;
	}

.raffel-description-container {
	position: relative;
	z-index: 9;
}

.raffel-description-container h2, 
.raffel-description-container h3 {
	margin-bottom: var(--v-space);
	}	
.raffel-description-steps-container {
	margin-bottom: calc( var(--v-space) * .5 );
	}
	@media screen and (max-width: 900px) {
		.raffel-description-container h2, 
		.raffel-description-container h3 {
			/* margin-bottom: calc( var(--v-space) * 1.5 ); */
			}	
			
		.raffel-description-steps-container {
			/* margin-bottom: calc( var(--v-space) * 1.5 ); */
			}
		.raffel-step  {
			margin-bottom: calc( var(--v-space) * .75 );
		}
		.raffel-button-container {
			margin-bottom: calc( var(--v-space) * .75 );
		}
	}

.raffel-description-container {
	color: black;
	background-color: var(--color-yellow);
	
	position: relative;
	left: calc( ( var(--p) / 2 ) * -1 );
	width: calc( 100% + ( var(--p) * 1 ) );
	
	/* padding: calc( var(--p) / 2 ); */
	padding: calc( var(--p) * 2 );
	padding-bottom: calc( var(--p) * 1 );
	
	border-radius: calc( var(--p) * .5 );
	
	margin-bottom: var(--v-space);
	
	}

.raffel-description-steps-container {
	padding-left: calc( var(--p) * 2 );
	/* display: flex;
	justify-content: center;	 */
	}
	#raffle-result .raffel-description-steps-container {
		padding: 0;
		text-align: center;
	}

.raffel-steps {
	/* width: 90%; */
	
	display: flex;
	gap: calc( var(--p) * 2 );
	justify-content: space-around;
	
	align-items: flex-start;
	
	/* background: blue; */
	}
	@media screen and (max-width: 900px) {
		.raffel-steps {
			flex-direction: column; 
		}
	}

.raffel-step {
	position: relative;
	flex: 1;
	/* background: blue; */
	/* width: 30%; */
}

.raffel-step h4 {
	/* padding-left: calc( var(--h4) * 2 ); */
	/* position: relative; */
	padding-left: calc( var(--h4) * 2 );
	margin-bottom: var(--p);
	}
.raffel-step .num {
	width:  calc( var(--h4) * 3 );
	height: calc( var(--h4) * 3 );
	position: absolute;
	
	left: calc( var(--h4) * -1.35 );
	top:  calc( var(--h4) * -.6 );
	}
.raffel-step img {
	width: 100%;
	}

.raffel-button-container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	}
	
.raffel-btn {
	font-size: var(--h4);
	}

.raffel-section {
	padding-bottom: var(--v-space);
	background-image: linear-gradient(var(--color-primary), var(--color-wine));
	}

.participant-entries-headline-container h2 {
	margin-bottom: calc( var(--v-space) * .5 );
	}

.raffel-step p {
	/* background: blue; */
	/* min-height: calc( var(--p) * 2.5 ); */
	}	

	
/* FILEUPLOAD + FORM
——————————————————— */ 
button {
	cursor: pointer;
}

.uploadcare--powered-by {
	display: none!important;
	}

.uploadcare--widget__button_type_open {
	font-size: var(--p)!important;
	}
.uploadcare--widget__button_type_open:hover {
	font-size: var(--p)!important;
	}
	
.uploadcare--widget__button,
.uploadcare--button_size_big {
	background: var(--color-primary);	
	}

.uploadcare--widget__button:hover,
.uploadcare--button_size_big:hover {
	background: var(--color-wine);
	}

.file-upload-button,
.raffel-contact-data-form {
	padding: var(--p) 0 0 0;
	}
.raffel-contact-data-form input {
	display: block;
	font-size: var(--p);
	width: 100%;
	margin-bottom: calc( var(--p) *.25 );
	
	padding: calc( var(--p) * .2 ) calc( var(--p) * .5 );
	border-radius: calc( var(--p) * .4 );
	border: 1px solid var(--color-wine);
	}

.raffel-button-container p {
	display: block;
	margin-top: var(--p);
	}

.raffel-button-container p a {
	color: black;
	}

.raffle-result-container {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	/* background: blue; */
	/* height: calc( var(--p) * 18 ); */
	min-height: 50vh;
	
	display: none;
	}


 .spinner {
		display: none;
		margin-top: 10px;
		font-size: 14px;
		color: #333;
	  }
	
	  .error-message {
		color: red;
		font-size: 0.9em;
		margin-top: 4px;
	  }
	
	  .status-message {
		margin-top: 10px;
		font-size: 1em;
		padding: 10px;
		border-radius: 5px;
		display: none;
	  }
	
	  .status-success {
		color: #155724;
		background-color: #d4edda;
		
		color: greenyellow;
		background-color: green;
		
		border: none;
	  }
	
	  .status-error {
		color: #721c24;
		background-color: #f8d7da;
		border: 1px solid #f5c6cb;
	  }
	
	  .disabled {
		opacity: 0.6;
		pointer-events: none;
	  }


/* TNB
——————————————————— */  

.tnb .hero-section {
	background: var(--color-wine);
	}
.tnb .hero-section,
.tnb #bigtype {
	height: 60vh;
	}
.tnb .recipe-section {
	margin-top: 50vh;
	}
	@media screen and (max-width: 900px) {
		.tnb .hero-section,
		.tnb #bigtype {
			height: 30vh;
			}
			
		.tnb .recipe-section {
			margin-top: 25vh;
			}
	}
	
.tnb .section-headline-container {
	min-height: 20vh;
	width: 50ch;
	}
	@media screen and (max-width: 900px) {
		.tnb .section-headline-container {
			width: 30ch;	
		}
	}
	
.tnb h1 {
	/* color: var(--color-yellow); */
	}

.tnb .faqs {
	padding-top: calc( var(--p) * 1 );
	padding-bottom: calc( var(--p) * 2 );
	}

.tnb h3 {
	margin-top: calc( var(--p) * 2 );
	margin-bottom: var(--p);
	}
.tnb .intro {
	margin-bottom: var(--p);
	}

.tnb .faqs a,
.tnb .faqs a:visited {
	color: black!important;
	border-bottom: 1px solid black!important;
	}
.tnb .spacer {
	height: var(--v-space);
	}
.tnb .recipe-container {
	background-image: linear-gradient( var(--color-wine), var(--color-primary) );
	}

.tnb .section-headline-container {
	min-height: 35vh;
	}
	


/* FAQ SECTION
——————————————————— */  

.accordion-container {
	margin-top: calc( var(--v-space) * .5 );
	
	display: flex;
	justify-content: center;
	}
	
.faqs {
	width: 75%;
	}
	@media screen and (orientation:portrait) {
		.faqs {
		width: 100%;
		}		
	}
	
	
.faqs a {
	color: var(--color-yellow);
	text-decoration: none;
	border-bottom: 1px solid var(--color-yellow);
	transition: color .35s ease-out;
	}
.faqs a:hover {
	color: white;
	border-bottom: 1px solid var(--color-yellow);
	transition: color .05s ease-in;
	}

.accordion label {
  /* color: var(--color-yellow); */
  color: white;
  font-size: var(--h3);
  
  position: relative;
  
  z-index: 1;
  
  text-decoration: none;
  
  padding: .35rem .15rem 0rem .15rem;
  /* transition: color .4s ease-out 0s; */
  transition: color .35s ease-out;
  }
.accordion label:hover {
  /* color: white; */
  color: var(--color-yellow);
  text-decoration: none;
  transition: color .05s ease-in;
  }
  
  

.accordion {
	overflow: hidden;
	margin-bottom: calc( var(--p) * .5 );
	}
   .accordion label  {
	 width: 100%;
	 display: inline-block;
	 cursor: pointer;
	 padding-right: 2rem;
	 /* transition: color .75s ease; */
	 }
	 @media (min-width: 70rem) {
  
	   .accordion div p {
		 /* padding-top: 0;  */
		 }
	   .accordion label  {
		 /* margin-bottom: var(--gap); */
	   }
  
	 }
	 
.accordion label::after  {
	content: '+';
	position: absolute;
	right: .75rem;
	}
.accordion .accordion-content {
	max-height: 0;
	opacity: 0;
	transition: all 0.25s ease;
	}
.accordion .accordion-content p {
	padding-left: calc( var(--p) * .2 );
	}
/* Toggle visibility of content when heading is clicked */
.accordion input[type="radio"]:checked + label +  .accordion-content {
	max-height: 600vh;
	opacity: 1;
	padding: 1rem 0 2rem 0;
	transition: all 0.25s ease;
	}
.accordion input[type="radio"]:checked + label {
	/* color: white; */
	color: var(--color-yellow);
	transition: all 0.25s ease;
	}
.accordion input[type="radio"]:checked + label::after {
	content: '';
	}
  
/* Hide the radioes visually */
.accordion input[type="radio"] {
 position: absolute;
 opacity: 0;
 pointer-events: none;
 }  

.accordion-content {
	text-transform: none;
	padding: 0;
	/* transition: padding .5s ease; */
	}


.faqs-section {
	padding-bottom: var(--v-space);
}
	
	
/* GRILL DEALS
——————————————————— */  	
	
.grilldeal-slider-container {
	position: relative;
	z-index: 9;
	
	/* background-image: linear-gradient(var(--color-primary), var(--color-wine)); */
	background-color: var(--color-primary);
	padding: var(--p) 0;
	}


/* FOOTER
——————————————————— */  

footer {
	padding: var(--p);
	}

footer a {
	margin: 0 calc( var(--p) / 2 );
	border-bottom: 1px solid rgba(255,255,255,0);
	transition: border .35s ease-out;
	}
footer a:hover {
	border-bottom: 1px solid rgba(255,255,255,1);
	transition: border .05s ease-in;
	}
	
.footer-nav,
.footer-secondary-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	}
.footer-secondary-nav {
	justify-content: flex-end;
	}

	@media screen and (orientation:portrait) {
		
		.footer-nav,
		.footer-secondary-nav {
			flex-direction: column;	
		}
		
		.footer-meta-links,
		.lang-chooser {
			margin-bottom: var(--p);
		}

	}
	
.copyright {
	/* text-align: right; */
	margin: 0 var(--p);
	}
	@media screen and (orientation:portrait) {
		.lang-chooser {
			text-align: center;	
		}
		.footer-secondary-nav {
			align-items: center;
		}

	}
	

/* RAFFEL CTA
	——————————————————— */  
	.raffel-cta {
		cursor: pointer;
		position: absolute;
		width: calc( var(--p) * 12 );
		height: calc( var(--p) * 12 ); 
		
		right: var(--gutter);
		top: calc( var(--v-space) * 1.5 );
		
		transition: transform 300ms ease-in;
		}
	.raffel-cta img {
		width: 100%;
		height: 100%;
		}
	.raffel-cta:hover {
		transform: scale(.95);  
		transition: transform 100ms ease-in;
		}
		
	
	
	/* OPENER ANIMATION
	——————————————————— */  
	
	#hero {
	  opacity: 0;
	  animation: fadeIn 1.5s ease-in forwards;
	  animation-delay: 0.2s;
	  }
	  
	.raffel-cta {
		opacity: 0;
		animation: bumpIn .5s ease-in-out forwards;
		  animation-delay: 1.5s;
		}
	
	.hero-flame-type-container {
	  opacity: 0; /* initial state */
	  animation: fadeIn .5s ease-in-out forwards;
	  animation-delay: 1s;
	  }
	
	@keyframes fadeIn {
	  to {
		opacity: 1;
	  }
	}
	@keyframes bumpIn {
		0% {
			opacity: 0;
		scale: .3;
		}
		25% {
			opacity: 1;
		}
		70% {
			opacity: 1;
		scale: 1.2;
		}
		100% {
			opacity: 1;
		scale: 1;
		}
	}