:root {

    --primary: #444;
    --primary-opacity: rgba(68, 68, 68, 0.2);
    --dark: #40E0D0;
    --normal: #ccc;
    --light: #fff;
    --shadow: 0 1px 5px rgba(64,224,208, 0.8);
    --sshadow: 0 -0.5px 3px rgba(64,224,208, 0.3);
    --btn: #333;
}
::-webkit-scrollbar {
    width: 0.5vw;
}
::-webkit-scrollbar-track {
    background: rgba(64,224,208, 0.3);
}
::-webkit-scrollbar-thumb {
    background: var(--dark);
    border: 0.1vw solid rgba(64,224,208, 0.4);
    border-radius: 0.5vw;
}
html {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--dark);
}
body {
    background: #717272;
    line-height: 1.4;
    hyphens: auto;
    margin: 0;
    padding: 0;  
    accent-color: var(--dark);
}
a {
    text-decoration: none;
    color: #fff;
}

/* Wrapper */

.wrapper {
    width: 80%;
    height: 100vh;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}
.showcase-about {
    width: 100%;
    height: auto;
    box-sizing: border-box;
}


/* Header */
header {
    width: 100%;
    display: grid;
    grid-gap: 0.5%;
    padding: 0;
    list-style: none;
    grid-template-columns: 20% 59% 20%;
    margin-block-start: 1vw;
    margin-block-end: 0.52vw
}
.number {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Right Chalk';
    background: rgba(31,43,50, 0.8);
    text-decoration: none;
    padding:0.7vw;
    text-align: center;
    color: var(--normal);
    text-transform: uppercase;
    font-size: 0.83vw;
    box-shadow: var(--shadow);
}
.header#logo {
    width: 100%;
    height: auto;
     font-size: 1vw;
     background: rgba(31,43,50, 0.8);
     box-shadow: var(--shadow);
     font-family: 'Conthrax';
}
.header#logo a {
    text-align: center;
    color: var(--dark);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5vw 0;
}
.header#logo img {
    width: 8%;
    margin-right: 2vw;
}
.recht {
    width: 100%;
     font-size: 0.5vw;
     display: flex;
     justify-content: center;
     align-items: center;
     background: rgba(31,43,50, 0.8);
     box-shadow: var(--shadow);
     font-family: 'Conthrax';
}
.recht a {
    text-decoration: none;
    color: var(--normal);
    padding: 0.7vw;
}

  /*  Seite About  */
  .transparenterhintergrund-about {
    width: 100%;
    grid-column: 1/4;
    grid-row: 1/3;
    position: relative;
    background: rgba(31,43,50, 0.8);
    box-sizing: border-box;
}
.showcase-about {
    width: 100%;
    height: 80vh;
    display: grid;
    grid-template-columns: 49.5% 49.5%;
    grid-template-rows: 15% 69% 15%;
    grid-gap: 1%;
}
.showcase-about-box {
    width: 100%;
    height: 100%;
    grid-column: 2/3;
    grid-row: 2/3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    box-shadow: var(--shadow);
}
.showcase-logo-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 1/2;
    grid-row: 2/3;
    background: url(../images/LogoTest1.png) no-repeat;
    background-size: cover;
    background-position: center;
}
.showcase-about-box#register {
    padding-top: 2vw;
}
.showcase-about-box#register h1 {
    color: var(--normal);
    font-size: 1.5vw !important;
    font-family: 'Conthrax';
    background-image: linear-gradient(to right, rgba(64, 224, 208, 0.1),rgba(64, 224, 208, 1));
    background-size: 100% 4px;
    background-position: bottom;
    background-repeat: no-repeat;
    line-height: 15vh;
    margin-top: -2vw;
}
.showcase-about-box#register p {
    color: var(--normal);
    font-size: 1vw !important;
    font-family: 'Conthrax';
   
}
.showcase-about-box#login h1 {
    color: var(--normal);
    font-size: 1vw !important;
    font-family: 'Conthrax';
    background-image: linear-gradient(to right, rgba(64, 224, 208, 0.1),rgba(64, 224, 208, 1));
    background-size: 100% 4px;
    background-position: bottom;
    background-repeat: no-repeat;
    line-height: 15vh;
    margin-top: -3vw;
}
.showcase-about-box#login {
    padding-top: 1vw;
}
.showcase-about-box#login p {
    color: var(--normal);
    font-size: 1.5vw !important;
    font-family: 'Conthrax';
   
}
.showcase-about-box#anmeldung_box h1 {
    color: var(--normal);
    font-size: 1.5vw !important;
    font-family: 'Conthrax';
    background-image: linear-gradient(to right, rgba(64, 224, 208, 0.1),rgba(64, 224, 208, 1));
    background-size: 100% 4px;
    background-position: bottom;
    background-repeat: no-repeat;
    line-height: 15vh;
    margin-top: -2vw;
}
.showcase-about-box#login h1 {
    color: var(--normal);
    font-size: 1vw !important;
    font-family: 'Conthrax';
    background-image: linear-gradient(to right, rgba(64, 224, 208, 0.1),rgba(64, 224, 208, 1));
    background-size: 100% 4px;
    background-position: bottom;
    background-repeat: no-repeat;
    line-height: 15vh;
    margin-top: -3vw;
}
.showcase-about-box .btn  {
    position: relative;
    width: 10vw;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1vw;
    margin-bottom: 0.5vw;
    padding:  0.5vw 0;
    background-image: linear-gradient(to right, rgba(64, 224, 208, 0.1),rgba(64, 224, 208, 1));
    border-radius: 0.7vw;
    font-size: 0.6vw;
    color: #fff !important;
    text-decoration: none;
    font-family: 'Conthrax';
    font-weight: bolder;
    z-index: 2;
    transition: color 0.9s; 
}
.showcase-about-box .btn span {
    position: absolute;
    width: 0;
    height: 0;
    color: var(--dark);
    background: rgba(31,43,50, 0.8);
    border-radius: 0.7vw;
    top: 0;
    left: 0;
    z-index: -1;
    transition: 0.5s;  
}
.btn#anmeldung:hover span {
    height: 100%;
    width: 100%;
    border: 0.1vw solid var(--dark); 
}
.btn#anmeldung:hover a {
    color: var(--dark) !important;
}

