* {
padding: calc(var(--x)*0px);
margin: 0px;
box-sizing: border-box;
}
body {
width:100vw;
height:100vh;
font-family: 'Ubuntu', sans-serif;
color:white;
overflow:hidden;
text-decoration:none;
overflow-y: hidden;
}
body a {
color:white;    
font-size: calc(var(--lh)*var(--x)*20px);
text-decoration:none;
}
.cart {
display:none;
position: fixed;
top: 0; 
right: 5vw;
width:auto;
margin-top:2vh;
color: black;
}
.cart button {
width:auto;
padding:20px, 20px,20px,20px;
font-size: calc(var(--lh)*var(--x)*4rem);
background:none;
}
.hidden {}
#upcon, #upcon2 {
position: fixed;
top: 0; 
left: 2vw;
width:30vw;
margin-top:2vh;
color: black;
}
#upcon a, #upcon2 a {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
color:white;
font-weight: bold;   
}
#upcon2 {
margin-top:5vh;
}
#whiter {
color:white;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgb(225, 225, 225);
z-index: 99;
}   
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
z-index: 1000;
}
#popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: auto;
height: auto;
display: none;
z-index: 1001;
padding: 20px;
text-align: center;
display: flex;
flex-direction: row;
color:white;
justify-content: center;
}
#popup button {
display: inline-block;
margin: 0 10px;
width: 150px;
height: 50px;
font-size: 18px;
border: 1px solid black;
cursor: pointer;
background-color: rgb(224, 224, 224);
}
.text {
position: absolute;
}
#div_image1 {
position: relative;
}
#div_titel1,
#div_titel2,
#div_titel3 {
color: black;
height: auto;
text-align: left;
font-weight: bold;
position: fixed;
position: absolute;
display:block;
}
#div_titel1.exp,
#div_titel2.exp,
#div_titel3.exp {
color:black;
position: fixed;
display:block;
z-index:100;
overflow:visible;
}
#div_text1,
#div_text2,
#div_text3 {
display:none;
}
#div_text1.exp,
#div_text2.exp,
#div_text3.exp {
color:black;
position: fixed;
display:block;
z-index:100;
overflow-y: auto;
box-sizing: border-box;
}
#div_mass1,
#div_mass2,
#div_mass3 {
display:none;
}
#div_mass1.exp,
#div_mass2.exp,
#div_mass3.exp {
color:grey;
position: fixed;
display:block;
z-index:100;
}
#div_image1.exp,
#div_image2.exp,
#div_image3.exp {
z-index:100;
position: fixed;
}
.box {
position: fixed;
overflow:visible;
text-align: center;
justify-content: center;
display: inline-block; 
}
.box a {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
#thxerr {
position:fixed;
width:100vw;
height:auto;
color: black;
font-weight: bold;
}
.con,
.con_in {
justify-content: center; 
align-items: center;
display: flex; 
flex-direction: column;
position:fixed;
}
.con_in {
margin-left:2vw;
margin-right:2vw;
color: black;
}
label,
textarea,
input {
width: 100%;
box-sizing: border-box;
border:0px;
color: black;
}
textarea,
button,
input {
background:rgb(255,255,255,0.5);
}
button {
display: flex; 
justify-content: center; 
align-items: center;
width: 100%;
box-sizing: border-box;
border:0px;
color: black;
}
.vita {
position:absolute;
width:90vw;
left:5vw;
padding-left: calc(var(--x)*20px);
padding-right: calc(var(--x)*20px);
color:black;
display:flex;
}
#v1::-webkit-scrollbar,
#v2::-webkit-scrollbar,
#v3::-webkit-scrollbar,
#div_text1.exp::-webkit-scrollbar,
#div_text2.exp::-webkit-scrollbar,
#div_text3.exp::-webkit-scrollbar,
#shop1::-webkit-scrollbar,
#shop2::-webkit-scrollbar {
display: none; 
}
#v1,
#v2,
#v3,
#div_text1.exp,
#div_text2.exp,
#div_text3.exp,
#shop1,
#shop2 {
scrollbar-width: none;
-ms-overflow-style: none; 
}
#v1,
#v2,
#v3 {
position:relative;
background:rgb(255,255,255,0.5);
padding-top: calc(var(--x)*30px);
padding-bottom: calc(var(--x)*30px);
padding-left: calc(var(--x)*60px);
padding-right: calc(var(--x)*60px);
overflow-y: auto;
}
.shop {
position:absolute;
height:100vh;
color:black;
display:flex;
}
.shop {
top:10vh;
width:100vw;
flex-direction:row;
font-size:calc(var(--lh)*var(--x)*1.5rem);
}
#shop1,
#shop2 {
position:relative;
overflow-y: auto;
width:40%;
height:100%;
}
#shop1 {
width:60%;
font-size:calc(var(--lh)*var(--x)*1.5rem);
padding-right:20%;
padding-left:10%;
}
#shop2 {
display:block;
font-size:calc(var(--lh)*var(--x)*1.125rem);
padding-right:10%;
}
#shop2 textarea, 
#shop2 input[type="email"], 
#shop2 label {
    font-size:calc(var(--lh)*var(--x)*1.125rem);
    margin-top: calc(var(--x)*10px);
    margin-bottom: calc(var(--x)*5px);
}
.shop-checkbox input[type="checkbox"],
.agb-checkbox input[type="checkbox"] {
    display: none;
}
.shop-checkbox .checkbox {
    font-size:calc(var(--lh)*var(--x)*1.25rem);
    line-height: calc(var(--lh)*var(--x)*1.5);
    background-color: white;
    padding-left:calc(var(--x)*1%);
    padding-right:calc(var(--x)*1%);

}
.shop-checkbox input[type="checkbox"]:checked + .checkbox {
    background-color: black;
    position:relative;
}
.shop-checkbox input[type="checkbox"]:checked + .checkbox::after {
    content:'Added. Click to remove';
    padding-left:calc(var(--x)*6%);
    padding-right:calc(var(--x)*1%);
    text-align:right;
    color:white;
    background-color: black;
}
.agb-checkbox .checkbox {
    width: auto;
    font-size:calc(var(--lh)*var(--x)*1.125rem);
}
.agb-checkbox input[type="checkbox"]:checked + .checkbox::after {
    content:'You will get an email. Please be patient.';
    width:auto;
    color:black;
}
.shopimg img {
    width:100%;
    height:auto;
    border: calc(var(--x)*10px) solid white;
}
.selected-titles {
font-weight:bold;
list-style-type: none;
}
.shopmas {
    color:grey;
}
/* sizexl Für große Bildschirme (ab 1921px) */
@media only screen and (min-width: 1921px) {
:root {
--x: 1;
--lh: 1;
}
* {
padding: calc(var(--x)*0px);
}
body {
font-size: calc(var(--lh)*var(--x)*20px);
}
body a {
font-size: calc(var(--lh)*var(--x)*20px);
}
#upcon, #upcon2 {
font-size: calc(var(--lh)*var(--x)*2rem);
}
#thxerr {
font-size: calc(var(--lh)*var(--x)*2rem);
top:10vh;
padding: calc(var(--lh)*var(--x)*20px);
}
#div_image1 img,
#div_image2 img,
#div_image3 img {
border: calc(var(--x)*10px) solid white;
width:32vw;
height:auto;
}
#div_image1 {
top: 25vh;
left: 1vw;
}
#div_image2 {
position: absolute;
top: 25vh;
left: 34vw;
}
#div_image3 {
position: absolute;
top: 25vh;
left: 67vw;
}
#div_titel1,
#div_titel2,
#div_titel3 {
padding-left: calc(var(--x)*10px);
padding-right: calc(var(--x)*10px);
height: calc(var(--lh)*var(--x)*25px);
font-size: calc(var(--lh)*var(--x)*20px);
top: 22vh;
}
#div_titel1 {
width: 32vw;
left: 1vw;
}
#div_titel2 {
width: 32vw;
left: 34vw;
}
#div_titel3 {
width: 32vw;
left: 67vw;
}
#div_titel1.exp,
#div_titel2.exp,
#div_titel3.exp {
top: 90vh;
left: 33vw;
font-size: 2rem;
width:33vw;
}
#div_text1.exp,
#div_text2.exp,
#div_text3.exp {
top: 2vh;
left: 2vw;
font-size: 2rem;
width:30vw;
height:80vh;
}
#div_mass1.exp,
#div_mass2.exp,
#div_mass3.exp {
top: 90vh;
left: 70vw;
font-size: 1.5rem;
}
#div_image1.exp,
#div_image2.exp,
#div_image3.exp {
top: 1vh;
left:33vw;
}
#div_image1.exp img,
#div_image2.exp img,
#div_image3.exp img {
border: calc(var(--x)*10px) solid white;
width:66vw;
height:auto;
}
#box_1 {
top: 33vh;
left: 0vw;
}
#box_2 {
top: 33vh; 
left: 33vw;    
}
#box_3 {
top: 33vh; 
left: 66vw;            
}
.box {
width:33vw;
height:33vh;
padding-left: calc(var(--x)*20px);
}
.box a {
font-size: calc(var(--lh)*var(--x)*40px);
font-weight:800;
}
.con,
.con_in {
margin-left:10vw;
margin-right:10vw;
top:10vh;
width: 80vw;
}
.con_in {
font-size: calc(var(--lh)*var(--x)*1.5rem);
}
label,
textarea,
input {
padding: calc(var(--x)*2px);
line-height: calc(var(--lh)*var(--x)*1.25);
font-size: calc(var(--lh)*var(--x)*1.5rem);
}
button {
font-weight: 800;
height: calc(var(--x)*66px);
line-height: calc(var(--lh)*var(--x)*1.5);
font-size: calc(var(--lh)*var(--x)*1.75rem);
}
.vita {
height:55vh;
top:10vw;
font-size: calc(var(--lh)*var(--x)*1.5rem);
flex-direction:row;
}
#v1,
#v2,
#v3 {
width:32%;
height:100%;
margin-left:1%;
}
}

