*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  height: 100%;
}

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

@font-face {
  font-family: SanFrancisco-M;
  src: url('../fonts/SF-Pro-Display-Medium.otf');
}

@font-face {
  font-family: SanFrancisco-T;
  src: url('../fonts/SF-Pro-Display-Thin.otf');
}

@font-face {
  font-family: SanFrancisco-L;
  src: url('../fonts/SF-Pro-Display-Light.otf');
}

@font-face {
  font-family: SanFrancisco-K;
  src: url('../fonts/SF-Pro-Display-Semibold.otf');
}

@font-face {
  font-family: SanFrancisco-B;
  src: url('../fonts/SF-Pro-Display-Bold.otf');
}

@font-face {
  font-family: SanFrancisco-H;
  src: url('../fonts/SF-Pro-Display-Heavy.otf');
}

@font-face {
  font-family: Outfit-T;
  src: url('../fonts/Outfit-Thin.otf');
}

@font-face {
  font-family: Outfit-R;
  src: url('../fonts/Outfit-Regular.otf');
}

@font-face {
  font-family: Outfit-L;
  src: url('../fonts/Outfit-Light.otf');
}

@font-face {
  font-family: Outfit-M;
  src: url('../fonts/Outfit-Medium.otf');
}

@font-face {
  font-family: Outfit-B;
  src: url('../fonts/Outfit-Bold.otf');
}

@font-face {
  font-family: Outfit-EB;
  src: url('../fonts/Outfit-ExtraBold.otf');
}

html{
  scroll-behavior: smooth;
}

body{
  font-family: 'SanFrancisco', sans-serif;
  max-width: 100%;
  scroll-behavior: smooth;
}

.shadow{
  -webkit-box-shadow: 0 3px 18px rgba(57, 63, 72, 0.125);
  -moz-box-shadow: 0 3px 18px rgba(57, 63, 72, 0.125);
  box-shadow: 0 3px 18px rgba(57, 63, 72, 0.125);
}

.w{
  color: white;
}

.head{
  position: relative;
  width: 400px;
  height: 150px;
  left: 50%;
  margin-left: 0px;
  transform: translate(-50%,0%);
  top: 40px;
}

#cap-page{
  position: absolute;
  font-family: SanFrancisco-K;
  height: 30px;
  left: 0px;
  top: 50%;
  margin-top: -15px;
  font-size: 28px;
  width: 400px;
  top: 90px;
  text-align: center;
}

#user{
  position: absolute;
  font-family: SanFrancisco-L;
  height: 10px;
  margin-top: -7.5px;
  color: #4d4d4d;
  font-size: 13px;
  width: 400px;
  left: 0px;
  top: 120px;
  text-align: center;
}

#logo{
  position: absolute;
  width: 40px;
  height: auto;
  left: 50%;
  transform: translate(-50%,-50%);
  top: 5%;
}


.opening{
  position: relative;
  width: 380px;
  height: 625px;
  left: 50%;
  margin-left: -190px;
  top: 5px;
  background-color: white;
}

.op_cap{
  position: absolute;
  font-size: 90px;
  font-family: Outfit-B;
  line-height: 90%;
  height: auto;
}

.op_cap b{
  font-family: Outfit-EB;
  /*background: -webkit-linear-gradient(#00f9b4ff, #33c5ffff);*/
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.opening img{
  position: absolute;
  right: 0px;
  top: 0px;
  width: 120px;
  height: auto;
  opacity: 0.1;
  margin-top: -20px;
  margin-right: -20px;
}

.subcap_wp{
  position: absolute;
  font-size: 21px;
  font-family: Outfit-R;
  opacity: 0.4;
  text-align: justify;
  top: 470px;
  height: auto;
}

.notified_message{
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 45px;
  border-radius: 23px;
  opacity: 1;
  z-index: 100;
  background: rgb(31,165,255);
  background: linear-gradient(129deg, rgba(31,165,255,1) 0%, rgba(59,121,246,1) 100%);
}

.p_1{
  top: 600px;
}

.notified_message img{
  position: absolute;
  width: 25px;
  height: 25px;
  top: 50%;
  left: 25px;
  margin-top: 0px;
  transform: translate(-50%,-50%);
  opacity: 1;
}

.notified_message p{
  position: absolute;
  width: 300px;
  height: auto;
  top: 50%;
  left: 112px;
  transform: translate(-50%,-50%);
  font-size: 20px;
  font-family: SanFrancisco-K;
  text-align: center;
  color: white;
}

.zwischen_cap{
  position: relative;
  width: 380px;
  left: 50%;
  margin-left: -190px;
  height: 520px;
  margin-top: 75px;
  background-color: white;
}

.zwischen_cap p{
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  transform: translate(-50%,-50%);
  font-size: 45px;
  font-family: Outfit-M;
}

#mark_nicht{
  background-color: #ff9e9eff;
}

