/*
Project: Frögard
Description:
Version: 0001
Author: nino bänninger
Author URI: http://www.ninobanninger.com/
*/
*{
	margin:0;
	padding:0;
	box-sizing: border-box;
}

.right{text-align:right;}
.center{text-align:center;}
.padded{padding:2em 0;}
.clr{clear:both;}


/* Typography */

/* Typography */
@font-face {
  font-family: 'ErikaBold';
  src: url('fonts/erika_bold.ttf') format('truetype');
}

@font-face {
  font-family: 'ErikaBoldItalic';
  src: url('fonts/erika_bold_italic.ttf') format('truetype');
}

@font-face {
  font-family: 'ErikaItalic';
  src: url('fonts/erika_italic.ttf') format('truetype');
}

@font-face {
  font-family: 'Erika';
  src: url('fonts/erika.ttf') format('truetype');
}

html{
	font-size: 18px;

	--shadow: black;
  --light: #fcfcfc;
	--green: #0f0;
}

@media (prefers-color-scheme: dark) {
  html{
		--shadow: black;
		--light: #fcfcfc;
	}
}

body {
	font-family: 'Erika', monospace;
	font-size: 1rem;
	line-height:1.6;
	background: var(--light) url("img/background.jpg") repeat;
	color: var(--shadow);

	overflow-x:hidden;
}

a{ color: var(--shadow);text-decoration:none;}
a:hover, label:hover{/*color: var(--green) !important;*/text-decoration:underline;}
main section a{text-decoration:underline;}

h1{
	font-size: 1.6em;
	line-height: 1;
	font-family: 'Erika';
	text-transform: uppercase;
	font-weight:normal;
	text-indent: -0.64em;

	padding-bottom:1em;
}

h1::before{content:'—';}
h1::after{content:'—';}

h2{
	font-family: 'Erika';
	font-weight:normal;
	text-transform: none;
}

h3{
	font-family: 'Erika';
	text-transform: uppercase;
	font-weight:normal;
	padding-bottom:0.4em;
}

p{padding-bottom:1.6em;}

strong{
	font-family:'ErikaBold';
	font-weight:normal;
}




/* Layout */
main{
	margin-top: 4.6rem;
	overflow-x: hidden;
}

button{
  background-color: var(--shadow);
  color:var(--light);

	font-family:Erika;
	text-align:center;
  font-size: 0.8em;
}
button:active{background-color: var(--light);color:var(--shadow);transform:translate(3px, 3px);}
@media (hover: hover) {button:hover{background-color: var(--light);color:var(--shadow);}}

section{
	position:relative;
	width: calc(100% - 2rem);
	max-width:800px;
	margin: 0 auto 2rem auto;
	padding-top: 4.6rem;
}
section:first-child{padding-top:0;}

.illustrations{
	position:absolute;
	z-index:-1;
	width:min( 100vw / 3, 800px / var(--scale));
	opacity:0.7;
}

.illustrations[src*="erbsli"]{
	top:5em;
	right:-3em;
	transform:rotate(13deg);
}

.illustrations[src*="ruebli"]{
	bottom:-10em;
	left:max(-1 * ((100vw - 6rem) / 3 - 3rem), -1 * (800px / 3 - 3rem));
	transform: rotate(-30deg);
}

.illustrations[src*="salat"]{
	bottom:5em;
	right:max(-1 * (100vw - 6rem) / 12, -1 * 800px / 12);
}



#intro .logo{
	display:block;

	padding-bottom:1em;
	margin:0 auto;
}

#hof_wir article img{width:100%;}

#produkte h1{padding-bottom: 0;}
#produkte h2{padding-top: 1.6em;}
#produkte article{
	display:grid;
	gap:1em;
	padding-bottom: 3em;
}

#produkte article img{
	width:100%;
	margin-bottom: 2em;
}

#produkte button{
  padding:1em;

	border: 0;
  border-radius: 3px;
}

details p{padding-left: 1.2em;}


footer{
	width: calc(100% - 2rem);
	max-width:800px;
	margin: 0 auto 2rem auto;
}