/* sizel Für Bildschirme von 1441px bis 1920px */
@media only screen and (min-width: 1441px) and (max-width: 1920px) {
:root {
--x: .75;
--lh: 1.1;
}
* {
padding: calc(var(--x)*0px);
}
body {
font-size: calc(var(--lh)*var(--x)*20px);
}
body a {
font-size: calc(var(--lh)*var(--x)*20px);
}
#upcon, #upcon2 {
font-size: calc(var(--lh)*var(--x)*1.75rem);
}
#thxerr {
font-size: calc(var(--lh)*var(--x)*2rem);
top:10vh;
padding: calc(var(--lh)*var(--x)*20px);
}
#div_image1 img,
#div_image2 img,
#div_image3 img {
border: calc(var(--x)*10px) solid white;
width:32vw;
height:auto;
}
#div_image1 {
top: 25vh;
left: 1vw;
}
#div_image2 {
position: absolute;
top: 25vh;
left: 34vw;
}
#div_image3 {
position: absolute;
top: 25vh;
left: 67vw;
}
#div_titel1,
#div_titel2,
#div_titel3 {
padding-left: calc(var(--x)*10px);
padding-right: calc(var(--x)*10px);
height: calc(var(--lh)*var(--x)*25px);
font-size: calc(var(--lh)*var(--x)*20px);
top: 22vh;
}
#div_titel1 {
width: 32vw;
left: 1vw;
}
#div_titel2 {
width: 32vw;
left: 34vw;
}
#div_titel3 {
width: 32vw;
left: 67vw;
}
#div_titel1.exp,
#div_titel2.exp,
#div_titel3.exp {
top: 93vh;
left: 33vw;
font-size: 1.75rem;
width:33vw;
}
#div_text1.exp,
#div_text2.exp,
#div_text3.exp {
top: 2vh;
left: 2vw;
font-size: 2rem;
width:30vw;
height:80vh;
}
#div_mass1.exp,
#div_mass2.exp,
#div_mass3.exp {
top: 93vh;
left: 70vw;
font-size: 1.25rem;
}
#div_image1.exp,
#div_image2.exp,
#div_image3.exp {
top: 1vh;
left:33vw;
}
#div_image1.exp img,
#div_image2.exp img,
#div_image3.exp img {
border: calc(var(--x)*10px) solid white;
width:66vw;
height:auto;
}
#box_1 {
top: 33vh;
left: 0vw;
}
#box_2 {
top: 33vh; 
left: 33vw;    
}
#box_3 {
top: 33vh; 
left: 66vw;            
}
.box {
width:33vw;
height:33vh;
padding-left: calc(var(--x)*20px);
}
.box a {
font-size: calc(var(--lh)*var(--x)*40px);
font-weight:800;
}
.con,
.con_in {
margin-left:10vw;
margin-right:10vw;
top:10vh;
width: 80vw;
}
.con_in {
font-size: calc(var(--lh)*var(--x)*1.5rem);
}
label,
textarea,
input {
padding: calc(var(--x)*2px);
line-height: calc(var(--lh)*var(--x)*1.25);
font-size: calc(var(--lh)*var(--x)*1.5rem);
}
button {
font-weight: 800;
height: calc(var(--x)*66px);
line-height: calc(var(--lh)*var(--x)*1.5);
font-size: calc(var(--lh)*var(--x)*1.75rem);
}
.vita {
height:55vh;
top:10vw;
font-size: calc(var(--lh)*var(--x)*1.5rem);
flex-direction:row;
}
#v1,
#v2,
#v3 {
width:32%;
height:100%;
margin-left:1%;
}
}

