* {
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;
}
body a {
color:white;    
font-size: calc(var(--lh)*var(--x)*20px);
text-decoration:none;
}
#loginForm { width: 100%; max-width: 600px; margin-left: 2vw; margin-right: 2vw;}

.footer-notice {
    position: absolute;       /* Feste Positionierung */
    bottom: 0;              /* Ganz unten */
    left: 0; right: 0;
    text-align: center;
    width: 100%; padding: 10px;
    color: white; z-index: 50;
    font-size: 14px;
}
.footer-notice a { color: white; }

.hidden {}
#upcon {
position: fixed;
top: 0; 
left: 0;
width:30vw;
height:10vh;
color: black;
}
#upcon a {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
color:white;
font-weight: bold;   
}
#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;
    left:10vw;
    width:80vw;
    flex-direction:row;
    font-size:calc(var(--lh)*var(--x)*1.5rem);
}
#shop1,
#shop2 {
    position:relative;
    overflow-y: auto;
    width:40%;
    height:100%;
}
#shop1 {
    margin-right:20%;
    font-size:calc(var(--lh)*var(--x)*1.5rem);
}
#shop2 {
    font-size:calc(var(--lh)*var(--x)*1.125rem);
}
#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);
}
.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)*6%);
    text-align:right;
    color:white;
}
.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;
}
.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 {
padding: calc(var(--lh)*var(--x)*20px);
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);
height: calc(var(--x)*66px);
}
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 {
padding: calc(var(--lh)*var(--x)*20px);
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);
height: calc(var(--x)*66px);
}
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 {
padding: calc(var(--lh)*var(--x)*20px);
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);
height: calc(var(--x)*66px);
}
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 {
padding: calc(var(--lh)*var(--x)*20px);
font-size: calc(var(--lh)*var(--x)*4rem);
line-height: calc(var(--lh)*var(--x)*2);
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);
height: calc(var(--x)*66px);
}
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);
}
#upcon, #upcon a {
padding: calc(var(--lh)*var(--x)*20px);
font-size: calc(var(--lh)*var(--x)*4rem);
line-height: calc(var(--lh)*var(--x)*2);
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.5);
font-size: calc(var(--lh)*var(--x)*1.5rem);
height: calc(var(--x)*66px);
}
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:15vh;
    left:0vw;
    flex-direction:column;
}
#shop1,
#shop2 {
    width:90%;
    margin-right:5%;
    margin-left:5%;
    font-size:calc(var(--lh)*var(--x)*2rem); 
}
#shop1 {
    width:90%;
    height:80%;
    /* padding-left:20%;
    padding-right:20%;*/
}
#shop2 {
    margin-top: calc(var(--x)*50px);
    height:20%;
    line-height: calc(var(--lh)*var(--x)*2.5);

}

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

    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)*1.25rem);
}
.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)*6%);
    text-align:right;
    color:white;
}
.agb-checkbox .checkbox {
    width: auto;
    font-size:calc(var(--lh)*var(--x)*2rem); 
}
.agb-checkbox input[type="checkbox"]:checked + .checkbox::after {
    content:'You will get an email. Please be patient.';
    width:auto;
    color:black;
}
.shopimg img {
    width:66%;
    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);
}
#upcon, #upcon a {
padding: calc(var(--lh)*var(--x)*20px);
font-size: calc(var(--lh)*var(--x)*4rem);
line-height: calc(var(--lh)*var(--x)*2);
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.5);
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:15vh;
    left:0vw;
    flex-direction:column;
}
#shop1,
#shop2 {
    width:90%;
    margin-right:5%;
    margin-left:5%;
    font-size:calc(var(--lh)*var(--x)*1.5rem);
}
#shop1 {
    width:90%;
    height:60%;
    /* padding-left:20%;
    padding-right:20%; */

    font-size:calc(var(--lh)*var(--x)*2rem);
}
#shop2 {
    margin-top: calc(var(--x)*50px);
    height:40%;
}

#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.5);

    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)*1.25rem);
}
.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)*6%);
    text-align:right;
    color:white;
}
.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:60%;
    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. 900px) */
@media only screen and (orientation: landscape) and (max-width: 900px) {
: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 {
padding: calc(var(--lh)*var(--x)*20px);
font-size: calc(var(--lh)*var(--x)*10rem);
line-height: calc(var(--lh)*var(--x)*1);
width:100vw;
opacity:0.02;
}
#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.5);
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%;
}
}