/* basket */
#basket{
	position:fixed;
	top:0;
	left:0;
	bottom:0;

	padding-top:200px;

	z-index:43;
	width:100vw;
	max-width:100vw !important;
	height:100%;
	text-align:left;

	overflow-y:scroll;


	background: var(--light) url("img/background.jpg") repeat;
	color:var(--shadow);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.21);

	opacity: 0;
	transform: translateY(-100%);
	transition: opacity 500ms 500ms ease-in,
							transform 500ms 500ms ease-in;
}
#basket.show{transform: translateY(0);opacity:1;}

#basket ul{
	display:table;
	width:100%;
	list-style:none;
}
#basket .product{
	display:table-row;
	margin-bottom:1em;
}
#basket .product img,
#basket .product .title,
#basket .product div,
#basket .product strong{
	display:table-cell;
	vertical-align: middle;
}
#basket .product img{
	width:50px;
	padding-bottom: 0.25em;
	padding-top: 0.25em;
	padding-right: 0.25em;
}
#basket .product div{
	width:3.5em;
	text-align:center;
}
#basket .product div button{
	aspect-ratio: 1;
  border-radius: 50%;
  width: 1.6em;
  font-size: 0.5em;
  border: 0;
  display: inline-block;
  transform: translateY(-3px);
}
#basket .product strong{width:5em; text-align:right;font-family:'Erika';font-weight:normal;}

#basket dt{display:inline-block;width:50%;text-align:left;font-family:'Erika';font-weight:normal;}
#basket dd{display:inline-block;width:50%;text-align:right;font-family:'Erika';font-weight:normal;}


#basket .wrapper{
	padding: 2em;
	max-width:800px;
	margin: 0 auto;
}

#empty_basket{
	margin-top:2em;
	padding:1em;

	border: 0;
  border-radius: 3px;

}

#basket form{
	display:grid;
	gap:1em;
  border-radius: 3px;
}

#basket form input, #basket textarea{
  font-family: Erika, monospace;
  font-size: 1em;
}

#basket form input:focus, #basket textarea:focus{
  background-color: var(--shadow);
  color:var(--light);
}

#basket form input:focus::placeholder , #basket textarea:focus::placeholder,
#basket form input:focus::-webkit-input-placeholder, #basket textarea:focus::-webkit-input-placeholder,
#basket form input:focus:-moz-placeholder, #basket textarea:focus:-moz-placeholder,
#basket form input:focus:-ms-input-placeholder, #basket textarea:focus:-ms-input-placeholder {
  color:var(--light);
}


#basket form [type="text"], #basket form [type="email"], #basket form [type="number"], #basket textarea{
  display: block;
  border-radius: 3px;
  padding:1em;
  width:100%;

  border:0;
  background-color: var(--light);
  color:var(--shadow);
}
#basket form [type="text"]:focus, #basket form [type="email"]:focus, #basket form textarea:focus{outline: none;}

#basket form div{
  font-size:1rem;
  display:grid;
  grid-template-rows: auto auto;
  gap: 1em;

  align-items:center;
}
#basket form div.submit-wrapper{grid-template-columns:1fr;padding-top:2em;}

#basket form div.address{grid-template-rows: 1fr 1fr; gap:0.5em;}
#basket form input, form output {
  text-align: left;
  padding: 1em;
}
/* Chrome, Safari, Edge, Opera */
#basket input::-webkit-outer-spin-button,
#basket input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
#basket input[type=number] {
  -moz-appearance: textfield;
}

#basket form [type="submit"]{
	justify-self:center;

	text-align:center;

  position: relative;
  background-color: var(--shadow);
  color:var(--light);

  font-size: 1.5em;

  border: 0;

  border-radius: 3px;
  padding:1em;
  width:100%;
}

#basket form [type="submit"]:after{
	content:' ';
	clear:both;
}

#basket form [type="submit"]:focus, #basket form [type="submit"]:active{
  background-color: var(--light);
  color:var(--shadow);
  outline: none;
}

#basket form [type="submit"]:active{transform:translate(3px, 3px);}

@media (hover: hover) {
	#basket form [type="submit"]:hover{
	  background-color: var(--light);
	  color:var(--shadow);
	  outline: none;
	}
}

#basket label{
  display:flex;
  align-items: baseline;
  gap:0.5em;
}

