/* Font Import */

@font-face {
font-family: "Inter-Regular";
src: url("fonts/Inter-Regular.woff2") format("woff2"),
url("fonts/Inter-Regular.woff") format("woff");
}

@font-face {
font-family: "Inter-Medium";
src: url("fonts/Inter-Medium.woff2") format("woff2"),
url("fonts/Inter-Medium.woff") format("woff");
}

@font-face {
font-family: "Inter-Bold";
src: url("fonts/Inter-Bold.woff2") format("woff2"),
url("fonts/Inter-Bold.woff") format("woff");
}

@font-face {
font-family: "Inter-ExtraBold";
src: url("fonts/Inter-ExtraBold.woff2") format("woff2"),
url("fonts/Inter-ExtraBold.woff") format("woff");
}


/* Presettings */

:root {
--white: #ffffff;
--lawngreen: #a9f35e;
--yellow: #ffec00;
--gray: #9c9d9c;
--aqua: #00ffe9;
--turquoise: #00d9b7;
--salmon: #ff998b;
--deepskyblue: #5fedff;
--skyblue: #23c8fb;
--pink: #ffa8ff;
--hotpink: #ff8ded;
--white-drop-shadow: rgba(255, 255, 255, 0.75);
}

* {
-webkit-box-sizing: border-box;
        box-sizing: border-box;
font-family: inherit;
line-height: 120%;
margin: 0;
padding: 0;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
-webkit-text-decoration-color: inherit;
        text-decoration-color: inherit;
-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
-webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
* {
-webkit-transition: color 0.2s linear, background-color 0.2s linear, fill 0.2s linear, stroke 0.2s linear;
-o-transition: color 0.2s linear, background-color 0.2s linear, fill 0.2s linear, stroke 0.2s linear;
transition: color 0.2s linear, background-color 0.2s linear, fill 0.2s linear, stroke 0.2s linear;
}
}

html {
cursor: default;
font-family: "Inter-Medium";
font-size: 2.31vh;
background-color: var(--white);
}

html,
body {
height: 100%;
min-height: 100%;
width: 100%;
overflow-x: hidden;
}

body {
width: 100%;
}

body#intro {
cursor: pointer;
}


/* Basic Styles */

a {
color: inherit;
cursor: alias;
}

br {
line-height: inherit;
}

b {
font-family: "Inter-Bold";
font-weight: normal;
}

svg {
width: 100%;
height: auto;
background-color: transparent;
overflow: hidden;
}


/* Boxes */

.draggable_box {
background-color: var(--lawngreen);
border: 0.3rem solid var(--skyblue);
border-radius: 1rem;
-webkit-box-shadow: 0.5rem 0.5rem 1rem var(--white);
        box-shadow: 0.5rem 0.5rem 1rem var(--white);
color: var(--skyblue);
cursor: -webkit-grab;
cursor: grab;
display: none;
font-family: "Inter-Bold";
font-size: 1.5rem;
height: auto;
padding: 0.95rem 1.3rem 0.95rem 1.3rem;
position: absolute;
width: 53%;
z-index: 1;
}

.draggable_box span {
display: block;
text-align: center;
}

.draggable_box:active {
cursor: -webkit-grabbing;
cursor: grabbing;
}

.close_button {
color: var(--skyblue);
cursor: pointer;
font-family: "Inter-Medium";
font-size: 2.825rem;
margin-top: -4.85rem;
overflow: hidden;
position: absolute;
right: 0;
-webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
        transform: scale(1.5);
}

.close_button:hover {
color: var(--lawngreen);
}

#about_box {
right: 5%;
top: 20%;
}

#kassieren_box {
right: 10%;
top: 25%;
}

#ummelden_box {
right: 15%;
top: 15%;
}


/* Background */

#background {
width: 100%;
height: 100%;
position: fixed;
}

#background video {
position: absolute;
-o-object-fit: cover;
   object-fit: cover;
width: 100%;
height: 100%;
}


/* Glass Pane */

#glass_pane {
position: fixed;
width: 100%;
height: 100%;
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
}


/* Content */

#content {
height: 100%;
position: relative;
-webkit-transition: -webkit-transform 0.5s ease;
transition: -webkit-transform 0.5s ease;
-o-transition: transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
width: 100%;
opacity: 0;
-webkit-animation: fade_in 0.3s linear forwards;
        animation: fade_in 0.3s linear forwards;
-webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
}

@-webkit-keyframes fade_in {
from {
opacity: 0;
}

to {
opacity: 1;
}
}

@keyframes fade_in {
from {
opacity: 0;
}

to {
opacity: 1;
}
}


/* Logo */