.showcase-about-box#register .btn  {
    position: relative;
    width: 10vw;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1vw;
    margin-bottom: 3vw;
    padding:  0.5vw 0;
    background-image: linear-gradient(to right, rgba(64, 224, 208, 0.1),rgba(64, 224, 208, 1));
    border-radius: 0.7vw;
    font-size: 0.6vw;
    color: #fff !important;
    text-decoration: none;
    font-family: 'Conthrax';
    font-weight: bolder;
    z-index: 2;
    transition: color 0.5s; 
}
.showcase-about-box .btn span {
    position: absolute;
    width: 0;
    height: 0;
    color: var(--dark);
    background: rgba(31,43,50, 0.8);
    border-radius: 0.7vw;
    top: 0;
    left: 0;
    z-index: -1;
    transition: 0.5s;  
}
.btn#anmeldung:hover span {
    height: 100%;
    width: 100%;
    border: 0.1vw solid var(--dark); 
}
.btn#anmeldung:hover a {
    color: var(--dark) !important;
}

/* Log In */

.inputs_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 2vh;
}
form .inputs_container#login_box {
    width: 80%;
    height: auto;
    margin: 0 auto;
    padding: 1vw 1vw 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}
form#wrb-form  {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 29.5% 69.5%;
    grid-template-rows: 30vh 1fr 9%;
    grid-gap: 1%;
    box-sizing: border-box;
}
.inputs_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
form .inputs_container#register_box {
    width: auto;
    margin: 1vw auto -4vw;
    padding: 1vw 1vw 0;
    display: grid;
    grid-template-columns: 48% 48%;
    grid-template-rows: 20% 20%;
    justify-content: center;
    align-items: center;
    grid-row-gap: 4%;
}
form .inputs_container#register_box input#username {
    grid-column: 1/2;
    grid-row: 1/2;
}
form .inputs_container#register_box input#email {
    grid-column: 2/3;
    grid-row: 1/2;
}
form .inputs_container#register_box input#pwd {
    grid-column: 1/2;
    grid-row: 2/2;
}
form .inputs_container#register_box input#confirm_pwd {
    grid-column: 2/3;
    grid-row: 2/3;
}

