Anderer Hintergrund und Text bei hover

[Beat]

Wie erreiche ich, dass der "eine Text" und der "andere Text" jeweils zentriert sind und in der oberen Zeile beginnen?

Indem du display statt visibility verwendest. Letzteres reserviert immer den Platz. Im Hinblick auf usability würde ich allerdings eine andere Version noch testen. Ausblenden ist nicht immer angesagt.

Wie erreiche ich, dass der rote und (bei hover) der graue Block gleich groß sind?

Indem du aufhörst, die Grösse mit padding bei :hover zu manipulieren.

Und nice to have: Bestimmt sind einige Teile überflüssig?

Du weisst es.
Vorallem ergänze ein fehlendes </div>

mfg Beat