/*FONTS
------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Leckerli+One&family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('//cdn2.hubspot.net/hub/5844430/hub_generated/template_assets/95335985530/1681478500260/eyevip/lib/css/all.min.css');


/*BASE
----------------------------------------------------------------- */
html {font-size: 62.5%;}
body {font-family: "Nunito", sans-serif; font-size: 1.8rem; line-height: 1.5; color: #000022; background-color: #FFFCEB; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
body, html, * {margin: 0; padding: 0; border: none; outline: none; box-sizing: border-box; -webkit-box-sizing: border-box;}

img {max-width: 100%; display: block; user-select: none; -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none;}


/*TYPO
------------------------------------------------------------------*/

h1 {font-family: "Leckerli One", sans-serif; font-weight: 400; line-height: 1; font-size: 5.6rem; padding: 0 0 3rem; position: relative; overflow-wrap: break-word; margin: auto;}
h2 {font-size: 2.4rem; font-weight: 400; margin: 0 0 1rem; padding-bottom: 2rem;}
h3 {font-size: 2rem; margin: 0 0 1rem;}

[class^="col"] h1 {padding: 0 0 8rem;}
h1 span {font-family: "Nunito", sans-serif; font-weight: 700; font-size: 0.5em; display: flex; justify-content: center; padding-top: 1rem;}

.row h1 {padding-top: 3rem;}

a {color: inherit; text-decoration: none; border-bottom: 4px solid #A41F3F; transition: 0.2s ease-in-out; -webkit-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; display: inline-block;}
a::after {color: inherit; text-decoration: none; border-bottom: 4px solid #A41F3F; transition: 0.2s ease-in-out; -webkit-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out;}
a:hover {border-color: transparent;}

ul, ol {font-size: 1.6rem; margin-left: 1.7rem;}
ul li, ol li {margin-bottom: .5rem;}
ul li:last-of-type, ol li:last-of-type {margin-bottom: 0;}


/*GRID
------------------------------------------------------------------*/

.row {margin-left: -4rem;}
.row:after {content: ""; clear: both; display: block;}

[class^="col"] {margin-bottom: 10rem; padding-left: 4.5rem; float: left;}
[class^="col"].right {float: right;}
[class^="col"].center {text-align: center;}

.col2 {width: 50%;}
.col2-3 {width: 66.6667%;}
.col3 {width: 33.3333%;}
.col3-4 {width: 75%;}
.col4 {width: 25%;}


/*CONTAINERS
------------------------------------------------------------------*/

header {margin-bottom: 5rem; text-align: center;}
header:after {content: ""; clear: both; display: block;}

.container {max-width: 60em; padding: 5rem 15rem; position: relative; margin: 0 auto;}

.zutaten {background-color: #A41F3F; color: #FFFCEB; border-radius: 30px; padding: 2rem;}



/*ELEMENTS
------------------------------------------------------------------*/

/*EYEVIP*/
.eyevip {text-align: center;}
.eyevip a {border: 0; display: inline-block;}
.eyevip img {width: auto; height: 5rem; margin: 1rem auto 0;}
.eyevip span {font-size: 1.3rem; color: #000; display: block;}
.eyevip i {color: #A41F3F;}

/*BACKGROUND*/
.background {position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: -2;}
.background .oval {width: 10rem; position: absolute; left: 0; bottom: -1rem;}
.background .stars1,
.background .stars3 {width: 5rem; position: absolute; left: 3rem; top: 3rem;}
.background .stars2 {width: 7rem; position: absolute; right: 2rem; bottom: 10rem; transform: scaleX(-1); -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1);}
.background .candycane {width: 15rem; position: absolute; bottom: -5rem; right: 5%;}
.background .mistletoe {width: 10rem; position: absolute; bottom: 2rem; left: 2rem;}

.pagenav {margin: 0 0 8rem; display: flex; justify-content: space-between; align-items: flex-end;}
.pagenav div a {position: relative; width: 15rem;}
.pagenav a i {position: absolute; font-size: 32px; color: #A41F3F; transition: 0.2s ease-in-out; -webkit-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; z-index: -1;}
.pagenav a i.fa-arrow-left {bottom: -2px; left: 0; transform: translate(-60%,50%); -webkit-transform: translate(-60%,50%); -ms-transform: translate(-60%,50%);}
.pagenav a i.fa-arrow-right {bottom: -2px; right: 0; transform: translate(60%,50%); -webkit-transform: translate(60%,50%); -ms-transform: translate(60%,50%); }
.pagenav a.pagearrow:hover {border-color: #A41F3F;}
.pagenav a.pagearrow:hover i.fa-arrow-left {transform: translate(-90%,50%); -webkit-transform: translate(-90%,50%); -ms-transform: translate(-90%,50%);}
.pagenav a.pagearrow:hover i.fa-arrow-right {transform: translate(90%,50%); -webkit-transform: translate(90%,50%); -ms-transform: translate(90%,50%);}
.pagenav a:nth-of-type(2) {width: auto; text-align: center;}
.pagenav a.pagearrow:first-of-type {text-align: right;}


/*GUETZLI
------------------------------------------------------------------*/

.link .link__guetzli .img__guetzli img {width: 100%; max-width: 75%; max-height: 75%; top: 50%; left: 50%; position: absolute; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%);}
.link .link__produzent {bottom: -10%; right: 5%;}
.link:hover .link__guetzli {transform: translate(-10%,-10%); -webkit-transform: translate(-10%,-10%); -ms-transform: translate(-10%,-10%);}
.link:hover .link__produzent {transform: rotate(5deg) translate(10%,10%); -webkit-transform: rotate(5deg) translate(10%,10%); -ms-transform: rotate(5deg) translate(10%,10%);}
.link {border: 0; position: relative; display: block;}

.link__guetzli, .link__produzent, .link__text {transition: 0.2s ease-in-out; -webkit-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out;}
.link .link__hover {position: relative;}
.link:hover .link__hover {opacity: 0.5;}

.link__guetzli {width: 80%; position: relative; z-index: -1;}
.link__guetzli:before {content: ""; width: 100%; padding-bottom: 100%; background-color: #fff; box-shadow: 2px 2px 10px #EDEADF; border-radius: 50%; display: block;}

.link__produzent {width: 40%; position: absolute;}
.link__produzent img {background-color: #E6E6E9; border-radius: 50%;}

.link__text {font-family: "Leckerli One"; font-weight: 400; sans-serif; line-height: 1.2; text-align: center; font-size: 2.4rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0;}
.link:hover .link__text {transform: translate(-50%,-50%) scale(1.5); -webkit-transform: translate(-50%,-50%) scale(1.5); -ms-transform: translate(-50%,-50%) scale(1.5); opacity: 1;}

/*BILDLI*/
.bildli {margin: 0 auto; width: 35%;}
.bildli .link:hover .link__hover {opacity: 1;}
.bildli .link:hover .link__guetzli,
.bildli .link:hover .link__produzent {transform: none; -webkit-transform: none; -ms-transform: none;}
.bildli .link .link__text,
.bildli .link:hover .link__text {transform: none; -webkit-transform: none; -ms-transform: none;}

.schleife {width: 70%; position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); z-index: 1;}
.bildli .schleife::after {content: ""; height: 999em; width: 7px; display: block; background: #A41F3F; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-100%); -webkit-transform: translate(-50%,-100%); -ms-transform: translate(-50%,-100%);}

.bildli .title {margin: 4rem 0; display: flex; justify-content: center; text-align: center;}


/*===============================================================
                        BREAKPOINT 2000px
===============================================================*/

@media screen and (min-width: 2000px) {

    .container {max-width: 70em;}

    .background .oval {width: 25rem; left: 0; bottom: -1rem;}
    .background .stars1,
    .background .stars3 {width: 10rem; left: 2rem; top: 3rem;}
    .background .stars2 {width: 14rem; right: 2rem; bottom: 10rem; transform: scaleX(-1); -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1);}
    .background .candycane {width: 24rem; bottom: -2rem; right: 9rem; transform: scaleX(-1); -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1);}
    .background .mistletoe {width: 20rem; bottom: 4rem; left: 4rem;}

}


/*===============================================================
                        BREAKPOINT 900px
===============================================================*/

@media screen and (max-width: 900px) {

    html {font-size: 56.25%;}

    .col2,
    .col2-3 {width: 100%;}
    .col3 {width: 50%;}
    .col3:nth-of-type(odd) {clear: both;}
    .col3-4 {width: 66.6667%;}
    .col4 {width: 33.3333%;}

    .rezept .col3 {width: 100%;}
    .rezept .col3 .link {max-width: 20em; margin: 0 auto;}

    .container {padding: 4rem 15rem;}

    .pagenav > * {width: 30%;}
	.pagenav div a {width: auto;}

    .bildli {width: 50%;}

    .link .link__produzent {bottom: 0; right: 0;}
    .link:hover .link__hover {opacity: 1;}
    .link:hover .link__guetzli,
    .link:hover .link__produzent {transform: none; -webkit-transform: none; -ms-transform: none;}
    .link__text {font-size: 2.8rem; margin-top: 2rem; position: static; opacity: 1;}
    .link .link__text,
    .link:hover .link__text {transform: none; -webkit-transform: none; -ms-transform: none;}

}


/*===============================================================
                        BREAKPOINT 600px
===============================================================*/

@media screen and (max-width: 600px) {

    h2 {padding-bottom: 4rem;}

    [class^="col"] {margin-bottom: 10rem;}
    .container.rezept [class^="col"] {margin-bottom: 5rem;}

    .col3-4,
    .col4 {width: 50%;}
    .col3 {width: 100%;}
    .col3:nth-of-type(odd) {clear: none;}

    .container {padding: 3rem 4rem;}
    .container.rezept {padding: 3rem 8rem;}

    .link {max-width: 20em; margin: 0 auto;}
    .link__guetzli {margin: 0 auto;}
    .link__text {font-size: 3.2rem;}

    .container.rezept h1 {font-size: 4rem;}

    .bildli {width: 66.6667%; margin-top: 5rem;}
    .bildli .schleife {width: 50%;}
    .bildli .schleife::after {width: 5px;}

    .pagenav a {hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto;}
}


/*===============================================================
                        BREAKPOINT 400px
===============================================================*/

@media screen and (max-width: 400px) {

    .col3-4,
    .col4 {width: 100%;}

    .container.rezept {padding: 3rem 4rem;}

    .pagenav > * {width: 25%;}

    .bildli {width: 75%;}
    .bildli .schleife::after {width: 4px;}

}