#logo {
position: relative;
top: -1.4547278655630802rem;
left: -5.919237521946326rem;
margin-bottom: -4.063205417607223rem;
width: 36.217707549535994rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background-color: transparent;
border-radius: 10px;
}

#logo {
-webkit-animation: drop_shadow_one 10s linear infinite;
        animation: drop_shadow_one 10s linear infinite;
}

@-webkit-keyframes drop_shadow_one {
from {
opacity: 1;
-webkit-filter: drop-shadow(0 0 1rem var(--white-drop-shadow));
        filter: drop-shadow(0 0 1rem var(--white-drop-shadow));
}
to {
opacity: 1;
-webkit-filter: drop-shadow(0 0 1rem var(--white-drop-shadow));
        filter: drop-shadow(0 0 1rem var(--white-drop-shadow));
}
}

@keyframes drop_shadow_one {
from {
opacity: 1;
-webkit-filter: drop-shadow(0 0 1rem var(--white-drop-shadow));
        filter: drop-shadow(0 0 1rem var(--white-drop-shadow));
}
to {
opacity: 1;
-webkit-filter: drop-shadow(0 0 1rem var(--white-drop-shadow));
        filter: drop-shadow(0 0 1rem var(--white-drop-shadow));
}
}

#logo svg:nth-child(2) {
position: absolute;
-webkit-animation: drop_shadow_two 10s linear infinite;
        animation: drop_shadow_two 10s linear infinite;
}

@-webkit-keyframes drop_shadow_two {
from {
-webkit-filter: drop-shadow(0 0 0.25rem var(--white)) drop-shadow(0 0 0.5rem var(--white)) drop-shadow(0 0 0.5rem var(--white));
        filter: drop-shadow(0 0 0.25rem var(--white)) drop-shadow(0 0 0.5rem var(--white)) drop-shadow(0 0 0.5rem var(--white));
}
to {
-webkit-filter: drop-shadow(0 0 0.25rem var(--white)) drop-shadow(0 0 0.5rem var(--white)) drop-shadow(0 0 0.5rem var(--white));
        filter: drop-shadow(0 0 0.25rem var(--white)) drop-shadow(0 0 0.5rem var(--white)) drop-shadow(0 0 0.5rem var(--white));
}
}

@keyframes drop_shadow_two {
from {
-webkit-filter: drop-shadow(0 0 0.25rem var(--white)) drop-shadow(0 0 0.5rem var(--white)) drop-shadow(0 0 0.5rem var(--white));
        filter: drop-shadow(0 0 0.25rem var(--white)) drop-shadow(0 0 0.5rem var(--white)) drop-shadow(0 0 0.5rem var(--white));
}
to {
-webkit-filter: drop-shadow(0 0 0.25rem var(--white)) drop-shadow(0 0 0.5rem var(--white)) drop-shadow(0 0 0.5rem var(--white));
        filter: drop-shadow(0 0 0.25rem var(--white)) drop-shadow(0 0 0.5rem var(--white)) drop-shadow(0 0 0.5rem var(--white));
}
}

#addition {
position: absolute;
top: 8.026084775520442rem;
right: 0.2508151492350138rem;
color: var(--yellow);
-webkit-animation: five 7.5s infinite step-start;
        animation: five 7.5s infinite step-start;
font-family: "Inter-ExtraBold";
font-size: calc(2.825rem / 1.5);
line-height: 92%;
-webkit-transform: rotate(14deg);
    -ms-transform: rotate(14deg);
        transform: rotate(14deg);
width: 12rem;
text-align: center;
text-transform: uppercase;
-webkit-filter: drop-shadow(0 0 3rem var(--white-drop-shadow));
        filter: drop-shadow(0 0 3rem var(--white-drop-shadow));
border: 0;
}

#addition span {
-webkit-transition: none;
-o-transition: none;
transition: none;
line-height: inherit;
}

@-webkit-keyframes five {
25% {
color: #007373;
}

50% {
color: var(--gray);
}

75% {
color: #ff8b00;
}

100% {
color: var(--salmon);
}
}

@keyframes five {
25% {
color: #007373;
}

50% {
color: var(--gray);
}

75% {
color: #ff8b00;
}

100% {
color: var(--salmon);
}
}

#intro #logo {
margin-top: -1.2289942312515676rem;
width: 51.96889892149486rem;
left: 50%;
-webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
        transform: translateX(-50%);
}

#intro #addition {
font-size: 2.825rem;
top: calc(1.3 * 8.026084775520442rem);
right: calc(1.2 * -0.2508151492350138rem);
width: calc(1.5 * 12rem);
}


/* Calculation */

