3 Spalten im Footer responsive gestalten

[Marcel]

Erstmal wieder vielen Dank für eure Kommentare. Leider ließen sich nicht alle Vorschläge auch umsetzen.

@Rolf B mit deinem Script kann ich leider nicht 1:1 mein altes ersetzen. Danach ist die Navigationsleiste bei mir z.B. gar nicht mehr "sticky" 🤔.

@Auge der zusätzliche Befehl "focus" sorgte bei mir dafür, dass bei überfahren der Begriffe der Navigationsleiste diese nicht mehr anders farblich markiert wurden.

@Gunnar Bittersmann Der "uppercase"-Befehl war ein guter Hinweis den ich direkt umgesetzt habe. Das mit dem "alt"-Element beim Logo muss ich auch nochmal überdenken. Auf mein "div"-Element im Bereich "header" kann ich nicht verzichten, da ich nur so einen leichten Weißschleier auf das Hintergrundbild gelegt bekomme.

Aber ich habe schon ein neues Problem, welches ich mit Flexbox lösen möchte und daran scheitere. Ich möchte gerne innerhalb meines Footers Icons neben untereinander stehenden Textlinks ausrichten.

<section id="rightfooter">
            <p><div class="titlefooter"><img src="icon_tix.png" alt="" class="icon"/>Eintrittskarten</div>
            Eintrittspreise ansehen</br>
            <a href="https://my.hansapark.de/" target="_blank" class="linkfooter">Tickets online kaufen</a></br></p>
            <p><div class="titlefooter"><img src="icon_calendar.png" alt=""/>Öffnungszeiten</div>
            Heute ist der<script src="date.js" type="text/javascript"></script></br>
            Die Saison endet am 18. Oktober</br>
            täglich ab 10 Uhr geöffnet</br>
            Wissenswertes während Corona</br></p>
            <p><div class="titlefooter">Kontakt zum Park</div>
            <a href="https://hansapark.de/" target="_blank" class="linkfooter">Offizielle Internetseite</a></br>
            Automatische Info-Hotline: 000000</br>
            Telefonischer Kundenservice: 000000</br>
            E-Mail-Adresse: <a href="mailto:[e-mail]" class="linkfooter">[e-mail]</a></br></p>
        </section>

Sprich das Icon "icon_tix" soll neben den Begriffen "Eintrittskarten, Eintrittspreise ansehen und Tickets online kaufen" in einer separaten Spalte stehen. Ich würde es nur über eine Tabelle gelöst bekommen. Gleiches soll das mit dem "icon_calendar" für die nächsten 4 Begriffe geschehen, etc.

    .titlefooter {
        font-size: 1.05em;
        font-weight: bold;
        color: #97CAAC;
    }

    .icon {
        display: flex;
        align-items: flex-start;
    }

    a.linkfooter {
        color: #ffffff;
    }

    a.linkfooter.active {
        color: #ffffff;
    }

    a.linkfooter.hoover {
        color: #ffffff;
    }

    a.linkfooter.visited {
        color: #ffffff;
    }