@font-face {
    font-family: "FONT";
    src: url("font/PPGoshaSans-Regular.woff");
}
@font-face {
    font-family: "BOLD";
    src: url("font/PPGoshaSans-Bold.woff");
}
:root{
    --font:FONT; 
    --yellow:#FBD828;
    --yellowdark:hsl(50, 96%, 37%);
    --lightyellow:#FDF2BA;
    --brown:#2F261E;
    --lightbrown:hsl(28, 22%, 45%);
    --gap:1.5rem;
    --columnsize:30rem;
}

/* .bold,strong{font-family: BOLD;} */
body,html{margin:0;padding:0; background-color: var(--lightyellow);    scroll-behavior: smooth; scroll-padding-top: 7rem;} *,*::before,*::after{box-sizing:border-box; position:relative;}
.body-danke
{background-color: var(--yellow);}
img,svg{display: block; width: 100%;}
body{
    font-family: var(--font);
}
p,h1,h2{padding: 0;margin: 0;}
h1:after{content: ""; position: absolute; top: 35px; left: 0; height:47px;  font-size: 1rem;}
input,textarea{font-family: var(--font); }
textarea:focus{color: var(--brown);}
input::placeholder,textarea,textarea::placeholder,input[type=text],input[type="email"]{font-size: 1.2rem; color: var(--yellowdark); border-radius: 0;}
input[type=text],input[type="email"]{color:var(--brown)}
button{margin-top: var(--gap);}
/* *{outline:red solid 1px} */
.grid{
    display: grid;
    grid-template-columns: 
    minmax(var(--gap),1fr)
    minmax(0, var(--columnsize))
    calc(var(--gap) * 1.5)
    minmax(0, var(--columnsize))
    minmax(var(--gap),1fr)
    ;
    row-gap: calc(var(--gap) * 1.4);
    margin: 5rem 0;
}

/* *{outline:red solid 1px} */
a{all:unset;cursor: pointer;}
.pad1{padding: var(--gap);}
p:not(p:last-of-type){padding-bottom: var(--gap);}
p,button,.lime,li{line-height: 2rem; font-size: 1.3rem;}
h1{ font-size: 2rem;}
h2{font-size: 2rem;}

.grid >*{grid-column: 2/5;}
.yellowbg{background-color: var(--yellow);}
.produkthl{padding-bottom: 1rem;}

.lime{display: flex; gap: calc(var(--gap) * 2); padding: .4rem 0; align-items: flex-start; }
.lime:last-of-type{padding-bottom: 2rem; }
.lime img{width: 1.3rem;}

.bottled{width: 6rem; position: absolute; bottom: 0;left: 0; transform: translateY(50%);}

.leftfill{grid-column: 1;}
.rightfill{grid-column:5;}
.cell{display: block;}
.desktop{display: none;}
.centeralign{text-align: center;}
.grid .gapvawe{grid-column: 1; transform: translateX(70%);z-index: 2;}
.gapvawe img{width:auto; height: 115%; position: absolute; user-select: none; top:-5%}
.vawed{padding-left: calc(var(--gap) * 1.2);}

/* *{outline:red solid 1px} */
button{background-color: var(--bg);color:var(--color); font-family: var(--font); --bg:var(--yellow); --color:var(--brown); padding: .5rem 1rem; border-radius: calc(var(--gap) * 1); border: none; outline: none;}

button:hover{background-color: var(--color); color: var(--bg);}
button.invert{border: 2px solid var(--yellow);}
button.invert:hover{border: 2px solid var(--bg);}
.col2,.rightfill:last-child{margin-top: var(--gap);}
.coverimg{display:flex;align-items:center; justify-content:center; overflow: clip; width: 100%;}
.cover img{transition: width .5s;}
.danke{display: none;}
.send .danke{display: block;}
.send .formgrid{display: none;}
input:focus:invalid{outline:2px solid rgb(222, 0, 0) !important}

.circle{display:flex;align-items:center; justify-content:center; position: absolute;}

h1{text-align: left;}

form button{width: fit-content;}
input[type=text],input[type="email"],textarea{width: 100%; padding: calc(var(--gap) * .5); border: none; outline: none; background-color: var(--yellow);}
textarea{min-height: 200px; resize: none;}
.formgrid{display: grid; gap: var(--gap);}

input[type=checkbox]{width: var(--gap); height: var(--gap);}
.check::after{content: "";width:100%;height:100%;left:0;top:0; background-color: var(--yellow); position: absolute; pointer-events: none; }

.checkbox:has(input:checked) .check::after{background-color: var(--brown); }
.checkbox:has(input:focus) .check::after{border: 2px solid var(--brown);}
.checkbox{display: flex; gap:1rem; align-items: center;}

.yellowbg:has(.flasche)  {margin-top: 8rem;}
h2{padding-bottom: 2rem;}

.topvawe{transform: translateY(-90%); display:flex;align-items:center; justify-content:center; overflow-x: clip; position: absolute; width: 100%;}
.topvawe .vawe{min-width: 500px; user-select: none; scale:1.02}

.topvawe .circle img{width: 6rem; transform: translateY(-20%);}

.yellowbg .flasche img{width: 50%; height: auto; transform-origin: bottom center; transform: translateY(0%); transition: transform 1s;}
.yellowbg .flasche img.inview{transform: translateY(-20%);}
.yellowbg .flasche {display:flex;align-items:center; justify-content:center;width:100%;height:100%;left:0;top:0;}



