[Leonatus]

I bought a new Clara 2E. So far, so good. There are, however, some strange behaviour issues. One of them is this:
I use to enlarge the first letter of a chapter for decorative matters. The code ist:

.first {
  font-family: "FoglihtenNo04";
  font-size: 1.29167em;
  font-weight: bold;
  line-height: 0;
  letter-spacing: .1em;
}

The text looks in Calibre's code view for example like this:

<p><span class="first">H</span>eu*te, am 2. No*vem*ber 1881, ha*be ich be*schlos*sen, das Ge*heim*nis auf*zu*schrei*ben, das das Le*ben, den Reich*tum und die Kraft mei*ner See*le aus*macht. We*der mei*ne Ver*wand*ten noch mei*ne Freun*de schöp*fen, so*weit ich weiß, ei*nen Ver*dacht hier*zu. Nur ei*ne le*ben*de Per*son in Ita*li*en hat von mir et*was dar*über er*fah*ren, aber sie ist so ver*läss*lich, dass sie es si*cher nie er*wähnt hat.</p>

It should render, and it does in Calibre's reader, in Sigil's book view, and in my old Kobo Touch, as is shown in the image below ("Calibre_View"). But in my Clara, it looks as in the other image below ("Clara_View").
In the code, I changed various times the line-height (1, normal, 0, and other values), but there is always the too large space between the first and the second line. Even if I set the font-size to 1em, there is no change concerning the line spacing.
Now, I have no more clue what I could do. Does someone have an explanation?

Edit: The asterisks in the text are due to the soft-hyphens.