Site title together/in place of site logo (#header-branding)

Your site title just barely gets cut off on the right end on my iPhone. Right now, h1.site-title is set at a font size of 2.13333rem. It looks like if you decrease that to 2.0rem, it will fit on the phone screens and it is just a bit smaller than what it is now. You can give this CSS a try.

h1.site-title {
    font-size: 2.0rem;
}

Thanks for your comments on that, sacredpath!

May be, I wasn’t clear enough in my question:
The site title (at the top left corner of the site from the Harmonic theme) wasn’t my problem (although I have to fix it in my current css layout a bit. As you mentioned, he gets a bit out of the screen on lower than 360 px resolutions and pushes the mobile navigation menu on the right side out of the screen too).

Instead, my issue was related to the header-branding section of the start page (in style.css it’s also addressed as “slide-1” section or page section). There, I would like to replace the image-logo by the site title, combined with the tag line. To show you what I mean by that, I did a montage in Photoshop.

My question was if it would be possible to replace the logo-image at its place by some sort of html text rather than by text inside of an image file (as it is the case in the Harmonic theme demo – the framed word “Harmonic” – : https://harmonicdemo.wordpress.com/). I guess, this probably isn’t possible, at least, I couldn’t find a simple way to do that without messing around with header.php and so on…

But I found a work around which suits my design ideas for this project may be even better: I dropped the idea to use the site title in the header-branding section (where the tag line is located) and to use the word “Willkommen” as an image-logo instead, whereas the real image logo is placed as a pseudo class element (:after) at the end, below of the tag line.

This is how it looks like at the moment: https://www.zugehoerigkeitsbehoerde.de