responsives web-design

Hier wirst Du mit einem Nachteil von Hintergrundbildern konfrontiert: Man muss die Größe des Containers vorgeben, damit die Grafik sichtbar ist und das macht es schwierig, das Ganze responsiv zu machen. Da Du ja nur die Bilder anzeigst, kannst Du genau so gut img-Tags verwenden, dann kannst Du das CSS so einrichten, dass sich die Höhe des Containers anpasst:

https://jsfiddle.net/Sempervivum/8q7zkx51/12/

Möglich wäre auch mit 'calc' die Höhe jeweils passend zur Breite zu berechnen.

Da du die (max-)Breite von Header und Footer jeweils mit 1022px angibts, muss die Berechnung auch nur bei Breite kleiner 1022px durchgeführt werden.

Der Berechnungsfaktor ergibt sich aus dem Höhen-/Breitenverhältnis des Headers/Footers (120 / 1022).

@media screen and (max-width: 1022px) {
  header {
    height: calc(100vw * 0.117);
    overflow: hidden;
  }  
 .footer {
    height: calc(100vw * 0.117);
    overflow: hidden;
  }    
}

Mir ist aufgefallen, dass sich auf deiner Seite teilweise ein horizontaler Scrollbar zeigt!

Das liegt nach meiner Einschätzung an deiner Navmenü-Zeile. Das könnte man umgehen/beseitigen, wenn man die beinhalteten Elemente mit 'border-box' formatiert.

#nav-menue, #steuerung, #steuerung a {
  box-sizing: border-box;
}

Aber das bitte ausgiebig testen - vielleicht liege ich mit meiner Einschätzung ja falsch!

Neee... das hast du nicht richtig gemacht!

Der Code soll nur wirken, wenn die Bildschirmbreite kleiner als 1022px ist - er muss also in eine eigene @media-Query und hat in allen anderen CSS Bereichen nichts zu suchen - so, wie ich es oben beschrieben habe.

Zu deinem .footer! Da solltest du dir mal dein Setup genauer anschauen.

Da ist ein div mit Hintergrundbild (jeweils links und rechts) und in der Mitte ein Konstrukt aus einem ol und einem ul (hääää?... hat das einen Grund?).

Die Hintergrundbilder sollen sich anpassen - diese ol ul Geschichte passt sich aber von alleine an, denn das ist richtiger Inhalt und schafft sich den Platz, den er braucht... macht also das div .footer von alleine so hoch, wie es sein muss.

Teste mal, ob im CSS für den .footer das min-height (statt height) das Abschneiden verhindert.

Damit sollten dann bei allen Bildschirmbreiten zumindest die Bilder vollständig zu sehen sein - das größer werdende Mittelteil (ul ol) passt sich dann selber an und macht vielleicht den .footer wieder größer, damit diese Listen wieder zu sehen sind.

Wenn dann noch Nachbesserungen notwendig sind, wovon ich ausgehe, kann man die angehen, wenn der Rest schon mal passt.

Das sind Formate für unterschiedliche Browser, solange diese den Standard noch nicht umgesetzt haben. In der Regel werden die nach einiger Zeit, wenn dann der entsprechende Browser die Anweisung ohne diese Prefixes versteht, überflüssig und können weggelassen werden.

Den aktuellen Stand. also welcher Browser welchen Prefix braucht, kannst du jeweils auf der Seite caniuse.com nachlesen.

Im Falle von background-size sieht das dann so aus-

https://caniuse.com/#search=background-size

rot = unterstützt gar nicht

hellgrün = unterstützt teilweise - mit der Maus drüberfahren, dann werden dir die Details angezeigt u.a. auch, ob ein Prefix benötigt wird

dunkelgrün = wird vollständig unterstützt

Im Falle von background-size würde ich den Prefix weglassen - die wenigen Browser (Altlasten), die dann diese Anweisung nicht verstehen, kann man vernachlässigen. (aber nur meine Meinung)