Header-Img auf mobiler Seite anzeigen

Also bei mir wird das Headerbild in der Mobilansicht angezeigt!

Ja... wird auch bei mir angezeigt! Aber ist wohl trotzdem (meine Meinung nach) so nicht ganz ideal.
Die Anzeige springt beim Verkleinern der Anzeige und mal wird das Headerbild abgeschnitten oder es entsteht unterhalb ein optisch 'unschöner' Leerraum. Dieser Effekt wird wahrscheinlich durch die im CSS (inline) eingefügten MediaQueries ausgelöst.
Mit folgenden Änderungen im CSS könnte man die Funktion und das Erscheinungsbild (responsiv) etwas optimieren.
1. Deaktiviere (auskommentieren) folgende Zeilen in deinem Inline-CSS

.site-header {
        background: url(https://www.kinderstube-kunterbunt.de/wp-content/uploads/2018/11/header-kinderstube-kunterbunt-1600x230.png) no-repeat scroll top;
        background-size: 100% auto;
    }


/*    @media (max-width: 767px) {
        .site-header {
            background-size: 768px auto;
        }
    }
    @media (max-width: 359px) {
        .site-header {
            background-size: 360px auto;
        }
    }
        .site-title,
    .site-description {
        position: absolute;
        clip: rect(1px 1px 1px 1px); /* IE7 */
        clip: rect(1px, 1px, 1px, 1px);
    }
        */

Also alles weg, was zwischen den /*.... */ steht! Und in der ersten Anweisung den Wert für 'background-size: 100% auto;' einstellen.

2. Deaktiviere (auskommentieren) folgende Zeilen in deinem Inline-CSS

/*
@media (max-width: 360px)
{
.site-header .home-link {
min-height: 60px;
}
}


@media (min-width: 360px) and (max-width: 767px)
{
.site-header .home-link {
min-height: 100px;
position: relative;
}
}


.site-header {
    background-color: #01b201;
background-size: 115%;
min-height: 100px;
}        */

also wieder alles zwischen den /*... */ unwirksam machen.

3. Füge folgenden Code in das zusätzliche CSS ein. (vom Dashboard -> Design -> Customizer -> zusätzliches CSS)

#masthead h1.site-title,
#masthead h2.site-description {
  display: none;
}
.site-header .home-link {
  height: calc( 100vw / 6.99 );
  min-height: calc( 100vw / 6.99 );
}

Die Idee hinter dieser Änderung:
Hintergrundbilder belegen keinen Platz - eingefügt in zB in ein <div> führen sie nicht dazu, dass sich dieses div in der Größe anpasst... es ist ja kein Inhalt im div, sondern nur ein Hintergrund In dem betroffenen <header id="masthead" class="site-header" role="banner"> befindet sich jedoch 'Inhalt' den man nutzen kann, um genau den Platz zu schaffen, den das Bild braucht - das Element .site-header .home-link.
Das Bild hat die Dimensionen 1600px * 230px - ist also ~ 6.99 mal breiter als hoch. Diesen Wert kann man mit 'calc' nutzen, um responsiv die benötigte Höhe zu berechnen.

Einfach versuchen, ob das klappt...wenn nicht, einfach die Änderungen wieder rückgängig machen.

Des Weiteren noch ein Hinweis:

Auf der Team-Seite, werden die Bilder noch via http geladen und müssten auf https geändert werden.

LG