#calculation {
color: var(--deepskyblue);
-webkit-filter: drop-shadow(0 0 1rem var(--white-drop-shadow)) drop-shadow(0 0 1rem var(--white-drop-shadow)) drop-shadow(0 0 1rem var(--white-drop-shadow));
        filter: drop-shadow(0 0 1rem var(--white-drop-shadow)) drop-shadow(0 0 1rem var(--white-drop-shadow)) drop-shadow(0 0 1rem var(--white-drop-shadow));
font-family: "Inter-Bold";
font-size: 2.825rem;
list-style: none;
margin-left: 2.8rem;
padding: 1.4rem;
padding-top: 0.6rem;
}

#intro #calculation {
-webkit-filter: none;
        filter: none;
-webkit-animation: logo_part_three 7.5s infinite step-start;
        animation: logo_part_three 7.5s infinite step-start;
margin-left: 0;
text-align: center;
color: var(--pink);
}

#intro #calculation span {
-webkit-transition: none;
-o-transition: none;
transition: none;
}

#calculation li::before,
#calculation li span:before {
margin-right: 1rem;
}

#calculation li:nth-child(1)::before,
#calculation li:nth-child(2):before,
#calculation li span:before,
#calculation li:nth-child(3):before {
display: inline-block;
font-family: "Inter-Medium";
position: relative;
-webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
        transform: scale(1.5);
}

#calculation li:nth-child(1):before {
color: var(--yellow);
content: "✓";
}

#calculation li:nth-child(2):before {
color: var(--pink);
content: "✓";
}

#calculation li span:before {
content: "✓";
opacity: 0;
position: relative;
}

#calculation li span {
color: var(--pink);
display: inline-block;
font-family: "Inter-Medium";
}

#calculation li span:hover {
color: var(--lawngreen);
cursor: pointer;
}

#calculation li:nth-child(3):before {
color: var(--lawngreen);
content: "✗";
}

#calculation li:nth-child(4) {
display: inline-block;
margin-top: 0.65rem;
padding-top: 0.95rem;
position: relative;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}

#calculation li:nth-child(4)::before {
border-top: 0.3rem solid var(--pink);
content: "";
position: absolute;
top: 0;
width: 100%;
}


/* Anmeldung */

#anmeldung_container {
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
position: absolute;
right: 0;
top: 0;
width: 50%;
z-index: 0;
}

#anmeldung {
cursor: pointer;
height: 75%;
position: absolute;
}

.image {
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
position: relative;
width: 100%;
padding-left: 2.1569778232582406rem;
}

#anmeldung svg:nth-child(1) {
-webkit-filter: drop-shadow(0.5rem 0.5rem 1rem var(--white-drop-shadow));
        filter: drop-shadow(0.5rem 0.5rem 1rem var(--white-drop-shadow));
float: left;
height: 100%;
width: auto;
-webkit-animation: anmeldung 7s infinite linear alternate;
        animation: anmeldung 7s infinite linear alternate;
}

@-webkit-keyframes anmeldung {
from {
-webkit-transform: perspective(100vw) rotateY(-20deg);
        transform: perspective(100vw) rotateY(-20deg);
}

to {
-webkit-transform: perspective(100vw) rotateY(20deg);
        transform: perspective(100vw) rotateY(20deg);
}
}

@keyframes anmeldung {
from {
-webkit-transform: perspective(100vw) rotateY(-20deg);
        transform: perspective(100vw) rotateY(-20deg);
}

to {
-webkit-transform: perspective(100vw) rotateY(20deg);
        transform: perspective(100vw) rotateY(20deg);
}
}

#anmeldung svg:nth-child(2) {
float: left;
height: 100%;
width: auto;
position: absolute;
}

#formular_button {
background-color: var(--lawngreen);
border-radius: 2.5rem;
color: var(--white);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-filter: drop-shadow(0.5rem 0.5rem 1rem var(--yellow));
        filter: drop-shadow(0.5rem 0.5rem 1rem var(--yellow));
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
padding: 0.9rem 1.25rem 1rem 1.25rem;
position: absolute;
text-align: center;
display: none;
}

.sizing {
font-family: "Inter-Bold";
font-size: calc(1rem * 1.5);
}

#anmeldung #form_button_graphic {
-webkit-filter: drop-shadow(0 0 1rem var(--white));
        filter: drop-shadow(0 0 1rem var(--white));
}

#anmeldung:hover #form_button_graphic .st1 {
fill: var(--turquoise);
stroke: var(--turquoise);
}

#ummelden_box ol {
counter-reset: list-item-counter;
list-style-type: none;
padding: 0;
white-space: normal;
}

#ummelden_box ol li {
padding-left: 1.75rem;
position: relative;
}

#ummelden_box ol li::before {
content: counter(list-item-counter) ". ";
counter-increment: list-item-counter;
left: 0;
position: absolute;
}