.menu li{all:unset; cursor: pointer; box-sizing: border-box; position: relative; font-size: 1.9rem;}
.menu > li::after{ content: ""; position: absolute; width:0%; height: 2px; top:100%; left: 0; background-color: var(--brown); transition: width .3s;}
.menu > li:hover::after{ width: 100%;}
.menu hr{width: 60%; outline: none; border-bottom: 1px solid var(--brown);}
.menu { display:flex;align-items:center; justify-content:center; flex-direction: column; gap: var(--gap); padding: var(--gap); position: fixed; width: 100%; max-width: 600px; transition: transform .3s;  right: 0;top: 0; background-color: var(--lightyellow); height: 100svh;transform: translateX(100%);}

.menu.open{transform: translateX(0%);}



.footer{display:flex;align-items:center; justify-content:center; background-color: var(--brown); padding: 2rem;}
.footer div{text-align: center; color: var(--yellow);}
.footer img{width: 30px; display: inline-block;}

dialog{position: fixed;width:100%;height:100%;left:0;top:0; background-color:var(--lightyellow); outline: none; border: none;}
[data-daten]{background-color: var(--yellow);}
.impressumClose{text-align: right; }
.impressumClose img{width: 2rem; display: inline-block; cursor: pointer;}
.impressumContent{padding: 2rem; max-width: 800px;}

/* .team{grid-column: 1/-1;} */
.team >div{height: 350px;width: 100%}
.team >div img{height: 100%;width: 100%; object-fit: cover; position: absolute;}

@media(min-width:2000px){
    :root{--gap:2.5rem}
    
    
}

@media(max-width:800px){
    .topvawegrid {gap: 0rem;}
    .topvawegrid button{width: 100%; margin-top: 2rem;}
    #uber .col2{margin-top:-.4rem;}
    .topvawegrid .col1{order:3}
    .topvawegrid .col2{order:2}
    .topvawegrid .col2:before{width: 100%;height: 20%; background: url("img/topvawe2.svg") no-repeat; background-size: 100%; content: ""; position: absolute; top: 0%;left: 0;transform: translateY(-10%);}
    .topvawegrid .produkthl{order:1}
    button{text-align: center;}
    h1{text-align: center;}
    .bottled{ display: none;}
    .circle{ scale:.62; transform: translateY(90%);}
    /* .col2.yellowbg{order:1}
    .col1.yellowbg{order:2} */
    .cover img{width: 160%;}
    form button{order:3}
    .checkbox{order:2}
    h2{font-size: 1.5rem !important;}
    .produkthl{margin-bottom: -1rem; padding-bottom: 0;}
    .endrezept{margin-top: var(--gap);}
}
.endrezept{order:2}

.rezeptpic{transform: translateY(.4rem);}
@media(min-width:800px){
    .team >div{height: 100%}
    .topvawegrid .pad1{padding-left: 0;}
    h1:after{content: ""; position: absolute; top: 50px; left: 0; height:50px;  font-size: 1rem;}
    .grid{
        row-gap: calc(var(--gap) * 1.4);
    }

    .produkthl{padding-bottom: 1.4rem;}
    #uber{margin-top: 3rem;}
    .impressumContent{inset: 5rem;}
    .endrezept{order:0}
    .rlime{align-items: flex-end; flex-direction: row-reverse;}
    h1{font-size: 3rem;}
    .fullcenter{grid-column: 2/5 !important}
    .col2,.rightfill:last-child{margin-top: 0;}
    .fullwidth{grid-column: 1/-1}    
    .grid .gapvawe{grid-column: 3;}
    .cell{display: none;}
    .desktop{display: block;}
    .col1{grid-column: 2;}
    .rightalign{text-align: right;}
    .leftalign{text-align: left;}
    .col2{grid-column: 4;}
    .yellowbg:has(.flasche)  {margin-top: 0 !important;}

    .formgrid{display: grid; 
        grid-template-columns: .5fr  .5fr  1fr; 
        gap: var(--gap);}
    .leftleft{grid-column: 1;}
    .rightleft{grid-column: 2;}
    .leftfull{grid-column: 1/3;}
    .rightfull{grid-column: 3; grid-row: 1/4;}
    .pflicht{font-size: .8rem; margin-left: auto;grid-column: 3; grid-row: 4/4;}
    .lp{width: calc(100% - 1rem) !important;}    
    form button{margin: 0; }
}

.pflicht{font-size: .8rem;}
.impressumContent h1{padding-bottom: 1rem;}

.danke-page img{width: clamp(100px,13vw,15rem);margin: 0 auto; transform: translateX(20%); }
.danke-page{display:flex;align-items:center; justify-content:center; min-height: 100dvh;}
.danke-page >div{text-align: center;}
.danke-page >div *{margin-bottom: 1rem; text-align: center;}

.daten-page{ max-width: 800px; line-height: 1.5rem; margin: 0 auto;}
.daten-page h1{margin-bottom: 4rem; margin-top: 4rem;}
.daten-page ol > li{margin-bottom: 2rem; }
.daten-page strong{font-size: 1.5rem; }

@media(max-width:800px){
    
    .daten-page strong,
    .daten-page li::marker{font-size: 1.2rem; }
    .daten-page ul{margin-left: 1.5rem !important;padding-left: 0 !important; }

   
    .daten-page h1{font-size: 1.5rem !important;}
    .daten-page li,
    .daten-page ul,
    .daten-page p
    {font-size: 1rem !important; line-height: 1.5rem;}


}

.lngToggle{position: absolute; left: 1rem; top: 1rem;}