:root {
    --motion-standard:              cubic-bezier(0.20, 0.00, 0.00, 1.00);
    --motion-standard-accelerate:   cubic-bezier(0.30, 0.00, 1.00, 1.00);
    --motion-standard-decelerate:   cubic-bezier(0.00, 0.00, 0.00, 1.00);
    --motion-emphasized-accelerate: cubic-bezier(0.30, 0.00, 0.80, 0.15);
    --motion-emphasized-decelerate: cubic-bezier(0.05, 0.70, 0.10, 1.00);

    --motion-expressive-spatial-fast:       350ms cubic-bezier(0.42, 1.67, 0.21, 0.90);
    --motion-expressive-spatial-default:    500ms cubic-bezier(0.38, 1.21, 0.22, 1.00);
    --motion-expressive-spatial-slow:       650ms cubic-bezier(0.39, 1.29, 0.35, 0.98);
    --motion-expressive-effects-fast:       150ms cubic-bezier(0.31, 0.94, 0.34, 1.00);
    --motion-expressive-effects-default:    200ms cubic-bezier(0.34, 0.80, 0.34, 1.00);
    --motion-expressive-effects-slow:       300ms cubic-bezier(0.34, 0.88, 0.34, 1.00);
    
    --motion-standard-spatial:  cubic-bezier(0.27, 1.06, 0.18, 1.00);
    --motion-standard-effects:  cubic-bezier(0.31, 0.94, 0.34, 1.00);

    --short-1:      50ms;
    --short-2:      100ms;
    --short-3:      150ms;
    --short-4:      200ms;
    --medium-1:     250ms;
    --medium-2:     300ms;
    --medium-3:     350ms;
    --medium-4:     400ms;
    --long-1:       450ms;
    --long-2:       500ms;
    --long-3:       550ms;
    --long-4:       600ms;
    --extra-long-1: 700ms;
    --extra-long-2: 800ms;
    --extra-long-3: 900ms;
    --extra-long-4: 1000ms;
}

body {
    background-color: var(--surface);
    color: var(--on-surface);
}

body.noScroll {
    overflow: hidden;
}




/* PAGEFRAME FÜR VB SEITEN */
.pageFrame {
    position: absolute;
    top: 0px;
    left: 0px;

    width: 100%;
    min-height: 100%;
    height: auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}

.pageFrame.center {
    align-items: center;
    justify-content: center;
}




/* TEXTINPUTS */
.inputBox {
    position: relative;
    width: 250px;
    height: auto;

    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}

.textInput {
    position: relative;

    width: 100%;
    height: auto;

    padding: 30px 30px 20px 30px;
    box-sizing: border-box;

    background-color: #ffffff10;
    border-radius: 10px;

    border: none;
    outline: none;

    font-family: "Inter";
    font-weight: 400;
    font-size: 24px;
    color: #fff;
}

.inputLabel {
    position: absolute;
    top: 25px;
    left: 30px;

    font-family: "Inter";
    font-weight: 300;
    font-size: 24px;
    color: #ffffffbb;

    pointer-events: none;

    transition: all var(--motion-expressive-effects-fast);
}

.inputLabel.filled {
    top: 9px;
    left: 30px;
    font-size: 16px;
}

.inputLabel.active {
    font-weight: 600;
    color: #fc0177;
}

.inputIcon {
    position: absolute;

    top: 30px;
    right: 17px;

    width: 25px;
    height: 25px;

    fill: #fff;

    pointer-events: none;
    opacity: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: all var(--motion-expressive-effects-fast);
}

.inputIcon.visible {
    pointer-events: all;
    opacity: 1;
}

.inputIcon.active {
    fill: #fc0177;
}


@property --angle {
    syntax: '<angle>';
    initial-value: 30deg;
    inherits: false;
}

.mobileFrame {
    position: absolute;

    top: 0px;
    left: 0px;

    width: 100%;
    min-height: 100%;
    height: auto;

    padding: 30px;
    box-sizing: border-box;

    background: linear-gradient(var(--angle), #fc0177, 10%, #010a41, 90%, #1604c4 100%);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;

    animation: gradientMove 45s infinite linear;
}

.mobileFrame.center {
    align-items: center;
    justify-content: center;
}

@keyframes gradientMove {
    0% { --angle: 0deg }
    25% { --angle: 90deg }
    50% { --angle: 180deg }
    75% { --angle: 270deg }
    100% { --angle: 360deg }
}






.head {
    position: fixed;

    margin-top: 3%;

    width: 90%;
    height: auto;

    padding: 25px;
    box-sizing: border-box;

    background-color: var(--container-bg);
    border-radius: 30px;

    backdrop-filter: blur(10px);

    display: flex;
    align-items: center;
    justify-content: start;

    z-index: 10;
}

.hL, .hR {
    position: relative;

    width: 50%;
    height: auto;

    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    justify-content: start;
}

.hR {
    justify-content: end;
}

.hLogo {
    position: relative;

    width: 75px;
    height: auto;

    fill: #ffffff;
}

.hmbtn {
    position: relative;

    width: 40px;
    height: 40px;

    background-color: #ffffff20;
    border-radius: 50%;

    padding: 8px;
    box-sizing: border-box;

    fill: #ffffff;

    border: none;
    outline: none;
}





.mBtns {
    position: relative;

    width: 60%;

    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.mButton {
    position: relative;

    width: 100%;

    padding: 10px;
    box-sizing: border-box;

    background-color: transparent;
    border: 1.25px solid white;
    border-radius: 20px;

    outline: none;

    font-family: "Inter";
    font-weight: 400;
    font-size: 15px;
    color: white;

    transition: all var(--motion-expressive-effects-fast);
}




.sidebar {
    position: fixed;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 100%;

    overflow: hidden;

    display: none;
    flex-direction: column;
    align-items: start;
    justify-content: start;

    z-index: 9;
}

.sidebar.visible {
    display: flex;
}

.sbContainer {
    position: absolute;
    top: 0px;
    left: 100%;

    width: 100%;
    height: 100%;

    background-color: #000000cb;
    backdrop-filter: blur(10px);

    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;

    transition: all var(--medium-3) var(--motion-emphasized-decelerate);
}

.sbContainer.visible {
    left: 0px;
}

.sbContent {
    position: relative;

    margin-top: 200px;

    width: 100%;
    height: auto;

    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
}


.user {
    position: relative;

    margin-bottom: 20px;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.uIcon {
    position: relative;

    width: 40px;
    height: 40px;

    fill: #fff;
}

.uText {
    position: relative;

    margin-left: 10px;
    
    font-family: "Inter";
    font-weight: 400;
    font-size: 14px;
    color: white;
}

.uUser {
    position: relative;

    margin-left: 5px;
    
    font-family: "Inter";
    font-weight: 900;
    font-size: 14px;
    color: white;
}