form .inputs_container#register_box input {
    height: 2.5vw;
    width: 12vw;
    margin: 2vw 0.5vw 1vw;
    padding: 0 1.5vw;
    border-radius: 0.5vw;
    border: none;
    background-color: #373e49;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.212);
    color: #fff;
    font-size: 0.7vw;
    box-sizing: border-box;
}
form .inputs_container#register_box input:hover {
    background-color: #47505f;
}
form .inputs_container#register_box input:focus {
    outline: none;
    background-color: #47505f;
    width: 12vw;
}
form .inputs_container#register_box input::placeholder {
    color: rgb(159,161,190);
}
form .inputs_container#login_box input {
    height: 2.5vw;
    width: 12vw;
    margin: 0.5vw 0.5vw;
    padding: 0 1.5vw;
    border-radius: 0.5vw;
    border: none; 
    background-color: #373e49;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.212);
    color: #fff;
    font-size: 0.7vw;
}
form .inputs_container#login_box  input:hover {
    background-color: #47505f;
}
.inputs_container#login_box  input:focus {
    outline: none;
    background-color: #47505f;
    width: 12vw;
}
form .inputs_container#login_box  input::placeholder {
    color: rgb(159,161,190);
}
.showcase-about-box button {
    position: relative;
    width: 10vw;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1vw;
    margin-bottom: 0.5vw;
    padding:  0.5vw 0;
    background-image: linear-gradient(to right, rgba(64, 224, 208, 0.1),rgba(64, 224, 208, 1));
    border-radius: 0.7vw;
    font-size: 0.6vw;
    color: var(--light) !important;
    text-decoration: none;
    font-family: 'Conthrax';
    font-weight: bolder;
    z-index: 2;
    transition: color 0.9s; 
    background-color: transparent;
    border: none;
}
.register_box_btn button {
    height: 2.4vw;
    width: 12vw;
    margin: 1.1vw 1vw 0 0.5vw;
    padding: 0 1.5vw;
    grid-column: 2/3;
    grid-row: 2/3;
    border-radius: 0.5vw;
}
.showcase-about-box button span {
    position: absolute;
    width: 0;
    height: 0;
    color: var(--dark);
    background: rgba(31,43,50, 0.8);
    border-radius: 0.7vw;
    top: 0;
    left: 0;
    z-index: -1;
    transition: 0.5s;  
}
.showcase-about-box button:hover span {
    height: 100%;
    width: 100%;
    border: 0.1vw solid var(--dark); 
}
.showcase-about-box button:hover {
        color: var(--dark) !important;
}


/* AGBS, Impressum, Datenschutz */

.wrapper-agb {
    width: 80%;
    height: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}
.showcase-about-agb {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 29.5% 69.5%;
    grid-template-rows: 30vh 1fr 9%;
    grid-gap: 1%;
    box-sizing: border-box;
}
.showcase-logo-box-agb {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 1/2;
    grid-row: 1/2;
    background: url(../images/LogoTest1.png) no-repeat;
    background-size: cover;
    background-position: center;
    position: sticky;
    top: 0;
}
.showcase-about-box-agb {
    width: 100%;
    height: 100%;
    grid-column: 2/3;
    grid-row: 1/4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 1vw 4vw;
    box-shadow: var(--shadow);
}
.showcase-about-box-agb h1 {
    color: var(--normal);
    font-size: 0.8vw !important;
    font-family: 'Conthrax';
    background-image: linear-gradient(to right, rgba(64, 224, 208, 0.1),rgba(64, 224, 208, 1));
    background-size: 100% 4px;
    background-position: bottom;
    background-repeat: no-repeat;
    line-height: 15vh;
}
.showcase-about-box-agb h2,
.showcase-about-box-agb h3 {
    color: var(--normal);
    font-size: 0.75vw !important;
    font-family: 'Conthrax';
}
.showcase-about-box-agb p,
.showcase-about-box-agb ul,
.showcase-about-box-agb li {
    font-size: 0.65vw;
    color: var(--normal);
}
.showcase-about-box-agb .btn  {
    position: relative;
    width: 10vw;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1vw;
    margin-bottom: 3vw;
    padding:  0.5vw 0;
    background-image: linear-gradient(to right, rgba(64, 224, 208, 0.1),rgba(64, 224, 208, 1));
    border-radius: 0.7vw;
    font-size: 0.6vw;
    color: #fff !important;
    text-decoration: none;
    font-family: 'Conthrax';
    font-weight: bolder;
    z-index: 2;
    transition: color 0.9s; 
}
.showcase-about-box-abg .btn span {
    position: absolute;
    width: 0;
    height: 0;
    color: var(--dark);
    background: rgba(31,43,50, 0.8);
    border-radius: 0.7vw;
    top: 0;
    left: 0;
    z-index: -1;
    transition: 0.5s;  
}
.showcase-about-box-abg .btn:hover span {
    height: 100%;
    width: 100%;
    border: 0.1vw solid var(--dark); 
}
.showcase-about-box-abg .btn:hover a {
    color: var(--dark) !important;
}