/* sizem Für Bildschirme von 1025px bis 1440px */
@media only screen and (min-width: 1025px) and (max-width: 1440px) {
:root {
--x: .6;
--lh: 1.28;
}
* {
padding: calc(var(--x)*0px);
}
body {
font-size: calc(var(--lh)*var(--x)*20px);
}
body a {
font-size: calc(var(--lh)*var(--x)*20px);
}
#upcon, #upcon2 {
font-size: calc(var(--lh)*var(--x)*30px);
}
#thxerr {
font-size: calc(var(--lh)*var(--x)*1.75rem);
top:10vh;
padding: calc(var(--lh)*var(--x)*20px);
}
#div_image1 img,
#div_image2 img,
#div_image3 img {
border: calc(var(--x)*10px) solid white;
width:32vw;
height:auto;
}
#div_image1 {
top: 25vh;
left: 1vw;
}
#div_image2 {
position: absolute;
top: 25vh;
left: 34vw;
}
#div_image3 {
position: absolute;
top: 25vh;
left: 67vw;
}
#div_titel1,
#div_titel2,
#div_titel3 {
padding-left: calc(var(--x)*10px);
padding-right: calc(var(--x)*10px);
height: calc(var(--lh)*var(--x)*25px);
font-size: calc(var(--lh)*var(--x)*20px);
top: 22vh;
}
#div_titel1 {
width: 32vw;
left: 1vw;
}
#div_titel2 {
width: 32vw;
left: 34vw;
}
#div_titel3 {
width: 32vw;
left: 67vw;
}
#div_titel1.exp,
#div_titel2.exp,
#div_titel3.exp {
top: 90vh;
left: 33vw;
font-size: 2rem;
width:33vw;
}
#div_text1.exp,
#div_text2.exp,
#div_text3.exp {
top: 2vh;
left: 2vw;
font-size: 2rem;
width:30vw;
height:80vh;
}
#div_mass1.exp,
#div_mass2.exp,
#div_mass3.exp {
top: 90vh;
left: 70vw;
font-size: 1.5rem;
}
#div_image1.exp,
#div_image2.exp,
#div_image3.exp {
top: 1vh;
left:33vw;
}
#div_image1.exp img,
#div_image2.exp img,
#div_image3.exp img {
border: calc(var(--x)*10px) solid white;
width:66vw;
height:auto;
}
#box_1 {
top: 33vh;
left: 0vw;
}
#box_2 {
top: 33vh; 
left: 33vw;    
}
#box_3 {
top: 33vh; 
left: 66vw;            
}
.box {
width:33vw;
height:33vh;
padding-left: calc(var(--x)*20px);
}
.box a {
font-size: calc(var(--lh)*var(--x)*40px);
font-weight:800;
}
.con,
.con_in {
margin-left:10vw;
margin-right:10vw;
top:10vh;
width: 80vw;
}
.con_in {
font-size: calc(var(--lh)*var(--x)*1.5rem);
}
label,
textarea,
input {
padding: calc(var(--x)*2px);
line-height: calc(var(--lh)*var(--x)*1.25);
font-size: calc(var(--lh)*var(--x)*1.5rem);
}
button {
font-weight: 800;
height: calc(var(--x)*66px);
line-height: calc(var(--lh)*var(--x)*1.5);
font-size: calc(var(--lh)*var(--x)*1.75rem);
}
.vita {
height:55vh;
top:10vw;
font-size: calc(var(--lh)*var(--x)*1.5rem);
flex-direction:row;
}
#v1,
#v2,
#v3 {
width:32%;
height:100%;
margin-left:1%;
}
}

