*,
    *::before,
    *::after {
        box-sizing: border-box;
    }


    /* Layout */
    html, body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
        color: var(--text);
        font-family: var(--font-used);
        font-weight: 400;
        background: var(--background-secondary)!important;
    }

    .container {
        width: 100%;
        max-width: 1300px;
        margin-top: 0;
        margin-right: auto;
        margin-bottom: 0;
        margin-left: auto;
        padding-top: 0;
        padding-right: 1.6rem;
        padding-left: 1.6rem;
        padding-bottom: 0;
    }

    .padding-section{
        margin-top: 2rem;
        padding-top: 4.5rem;
        padding-right: 0;
        padding-left: 0;
        padding-bottom: 2rem;
    }

    .padding-section-small{
        margin-top: 2rem;
        padding-top: 0.5rem;
        padding-right: 0;
        padding-left: 0;
        padding-bottom: 0rem;
    }





    
        /* Sections =======================================*/


    .full-screen-section {
        min-height: 100vh;    
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .section {
        padding: 4.5rem 0;
    }

    .section-header {
        max-width: 36rem;
        margin: 0 auto 2.5rem;
        text-align: center;
    }

    .section-header h2 {    
        margin-bottom: 0.6rem;
        font-size: 1.6rem;
    }

    .section-header p {    
        color: var(--text);
        font-size: 0.98rem;

    }

    .btn {
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        padding-top: 0.75rem;
        padding-left: 1rem;
        padding-bottom: 0.75rem;    
        padding-right: 1rem;
        border-radius: 10px;
        white-space: nowrap;    
        border: 2px solid var(--main_primary);
        text-decoration: none;
        cursor: pointer;
    }

    .btn.primary {
        background: var(--main_primary);
        color: var(--text);
        transform: translateY(0);          
        transition: transform 0.25s ease;    
    }

    .btn.primary:hover {
        box-shadow: 0 8px 16px var(--button-border);
        transform: translateY(-4px);    
    }


    /* Darüber später aus einer CSS Datei ziehen */
    /* LOGIN ================================================= */

    body::before,
    body::after{
        position: absolute;
        content: "";
        opacity: 0.9;
        z-index: 0;
        border-radius: 50%;
        filter: blur(80px);
    }

    body::before{
        background: var(--main_primary);
        top: -50px;
        left: -30px;
        width: 400px;
        height: 400px;
    }

    body::after{
        background: var(--main_primary);
        width: 450px;
        height: 450px;
        bottom: -140px;
        right: -80px;
    }

    

    .wrapper-login{
        z-index: 1;
        width: 100%;
        max-width: 500px;
        flex-direction: column;

    }

    .login-card{
        background: var(--background-primary);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 20px;    
        box-shadow: var(--shadow);
        padding-top: 2rem;
        padding-bottom: 2rem;
        padding-left: 3rem;
        padding-right: 3rem;
        border: 1px solid var(--main_primary);
    }

    .logo-wrapper {
        display: flex;    
        margin: 0, auto;  
        justify-content: center; 
        width: 100%;
        align-items: center;    

        }

    .logo-wrapper img {
        max-width: 50%;
        height: auto;      
        object-fit: cover;
        object-position: center;
        display: block;
    }



    .login-header-text{
        font-size: 1.5rem;
        color: var(--main_primary);
        font-weight: 700;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

    .login-header-text-subheader{
        font-size: 1rem;
        color: var(--white);
        font-weight: 200;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        padding-right: 1rem;
        padding-left: 1rem;
        
    }

    .circle-wrapper{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
        
    }

    .main-inside-circle{
        gap: 10px;
        border-radius: 20px;
        align-items: center;
        justify-content: center;
        display: flex;
        width: 10rem;
        height: auto;
        font-size: 0.8rem;
        font-weight: 600;
        padding-top: 0.5rem;
        margin-left: 0.8rem;
        margin-right: 0.8rem;
        padding-bottom: 0.5rem;    
        white-space: nowrap;
        color: var(--white);
        background: var(--background-main);
        border: 1px solid var(--main_primary);
        margin-top: 1rem;
    }
    .circle-green{
        border-radius: 9999px;
        height: 0.8rem;
        width: 0.8rem;
        background: rgba(57, 255, 20);
        box-shadow: var(--shadow);
    }

    .login-header-wrapper{
        flex-direction: column;
        margin-top: 2rem;
    }



    .form{
        margin-top: 0.2rem;
        flex-direction:column;
        gap: 10px;
    }

    .form-text-class{
        gap: 10px;
        display: flex;
        flex-direction: column;
        color: var(--white);
        margin-top: 2rem;

    }

    .text-field-wrapper{
        position: relative;
        
    }

    input[type="email"],
    input[type="password"],
    input[type="text"]{
        width: 100%;
        font-size: 1rem;
        outline: none;
        padding-top:0.5rem;
        padding-right:0.5rem;
        padding-left:0.5rem;
        font-weight: 400;
        color: var(--white);    
        padding-bottom:0.5rem;
        border: 1px solid var(--main_primary);
        background-color: var(--background-main);
        border-radius: 10px;    
        transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.08s ease;
    }
    


    .btn-wrapper{
        display: flex;
        justify-content: center;
        margin-top: 3rem;
    }

    .btn.login {
        background: var(--main_primary); 
        transform: translateY(0);          
        transition: transform 0.25s ease;  
        width: 100%;
        justify-content: center;
        align-items: center;
        display: flex; 
        font-weight: 700;
        color: var(--text);
        overflow: hidden;
    }


    .btn.login:hover{
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
        color: var(--white);

    }

    .btn.login::before{
        left: -40px;
        width: 0%;
        content: "";
        position: absolute;
        height: 100%;
        top:0;
        z-index: -1;
        background-color: var(--background-secondary);
        transition: all 1s;
    }

    .btn.login:hover::before{
        width: 130%;
    }

    /* TOAST =================================================================*/
    #toast-container {
        position: fixed;
        top: 100px;
        right: 20px;
        z-index: 9999;
    }

    .toast {
        background: var(--main_primary);
        color: var(--text);
        padding: 16px 24px;
        margin-bottom: 10px;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        opacity: 0.95;
        transition: opacity 0.7s;
    }   


    .x-link-white-small-inline {
        color: var(--white);
        text-decoration: none;
        font-size: 0.8rem;
        display: inline-block;
        padding-top: 0.7rem;
    }

    .x-link-white-bold-inline {
        color: var(--white);
        text-decoration: none;
        font-size: 0.8rem;
        display: inline-block;
        font-weight: 600;
        padding-top: 1rem;
    }


  @media (max-width: 1136px) {
    html, body{
      margin: 0;
      padding: 0; 
      overflow-x: hidden;
    }

    .burger-menu{
      display: block;      
    }

    .nav-burger-selector:checked ~ .nav-links {
      display: flex;
    }

    .nav-links{
      display: none;
      position: absolute;
      top: 4rem;
      right: 0;
      color: var(--text);
      flex-direction: column;
      left: 0;
      background: var(--background-primary);
      padding: 2rem;
    }

    body::before,
      body::after {
        content: none;
      }
  }



  @media (max-width: 785px) {
    html, body{
      margin: 0;
      padding: 0;

    }

    .burger-menu{
      display: block;
    }

    .nav-burger-selector:checked ~ .nav-links {
      display: flex;
    }

    .nav-links{
      display: none;
      position: absolute;
      top: 4rem;
      right: 0;
      color: var(--text);
      flex-direction: column;
      left: 0;
      background: var(--background-primary);
      padding: 2rem;
    }

    .wrapper-login{
      padding-left: 2rem;
      padding-right: 2rem;
      padding-top: 2rem;
      padding-bottom: 2rem;
    }

    .login-header-text-subheader{
      font-size: 0.9rem;

    }
    .login-card{
      background: var(--background-primary);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 20px;    
      box-shadow: var(--shadow);
      padding-top: 2rem;
      padding-bottom: 2rem;
      padding-left: 2rem;
      padding-right: 2rem;
      border: 1px solid var(--main_primary);
    }



    body::before,
      body::after {
        content: none;
      }


  }