/* LOGOUT */

.wrapper header .recht#lobox,
.wrapper-secret-sale header .recht#lobox,
.wrapper-agb header .recht#lobox {
    display: grid;
    grid-template-columns: 85% 15% ;
    box-sizing: border-box;

}
.wrapper header .recht .anrede,
.wrapper-secret-sale header .recht .anrede,
.wrapper-agb .recht#lobox .anrede {
    font-size: 0.6vw !important;
    margin-right: 1.5vw;
    font-family: 'Conthrax';
    color: #fff !important;
    grid-column: 1/2;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wrapper header .recht .logout,
.wrapper-secret-sale header .recht .logout,
.wrapper-agb header .recht .logout {
    width: 100%;
    grid-column: 2/3;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.wrapper header .recht .logout i,
.wrapper-secret-sale header .recht .logout i,
.wrapper-agb header .recht .logout i {
    font-size: 1.5vw;
    color: var(--dark);
}
/* Secret Sale */

.wrapper-secret-sale {
    width: 80%;
    height: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}
.showcase-about-secret-sale {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 49.5% 49.5%;
    grid-template-rows: 70vh 1fr 9%;
    grid-gap: 1%;
    box-sizing: border-box;
}
.logo-tim {
    position: sticky;
    top: 0;
    grid-column: 1/2;
    grid-row: 1/2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.showcase-logo-box-secret-sale {
    width: 100%;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../images/LogoTest1.png) no-repeat;
    background-size: cover;
    background-position: center;
}
.showcase-about-box-secret-sale {
    width: 100%;
    height: 100%;
    grid-column: 2/3;
    grid-row: 1/5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 0;
    box-shadow: var(--shadow);
}
.secret-sale-bild img {
    width: 100%;
}
.showcase-about-secret-sale .download {
    position: sticky;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: justify;
    top: 30%;
    width: 50%;
    height: 12vw;
    margin: 0 auto;
    padding: 2vw 1vw;
    box-shadow: var(--shadow);
    border: 1px solid rgba(64,224,208, 0.5);
    border-radius: 0.5vw;
    box-sizing: border-box;
    color: var(--normal);
}
.showcase-about-secret-sale .download p {
    font-size: 0.7vw;
}
.showcase-about-secret-sale .btn {
    position: relative;
    width: 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:  0.5vw 0;
    background-image: linear-gradient(to right, rgba(64, 224, 208, 0.1),rgba(64, 224, 208, 1));
    border-radius: 0.5vw;
    font-size: 0.6vw;
    color: #fff !important;
    text-decoration: none;
    font-family: 'Conthrax';
    font-weight: bolder;
    z-index: 2;
    transition: color 0.9s; 
}
.showcase-about-secret-sale  .btn span {
    position: absolute;
    width: 0;
    height: 0;
    color: var(--dark);
    background: rgba(31,43,50, 0.8);
    border-radius: 0.7vw;
    top: 0;
    left: 0;
    z-index: -1;
    transition: 0.5s;  
}
.showcase-about-secret-sale .btn:hover span {
    height: 100%;
    width: 100%;
    border: 0.1vw solid var(--dark); 
}
.showcase-about-secret-sale .btn a {
    color: #fff;
    font-size: 0.6vw !important;
}
.showcase-about-secret-sale .btn:hover a {
    color: var(--dark);
}

/* Widerrufsbelehrung */

.showcase-about-box-wrb {
    width: 100%;
    height: 100%;
    grid-column: 2/3;
    grid-row: 1/4;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 1vw 4vw;
    box-shadow: var(--shadow);
    font-family: 'Conthrax';
    color: #fff;
    text-align: justify;
}
.showcase-about-box-wrb h1 {
    font-size: 2vw;
    font-weight: bolder;
   
}
.showcase-about-box-wrb h2 {
    font-size:0.9vw;
    color: var(--dark);
}
.showcase-about-box-wrb h3 {
    font-size: 0.8vw;
    color: var(--dark);
}
.showcase-about-box-wrb h3 {
    margin-bottom: -0.2vw;
}
.showcase-about-box-wrb p,
.showcase-about-box-wrb li {
    font-size: 0.6vw;
}
.showcase-about-box-wrb li::marker {
    color: var(--dark);
    font-size: 1vw;
}
.showcase-about-box-wrb hr {
    width: 100%;
    border: 0;
    height: 0;
    border-top: 1px solid rgba(64,224,208, 0.1);
    border-bottom: 1px solid rgba(64,224,208, 0.3);
}
.checkbox {
    width: 100%;
    height: auto;
    margin-bottom: 2vw;
    display: grid;
    grid-template-columns: 5% 95%;
    grid-template-areas:
    "haken haken-text";
}
.haken {
    width: 100%;
    height: auto;
    grid-area: haken;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
}
.haken-text {
    width: 100%;
    height: auto;
    text-align: left;
    grid-area: haken-text;
    font-size: 0.6vw;
    display: flex;
    justify-content: content;
    align-items: center;
}
.showcase-about-box-wrb .btn {
    position: relative;
    width: 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:  0.5vw 0;
    background-image: linear-gradient(to right, rgba(64, 224, 208, 0.1),rgba(64, 224, 208, 1));
    border-radius: 0.5vw;
    font-size: 0.6vw;
    color: #fff !important;
    text-decoration: none;
    font-family: 'Conthrax';
    font-weight: bolder;
    z-index: 2;
    transition: color 0.9s; 
    box-sizing: border-box;
}
.showcase-about-box-wrb  .btn span {
    position: absolute;
    width: 0;
    height: 0;
    color: var(--dark);
    background: rgba(31,43,50, 0.8);
    border-radius: 0.7vw;
    top: 0;
    left: 0;
    z-index: -1;
    transition: 0.5s;  
}
.showcase-about-box-wrb  .btn:hover span {
    height: 100%;
    width: 100%;
    border: 0.1vw solid var(--dark); 
}
.showcase-about-box-wrb  .btn a {
    color: #fff;
    font-size: 0.6vw !important;
}
.showcase-about-box-wrb  .btn:hover a {
    color: var(--dark);
}
.inputs_container-wrb {
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.inputs_container-wrb#wrb-data .wrb-data1,
.inputs_container-wrb#wrb-data .wrb-data3 {
    width: 100%;
    text-align: left;
}
.inputs_container-wrb#wrb-data .wrb-data2 input {
    height: 2.5vw;
    width: 12vw;
    margin: 1vw 1vw 2vw;
    padding: 0 1.5vw;
    border-radius: 0.5vw;
    border: none;
    background-color: #373e49;
    box-shadow: var(--shadow);
    color: #fff;
    font-size: 0.7vw;
    box-sizing: border-box;
}
.inputs_container-wrb#wrb-data input:hover {
    background-color: #47505f;
}
.inputs_container-wrb#wrb-data input:focus {
    outline: none;
    background-color: #47505f;
    width: 12vw;
}
.inputs_container-wrb#wrb-data input::placeholder {
    color: rgb(159,161,190);
}