/* sizetl Für Tablets im Landscape-Modus (601px bis 1024px) */
@media only screen and (min-width: 601px) and (max-width: 1024px) and (orientation: landscape) {
:root {
--x: .5;
--lh: 1.38;
}
* {
padding: calc(var(--x)*0px);
}
body {
font-size: calc(var(--lh)*var(--x)*20px);
}
body a {
font-size: calc(var(--lh)*var(--x)*20px);
}
#upcon, #upcon a, #upcon2, #upcon2 a {
font-size: calc(var(--lh)*var(--x)*2rem);
line-height: calc(var(--lh)*var(--x)*1.5);
width:100vw;
}
#thxerr {
font-size: calc(var(--lh)*var(--x)*4rem);
line-height: calc(var(--lh)*var(--x)*2);
top:10vh;
padding: calc(var(--lh)*var(--x)*20px);
}
#div_image1 img,
#div_image2 img,
#div_image3 img {
border: calc(var(--x)*10px) solid white;
width:32vw;
height:auto;
}
#div_image1 {
top: 25vh;
left: 1vw;
}
#div_image2 {
position: absolute;
top: 25vh;
left: 34vw;
}
#div_image3 {
position: absolute;
top: 25vh;
left: 67vw;
}
#div_titel1,
#div_titel2,
#div_titel3 {
padding-left: calc(var(--x)*10px);
padding-right: calc(var(--x)*10px);
height: calc(var(--lh)*var(--x)*25px);
font-size: calc(var(--lh)*var(--x)*20px);
top: 20vh;
}
#div_titel1 {
width: 32vw;
left: 1vw;
}
#div_titel2 {
width: 32vw;
left: 34vw;
}
#div_titel3 {
width: 32vw;
left: 67vw;
}
#div_titel1.exp,
#div_titel2.exp,
#div_titel3.exp {
top: 90vh;
left: 33vw;
font-size: 2rem;
width:33vw;
}
#div_text1.exp,
#div_text2.exp,
#div_text3.exp {
top: 2vh;
left: 2vw;
font-size: 2rem;
width:30vw;
height:80vh;
}
#div_mass1.exp,
#div_mass2.exp,
#div_mass3.exp {
top: 90vh;
left: 70vw;
font-size: 1.5rem;
}
#div_image1.exp,
#div_image2.exp,
#div_image3.exp {
top: 1vh;
left:33vw;
}
#div_image1.exp img,
#div_image2.exp img,
#div_image3.exp img {
border: calc(var(--x)*10px) solid white;
width:66vw;
height:auto;
}
#box_1 {
top: 33vh;
left: 0vw;
}
#box_2 {
top: 33vh; 
left: 33vw;    
}
#box_3 {
top: 33vh; 
left: 66vw;            
}
.box {
width:33vw;
height:33vh;
padding-left: calc(var(--x)*20px);
}
.box a {
font-size: calc(var(--lh)*var(--x)*40px);
font-weight:800;
}
.con,
.con_in {
margin-left:10vw;
margin-right:10vw;
top:10vh;
width: 80vw;
}
.con_in {
font-size: calc(var(--lh)*var(--x)*1.5rem);
}
label,
textarea,
input {
padding: calc(var(--x)*2px);
line-height: calc(var(--lh)*var(--x)*1.25);
font-size: calc(var(--lh)*var(--x)*1.5rem);
}
button {
font-weight: 800;
height: calc(var(--x)*66px);
line-height: calc(var(--lh)*var(--x)*1.5);
font-size: calc(var(--lh)*var(--x)*1.75rem);
}
.vita {
height:55vh;
top:10vw;
font-size: calc(var(--lh)*var(--x)*1.5rem);
flex-direction:row;
}
#v1,
#v2,
#v3 {
width:32%;
height:100%;
margin-left:1%;
}


}

