@import "./assets/css/_vars.css";
@import "./assets/fonts/_fonts.css";
@import "./footer.css";
@import "./backtotop.css";
@import "./teasers.css";
@import "./spices.css";
@import "./ingredients.css";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--color-brown);
}

body {
    display: flex;
    flex-direction: column;
}

a {
    color: var(--color-primary);
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}

a:hover {
    color: var(--color-accent);
}

.two-col {
    display: flex;
    gap: var(--spacing-default);
}

.container {
    display: flex;
    min-height: 100vh;
/* ### EINGEFÜGT KVK ###*/
		font-family: var(--font-family-opensans)
}

.container .left,
.container .right {
    padding: var(--spacing-default);
    position: relative;
}

.container .left {
    flex: 1;
    background: var(--current-variety);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.6);
    text-align: center;
    background-size: 47% auto;
}

.container .left > span {
    font-size: var(--font-size-xl);
		font-family: var(--font-family-opensans)
}

.container .right {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-default);
    box-shadow: -9px 0 9px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* ### EINGEFÜGT KVK ###*/
.shopping {
	color: var(--color-black);
	font-family: var(--font-family-opensans)
}

.shopping select,option,input {
	color:var(--color-accent);
	font-weight:900;
	font-size:1.0em;
	background-color: var(--color-blue-light);
}

.shopping input {
	border:0px;
	text-align:right;
	padding-right:0.1em;
	background-color: var(--color-blue-light);
}


.shopping select{
	width:2.5em;
	height:1.5em;
	background-color: var(--color-blue-light);
}

.shopping-col {
    display: block;
    gap: var(--spacing-default);
}
.shopping-col:nth-child(1) {
		float: left; width: 35%;
		min-width:170px;
}
.shopping-col:nth-child(2) {
		float: right; width: 60%; text-align:right; 
}

.shopping img{
	width:35%;
	border: solid #570000 0px;
	border-radius: var(--border-radius-default);
	box-shadow: var(--shadow-default);
}

.shopping h5{
	font-family: var(--font-family-vollkorn);
	font-size: var(--font-size-default-plus);
	font-weight: 300;
}

.shopping ul {
	list-style: none;
	text-indent: 1em;
	font-size: var(--font-size-sm)
}

.shopping footer {
	margin-top: 0.5em;
	display: fixed;
	bottom: 0;
}

.pp-button{
	width: 160px !important;
	font-family: var(--font-family-vollkorn);
	font-weight: 700;
	font-size: 1em;
	text-align: center !important;
	color: #fff;
	background-color: #570000 !important;
	padding: 11px 5px;
	border: solid #570000 1px;
	border-radius: var(--border-radius-default);
	box-shadow: var(--shadow-default);
	transition : 260ms;
	transform: translateY(0);
	display: flex;
	flex-direction: row;
	align-items: center;
	cursor: pointer;
	margin-top:2em;
	float:right !important;
}

.pp-button:hover{
	transition : 260ms;
	padding: 10px 5px;
	transform : translateY(-2px);
	background-color: #b88d18 !important;
	color: #570000 !important;
	border: solid 1px #000000;
	font-size: 1em;
}
/*###*/

h1 {
    font-family: var(--font-family-vollkorn);
    font-size: var(--font-size-xxl);
    font-weight: 300;
    text-transform: uppercase;
}

/* ### EINGEFÜGT KVK ###*/
h2,h3 {
    font-family: var(--font-family-vollkorn);
    font-size: var(--font-size-xl);
    font-weight: 600;
}

h2 {
			letter-spacing:0.1em;
	
}
/*###*/

@media (max-width: 1250px) {
    .container {
        flex-direction: column;
    }

    .container .left,
    .container .right {
        padding: var(--spacing-default);
    }

/* ### EINGEFÜGT KVK ###*/
.container .left {
	background-image:none;
}
/*###*/
		
}

@media (max-width: 820px) {
    .two-col {
        flex-direction: column;
    }
}