/* =============================================================================
   SPF FOOTER — Seitenfuss beider Shops
   -----------------------------------------------------------------------------
   EIN Markup. Der alte Bricks-Footer hielt drei Fassungen desselben Linkbestands
   nebeneinander und blendete zwei per CSS aus — 18 kB und 36 Links auf jeder
   Seite. Hier macht Grid die Umbrueche, es gibt nichts zu verstecken.

   BREAKPOINTS: 991 / 767 / 478 — dieselben, die Bricks im Projekt fuehrt
   (tablet_portrait / mobile_landscape / mobile_portrait). Ein eigenes Raster
   waere sauberer im Lehrbuch und falsch im Projekt: Header und Newsletter
   brechen an genau diesen Stellen.

   FARBE: Akzent aus --spf-brand-night (der Fuss ist immer dunkel, dort gilt die
   Night-Signatur: KTM Orange, Husqvarna Gelb). Jeder Wert hat den KTM-Fallback.
   ============================================================================= */

.spffo {
	--spffo-akzent: var(--spf-brand-night, var(--spf-brand, #ff6600));
	/* Dunkle Markenflaeche aus der Palette: KTM behaelt das neutrale #0f1011,
	   Husqvarna bekommt sein #0e1420 — derselbe Ton wie im Kopf. Der Wert steht
	   in class-spf-brand.php, nicht hier, damit ein dritter Shop nichts braucht. */
	--spffo-bg: var(--spf-brand-flaeche, #0f1011);
	--spffo-bg2: #141517;
	--spffo-linie: rgba(255, 255, 255, .09);
	/* Werte aus dem alten Footer uebernommen (globale Bricks-Klassen
	   `footer-navlink` und `Footer-Header`): Links #878787, Ueberschriften #efefef,
	   Hover Weiss. #878787 auf #0f1011 = 4,9:1, damit ueber AA. */
	--spffo-text: #878787;
	--spffo-hell: #efefef;
	--spffo-leise: #8a9096;
	--spffo-linie2: rgba(135, 135, 135, .45);
	--spffo-max: 1320px;

	/* Kante zum Inhalt darueber, in der Signaturfarbe (Kili, 11.08.2026). Der
	   Newsletter brachte bisher seine eigene mit (`--brand-accent`, ein
	   Theme-Token) — die wird unten abgeschaltet, damit es genau eine Linie gibt
	   und sie aus der Palette kommt. */
	border-top: 3px solid var(--spffo-akzent);
	background: var(--spffo-bg);
	color: var(--spffo-text);
	font-family: var(--spf-brand-sans, 'Roboto Condensed Regular', system-ui, sans-serif);
	font-size: 15px;
	line-height: 1.55;
}
.spffo *, .spffo *::before, .spffo *::after { box-sizing: border-box; }
/* Der Newsletter bringt aus dem alten Code-Element eine eigene Oberkante mit.
   Zwei Linien uebereinander sind eine zu viel. */
.spffo .ktm-nl { border-top: 0; }

.spffo__in {
	max-width: var(--spffo-max);
	margin: 0 auto;
	padding: 0 22px;
}

/* ------------------------------------------------------------- Spalten ----- */
.spffo__main { padding: 48px 0 40px; }

/* Logo + fuenf Spalten: Rechtliches, Kundenservice, Unternehmen, Kontakt,
   Weitere Shops.

   HIER STAND EINMAL, es sei `auto-fit` und passe sich von selbst an, wenn eine
   Spalte dazukommt. Das stimmte nie — im Code stand `repeat(4, ...)`, und
   `auto-fit` ist an dieser Stelle auch gar nicht erlaubt: Es laesst sich nicht
   mit einer flexiblen Spur wie `minmax(180px, 1fr)` in derselben Deklaration
   kombinieren, die ganze Regel wuerde verworfen. Die Zahl ist also fest, und
   wer eine Spalte ergaenzt, zaehlt sie hier hoch — sonst rutscht sie in eine
   zweite Zeile.

   Bei 1320px Innenbreite bleiben je Spalte rund 200px (gemessen 02.09.2026),
   also ueber dem Mindestmass von 160px. Der Umbruch auf zwei Spalten wurde
   deshalb von 991px auf 1100px vorgezogen: Darunter kaeme die fuenfte Spalte
   unter 160px und die Linktexte wuerden brechen. */
.spffo__main .spffo__in {
	display: grid;
	grid-template-columns: minmax(180px, 1fr) repeat(5, minmax(160px, 1fr));
	gap: 34px 28px;
	/* `stretch` statt `start`: Sonst ist jede Spalte nur so hoch wie ihr Inhalt
	   und die Trennlinien haben unterschiedliche Laengen (Kili, 11.08.2026).
	   Gestreckt reicht jede Linie ueber die ganze Zeile. */
	align-items: stretch;
}

.spffo__brand { padding-top: 4px; }
/* `inline-flex` statt `inline-block`, seit der Beta-Zusatz danebensteht —
   sonst saesse er unter dem Logo statt daneben. Fuer das Logo allein ist der
   Unterschied keiner: ein einzelnes Kind steht so wie so. */
.spffo__logo { display: inline-flex; align-items: center; gap: 12px; }
/* Der Beta-Zusatz faerbt sich sonst blau. `.bso-beta` baut alles auf
   `currentColor` — im Kopf traegt der Logo-Link eine Farbe, hier nicht, und
   dann greift die Grundeinstellung des Browsers fuer Links (#0000ee). Gemessen
   am 31.08.2026, nicht vermutet. Also bekommt er hier die helle Fusstextfarbe,
   dieselbe, die auch die Ueberschriften der Spalten tragen. */
.spffo__logo .bso-beta { color: var(--spffo-hell, #efefef); }
.spffo__logo img {
	display: block;
	width: auto;
	/* `min(...)` statt der reinen 190px: Die Fussspalte ist im Sechser-Raster
	   nur 182,7px breit — ein 190px-Deckel laesst das Bild 7px darueber
	   hinausragen, und in schmaleren Fenstern mehr (gemessen 10.09.2026 auf
	   Husky bei 1440px: Spalte 22-205, Bild 22-212). Solange dort das hochkante
	   Badge stand, fiel es nicht auf — das war auf 130px gedeckelt. Mit dem
	   Logo (2048x482) schoepft das Bild den Deckel voll aus. */
	max-width: min(190px, 100%);
	height: auto;
	/* Hoehe begrenzen statt setzen: Das KTM-Logo ist fast quadratisch, das
	   Husky-Logo ein breites Wortbild. Eine feste Hoehe wuerde eines von beiden
	   verzerren oder winzig machen. */
	max-height: 76px;
}

/* Hochkantes Haendler-Badge.
   Die Klasse setzt `SPF_Footer::logo()`, wenn das Bild hoeher als breit ist —
   nicht die Marke entscheidet, sondern das Seitenverhaeltnis.

   DERZEIT UNGENUTZT (Stand 10.09.2026): Im Husky-Fuss steht seit diesem Tag das
   Logo (2048x482, quer) statt des hochkanten Husqvarna-Badges, KTM laeuft ueber
   einen Mediathek-Anhang. Die Regel bleibt, weil sie am Seitenverhaeltnis haengt
   und wieder greift, sobald irgendwo ein hochkantes Bild im Fuss landet. Wer sie
   entfernt, muss `SPF_Footer::logo()` mitnehmen — sonst steht die Klasse ohne Regel.

   WARUM DAS NOETIG IST: Das KTM-Badge ist quer (300x158), das Husqvarna-Badge
   hochkant (240x292). Unter der allgemeinen Deckelung auf 76px Hoehe waere das
   hochkante **62px breit** — in dieser Groesse ist „AUTHORIZED DEALER" darin
   nicht mehr zu lesen, und ein Haendler-Nachweis, den niemand entziffert, ist
   keiner.

   112px Hoehe ergeben bei 240x292 rund 92px Breite. Das ist hoeher als KTMs
   76px, aber die beiden Shops stehen nie nebeneinander; was zaehlt, ist das
   Verhaeltnis zu den Spalten daneben, und das stimmt. */
.spffo__logo--hoch img {
	max-width: 130px;
	max-height: 112px;
	/* EINE KANTE, WEIL DIE FLAECHE KEINE HAT (gemessen 02.09.2026).
	   Das Husqvarna-Badge traegt das Marineblau #002550. Der Fussbereich ist
	   schwarz. Das sind **1,38:1** — die Badgeflaeche verschwindet im Grund,
	   sichtbar bleibt allein das weisse Band, und das liest sich wie ein
	   freistehender Schriftzug statt wie ein Siegel. Zum Vergleich: KTMs Orange
	   steht auf demselben Grund bei 7,15:1 und braucht nichts.

	   Die Kante ist bewusst schwach (22 % Weiss): Sie soll dem Badge eine Form
	   geben, nicht selbst auffallen. Ein weisses Plattenrechteck waere die
	   lautere Loesung — falls die Kante nicht reicht, ist das der naechste
	   Schritt, aber er veraendert das Erscheinungsbild der Marke deutlicher. */
	border: 1px solid rgba(255, 255, 255, .22);
	box-sizing: border-box;
}

/* Versalien und 1 px Laufweite wie in der alten Klasse „Footer-Header".
   Auf Husky NICHT: Der Shop schaltet Versalien fuer h1–h6 generell ab
   (CD-Manual: kein Schreien) — diese Regel greift dort und gewinnt. Genau so
   folgt die Ueberschrift automatisch der Typografie des jeweiligen Shops. */
.spffo__h {
	margin: 0 0 8px;
	padding-bottom: 4px;
	font-family: var(--spf-brand-cond, 'Blender Pro', Oswald, system-ui, sans-serif);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.25;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--spffo-hell);
}

.spffo__list { list-style: none; margin: 0; padding: 0; }
.spffo__list li { margin: 0; }

/* Trefferflaeche: 44 px hoch inklusive Polsterung, auch wenn die Zeile nur
   15 px Text ist (Touch-Ziel, Apple HIG / Material). Der negative Rand haelt
   die Spalte optisch buendig. */
/* Hover: ein Unterstrich, der von der Mitte aus aufzieht. Genau die Animation
   der alten Klasse `footer-navlink` — ein Farbverlauf als Hintergrund, dessen
   Breite animiert wird. Ein `border-bottom` kann das nicht, deshalb hier
   dieselbe Loesung wie im Original.
   Die Polsterung von 7 px hebt den Strich vom Text ab; die Position wird
   entsprechend zurueckgerechnet, sonst schwebt er unter der Zeile. */
.spffo__list a,
.spffo__consent {
	display: inline-block;
	padding: 7px 0;
	font-size: 14px;
	color: var(--spffo-text);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 0 1px;
	background-position: center calc(100% - 6px);
	transition: color .2s ease, background-size .25s ease;
}
.spffo__list a:focus-visible,
.spffo__consent:focus-visible{
	color: #fff;
	background-size: 100% 1px;
}
@media (hover:hover){
.spffo__list a:hover,
.spffo__consent:hover{
	color: #fff;
	background-size: 100% 1px;
}}

/* Telefon und E-Mail trugen im alten Footer die Markenfarbe (`var(--primary)`).
   Zwei Klassen im Selektor, weil `.spffo__list a` sonst gewinnt — gleiche
   Spezifitaet plus Elementteil schlaegt die Einzelklasse. */
.spffo__list a.spffo__akzent { color: var(--spffo-akzent); }
.spffo__list a.spffo__akzent:focus-visible{ color: #fff; }
@media (hover:hover){
.spffo__list a.spffo__akzent:hover{ color: #fff; }}

/* „Vertrag widerrufen" war ein umrandeter Knopf — die Pflichtangabe nach
   § 356a BGB soll sich vom Rest der Liste abheben. Werte aus dem alten
   Element uebernommen, nur die feste Farbe #ff6a00 durch die Palette ersetzt. */
.spffo__li--knopf { margin-top: 6px; }
.spffo__knopf {
	display: inline-block;
	padding: 5px 12px !important;
	border: 2px solid var(--spffo-akzent);
	border-radius: 3px;
	color: var(--spffo-akzent) !important;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	background-image: none !important;
	transition: color .2s ease, background-color .2s ease;
}
.spffo__knopf:focus-visible{
	background-color: var(--spffo-akzent);
	color: var(--spf-brand-night-ink, #fff) !important;
}
@media (hover:hover){
.spffo__knopf:hover{
	background-color: var(--spffo-akzent);
	color: var(--spf-brand-night-ink, #fff) !important;
}}

/* Verweis auf die Markenuebersicht — kein Shop, deshalb abgesetzt. */
.spffo__li--marken {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--spffo-linie);
}
/* Folgt ein zweiter Eintrag dieser Art (Markenuebersicht, dann Modell-
   uebersicht), gehoeren beide zusammen: die Trennlinie steht nur ueber dem
   ersten, sonst zerschnitte sie eine Gruppe statt sie abzusetzen. */
.spffo__li--marken + .spffo__li--marken {
	margin-top: 2px;
	padding-top: 0;
	border-top: 0;
}
.spffo__marken-link { color: var(--spffo-hell) !important; font-weight: 700; }

/* Haelt das letzte Wort und den Doppelpfeil zusammen. Gesetzt wird die Klasse in
   `SPF_Footer::weiter_link()`, die Begruendung steht dort: Der Pfeil ist ein
   `inline-block` und darf deshalb umbrechen, auch ohne Leerzeichen davor. Seit
   die Spalte „Unternehmen" die Spaltenbreite von 233 auf 189 px drueckt, tat er
   das auch — „Alle Husqvarna-Modelle" auf Zeile eins, der Pfeil allein auf
   Zeile zwei. Nur das letzte Wort wird geklebt, nicht der ganze Link: Sonst
   stuende er auf wirklich schmalen Spalten ueber den Rand hinaus. */
.spffo__nobr { white-space: nowrap; }
/* Doppelpfeil als Hinweis, dass es weitergeht. `aria-hidden`, weil er nichts
   sagt, was der Linktext nicht schon sagt. Er rueckt beim Hover ein Stueck nach
   rechts — dieselbe Geste wie die Brotkrume im Shop. */
.spffo__pfeil {
	display: inline-block;
	/* 6 -> 8 px am 03.09.2026: Tester las den Pfeil auf dem Telefon als angeklebt. */
	margin-left: 8px;
	color: var(--spffo-akzent);
	/* Feste Schriftkette statt der Hausschrift: In Helvetica Neue (Husqvarna)
	   steht das Zeichen deutlich weicher und duenner als in Blender Pro, mit dem
	   es bei KTM rendert. Vorgabe Kili vom 13.08.2026 — ueberall die KTM-Form,
	   die Farbe bleibt markenabhaengig ueber --spffo-akzent.
	   `font-weight` ist ausgeschrieben und nicht geerbt: Von Blender Pro liegt
	   nur der 700er-Schnitt auf dem Server. Erbt das Zeichen einen anderen Wert,
	   faellt es lautlos auf Oswald zurueck und sieht wieder anders aus. */
	font-family: 'Blender Pro', Oswald, system-ui, sans-serif;
	font-weight: 700;
	transition: transform .18s ease;
}
.spffo__marken-link:focus-visible .spffo__pfeil{ transform: translateX(3px); }
@media (hover:hover){
.spffo__marken-link:hover .spffo__pfeil{ transform: translateX(3px); }}
.spffo a:focus-visible,
.spffo button:focus-visible {
	outline: 2px solid var(--spffo-akzent);
	outline-offset: 3px;
	border-radius: 2px;
}

.spffo__note {
	margin: 12px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--spffo-leise);
	max-width: 34ch; /* Zeilenlaenge, sonst laeuft der Satz ueber die Spalte */
}

/* --------------------------------------------------------- Trennstriche ---- */
/* Im alten Footer standen dafuer eigene `divider`-Elemente (senkrecht, #878787,
   auf Mobil ausgeblendet). Als Rahmen an der Spalte braucht es dafuer kein
   eigenes Element — und es verrutscht nicht, wenn eine Spalte laenger wird.
   Die erste Spalte jeder Reihe bekommt keinen: Das Logo ist Kind 1, im
   Zweispalter beginnen die Kinder 2 und 4 eine Reihe. */
@media (min-width: 768px) {
	.spffo__col {
		border-left: 1px solid var(--spffo-linie2);
		padding-left: 28px;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	.spffo__col:nth-child(2n) { border-left: 0; padding-left: 0; }
}

/* ------------------------------------------------------------- Fussbar ----- */
.spffo__bar {
	background: var(--spffo-bg);
	border-top: 1px solid var(--spffo-linie);
	padding: 14px 0 18px;
}
.spffo__in--bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	font-size: 13.5px;
}
.spffo__copy { margin: 0; color: var(--spffo-leise); }
.spffo__consent { color: var(--spffo-leise); }

/* Nach oben — jetzt hier statt klebend am Bildschirmrand (Kili, 11.08.2026).
   `margin-left:auto` schiebt ihn ans Ende der Zeile, ohne eine eigene Spalte
   zu brauchen; beim Umbruch auf Mobil steht er dadurch von selbst unten. */
.spffo__top {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	background: var(--spffo-akzent);
	color: var(--spf-brand-night-ink, #fff);
	border: 0;
	border-radius: 9px;
	font-family: var(--spf-brand-cond, 'Blender Pro', Oswald, system-ui, sans-serif);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .06em;
	/* Versalien wie die Ueberschriften — und wie dort nur auf KTM: Husky schaltet
	   `text-transform` fuer `button` generell ab. */
	text-transform: uppercase;
	cursor: pointer;
	transition: filter .15s, transform .15s;
}
.spffo__top svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
@media (hover:hover){
.spffo__top:hover{ filter: brightness(1.08); }}
.spffo__top:active { transform: translateY(1px); }

/* ==================================================== Breakpoints ========== */

/* Tablet quer: Logo bekommt eine eigene Zeile, die Spalten teilen sich zu zweit
   die Breite. Fuenf Spalten nebeneinander wuerden hier unter 160 px rutschen und
   die Linktexte umbrechen lassen. Grenze am 02.09.2026 von 991px auf 1100px
   angehoben, als die Spalte „Unternehmen" dazukam. */
@media (max-width: 1100px) {
	.spffo__main { padding: 40px 0 32px; }
	.spffo__main .spffo__in {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 24px;
	}
	.spffo__brand { grid-column: 1 / -1; }
	.spffo__note { max-width: 46ch; }
}

/* Mobil: die vier Listen werden zum AKKORDEON (Kili, 13.08.2026).

   Zwischenstand war zweispaltig — half von 1.156 auf 901 px, blieb aber eine
   lange Rutschpartie, und die verbreiterten Tippziele zogen Hover-Flaeche und
   Unterstrich ueber die ganze Zeile. Jetzt steht jede Spalte zugeklappt da,
   der Fuss beginnt bei rund 300 px, und wer etwas sucht, oeffnet einen
   Abschnitt. Aufgebaut wird das in spf-footer-akkordeon.js; ohne JavaScript
   bleibt alles offen und lesbar. */
@media (max-width: 767px) {
	.spffo__in { padding: 0 18px; }
	.spffo__main { padding: 32px 0 26px; }
	.spffo__main .spffo__in { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.spffo__brand { margin-bottom: 22px; }
	.spffo__col { border-left: 0; padding-left: 0; }

	/* Jede Spalte eine Zeile mit Trennlinie darunter — das Muster, an dem man
	   ein Akkordeon erkennt, bevor man es antippt. */
	.spffo__col--klappbar { border-top: 1px solid var(--spffo-linie); }
	.spffo__col--klappbar:last-of-type { border-bottom: 1px solid var(--spffo-linie); }
	.spffo__col--klappbar .spffo__h { margin: 0; font-size: 15px; }

	.spffo__aufklapp {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		/* 52 px: Der Schalter ist die ganze Zeile, hier ist ein grosses Ziel
		   richtig — anders als bei den Links darin. */
		min-height: 52px;
		padding: 14px 2px;
		background: none;
		border: 0;
		color: inherit;
		font: inherit;
		text-align: left;
		cursor: pointer;
	}
	.spffo__aufklapp-pfeil {
		flex: none;
		transition: transform .2s ease;
	}
	.spffo__aufklapp[aria-expanded="true"] .spffo__aufklapp-pfeil { transform: rotate(180deg); }
	.spffo__col--klappbar .spffo__list { padding: 2px 0 16px; }
	/* Die freigestellten Uebersichts-Verweise stehen unter dem Schalter, nicht
	   darin (siehe spf-footer-akkordeon.js). Etwas Luft nach oben, damit sie
	   nicht an der Schalterzeile kleben. */
	.spffo__col--klappbar .spffo__list--frei { padding: 0 0 10px; }

	/* Die Links bleiben so breit wie ihr Text. `display:flex` machte sie ueber
	   die ganze Zeile breit — damit lief der Hover-Grund und der Unterstrich
	   quer durch den Fuss, und der Knopf „Vertrag widerrufen" wurde eine
	   randlose Leiste (Kili, 13.08.2026). `width:fit-content` haelt beides am
	   Text; die Zeilenhoehe traegt weiterhin das Tippziel.
	   Der `gap` ist Pflicht: In einem Flex-Container wird ein Textknoten zum
	   anonymen Item, und dessen Randleerzeichen faellt weg. Die Marken-Links
	   bestehen aus Text + `.spffo__nobr`-Span — ohne gap stand dort
	   „UnsereMarken" (Kili, 04.09.2026). .3em entspricht der Leerzeichenbreite. */
	.spffo__list a {
		display: inline-flex;
		align-items: center;
		gap: .3em;
		width: fit-content;
		max-width: 100%;
		min-height: 40px;
		padding: 8px 0;
	}
	/* WhatsApp behaelt seine 7 px zum Symbol — `.spffo__list a` ist spezifischer
	   als `.spffo__mitsymbol` und wuerde den gap sonst auf .3em druecken. */
	.spffo__list a.spffo__mitsymbol { gap: 7px; }
	.spffo__li--knopf .spffo__knopf { width: fit-content; }

	.spffo__note { max-width: none; }
	.spffo__in--bar { gap: 12px; }
	.spffo__top { margin-left: 0; width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.spffo__aufklapp-pfeil { transition: none; }
}

@media (max-width: 478px) {
	.spffo__in { padding: 0 16px; }
	.spffo__logo img { max-width: 150px; max-height: 64px; }
	.spffo__logo--hoch img { max-width: 110px; max-height: 92px; }
}

@media (prefers-reduced-motion: reduce) {
	.spffo__list a, .spffo__consent, .spffo__top, .spffo__knopf, .spffo__pfeil { transition: none; }
	@media (hover:hover){
	.spffo__marken-link:hover .spffo__pfeil{ transform: none; }}
	.spffo__top:active { transform: none; }
}

/* WhatsApp — im alten Footer ein Font-Awesome-Zeichen in #25d366. Hier ein
   Inline-SVG in derselben Farbe; eine Icon-Schrift fuer ein Zeichen zu laden
   waere teurer als der Pfad. Die Farbe bleibt auch im Hover stehen: Gruen ist
   hier Wiedererkennung, nicht Dekoration. */
.spffo__mitsymbol { display: inline-flex !important; align-items: center; gap: 7px; }
.spffo__symbol { width: 15px; height: 15px; flex: 0 0 auto; }
.spffo__symbol--whatsapp { fill: #25d366; }

/* ── Soziale Medien in der Fussleiste (Tester-Wunsch, Kili 03.09.2026) ──────
   Reine Inline-SVGs (CSP, kein externer Host). Trefferflaeche 44 px, sichtbares
   Zeichen 20 px. Der Fuss ist in beiden Modi dunkel, die Farben kommen deshalb
   aus den bestehenden Fuss-Tokens und brauchen keinen Nacht-Zweig. */
.spffo__social{display:flex;align-items:center;gap:2px;margin-left:auto}
.spffo__social a{display:inline-flex;align-items:center;justify-content:center;
	width:44px;height:44px;border-radius:10px;color:var(--spffo-faint,#9aa0a6)}
.spffo__social svg{width:20px;height:20px;fill:currentColor}
.spffo__social a:focus-visible{outline:2px solid var(--spffo-akzent);outline-offset:2px}
@media (hover:hover){
.spffo__social a:hover{color:var(--spffo-ink,#e8eaed);background:rgba(255,255,255,.06)}}
@media (max-width:478px){
	/* In der schmalen Fussleiste rutschen die Zeichen unter das Copyright. */
	.spffo__social{margin-left:0}
}

/* Nur fuer Screenreader: „(oeffnet in neuem Tab)" hinter Links, die eines
   aufmachen — WhatsApp und die Schwestershops (Kili, 09.09.2026).
   NICHT `display:none` und nicht `visibility:hidden`: Beides nimmt den Text
   auch aus dem Vorlesefluss, und genau dort soll er stehen. Das Muster mit
   1x1-Ausschnitt ist der uebliche Weg, sichtbar zu entfernen, ohne zu
   verstummen. `white-space:nowrap` verhindert, dass der zusammengeschobene
   Text die Zeilenhoehe der Liste veraendert. */
.spffo__sr{
	position:absolute !important;
	width:1px; height:1px;
	padding:0; margin:-1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	clip-path:inset(50%);
	white-space:nowrap;
	border:0;
}