/* sizetp Für Tablets im Portrait-Modus (601px bis 1024px) */
@media only screen and (min-width: 601px) and (max-width: 1024px) and (orientation: portrait) {
:root {
--x: .5;
--lh: 1.38;
}
* {
padding: calc(var(--x)*0px);
}
body {
font-size: calc(var(--lh)*var(--x)*20px);
}
body a {
font-size: calc(var(--lh)*var(--x)*20px);
}
.cart {
display:block;
}
#upcon, #upcon a, #upcon2, #upcon2 a {
font-size: calc(var(--lh)*var(--x)*2rem);
line-height: calc(var(--lh)*var(--x)*1.5);
width:100vw;
}
#thxerr {
font-size: calc(var(--lh)*var(--x)*4rem);
line-height: calc(var(--lh)*var(--x)*2);
top:10vh;
padding: calc(var(--lh)*var(--x)*20px);
}
#div_image1 img,
#div_image2 img,
#div_image3 img {
border: calc(var(--x)*10px) solid white;
width:58vw;
height:auto;
}
#div_image1 {
position: fixed;
top: 13vh;
left: 21vw;
}
#div_image2 {
position: absolute;
top: 40vh;
left: 21vw;
}
#div_image3 {
position: absolute;
top: 67vh;
left: 21vw;
}
#div_titel1,
#div_titel2,
#div_titel3 {
padding-left: calc(var(--x)*10px);
padding-right: calc(var(--x)*10px);
height: calc(var(--lh)*var(--x)*25px);
font-size: calc(var(--lh)*var(--x)*1.5rem);
left: 1vw;
}
#div_titel1,
#div_titel2,
#div_titel3 {
display:none;
}
#div_titel1.exp,
#div_titel2.exp,
#div_titel3.exp {
top: 49vh;
left: 0vw;
padding-left: calc(var(--x)*40px);
padding-right: calc(var(--x)*40px);
font-size: 1.5rem;
width:100vw;
display:block;
}
#div_text1.exp,
#div_text2.exp,
#div_text3.exp {
top: 62vh;
left: 0vw;
padding-left: calc(var(--x)*40px);
padding-right: calc(var(--x)*40px);
font-size: 1.5rem;
width:100vw;
height:35vh;
}
#div_mass1.exp,
#div_mass2.exp,
#div_mass3.exp {
top: 53vh;
left: 0vw;
padding-left: calc(var(--x)*40px);
padding-right: calc(var(--x)*40px);
font-size: 1.5rem;
width:100vw;
}
#div_image1.exp,
#div_image2.exp,
#div_image3.exp {
top: 0vh;
left:0vw;
}
#div_image1.exp img,
#div_image2.exp img,
#div_image3.exp img {
border: calc(var(--x)*20px) solid white;
width:100vw;
height:auto;
}
#box_1 {
top: 33vh;
left: 33vw;
}
#box_2 {
top: 50vh; 
left: 33vw;    
}
#box_3 {
top: 67vh; 
left: 33vw;            
}
.box {
width:33vw;
height:33vh;
padding-left: calc(var(--x)*20px);
}
.box a {
font-size: calc(var(--lh)*var(--x)*3.5rem);
font-weight:800;
}
.con,
.con_in {
margin-left:10vw;
margin-right:10vw;
top:20vh;
width: 80vw;
}
.con_in {
font-size: calc(var(--lh)*var(--x)*1.5rem);
}
label,
textarea,
input {
padding: calc(var(--x)*2px);
line-height: calc(var(--lh)*var(--x)*1.25);
font-size: calc(var(--lh)*var(--x)*1.5rem);
}
button {
font-weight: 800;
height: calc(var(--x)*66px);
line-height: calc(var(--lh)*var(--x)*1.5);
font-size: calc(var(--lh)*var(--x)*1.75rem);
}
.vita {
height:80vh;
top:20vh;
font-size: calc(var(--lh)*var(--x)*1.5rem);
flex-direction:column;
}
#v1,
#v2,
#v3 {
width:100%;
height:30%;
margin-bottom:3%;
}

