/* @group FONTS */

@font-face {
	font-family: 'Cabin';
  src: url('../fonts/Cabin-VariableFont_wdth,wght.woff2') format('woff2 supports variations'),
       url('../fonts/Cabin-VariableFont_wdth,wght.woff2') format('woff2-variations');
  font-weight: 400 700;
	font-stretch: 75% 100%;
  font-display: swap;
}

@font-face {
	font-family: 'Cabin';
  src: url('../fonts/Cabin-Italic-VariableFont_wdth,wght.woff2') format('woff2 supports variations'),
       url('../fonts/Cabin-Italic-VariableFont_wdth,wght.woff2') format('woff2-variations');
  font-weight: 400 700;
	font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}

@font-face {
	font-family: 'Utopian';
  src: url('../fonts/Utopian-OneBW.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* @end */

/* @group VARIABLES */

:root {

	--color-base: #4D4D4D;
	--color-primary: #345135;
	--color-background: #FFFFFF;
	--color-grey: #E5E5E5;
	
	--font-family: 					"Cabin", Verdana, Arial, sans-serif;
	--font-family-heading: 	"Utopian", Verdana, Arial, sans-serif;
	
	--font: 		400 1rem/1.4 var(--font-family);
  --font-lg: 	600 1.05rem/1.4rem var(--font-family);
  --font-xl: 	400 clamp(1.7rem, 5vw, 2.8rem)/1.2 var(--font-family-heading);
	
	--max-width: 80rem;
	
	--spacing-block-sm: 	clamp(1.4rem, 4.2vw, 2.1rem);
	--spacing-block: 		clamp(2rem, 5.6vw, 2.8rem);
	--spacing-block-lg:	clamp(2.8rem, 9vw, 4.8rem);
	
	--spacing-inline-sm: 	clamp(1rem, 2.8vw, 1.4rem);
	--spacing-inline: 			clamp(1rem, 6vw, 5.6rem);
	
	--spacing-columns-sm: 1.4rem;
	--spacing-columns: 		2.8rem;
	--spacing-columns-lg: var(--spacing-inline);
	
}

/* @end */

/* @group BASE */

html {
	scroll-behavior: smooth;
	color: var(--color-base);
	background-color: var(--color-background);
	font-family: var(--font-family);
	font-size: 125%;
	letter-spacing: .015em;
}

body {
  min-width: 320px;
	font: var(--font);
	font-feature-settings: "ss01";
	font-variant-numeric: tabular-nums;
}

h1 {
	color: var(--color-primary);
	font: var(--font-xl);
	text-transform: lowercase;
}

h1:has(+ *) {
	margin-block-end: 1.4rem;
}

h2,
.subtitle {
	color: var(--color-primary);
	font: var(--font-lg);
	text-transform: uppercase;
}

h2.crossheading {
	border-block-end: .1rem solid var(--color-primary);
}

* + h2 {
	margin-block-start: 2.1em;
}

* + h2.crossheading {
	margin-block-start: var(--spacing-block-lg);
}

h2:has(+ *) {
	margin-block-end: .7em;
}

h2.crossheading:has(+ *) {
	margin-block-end: 1.4em;
}

h3 {
	color: var(--color-primary);
	font-weight: 600;
}

* + h3 {
	margin-block-start: 1.4em;
}

h3:has(+ *) {
	margin-block-end: .7em;
}

p:has(+ *) {
	margin-block-end: 1em;
}

strong {
	font-weight: 600;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

.section p:first-of-type:first-letter {
	float: left;
	margin-block-start: .1em;
	margin-inline-end: .05em;
	color: var(--color-primary);
	font-size: 300%;
	line-height: .75;
}

.section h1 + p:first-of-type:first-letter,
.section h3 + p:first-of-type:first-letter,
.section li > p:first-of-type:first-letter,
.section p:first-of-type:has(> a):first-letter {
	float: unset;
	margin-top: unset;
	padding-right: unset;
	font-size: unset;
	line-height: unset;
}

/* @group Lists */

.text ul:has(+ *),
.text ol:has(+ *) {
	margin-block-end: 1.4em;
}

.text li {
	display: table;
}

.text li:has(+ *) {
	margin-block-end: .7em;
}

	.text ul li::before {
		content: "▪︎";
		display: table-cell;
		width: 1em;
		padding-inline-end: .2em;
		text-align: center;
	}
	
.text ol {
  counter-reset: counter;
}
	
	.text ol li {
	  counter-increment: counter;
	}
	
		.text ol li::before {
		  content: counter(counter) ".";
	    display: table-cell;
	    width: 2.1em;
			color: var(--color-primary);
			font-weight: 600;
			text-align: center;
		}

/* @end */

/* @group Links */

a {
	text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: 0.15em;
  transition: text-decoration 0.15s ease-in-out 0s;
}

.header a {
	text-decoration-color: transparent;
}

.main a {
	text-decoration-color: color-mix(in oklch, var(--color-primary), transparent 60%);
}

.footer a {
	text-decoration-color: color-mix(in oklch, var(--color-background), transparent 60%);
}

.header a:hover,
.header a.active,
.footer a:hover {
  text-decoration-color: currentColor;
}

.main a:hover {
	text-decoration-color: var(--color-primary);
}

	@media screen {
		
		.main a[href^="/@/file"],
		.main a[href*="//youtu"],
		.colophon a[href^="mailto:"],
		.colophon a[href^="tel:"],
		.colophon a[href*="//maps"] {
		  position: relative;
		  display: inline-block;
			padding-inline-start: 1.4em;
		}
		
			.main a[href^="/@/file"]::before,
			.main a[href*="//youtu"]::before,
			.colophon a[href^="mailto:"]::before,
			.colophon a[href^="tel:"]::before,
			.colophon a[href*="//maps"]::before {
			  content: "";
			  position: absolute;
				inset-block-start: 0.2em;
			  inset-inline-start: 0;
				width: 1em;
			  height: 1em;
			  background-color: currentColor;
			  -webkit-mask-size: cover;
			  mask-size: cover;
			  transition: text-decoration 0.15s ease-in-out 0s;
			}
			
			.main a[href^="/@/file"]::before {
			  -webkit-mask-image: url(../images/pdf.svg);
			  mask-image: url(../images/pdf.svg);
			}
			
			.main a[href*="//youtu"]::before {
			  -webkit-mask-image: url(../images/video.svg);
			  mask-image: url(../images/video.svg);
			}
			
			.colophon a[href^="mailto:"]::before {
			  -webkit-mask-image: url(../images/email.svg);
			  mask-image: url(../images/email.svg);
			}
			
			.colophon a[href^="tel:"]::before {
			  -webkit-mask-image: url(../images/phone.svg);
			  mask-image: url(../images/phone.svg);
			}
			
			.colophon a[href*="//maps"]::before {
			  -webkit-mask-image: url(../images/location.svg);
			  mask-image: url(../images/location.svg);
			}
		
	}

/* @end */

/* @end */

/* @group Header */

.header {
	
}
	
	@media (width < 1280px) {
		
		.header {
			pointer-events: none;
			position: fixed;
			z-index: 10;
			display: grid;
			grid-template-columns: minmax(0, 1fr); /* Spalte darf auf 0 schrumpfen */
			grid-template-rows: max-content 1fr;
			width: 100%;
			min-height: 100vh;
			min-height: 100dvh;
		}

	}

/* @end */

/* @group Topbar */

.topbar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) max-content;
	padding-block: .5rem;
	padding-inline: var(--spacing-inline-sm);
	color: var(--color-background);
	background-color: var(--color-primary);
}

	.topbar nav {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	@media (width < 1280px) {
		
		.topbar {
			pointer-events: auto;
		}
		
			.topbar .channels {
				display: none;
			}
		
	}

	@media (width >= 1280px) {
		
		.topbar .menu-toggle {
			display: none;
		}
		
	}

/* @end */

/* @group Banner */

.banner {
	padding-inline: 1.4rem;
	color: var(--color-primary);
}
	
	@media (width < 1280px) {
		
		.banner {
			pointer-events: none;
			display: grid;
			grid-template-rows: 1fr max-content;
			gap: 1rem;
			padding-block: 2rem;
			background-color: var(--color-background);
			opacity: 0;
			transition: opacity .3s ease-in-out 0s;
		}
		
		.banner.open {
			pointer-events: auto;
			opacity: 1;
		}
		
	}

	@media (width >= 1280px) {
		
		.banner {
			padding-block: 2.8rem var(--spacing-block-lg);
		}
		
			.banner .channels {
				display: none;
			}
		
	}

/* @end */

/* @group Logo */

.logo {
	width: clamp(14rem, 40vw, 20rem);
}
	
	.logo img {
		width: 100%;
		transition: transform .2s ease-in-out;
	}
	
	.logo img:hover {
		transform: scale(1.05);
	}

/* @end */

/* @group Menu */

.menu {
	gap: 1.4rem;
	align-items: center;
	justify-content: center;
	font: var(--font-lg);
	text-transform: uppercase;
}
	
	.menu a {
		white-space: nowrap;
	}

	.menu__start,
	.menu__end {
		display: flex;
		align-items: center;
	}
	
	.menu__start {
		justify-content: end;
	}
	
	.menu__end {
		justify-content: start;
	}
	
	@media (width < 1280px) {
		
		.menu {
			display: grid;
			grid-template-rows: 1fr max-content 1fr;
		}
		
			.menu__start,
			.menu__end {
				flex-direction: column;
				row-gap: 1rem;
			}
			
			.menu__start {
				align-self: end;
			}
			
			.menu__end {
				align-self: start;
			}
		
	}

	@media (width >= 1280px) {
		
		.menu {
			display: grid;
			grid-template-columns: 1fr auto 1fr;
			column-gap: clamp(1rem, 2.8vw, 2.8rem);
			align-items: center;
		}
		
			.menu__start,
			.menu__end {
				column-gap: clamp(.7rem, 2.4vw, 1.4rem);
			}
		
			.menu .logo {
				margin-block-end: .7rem;
			}
		
	}

/* @end */

/* @group Menu toggle */

.menu-toggle {
  width: 2.4rem;
  height: 2.4rem;
	margin-block: -.5rem;
	margin-inline-end: -.5rem;
  padding: 0.5rem;
  color: var(--color-background);
}

.menu-toggle:hover {
  cursor: pointer;
}
	
/* @group Hamburger */
	
.hamburger {
	display: block;
	position: relative;
	width: 1.4rem;
	height: 1.4rem;
}

	.hamburger > * {
		display: block;
		position: absolute;
		inset-block-start: 50%;
		inset-inline: 15%;
		height: .1em;
		width: 70%;
		margin-inline: auto;
		background-color: currentColor;
		transition: all .15s ease-in-out 0s;
		transform: translateY(-50%);
	}
	
	.hamburger > *:nth-child(1) {
		transform: translateY(calc(-50% + .45em));
	}

	.hamburger > *:nth-child(3) {
		transform: translateY(calc(-50% - .45em));
	}
	
	.hamburger.open > *:nth-child(1),
	.hamburger.open > *:nth-child(3) {
		margin-inline: auto;
	}
	
	.hamburger.open > *:nth-child(1) {
		transform: rotate(45deg);
	}
	
	.hamburger.open > *:nth-child(2) {
		opacity: 0;
	}
	
	.hamburger.open > *:nth-child(3) {
		transform: rotate(-45deg);
	}

/* @end */

/* @end */

/* @group Channels */

.channels {
	display: flex;
	justify-content: center;
	gap: .5em;
}

	.channels a {
		width: 1.4rem;
		height: 1.4rem;
		overflow: hidden;
		white-space: nowrap;
		vertical-align: bottom;
	}

		.channels a::before {
		  content: "";
			display: block;
		  -webkit-mask-size: cover;
		  mask-size: cover;
		  width: 1.4rem;
		  height: 1.4rem;
			margin-inline-end: .3em;
		  background-color: currentColor;
			transition: transform .15s ease-in-out 0s;
		}
		
		.channels a[href*="instagram"]::before {
		  -webkit-mask-image: url(../images/instagram.svg);
		  mask-image: url(../images/instagram.svg);
		}
		
		.channels a:hover::before {
			transform: scale(1.1);
		}

/* @end */

/* @group Main */

.main {
	container-type: inline-size;
	max-width: var(--max-width);
	margin-inline: auto;
	padding-block-end: var(--spacing-block);
	padding-inline: var(--spacing-inline);
}

	@media (width < 1280px) {
		
		.main {
			padding-block-start: calc(2.4rem + 1.4rem); /* Includes placeholder for topbar */
		}
		
			.main .logo {
				margin-block-end: var(--spacing-block-lg);
				margin-inline: auto;
			}
		
	}

	@media (width >= 1280px) {
		
			.main .logo {
				display: none;
			}
		
	}

/* @end */

/* @group Section & Column */

.section {
	container-type: inline-size;
	display: grid;
	column-gap: var(--spacing-columns-sm);
	row-gap: 1.4rem;
}

/* Section with columns with more than one child */
.section:has(.column > *:not(:only-child)) {
	row-gap: var(--spacing-block-lg);
}

.section:has(+ *) {
	margin-block-end: var(--spacing-block-lg);
}

.section:has(.column:only-child > .text > h1:only-child) {
	margin-block-end: var(--spacing-block-sm);
}

		.section .column figure:has(+ *) {
			margin-block-end: 1rem;
		}
	
			.section .column figure img {
				width: 100%;
			}

	@container (width < 48rem) {
		
			.section .column:has(> figure:only-child) {
				order: -1;
			}
			
				.section .column figure.portrait,
				.section .column figure.square {
					width: 75%;
				}
			
				.section .column figure.portrait,
				.section .column figure.square,
				.section .column .text:not(:has(> h1)) {
					max-width: 30rem;
					margin-inline: auto;
				}
		
	}
	
	@container (width >= 48rem) {
		
		.section {
	    grid-template-columns: repeat(12, 1fr);
		}
		
			.section .column {
		    grid-column: span var(--span);
		  }
		  
		  	.section .column figure + .text {
					padding-inline-start: 2.8em;
				}		
		  
		  /* Column with more than one child */
		  
		  .section .column:not(:has(> *:only-child)) figure.portrait,
		  .section .column:not(:has(> *:only-child)) figure.square {
				padding-inline: 2.8rem;
			}
		  
		  .section .column:not(:has(> *:only-child)):first-child {
				padding-inline-end: calc((var(--spacing-columns-lg) - var(--spacing-columns-sm)) * .5);
			}
			
			.section .column:not(:has(> *:only-child)):last-child {
				padding-block-start: var(--spacing-block-lg);
				padding-inline-start: calc((var(--spacing-columns-lg) - var(--spacing-columns-sm)) * .5);
			}
		  
		  /* Column with one child only */
		  .section .column:has(> *:only-child) {
				display: grid;
				grid-template-columns: subgrid;
				align-items: center;
			}
		  
		  	.section .column:has(> *:only-child) > * {
					grid-column: 1 / -1;
				}
				
			/* Columns with text only */
			.section .column:has(> .text:only-child):has(+ .column > .text:only-child) {
				padding-inline-end: calc((var(--spacing-columns-lg) - var(--spacing-columns-sm)) * .5);
			}
			
			.section .column:has(> .text:only-child) + .column:has(> .text:only-child) {
				padding-inline-end: calc((var(--spacing-columns-lg) - var(--spacing-columns-sm)) * .5);
			}
		
	}
	
	@container (width >= 66rem) {
	
			/* Solo column */
			.section .column:only-child {
			  grid-column: 2 / -2;
			}
			
			/* Columns with text only */
			.section .column:has(> .text:only-child):has(+ .column > .text:only-child) {
				grid-column: 2 / 7;
				align-items: start;
			}
			
			.section .column:has(> .text:only-child) + .column:has(> .text:only-child) {
				grid-column: 7 / -1;
				align-items: start;
			}
				
			/* Columns with Landscape | Text */
			.section .column:first-child:has(> figure.landscape:only-child):has(+ .column > .text:only-child) {
				grid-column: 2 / 8;
			}
			
			.section .column:first-child:has(> figure.landscape:only-child) + .column:has(> .text:only-child) {
				grid-column: 8 / -1;
			}
			
			/* Columns with Text | Landscape */
			.section .column:has(> .text:only-child):has(+ .column:last-child > figure.landscape:only-child) {
				grid-column: 1 / 6;
			}
			
			.section .column:has(> .text:only-child) + .column:has(> figure.landscape:only-child) {
				grid-column: 6 / -2;
			}
			
			/* Columns with Portrait/Square | Text */
			.section .column:first-child:has(> figure.portrait:only-child):has(+ .column > .text:only-child),
			.section .column:first-child:has(> figure.square:only-child):has(+ .column > .text:only-child) {
				grid-column: 3 / 7;
			}
			
			.section .column:first-child:has(> figure.portrait:only-child) + .column:has(> .text:only-child),
			.section .column:first-child:has(> figure.square:only-child) + .column:has(> .text:only-child) {
				grid-column: 7 / -2;
			}
			
			/* Columns with Text | Portrait/Square */
			.section .column:has(> .text:only-child):has(+ .column > figure.portrait:only-child),
			.section .column:has(> .text:only-child):has(+ .column > figure.square:only-child) {
				grid-column: 2 / 7;
			}
			
			.section .column:has(> .text:only-child) + .column:has(> figure.portrait:only-child),
			.section .column:has(> .text:only-child) + .column:has(> figure.square:only-child) {
				grid-column: 7 / -3;
			}
		
	}

/* @end */

/* @group Products */

.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
	column-gap: var(--spacing-columns);
	row-gap: var(--spacing-block);
}

	.products > * {
		padding-inline-start: .7rem;
	}

	.products figure {
		aspect-ratio: 1/1;
		margin-block-end: .5em;
		margin-inline-start: -.7rem;
		background-color: var(--color-grey);
	}
	
	.products h3 {
		margin-block: unset;
	}
	
	.products__text {
		margin-block-end: .5em;
	}
		
	.products__quantity + .products__price::before {
		content: "· ";
	}

/* @end */

/* @group Recipes */

.recipes {
	container-type: inline-size;
	display: grid;
}

	.recipes figure {
		margin-block-end: 1rem;
	}

	.recipes h2 {
		margin-block: unset;
	}
	
	.recipes p {
		margin-block-end: .7em;
	}
	
	.recipes__subtitle {
		color: var(--color-primary);
		font-weight: 600;
	}
	
	@container (width < 36rem) {
		
		.recipes {
			row-gap: var(--spacing-block);
		}
		
	}

	@container (width >= 36rem) {
		
		.recipes {
			column-gap: var(--spacing-columns-lg);
			grid-template-columns: repeat(2, 1fr);
		}
		
			.recipes > *:nth-child(odd) {
				margin-block-end: var(--spacing-block-lg);
			}
			
			.recipes > *:nth-child(even) {
				margin-block-start: var(--spacing-block-lg);
			}
		
	}
	
	@container (width >= 66rem) {
		
				.recipes > * > *:not(figure) {
					margin-inline-start: 2.8rem;
				}
		
	}

/* @end */

/* @group Recipe */

.recipe {
	container-type: inline-size;
	display: grid;
}

	.recipe h1 {
		margin-block-end: .5rem;
	}

	.recipe__subtitle {
		margin-block-end: var(--spacing-block);
		color: var(--color-primary);
		font: var(--font-lg);
		text-transform: uppercase;
	}
	
	.recipe__preparation {
		margin-block-end: var(--spacing-block);
	}
	
	@container (width < 48rem) {
		
		.recipe figure {
			order: -1;
			margin-block-end: 1rem;
		}
		
		.recipe__ingredients {
			margin-block-end: 2.1em;
		}
		
	}

	@container (width >= 48rem) {
		
		.recipe {
			column-gap: var(--spacing-columns);
			grid-template-columns: repeat(12, 1fr);
		}
		
			.recipe > * {
				grid-column: 1 / -1;
			}
			
			.recipe figure {
				grid-column: 1 / 8;
				align-self: center;
			}
			
			.recipe__ingredients {
				grid-column: 8 / -1;
				align-self: center;
			}
			
			.recipe__preparation {
				margin-block-start: var(--spacing-block-lg);
			}
		
	}

	@container (width >= 66rem) {
		
			.recipe h1,
			.recipe__subtitle	{
				grid-column: 2 / 8;
			}
		
			.recipe__preparation,
			.recipe__overviewlink {
				grid-column: 2 / -2;
			}
		
	}

/* @end */

/* @group Bordure */

.bordure {
	max-width: var(--max-width);
	margin-inline: auto;
	padding-block-end: .1rem;
	padding-inline: var(--spacing-inline);
	text-align: end;
}

	.bordure__image {
		width: auto;
		max-width: 100%;
		height: 10rem;
		max-height: auto;
	}

/* @end */

/* @group Footer */

.footer {
	container-type: inline-size;
	color: var(--color-background);
	background-color: var(--color-primary);
}

/* @group Colophon */

.colophon {
	max-width: var(--max-width);
	margin-inline: auto;
	padding-block: var(--spacing-block);
	padding-inline: var(--spacing-inline);
	row-gap: 2.8rem;
}
	
	.colophon nav {
		display: flex;
		flex-wrap: wrap;
		gap: 1.4rem;
	}
	
	@container (width < 48rem) {
		
		.colophon {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: end;
			column-gap: var(--spacing-columns-lg);
		}
		
	}
	
	@media screen {
		
		@container (width >= 48rem) {
		
			.colophon {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
			}
			
				.colophon > * {
					grid-column: 2;
				}
			
		}
		
	}

/* @end */

/* @end */

@media print {
	
  @page {
  
    size: A4;
    margin: 20mm;
    
  }
	
	html {
		font-size: 100%;
	}
	
	.topbar,
	.banner,
	.bordure,
	.footer nav {
		display: none;
	}
	
	.main {
		padding-block-start: unset;
		padding-block-end: var(--spacing-block-lg);
		padding-inline: unset;
	}
	
		.main .logo {
			display: block;
			margin-block-end: var(--spacing-block-lg);
			margin-inline: auto;
		}
	
	h2.crossheading {
		break-after: avoid;
		clear: both;
	}
	
	h2.crossheading:has(+ *) {
		margin-block-start: var(--spacing-block);
	}
	
	.products {
		display: block;
	}
	
		.products > * {
			break-inside: avoid;
			clear: both;
		}
		
		.products > *:has(+ *) {
			margin-block-end: 1.4rem;
		}
		
		.products figure {
			float: left;
			width: 4.7rem;
			margin-inline-end: .7rem;
			margin-block-end: 1.4rem;
		}
	
	.footer {
		color: var(--color-base);
		background-color: transparent;
	}
	
	.colophon {
		padding-block-start: .7rem;
		padding-block-end: unset;
		padding-inline: unset;
		border-block-start: .1rem solid var(--color-primary);
	}
	
}