How to position user typed-in content in search bar input?

I am working on a search bar for my site. It is positioned correctly on the site, it's styled and everything works just fine, I added a placeholder and positioned/styled it inside the search bar as I liked it to fit the rest of my site. If I click inside the search bar and write anything, the written letters appear in the default position of the placeholder (middle of the search bar), but I want them to be positioned differently (more to the left and lower), like the placeholder. The placeholder looks good but the typed-in text doesn't.

The HTML looks like this:

<input id="searchbar" type="text" placeholder="Suche..." />

The search bar is styled as following:

#searchbar {
  grid-area: search;
  font-size: max(var(--ändern), 20px);
  font-family: var(--schriftart);
  background-color: var(--hintergrundfarbe);
  color: var(--schriftfarbe);
  border: solid 1px;
  border-radius: 0.75vw;
  border-color: var(--hintergrundfarbe);
  text-align: center;
  width: 15vw;
  height: max(2.5vw, calc(150px / 4));
  margin-left: 1.25vw;
  margin-top: 0.5vw;
  box-sizing: border-box;
}
input:focus {
  outline: none;
}

The placeholder is styled as following:

#searchbar::placeholder {
  color: var(--schriftfarbe);
  filter: opacity(0.5);
  position: absolute;
  left: 20px;
  top: auto;
  bottom: auto;
}

I tried to use

#searchbar:focus {
  position: relative;
  left: 20px;
  top: auto;
  bottom: auto;
}

but it shifts the whole search bar, not only the the typed-in content. I also tried

text-indent: 40px;

but doesn't seem to change anything either. I would be happy for anyone trying to help me :)

Solution

By the looks it might be your font-family. Try a different font like Arial for tests.

font-family: Arial, sans-serif;