.shop {
    position:absolute;
    width:100vw;
    height:85vh;
    color:black;
    display:flex;
}
.shop {
    top:10vh;
    left:0vw;
    flex-direction:column;
}
#shop1,
#shop2 {
    width:95%;
    margin-right:2.5%;
    margin-left:2.5%;
    font-size:calc(var(--lh)*var(--x)*2rem);
    padding-left:0px;
    padding-right:0px;
}
#shop1 {
    width:66%;
    margin-left:10%;
    display:block;
    height:auto;

}
#shop2 {
    display:none;
    margin-top: calc(var(--x)*50px);
    height:auto;
    width:80%;
    margin-left:10%;
    line-height: calc(var(--lh)*var(--x)*2);
}

#shop2 textarea, 
#shop2 input[type="email"], 
#shop2 label {
    font-size:calc(var(--lh)*var(--x)*2rem); 
    line-height: calc(var(--lh)*var(--x)*2);

    margin-top: calc(var(--x)*5px);
    margin-bottom: calc(var(--x)*0px);
}
.shop-checkbox input[type="checkbox"],
.agb-checkbox input[type="checkbox"] {
    display: none;
}
.shop-checkbox .checkbox {
    font-size:calc(var(--lh)*var(--x)*2rem); 
    line-height: calc(var(--lh)*var(--x)*2.5);
}
.shop-checkbox input[type="checkbox"]:checked + .checkbox {
    background-color: black;
    position:relative;
}
.shop-checkbox input[type="checkbox"]:checked + .checkbox::after {
    content:'Added. Click to remove';
    padding-left:calc(var(--x)*1%);
    padding-right:calc(var(--x)*1%);
    text-align:right;
    color:white;
}
.agb-checkbox .checkbox {
    width: auto;
    font-size:calc(var(--lh)*var(--x)*2rem); 
    line-height: calc(var(--lh)*var(--x)*2.5);
}
.agb-checkbox input[type="checkbox"]:checked + .checkbox::after {
    content:'You will get an email. Please be patient.';
    width:auto;
    color:black;
    font-size:calc(var(--lh)*var(--x)*2rem); 
    line-height: calc(var(--lh)*var(--x)*2.5);
}
.shopimg img {
    width:100%;
    height:auto;
    border: calc(var(--x)*10px) solid white;
}
.selected-titles {
font-weight:bold;
font-size:calc(var(--lh)*var(--x)*2rem); 
}

}

