:root {
    --orange: #FF7A00;
    --pink: #FF5EB3;
    --blue: #6E52FF;
    --violet: #9327FF;
    --babyblue: #00BEE8;
    --background-prio: #FFA800;
    --body-background: #F6F7F8;
    --body-background-grey: #f5f5f5;
    --border-grey: #d1d1d1;
    --ligh-tgreen: #1FD7C1;
    --dark-orange: #FF745E;
    --brown: #FFA35E;
    --pink: #FC71FF;
    --med-orange: #FFC701;
    --med-blue: #0038FF;
    --emailblau: #007CEE;
    --neon-green: #C3FF2B;
    --yellow: #FFE62B;
    --light-red: #FF4646;
    --light-orange: #FFBB2B;
    --deep-grey: #2A3647;
    --deepest-grey: #091931;
    --button-hover: #29ABE2;
    --footer-grey: #A8A8A8;
    --links-grey: #cdcdcd;
    --black: #000000;
    --white: #ffffff;
}

html {
  scroll-behavior: smooth;
}

body {
    width: 100%;
    background-color: var(--body-background-grey);
    font-family: 'Inter';
    width: 100%;
    margin: 0 auto;
}

button {
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    font-family: 'Inter';
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

button:disabled {
    cursor: not-allowed;
}

button.primary {
    background-color: var(--deepest-grey);
    color: var(--white);
}

button.primary:hover {
    background-color: var(--babyblue);
}

button.primary:disabled {
    background-color: var(--deep-grey);
}

button.secondary {
    background-color: var(--white);
    color: var(--deepest-grey);
    border: 1px solid var(--deepest-grey);
}

button.secondary:hover {
    color: var(--babyblue);
    border-color: var(--babyblue);
}

button.secondary:disabled {
    background-color: var(--deep-grey);
}

.d-flex {
    display: flex;
}

button.icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

button.icon svg {
    margin-left: 16px;
}

button.icon:hover {
    background-color: var(--button-hover);
}

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

.flex-column {
    display: flex;
    flex-direction: column;
}

.margin-top-10 {
    margin-top: 10px;
}

.margin-left-10 {
    margin-left: 10px;
}

.align-items-center {
    align-items: center;
}

.justify-content-center {
    justify-content: center;
}

/* input,
button {
    border: unset;
    font-size: 16px;
} */

input {
    outline: none;
    border: none;
}

input[type="text"],
input[type="password"] {
    background-color: transparent; 
    border: none;
}

input[type="text"]:focus,
input[type="password"]:focus {
    background-color: transparent; 
    outline: none; 
    border: none;
}

input:-internal-autofill-selected {
    background-image: none !important;
    background-color: white;
}

input.flex-input {
    border: 1px solid rgb(209, 209, 209);
    border-radius: 10px;
    padding: 12px 21px;
    gap: 10px;
    width: 100%;
    max-width: 420px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.error-message {
    color: red;
    font-size: 0.9em;
    display: none; /* Standardmäßig ausgeblendet */
    margin-bottom: 10px;
}

.closeX {
    height: 32px;
    width: 32px;
    position: fixed;
    top: 40px;
    right: 40px;
}

.closeX:hover {
    cursor: pointer;
    border-radius: 20px;
    background-color: rgb(237, 235, 235);
}

.toast {
    background-color: var(--deepest-grey);
    color: var(--white);
    border-radius: 20px;
    z-index: 99;
    width: 326px;
    height: 60px;
    margin: 0 auto;
    bottom: 80px;
    position: relative;
    display: flex;
    justify-content: center;
}

.d-non {
    display: none;
}

.toast-text {
    text-align: center;
    margin-bottom: 40px;
    padding-top: 20px;
}

.spinner {
    --uib-size: 37px;
    --uib-color: black;
    --uib-speed: .9s;
    --uib-bg-opacity: .1;
    height: var(--uib-size);
    width: var(--uib-size);
    transform-origin: center;
    overflow: visible;
  }

  .car {
    fill: none;
    stroke: var(--uib-color);
    stroke-dasharray: 15, 85;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    animation: travel var(--uib-speed) linear infinite;
    will-change: stroke-dasharray, stroke-dashoffset;
    transition: stroke 0.75s ease;
  }

  .track {
    stroke: var(--uib-color);
    opacity: var(--uib-bg-opacity);
    transition: stroke 0.75s ease;
  }

/* ANIMATION */
.slide-in-bottom {
	-webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.slide-out-bottom {
	-webkit-animation: slide-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: slide-out-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

.slide-out-right {
	-webkit-animation: slide-out-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: slide-out-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

.slide-in-right {
	-webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


.legal-menu {
  display: none;
}


/* Keyframes */
@-webkit-keyframes slide-in-right {
    0% {
      -webkit-transform: translateX(1000px);
              transform: translateX(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-right {
    0% {
      -webkit-transform: translateX(1000px);
              transform: translateX(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
  
  @-webkit-keyframes slide-out-right {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(1000px);
              transform: translateX(1000px);
      opacity: 0;
    }
  }
  @keyframes slide-out-right {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(1000px);
              transform: translateX(1000px);
      opacity: 0;
    }
  }

  @-webkit-keyframes slide-out-bottom {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateY(1000px);
              transform: translateY(1000px);
      opacity: 0;
    }
  }
  @keyframes slide-out-bottom {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateY(1000px);
              transform: translateY(1000px);
      opacity: 0;
    }
  }

@-webkit-keyframes slide-in-bottom {
    0% {
      -webkit-transform: translateY(1000px);
              transform: translateY(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-bottom {
    0% {
      -webkit-transform: translateY(1000px);
              transform: translateY(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes travel {
    0% {
      stroke-dashoffset: 0;
    }

    100% {
      stroke-dashoffset: -100;
    }
  }



/* 
Spinner erstellen hier ist der passende DIV

<div id="spinner">
        <svg 
        class="spinner"
        x="0px" 
        y="0px" 
        viewBox="0 0 37 37" 
        height="37" 
        width="37" 
        preserveAspectRatio="xMidYMid meet"
    >
    <path 
        class="track" 
        fill="none" 
        stroke-width="5" 
        pathLength="100" d="M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5">
    </path>
    <path 
        class="car" 
        fill="none" 
        stroke-width="5" 
                    pathLength="100" 
        d="M0.37 18.5 C0.37 5.772 5.772 0.37 18.5 0.37 S36.63 5.772 36.63 18.5 S31.228 36.63 18.5 36.63 S0.37 31.228 0.37 18.5">
    </path>
    </svg>
</div>

*/