#mark_funkt{
  background-color: #b3ff80ff;
}

.spruch_expl{
  position: relative;
  width: 380px;
  left: 50%;
  margin-left: -190px;
  height: 300px;
  margin-top: 25px;
  background-color: white;
}

.spruch_expl p{
  position: absolute;
  top: 20%;
  left: 50%;
  width: 250px;
  height: auto;
  transform: translate(-50%,-50%);
  font-size: 25px;
  font-family: Outfit-L;
}

.bbbb{
  font-family: Outfit-M;
}

.leistungen{
  position: relative;
  width: 380px;
  left: 50%;
  margin-left: -190px;
  height: 600px;
  margin-top: 25px;
  background-color: white;
}

.w_struc_cap{
  position: absolute;
  font-size: 40px;
  font-family: Outfit-M;
  left: 10px;
  top: 5px;
  z-index: 100;
}

.w_pstruct_txt{
  position: absolute;
  font-size: 18px;
  font-family: Outfit-T;
  width: 350px;
  height: auto;
  left: 50%;
  margin-left: -175px;
  top: 70px;
  z-index: 100;
  color: #4d4d4d;
  text-align: justify;
}

.w_struct_cont{
  position: absolute;
  top: 180px;
  width: 100%;
  height: auto;
}

.w_st_item{
  position: relative;
  display: list-item;
  width: 100%;
  height: 70px;
  background-color: #0093E9;
  background-image: linear-gradient(80deg, #0093E9 0%, #80D0C7 100%);
  border-radius: 20px;
  margin-bottom: 20px;
}

.w_st_item img{
  transform: scale(0.5);
}

.w_st_it_cap{
  position: absolute;
  left: 80px;
  top: 15px;
  font-size: 20px;
  font-family: Outfit-M;
  color: white;
}

.w_st_it_subcap{
  position: absolute;
  left: 80px;
  top: 40px;
  font-size: 16px;
  font-family: Outfit-T;
  color: white;
  width: 260px;
}



.grund{
  position: relative;
  width: 380px;
  left: 50%;
  margin-left: -190px;
  height: 1000px;
  margin-top: 25px;
  background-color: white;
}

.num_cap{
  position: absolute;
  left: 40px;
  top: 50%;
  font-size: 30px;
  font-family: Outfit-M;
  transform: translate(-50%,-50%);
  color: white;
  height: auto;
  width: auto;
}

.grundeee{
  height: 140px;
}


.work_with_me{
  position: relative;
  margin-top: 50px;
  width: 380px;
  left: 50%;
  margin-left: -190px;
  height: 600px;
  background-color: white;
}

.wwm_cap{
  position: absolute;
  left: 50%;
  width: 300px;
  transform: translate(-50%,-50%);
  height: auto;
  font-size: 30px;
  top: 50px;
  font-family: Outfit-M;
}

.wwm_txt{
  position: absolute;
  left: 120px;
  width: 150px;
  transform: translate(-50%,-50%);
  height: auto;
  font-size: 15px;
  top: 275px;
  font-family: Outfit-L;
  opacity: 0.6;
}

.work_with_me img{
  position: absolute;
  width: 250px;
  height: auto;
  border-radius: 20px;
  left: 200px;
  top: 120px;
}

.notified_message2{
  position: absolute;
  left: 50%;
  top: 525px;
  transform: translate(-50%,-50%);
  width: 220px;
  height: 45px;
  border-radius: 14px;
  opacity: 1;
  z-index: 100;
  background: rgb(31,165,255);
  background: linear-gradient(129deg, rgba(31,165,255,1) 0%, rgba(59,121,246,1) 100%);
}

.notified_message2 img{
  position: absolute;
  width: 25px;
  height: auto;
  top: 50%;
  left: 25px;
  transform: translate(-50%,-50%);
}

.notified_message2 p{
  position: absolute;
  width: 300px;
  height: auto;
  top: 50%;
  left: 128px;
  transform: translate(-50%,-50%);
  font-size: 20px;
  font-family: SanFrancisco-K;
  text-align: center;
  color: white;
}