Hallo,

Der Browser zeigt die Hoverfläche genauso groß an, wie du das im Selektor "#contacter" festgelegt hast.
Zum Testen empfehle ich dir, um die relevanten Elemente farbige Rahmen zu ziehen, damit du die Ausmaße und Positionen der Elemente sofort erkennen kannst.
Reduziere also die Höhe und deklariere zusätzlich noch ein passendes 'margin-bottom'.

btw-1:
Bei kleinem viewport und größerer Schrift läuft der Text "kontaktieren Sie uns!" aus dem Hintergrund heraus. Deshalb spendiere dem #contacter noch ein 'min-width: 25em;'.
Auch ein "bitte" vor dem Text und ohne Ausrufezeichen wäre nicht schlecht.
So jedenfalls klingt es wie ein Befehl.

btw2:
Blocksatz ohne gleichzeitige Silbentrennung sieht mitunter wg langer Worte und demzufolge großer Wortabstände furchtbar aus.

Directupload.net - 2l76c4jx.png