/* sizesp Für Smartphones im Portrait-Modus (max. 600px) */
@media only screen and (orientation: portrait) and (max-width: 600px) {
:root {
--x: .35;
--lh: 1.5;
}
* {
padding: calc(var(--x)*0px);
}
body {
font-size: calc(var(--lh)*var(--x)*20px);
}
body a {
font-size: calc(var(--lh)*var(--x)*20px);
}
.cart {
display:block;
}
#upcon, #upcon a, #upcon2, #upcon2 a {
font-size: calc(var(--lh)*var(--x)*1.75rem);
line-height: calc(var(--lh)*var(--x)*1.25);
width:100vw;
}
#thxerr {
font-size: calc(var(--lh)*var(--x)*4rem);
line-height: calc(var(--lh)*var(--x)*2);
top:10vh;
padding: calc(var(--lh)*var(--x)*20px);
}
#div_image1 img,
#div_image2 img,
#div_image3 img {
border: calc(var(--x)*10px) solid white;
width:70vw;
height:auto;
}
#div_image1 {
position: fixed;
top: 15vh;
left: 15vw;
}
#div_image2 {
position: absolute;
top: 40vh;
left: 15vw;
}
#div_image3 {
position: absolute;
top: 65vh;
left: 15vw;
}
#div_titel1,
#div_titel2,
#div_titel3 {
padding-left: calc(var(--x)*10px);
padding-right: calc(var(--x)*10px);
height: calc(var(--lh)*var(--x)*25px);
font-size: calc(var(--lh)*var(--x)*1.5rem);
left: 1vw;
}
#div_titel1,
#div_titel2,
#div_titel3 {
display:none;
}
#div_titel1.exp,
#div_titel2.exp,
#div_titel3.exp {
top: 37vh;
left: 0vw;
padding-left: calc(var(--x)*40px);
padding-right: calc(var(--x)*40px);
font-size: 1rem;
width:100vw;
display:block;
}
#div_text1.exp,
#div_text2.exp,
#div_text3.exp {
top: 50vh;
left: 0vw;
padding-left: calc(var(--x)*40px);
padding-right: calc(var(--x)*40px);
font-size: 1rem;
width:100vw;
height:45vh;
}
#div_mass1.exp,
#div_mass2.exp,
#div_mass3.exp {
top: 40vh;
left: 0vw;
padding-left: calc(var(--x)*40px);
padding-right: calc(var(--x)*40px);
font-size: 1rem;
width:100vw;
}
#div_image1.exp,
#div_image2.exp,
#div_image3.exp {
top: 0vh;
left:0vw;
}
#div_image1.exp img,
#div_image2.exp img,
#div_image3.exp img {
border: calc(var(--x)*10px) solid white;
width:100vw;
height:auto;
}
#box_1 {
top: 33vh;
left: 33vw;
}
#box_2 {
top: 50vh; 
left: 33vw;    
}
#box_3 {
top: 67vh; 
left: 33vw;            
}
.box {
width:33vw;
height:33vh;
padding-left: calc(var(--x)*20px);
}
.box a {
font-size: calc(var(--lh)*var(--x)*3.5rem);
font-weight:800;
}
.con,
.con_in {
margin-left:10vw;
margin-right:10vw;
top:20vh;
width: 80vw;
}
.con_in {
font-size: calc(var(--lh)*var(--x)*1.5rem);
}
label,
textarea,
input {
padding: calc(var(--x)*2px);
line-height: calc(var(--lh)*var(--x)*1.25);
font-size: calc(var(--lh)*var(--x)*1.5rem);
}
button {
font-weight: 800;
height: calc(var(--x)*66px);
line-height: calc(var(--lh)*var(--x)*1.5);
font-size: calc(var(--lh)*var(--x)*1.75rem);
}
.vita {
height:80vh;
top:20vh;
font-size: calc(var(--lh)*var(--x)*1.5rem);
flex-direction:column;
}
#v1,
#v2,
#v3 {
width:100%;
height:30%;
margin-bottom:3%;
}
.shop {
    position:absolute;
    width:100vw;
    height:75vh;
    color:black;
    display:flex;
}
.shop {
    top:10vh;
    left:0vw;
    flex-direction:column;
}
#shop1,
#shop2 {
    width:95%;
    margin-right:2.5%;
    margin-left:2.5%;
    font-size:calc(var(--lh)*var(--x)*1.5rem);
    padding-left:5%;
}
#shop1 {
    width:100%;
    margin-left:0%;
    height:auto;
    font-size:calc(var(--lh)*var(--x)*2rem);
    display:block;
}
#shop2 {
    display:none;
    margin-top: calc(var(--x)*50px);
    height:auto;
    width:80%;
    margin-left:10%;
}

