Habe jetzt auch die Menüs und eine Handyversion gemacht 
:
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>
Ballettschule
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<style>
html,
body {
font-size: 16.5px;
height: 100%;
width: 100%;
overflow: hidden;
}
body {
margin: 0;
background-color: #FEF6EB;
}
#wrapper {
box-sizing: border-box;
width: 1086px;
height: 537px;
background-image: url(images/pecheuse_co6.png), linear-gradient(to bottom, #CAB7F9 0%, #CAB7F9 75%, #AC8CF9 75%, #AC8CF9 95%, #6E5AA1 95%);
background-size: 100% 100%, calc(100% - 200px) calc(100% - 40px);
background-position: center center, center center;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 20px 100px;
transform-origin: left top;
}
#text {
box-sizing: border-box;
/* width: 80%; */
padding-right: 50px;
padding-left: 150px;
padding: 40px 50px 10px 150px;
font-style: italic;
}
#text2 {
padding-left: 60px;
}
#text3 {
padding-left: 110px;
}
#text4 {
padding-left: 140px;
}
#text5 {
padding-left: 160px;
}
#text6 {
padding-left: 180px;
}
#text7 {
padding-left: 200px;
}
#text9 {
padding-left: 150px;
font-size: 1.5em;
}
@media (max-width: 750px) {
div[id*="text"] {
padding-left: 0 !important;
width: 100% !important
}
div#text {
padding: 0;
}
#text2,
#text3,
#text4,
#text5,
#text6,
#text7 {
display: inline;
}
#wrapper {
width: 100%;
min-height: 100%;
height: auto;
background-image: url(images/pecheuse_co6.png),
linear-gradient(to bottom, #CAB7F9 0%, #CAB7F9 100%);
background-size: contain, 80% calc(100% - 40px);
background-position: center top, center calc(100% - 20px);
padding: 20px 10%;
}
#shape {
shape-outside: ellipse(30vw 25vw at 0 20vw);
height: 50vw;
width: 50vw;
float: left;
}
}
nav ul {
display: inline-flex;
padding: 0;
margin: 0;
}
nav li {
list-style: none
}
#nav-top {
margin-top: auto;
text-align: right;
margin-right: 2em;
font-size: 1.4em;
font-style: italic;
}
#nav-top li {
color: #660088;
padding: 0 0.3em 1.4em 0.3em;
}
#nav-bottom {
text-align: right;
}
#nav-bottom li {
color: #a0a0a0;
padding: 0.2em 0.3em;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="inner">
<div id="shape">
</div>
<div id="text">
Zünachst möchte ich all diejenigen herzlich begrüßen, deren Interesse am
klassischen Ballett geweckt wurde.<br>
Mein Name ist Kerstin Fischer und bin gebürtige Hoferin (Oberfranken).
Meine Mutter nahm mich als Dreijährige mit zum Ballettunterricht, und das
prägte mein Leben ebenso wie z.B. die Komposition Coppélia von Delibes
und Saint-Léon. Es folgte meine vierjährige Ballettausbildung für Bühnentanz,
an der Ballettakademie Hans Vogl, in Berlin. Die Ballettschule Pêcheuse im
Stadtkern Würzburg wurde 2009 gegründet.<br>
<div id="text2">Unsere Schüler/innen lernen den klassischen Tanz nach der Russischen</div>
<div id="text3">Methodik. Der Stundenplan ist nach Schwierigkeitsgrad und</div>
<div id="text4">individuellen Zielen der Schüler/innen, die derzeit zwischen 5 und</div>
<div id="text5">76 Jahren sind, aufgebaut. Ganz gleich welchen Alters Ihr seid -</div>
<div id="text6">wenn Ihr die Liebe zum Ballett spürt oder diese bereits tief</div>
<div id="text7">verankert ist - ermutige ich Euch, euren Traum zu leben.</div>
<div id="text8">Ihr seid herzlich willkommen!</div>
<div id="text9">Kerstin Fischer</div>
</div>
</div>
<nav id="nav-top">
<ul>
<li>Pêcheuse</li>
<li>Stundenplan</li>
<li>Galerie</li>
<li>Kontakt</li>
<li>Aktuelles</li>
</ul>
</nav>
<nav id="nav-bottom">
<ul>
<li>Home</li>
<li>Impressum</li>
<li>Datenschutz</li>
</ul>
</nav>
</div>
<script>
function resizeIt() {
const wObj = 1086, hObj = 537,
ratioObj = wObj / hObj,
wViewport = document.documentElement.clientWidth,
hViewport = document.documentElement.clientHeight,
ratioViewport = wViewport / hViewport,
wrap = document.getElementById('wrapper');
if (wViewport > 750) {
if (ratioObj > ratioViewport) {
factor = wViewport / wObj;
wrap.style.marginTop = (hViewport - hObj * factor) / 2 + 'px';
wrap.style.marginLeft = '0px';
} else {
factor = hViewport / hObj;
wrap.style.marginLeft = (wViewport - wObj * factor) / 2 + 'px';
wrap.style.marginTop = '0px';
}
wrap.style.transform = 'scale(' + factor + ',' + factor + ')';
} else {
wrap.style.marginTop = 'unset';
wrap.style.transform = 'scale(1)';
}
}
resizeIt();
window.onresize = resizeIt;
</script>
</body>
</html>
: Im Prinzip trifft es zu aber die Auswirkungen in der Praxis sind gleich Null.