Hallo Passwort,

erste Ergebnisse:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

width=device-width reicht. Der Rest ist eh Default. Man findet oft noch initial-scale=1.0 - aber das ist eigentlich auch Default.

    header {
      background-image: url('/toesstal/public/img/game-340574_1280.jpg');
      height: 20vh; 
      background-repeat: no-repeat; 
      background-size: cover;
    }
    .Titel {
      position: absolute;
      top: 8vh;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: "Lucida Handwriting", "Brush Script MT", Cursive;
      font-size: 6em;
      font-style: oblique;
      font-weight: bold;
      color: white;
    } 
    .Untertitel {
      position: absolute;
      top: 15vh;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: "Lucida Handwriting", "Brush Script MT", Cursive;
      font-size: 2em;
      font-style: oblique;
      font-weight: bold;
      color: white;
    }

Warum versuchst Du, mit Gewalt herbeizuführen, was der Browser ganz von alleine kann?

Der left:50% bewirkt, dass die Divs umbrechen, wenn sie über den rechten Rand des Fensters hinausragen würden. Der transform ändert das nicht mehr, der findet erst nach der eigentlichen Layout-Phase statt.

Die absolute Positionierung bewirkt, dass text-align im Header nicht funktioniert und dass er sich nicht an seinen Inhalt anpassen kann.

Entferne die absolute Positionierung. Entferne top, left und transform. Entferne im header-Element die Höhenangabe und setze text-align:center. Und schon ist alles schick. EVENTUELL könntest Du dem Header noch eine Mindesthöhe geben. Würde ich aber nicht empfehlen. Eher eine Prise Padding oben und unten. Wenn Du Abstand zwischen Titel und Untertitel haben willst, gib - beispielsweise - dem Untertitel die margin-top Eigenschaft. Wenn Du h1 für die Überschrift und p für die Zusatzüberschrift verwendest, musst Du die Margins vermutlich ohnehin anpassen.

Was man noch ergänzen könnte, ist eine Anpassung der Font-Size basierend auf der Viewport-Breite. Sowas geht, font-size:2vw wird verstanden. Welchen Faktor man verwendet, da muss man sich herantasten, und man muss auch mit clamp() (Was ist das?) dafür sorgen, dass die Schrift nicht zu klein und zu groß wird. D.h. wenn der Viewport SEHR klein ist, wirst Du einen Zeilenumbruch beim Untertitel nicht vermeiden können.

Das, was ich im Seiteninspektor zusammengesetzt habe, sieht so aus:

    header {
      background-image: url('/toesstal/public/img/game-340574_1280.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      text-align: center;
      font-family: "Lucida Handwriting", "Brush Script MT", Cursive;
      font-style: oblique;
      font-weight: bold;
      color: white;
    }
    .Titel {
      font-size: clamp(2em,9vw,6em);
    } 
    .Untertitel {
      font-size: clamp(1.3em,3vw,2em);
    }

Font und Farbe kannst Du im header festlegen. Titel und Untertitel erben das. Nur die Fontsize muss getrennt festgelegt werden.

Welche Grenzen Du für clamp() möchtest, ist Dir überlassen. Mach's aber nicht zu klein!

Beim Hintergrund könntest Du noch überlegen, ob Du mit background-position den Bildausschnitt anders auswählst. Man sieht jetzt den oberen, unscharfen Teil. Mit background-position: center würdest Du die Bildmitte verwenden.

Wie Du den Menübutton mit Bootstrap richtig steuerst, weiß ich nicht. So, wie es jetzt ist, gefällt es mir im Breitenbereich 768px-990px jedenfalls nicht. Da steht der Menübutton einsam am linken Rand und darunter ist leerer Raum.

Das Ganze klingt jedenfalls nach einer Superveranstaltung. Ist mir zu weit weg, sonst käme ich hin 😀

Rolf