/* Widerruf Check */

.box-widerruf {
    display: grid;
    grid-template-columns: 70% 30%;
    width: 100%;
    height: 5vw;
}
.box1-widerruf {
    width: 100%;
    height: 5vw;
    grid-column: 1/2;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box2-widerruf {
    width: 100%;
    height: 100%;
    grid-column: 2/3;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box2-widerruf #knopf {
    width: 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:  0.5vw 0;
   background-color: #40E0D0;
    border-radius: 0.5vw;
    font-size: 0.6vw;
    color: var(--primary);
    text-decoration: none;
    font-family: 'Conthrax';
    font-weight: bolder;
    z-index: 2;
    transition: color 0.9s; 
    box-sizing: border-box;
    box-shadow: var(--shadow);
}

.wrb {
    width: 70%;
    height: 60%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 25% 20% 20% 20%;
}
.wrb #wrb1 {
    display: flex;
    justify-content: center;
    grid-column: 1/2;
    grid-row: 1/2;
    padding-bottom: 5.5vw;
}
.wrb .wrb2 {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 1/2;
    grid-row: 2/3;
}
.wrb .wrb3 {
    padding-top: 6vw;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 1/2;
    grid-row: 3/4;
}
.wrb .wrb4 {
    padding-top: 6vw;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 1/2;
    grid-row: 4/5;
}