Social-Media-Links im Footer: Facebook, Instagram, TikTok

Vierte Footer-Spalte "Folgen" auf allen fünf Seiten. Icon plus Text statt
Icon allein; Icons erben currentColor statt Markenfarben, weil Farbe im
Fließtext keine Information trägt.

Nur einfache Links, keine Plugins, Feeds oder Folgen-Schaltflächen. Solche
Widgets würden beim Seitenaufruf fremde Skripte laden und Cookies setzen und
damit die Bannerfreiheit kippen, auf der die Datenschutzerklärung steht.
Gemessen nach dem Einbau: weiterhin null Fremdanfragen, keine Cookies, kein
Storage. Datenschutzerklärung um Abschnitt 4b ergänzt.

Alle drei Ziele vor dem Einbau im Browser aufgerufen und bestätigt. Bei
Facebook steht die dauerhafte Profiladresse mit der ID 61594794906587, nicht
der gelieferte Share-Link: der ist undurchsichtig, hängt an einer Weiterleitung
und kann ungültig werden.

Nebenbefund behoben: die 44px-Regel für Fusszeilen-Links war wirkungslos, weil
die Basisregel mit min-height:30px später in site.css steht. Gemessen waren es
auf dem Handy 30px. Override ans Dateiende gehängt, betrifft alle 13 Links.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Andrej StevanovskiandClaude Opus 5 committed 2026-09-29 22:34:56 +02:00
1 parent f6e98cdcbb
commit 5df349fc71
8 files changed
+143

No files matched your search

+37
View File
@@ -624,6 +624,32 @@ a:hover{color:var(--sky-600)}
font:400 15px/1.4 'Nunito','Segoe UI',sans-serif; color:var(--ink-700); text-decoration:none;
}
.ftr__col a:hover{color:var(--sky-600); text-decoration:underline}
/* Social-Links im Footer. Ausgehende Verweise, sonst nichts: kein Page-Plugin,
kein Feed, kein Follow-Button. Solche Widgets laden fremde Skripte beim
Seitenaufruf und wuerden die Bannerfreiheit kippen, auf der die
Datenschutzerklaerung steht — dieselbe Ueberlegung wie bei der Karte.
Icon PLUS Text, nicht Icon allein: eine reine Icon-Reihe zwingt zum Raten und
braucht Extra-Beschriftung. Mit Text greift .ftr__col a unveraendert weiter,
inklusive der 30px/44px-Zielgroessen.
Die Icons erben currentColor (--ink-700) statt Markenfarben zu tragen — im
Fliesstext traegt Farbe keine Information, siehe DESIGN.md Abschnitt Farbe. */
.ftr__social{gap:9px}
.ftr__social svg{width:18px; height:18px; flex:none}
/* Platzhalter, solange eine Profiladresse fehlt. Unuebersehbar, damit nichts
davon versehentlich live geht. */
.ftr__social[href^="URL-"]{
color:var(--coral-500); border:2px dashed var(--coral-400);
border-radius:var(--radius-xs); padding-inline:6px; font-weight:700;
}
/* Nur fuer Screenreader. */
.vh{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.ftr__legal{
margin-top:var(--space-10); padding-top:var(--space-6); border-top:1px solid rgba(35,52,74,.12);
font:var(--t-small); color:var(--ink-700); max-width:80ch;
@@ -739,3 +765,14 @@ a:hover{color:var(--sky-600)}
.nav a:focus-visible, .hdr__brand:focus-visible{border-radius:var(--radius-pill)}
.iconbtn:focus-visible{border-radius:50%}
.contact a:focus-visible, .ftr__col a:focus-visible{border-radius:var(--radius-xs)}
/* ============================================================ TOUCH-ZIELE MOBIL
Muss ganz am Ende stehen. Die Regel im Mobile-Block weiter oben (Zeile ~245) setzt
.ftr__col a auf min-height:44px, wird aber von der Basisregel im FOOTER-Abschnitt
mit min-height:30px ueberschrieben — gleiche Spezifitaet, spaetere Regel gewinnt.
Die dokumentierte 44px-Korrektur war dadurch seit laengerem wirkungslos; gemessen
waren es auf dem Handy 30px. Hier greift sie wieder.
Betrifft alle Fusszeilen-Links, nicht nur die Social-Links. */
@media (max-width:639.98px){
.ftr__col a, .ftr__col span{min-height:44px; padding-block:2px}
}