#basket hr {
  margin: 3rem 0;
  border: 1px dashed var(--shadow);
}

/* basket END */


/* begin navigation */
header{
	position:fixed;
	top:0;
	width:100vw;

	background: transparent url(img/background.jpg) repeat;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.21);
	z-index:100;
	transition: all 500ms ease-in;
}

#show_nav{ opacity:0; height: 0;width: 0; }
label[for="show_nav"]{
	display:inline-block;
	position: absolute;
	z-index:101;
	right: 0.5rem;
	top: 1.6rem;
	text-decoration:none;

	background-size:cover;
	background: transparent url("img/menu_icon.svg") no-repeat;
	width:30px;
	height:30px;
}
#logo{display: block-inline;}
#logo img{position:relative;height: 3.6rem;z-index:101;}

header nav{
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;

	padding-top:14vh;

	z-index:42;
	width:100vw;
	height:100vh;

	text-align:left;

	background-color:var(--light);
	color:var(--shadow);

	opacity: 0;
	transform: translateY(-100%);
	transition: opacity 500ms ease-in,
							transform 500ms ease-in;
}
header nav > *{padding:1rem;}

header nav a, .dark header nav a{color: var(--shadow);}
#show_nav:checked ~ label[for="show_nav"]{color:var(--shadow);}
#show_nav:checked ~ nav{transform: translateY(0);opacity:1;}

header nav > a{align-self:start;}
header nav p{align-self:end;font-size:0.6rem;}

header nav ul{list-style:none;}
header nav ul li{padding-bottom:1em;text-align:center;}
header nav ul li button{
	border:0;
	background-size:cover;
	background: transparent url("img/basket_icon.svg") no-repeat;
	width:30px;
	height:30px;
}
header nav ul li button:hover{background-color: transparent;}
header nav ul li button:active{transform:none;}

/* end navigation */
/* end layout style*/








/* wide specials */
@media screen and (min-width: 945px){
	html{font-size: 24px;}

	h1{font-size: 2em;text-indent: -1.28em;}
	h1::before{padding-right:0.64em;}
	h1::after{padding-left:0.64em;}

	br.mobile{display: none;}


	main{	overflow-x: visible;}
	section{padding:5rem 0 0;width: calc(100% - 6rem);}
	#intro .logo{
		width:66%;
		max-width:55ch;
	}

	.illustrations[src*="erbsli"]{
		top:0;
		right:max(-1 * ((100vw - 6rem) / 4 - 3rem), -1 * (800px / 4 - 3rem));
		transform:none;
	}

	.illustrations[src*="ruebli"]{
		bottom:max(-1 * (100vw - 6rem) / 8, -800px / 8);left:max(-1 * ((100vw - 6rem) / 3 - 3rem), -1 * (800px / 3 - 3rem));
	}

	.illustrations[src*="salat"]{
		bottom:max(-1 * (100vw - 6rem) / 3, -800px / 3);
	}

	#hof_wir article img{
		float:right;
		width:100%;
		padding-left:2rem;
		margin-right:calc(-1 * (100% - (800px / 2)));
	}
	#hof_wir article{clear:both;}

	#produkte article{
		grid-template-columns: 1fr 1fr;
	}


	/* basket */
	#basket{
		transition: opacity 500ms ease-in,
								transform 500ms ease-in;
	}
		#basket form div.address{
		grid-template-rows:none;
		grid-template-columns: 1fr 2fr;
	}

  #basket form div{
		grid-template-rows:none;
    grid-template-columns: 1fr 1fr;

    align-items:center;
  }


	/* navigation */
	header div{
		display:grid;
		grid-template-columns:1fr 1fr;
		padding: 0.5rem 1rem;
	}
	header label[for="show_nav"]{display:none;}
	header #logo{grid-area:1;justify-self: start;}
	header nav {
		width:auto;
		height:auto;

		grid-area:1;
		position:relative;
		justify-self:end;

		padding-top:0.75rem;

		font-size:0.8em;
		background:none;
		opacity:1;
		transform: translateY(0);

	}

	header nav ul{display:flex;gap:1em;padding: 1rem 1rem 0rem;}
	header nav ul li {padding-bottom: 0;}


}

/* zeke the freak was here */