#ummelden_box .xs {
font-family: "Inter-Medium";
font-size: 1rem;
margin-bottom: 0.1rem;
margin-top: 0;
text-align: left;
}

#ummelden_box ul {
counter-reset: list-item-counter;
list-style-type: none;
padding: 0;
white-space: normal;
}

#ummelden_box ul li {
padding-left: 1.05rem;
position: relative;
}

#ummelden_box ul li::before {
content: "• ";
left: 0;
position: absolute;
}

#ummelden_box a {
text-decoration: underline;
text-decoration-thickness: 2px;
-webkit-text-decoration-color: solid var(--deepskyblue);
        text-decoration-color: solid var(--deepskyblue);
text-underline-offset: 0.2rem;
}


/* About */

#about_button {
color: var(--pink);
cursor: pointer;
font-size: 2.825rem;
position: fixed;
right: 1.35rem;
top: 0.75rem;
z-index: 1;
}

#about_button:hover {
color: var(--white);
}


/* Footer */

#footer {
bottom: 1.15rem;
position: fixed;
right: 1.4rem;
}

#footer div {
color: var(--salmon);
cursor: pointer;
}

#footer div:hover {
color: var(--turquoise);
}


/* Legal */

#legal_area {
background-color: var(--turquoise);
color: var(--white);
height: 100%;
overflow-y: auto;
padding: 1.15rem 1.5rem 1.1rem 1.5rem;
position: fixed;
right: 0;
top: 0;
-webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
        transform: translateX(100%);
-webkit-transition: -webkit-transform 0.5s ease;
transition: -webkit-transform 0.5s ease;
-o-transition: transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
width: 40%;
z-index: 1;
}

#legal_area a {
text-decoration: none;
}

#legal_area a:hover {
color: var(--lawngreen);
}

.legal_content {
line-height: 130%;
white-space: pre-wrap;
}

.legal_content ul {
counter-reset: list-item-counter;
list-style-type: none;
padding: 0;
white-space: normal;
}

.legal_content ul li {
padding-left: 0.8rem;
position: relative;
}

.legal_content ul li::before {
content: "• ";
left: 0;
position: absolute;
}


/* Window Size A Start */

@media (max-aspect-ratio: 4.5/3) or (max-width: 1000px) {


/* Presettings */

html,
body {
min-height: 100vh;
height: auto;
}


/* Boxes */

.draggable_box {
width: 80%;
}

#about_box {
top: 50%;
}

#kassieren_box {
top: 35%;
}

#ummelden_box {
top: 45%;
}


/* Content */

#content {
min-height: 100%;
height: auto;
opacity: 1;
-webkit-animation: none;
        animation: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
}


/* Logo */

#intro #logo {
margin-top: 0;
width: calc(0.65 * 51.96889892149486rem);
margin-bottom: calc(0.65 * -4.063205417607223rem);
}

#intro #addition {
font-size: calc(0.65 * 2.825rem);
top: calc(0.65 * 1.3 * 8.026084775520442rem);
right: calc(0.65 * 1.2 * -0.2508151492350138rem);
width: calc(0.65 * 1.5 * 12rem);
}


/* Calculation */

#calculation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
-webkit-filter: drop-shadow(0 0 1rem var(--white-drop-shadow)) drop-shadow(0 0 1rem var(--white-drop-shadow));
        filter: drop-shadow(0 0 1rem var(--white-drop-shadow)) drop-shadow(0 0 1rem var(--white-drop-shadow));
}


/* Anmeldung */

#anmeldung_container {
height: 50vh;
position: relative;
width: 100%;
}

#anmeldung {
width: auto;
}


/* About */

#sub #about_button {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
left: 1.4rem;
margin-bottom: 1.45rem;
margin-top: 1rem;
position: relative;
width: auto;
z-index: 1;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}

#sub #about_button:hover {
color: var(--lawngreen);
}


/* Footer */

#footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: -1.2rem;
position: relative;
}

#footer div {
margin-left: auto;
}

#formular_button {
white-space: nowrap;
}


/* Legal */

#legal_area {
width: 70%;
}


/* Window Size A End */

}


/* Window Size B Start */


@media (max-aspect-ratio: 4.5/3) and (max-width: 1650px) {


/* Presettings */

html {
font-size: 2vw;
}


/* Anmeldung */

#anmeldung_container {
height: 80vh;
}


/* Window Size B End */

}


/* Window Size C Start */

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


/* Presettings */

html {
font-size: 2.822vw;
}


/* Logo */

#intro #logo {
margin-top: 5rem;
}


/* Anmeldung */

#anmeldung_container {
height: 100vw;
}


/* Window Size C End */

}