/* 1. Der obere Footer (der fette Balken) bleibt unsichtbar/weiß */
footer {
    background: transparent !important;
    color: #333333 !important;
}

/* 2. Der untere Footer wird breit und bekommt das Türkis */
/* Ich habe hier das Türkis #57a89a eingesetzt. Falls es noch nicht passt, ändere den Code einfach auf deinen Wunsch-Hex-Wert. */
footer > div:last-child, 
footer .footer-bottom,
footer > div:last-of-type {
    background: #57a89a !important; 
    color: #ffffff !important;
    width: 100% !important; 
    padding: 15px 0 !important; 
}

/* 3. Alle Texte und Links im unteren Footer werden weiß */
footer > div:last-child a, 
footer > div:last-child p, 
footer > div:last-child div,
footer .footer-bottom a,
footer .footer-bottom p {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* 4. DER TRICK FÜR DEN TRANSPARENZHINWEIS: */
/* Wir holen den Text des Transparenzhinweises (der im oberen Bereich steckt) 
   und schieben ihn optisch in den unteren blauen Balken */
div[class*="transparency"], 
div[id*="transparency"],
.transparency-wrapper {
    background: #57a89a !important; /* Gleiche Farbe wie Footer */
    color: #ffffff !important;      /* Weiße Schrift */
    width: 100% !important;
    padding: 15px 0 !important;
    margin: 0 !important;
}