#shop2 textarea, 
#shop2 input[type="email"], 
#shop2 label {
    font-size:calc(var(--lh)*var(--x)*1.5rem);
    line-height: calc(var(--lh)*var(--x)*2);

    margin-top: calc(var(--x)*5px);
    margin-bottom: calc(var(--x)*0px);
}
.shop-checkbox input[type="checkbox"],
.agb-checkbox input[type="checkbox"] {
    display: none;
}
.shop-checkbox input[type="checkbox"] {
content:'Add to cart';
}
.shop-checkbox .checkbox {
    font-size:calc(var(--lh)*var(--x)*1.75rem);
}
.shop-checkbox input[type="checkbox"]:checked + .checkbox {
    background-color: black;
    position:relative;
    font-size:calc(var(--lh)*var(--x)*2rem);
}
.shop-checkbox input[type="checkbox"]:checked + .checkbox::after {
    content:'Added. Click to remove';
    padding-left:calc(var(--x)*1%);
    padding-right:calc(var(--x)*1%);
    text-align:right;
    color:white;
    font-size:calc(var(--lh)*var(--x)*1.75rem);
}
.agb-checkbox .checkbox {
    width: auto;
    font-size:calc(var(--lh)*var(--x)*1.5rem);
}
.agb-checkbox input[type="checkbox"]:checked + .checkbox::after {
    content:'You will get an email. Please be patient.';
    width:auto;
    color:black;
}
.shopimg img {
    width:100%;
    height:auto;
    border: calc(var(--x)*10px) solid white;
}
.selected-titles {
font-weight:bold;
font-size:calc(var(--lh)*var(--x)*1.5rem);
}
}

/* sizesl Für Smartphones im Landscape-Modus (max. 600px) */
@media only screen and (orientation: landscape) and (max-width: 600px) {
:root {
--x: .5;
--lh: 1.38;
}
* {
padding: calc(var(--x)*0px);
}
body {
font-size: calc(var(--lh)*var(--x)*20px);
}
body a {
font-size: calc(var(--lh)*var(--x)*20px);
}
#upcon, #upcon2 {
font-size: calc(var(--lh)*var(--x)*10rem);
line-height: calc(var(--lh)*var(--x)*1);
width:100vw;
margin-top:0.2vh;
}
#thxerr {
font-size: calc(var(--lh)*var(--x)*10rem);
line-height: calc(var(--lh)*var(--x)*1);
top:10vh;
padding: calc(var(--lh)*var(--x)*20px);
}
#div_image1 img,
#div_image2 img,
#div_image3 img {
border: calc(var(--x)*10px) solid white;
width:32vw;
height:auto;
}
#div_image1 {
top: 25vh;
left: 1vw;
}
#div_image2 {
position: absolute;
top: 25vh;
left: 34vw;
}
#div_image3 {
position: absolute;
top: 25vh;
left: 67vw;
}
#div_titel1,
#div_titel2,
#div_titel3 {
padding-left: calc(var(--x)*10px);
padding-right: calc(var(--x)*10px);
height: calc(var(--lh)*var(--x)*25px);
font-size: calc(var(--lh)*var(--x)*20px);
top: 20vh;
}
#div_titel1 {
width: 32vw;
left: 1vw;
}
#div_titel2 {
width: 32vw;
left: 34vw;
}
#div_titel3 {
width: 32vw;
left: 67vw;
}
#div_titel1.exp,
#div_titel2.exp,
#div_titel3.exp {
top: 90vh;
left: 33vw;
font-size: 2rem;
width:33vw;
}
#div_text1.exp,
#div_text2.exp,
#div_text3.exp {
top: 2vh;
left: 2vw;
font-size: 2rem;
width:30vw;
height:80vh;
}
#div_mass1.exp,
#div_mass2.exp,
#div_mass3.exp {
top: 90vh;
left: 70vw;
font-size: 1.5rem;
}
#div_image1.exp,
#div_image2.exp,
#div_image3.exp {
top: 1vh;
left:33vw;
}
#div_image1.exp img,
#div_image2.exp img,
#div_image3.exp img {
border: calc(var(--x)*10px) solid white;
width:66vw;
height:auto;
}
#box_1 {
top: 33vh;
left: 0vw;
}
#box_2 {
top: 33vh; 
left: 33vw;    
}
#box_3 {
top: 33vh; 
left: 66vw;            
}
.box {
width:33vw;
height:33vh;
padding-left: calc(var(--x)*20px);
}
.box a {
font-size: calc(var(--lh)*var(--x)*40px);
font-weight:800;
}
.con,
.con_in {
margin-left:10vw;
margin-right:10vw;
top:10vh;
width: 80vw;
}
.con_in {
font-size: calc(var(--lh)*var(--x)*1.5rem);
overflow-y: auto;
height:80vw;
}
label,
textarea,
input {
padding: calc(var(--x)*2px);
line-height: calc(var(--lh)*var(--x)*1.25);
font-size: calc(var(--lh)*var(--x)*1.5rem);
}
button {
font-weight: 800;
height: calc(var(--x)*66px);
line-height: calc(var(--lh)*var(--x)*1.5);
font-size: calc(var(--lh)*var(--x)*1.75rem);
}
.vita {
height:55vh;
top:10vw;
font-size: calc(var(--lh)*var(--x)*3rem);
flex-direction:row;
}
#v1,
#v2,
#v3 {
width:32%;
height:100%;
margin-left:1%;
}
}