Entschuldigung, das hatte ich vergessen 
Vielen Dank für eure Hilfe. Ich werde die Webseite nun doch schon live stellen. Das wird die Hilfe wohl leichter machen. Ich muss allerdings erst noch ein Hosting beantragen. Ich poste den Link wenn dann alles live ist. Habt noch einen schönen Sonntag! 
Die Seite ist aktuell noch nicht live. Ich wollte erst alle Bugs beheben bevor ich sie live stelle. Dann werde ich jetzt aber eventuell die Reihenfolge ändern 
Hallo zusammen, ich habe ein Problem mit meiner Webseite. Ich habe die Headlines mit einer Clipping Mask programmiert so dass hinter dem Text ein Bild zu sehen ist, wenn man über die Seite scrollt. Das funktioniert ganz wunderbar auf jedem Browser - bis auf Firefox. Hier wird die Schrift auf der Index Seite viel dünner angezeigt und das Bild im Hintergrund abgeschnitten. Auf allen anderen Seiten sieht man die Headlines überhaupt nicht obwohl ich den exact selben code verwende (und es auf den anderen Browsern funktioniert). Ich habe bereits mehrere Senior Programmierer über den Code schauen lassen. Keiner konnte mir helfen. Das hier ist meine letzte Idee. Ich hoffe hier hatte jemand bereits ein ähnliches Problem und kennt eventuell einen Lösungsansatz. Ganz lieben Dank im Voraus und einen schönen Sonntag
HTML
<section
class="clipping-mask-font"
>
<h2 class="planet__intro--headline">OUR PLANET MATTERS</h2>
</section>
CSS
.clipping-mask-font h2 {
font-weight: 900;
font-size: var(--fs-xxxl);
line-height: 0.8;
position: relative;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-attachment: fixed;
padding: 0;
}
.planet__intro--headline {
background-image: url("../../images/website/index/earth.png");
background-size: cover;
background-repeat: no-repeat;
background-position: 30% 50%;
letter-spacing: 0.001rem;
}
