/*
 * BSO Aktionen — Countdown-Leiste.
 *
 * Zwei Gestalten desselben Elements (Kili, 12.11.2026):
 *  - Rechner ab 768 px, Ansatz A: kräftige Leiste vor #bso-header im normalen
 *    Fluss, nicht klebend. Links das Rabatt-Schild („−10 %“), daneben Name und
 *    Text, Mitte vier Ziffernblöcke, rechts der Code als dunkler Knopf.
 *  - Handy unter 768 px, Ansatz C: fest am unteren Rand in voller Breite,
 *    oben Schild und Name, darunter die Restzeit, rechts Code-Knopf und
 *    Schließen. leiste.js hebt sie über feste Kaufleisten der Shops
 *    (--bsoakt-unten), hebt den Garagen-Knopf über sie (--bsoakt-fab-hub, am
 *    Ende dieser Datei) und polstert das Seitenende.
 *
 * Farben aus den Marken-Token von spf-api-connector (SPF_Brand::print_vars).
 * Fläche ist die Signalfarbe --spf-brand-night, und zwar in Tag- UND
 * Nachtmodus: KTM Orange #ff6600, Husky Gelb #ffed00. --spf-brand wäre bei
 * Husky tagsüber das Dunkelblau. Schrift --spf-brand-night-ink-auto, auf
 * beiden Flächen #101112 (6,44:1 auf Orange, 15,6:1 auf Gelb).
 *
 * Die Blöcke und Knöpfe sind fest #101112 mit weißer Schrift (18,9:1); die
 * kleinen Beschriftungen darin tragen die Signalfarbe (6,44:1 bzw. 15,6:1).
 * Fest statt aus der Schriftfarbe abgeleitet, damit auch eine Marke mit
 * weißer Schrift auf der Fläche keine weißen Blöcke mit weißen Ziffern bekäme.
 *
 * Am Ende steht der Menüpunkt im Schubkasten des Theme (BSOAKT_Seite), der mit
 * jeder Seite geladen wird, solange der Plan läuft. Die Aktionsseite selbst hat
 * ein eigenes Blatt (seite.css), das nur dort geladen wird.
 */
.bsoakt {
	--bsoakt-grund: var(--spf-brand-night, #ff6600);
	--bsoakt-ink: var(--spf-brand-night-ink-auto, #101112);
	--bsoakt-block: #101112;
	--bsoakt-block-hover: #2a2c30;
	--bsoakt-block-ink: #ffffff;
	--bsoakt-kopf: var(--spf-brand-head, var(--spf-brand-cond, system-ui, sans-serif));
	background: var(--bsoakt-grund);
	color: var(--bsoakt-ink);
	font-family: var(--spf-brand-cond, system-ui, sans-serif);
	font-size: 15px;
	line-height: 1.3;
	position: relative;
	z-index: 1;
}

/* Husky: Blöcke und Knöpfe im Husqvarna-Dunkelblau statt Schwarz (Kili, 13.11.2026).
   #273a60 auf Gelb 9,3:1, Weiß darauf 11,3:1, Gelb darauf 9,3:1; Hover #34497a mit Weiß 8,8:1.
   KTM bleibt bei #101112 auf Orange. */
.bsoakt--husky {
	--bsoakt-block: #273a60;
	--bsoakt-block-hover: #34497a;
}
.bsoakt[hidden] { display: none; }
.bsoakt [hidden] { display: none !important; }

/* Nur für Screenreader: der Satz mit dem festen Zeitpunkt, die Meldung „Code kopiert". */
.bsoakt__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bsoakt__in {
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	box-sizing: border-box;
	/* 70 px = 50 px Blöcke plus Rand. Die Höhe steht fest, bevor leiste.js die
	   Platzhalter füllt; so schiebt das Füllen den Kopf nicht nach unten. */
	min-height: 70px;
	padding: 10px 60px 10px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
}

/* ── Links: Rabatt-Schild, Name und Text ──────────────────────────────── */
/* Wächst nicht: Dann verteilt space-between den Rest, und der Countdown steht in der Mitte. */
.bsoakt__kopf {
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 14px;
}
.bsoakt__kopftext { min-width: 0; }

/* Das Rabatt-Schild (Kili, 12.11.2026: „die Prozentzahl ist mir nicht prägnant
   genug“). Dunkle Fläche wie Ziffernblöcke und Code-Knopf, gleich hoch wie sie
   (50 px), Ziffern in der schweren Schmalschrift, größer als der Name. Weiß auf
   #101112 hat 18,9:1. Inhalt aus leiste.js/schild(), nur in einer laufenden Phase. */
.bsoakt__schild {
	flex: none;
	box-sizing: border-box;
	height: 50px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	border-radius: 6px;
	background: var(--bsoakt-block);
	color: var(--bsoakt-block-ink);
	font-family: var(--bsoakt-kopf);
	font-weight: 800;
	font-size: 34px;
	line-height: 1;
	letter-spacing: .01em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
/* Der Name bricht nie um (Kili, 12.11.2026). Passt er nicht, wählt leiste.js
   eine andere Anordnung (einpassen); erst danach kürzt die Ellipse. */
.bsoakt__titel {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Mit Aktionsseite führt der Name dorthin (BSOAKT_Seite). Der Link liegt über dem
   vergrößerten Greifbereich von „Zu den Angeboten“ darunter, damit ein Tipp auf
   den unteren Rand des Namens nicht dort landet. */
.bsoakt__titel--link {
	position: relative;
	z-index: 1;
	display: inline-block;
	max-width: 100%;
	color: inherit;
	text-decoration: none;
}
.bsoakt__winkel {
	display: inline-block;
	position: relative;
	top: -.06em;
	margin-left: .15em;
	vertical-align: middle;
}
.bsoakt__name {
	font-family: var(--bsoakt-kopf);
	font-weight: 800;
	font-size: 28px;
	line-height: 1;
	letter-spacing: .02em;
}
.bsoakt--ktm .bsoakt__name { text-transform: uppercase; }

.bsoakt__info {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 14px;
	margin-top: 4px;
	font-size: 14px;
}
.bsoakt__link {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* Greifbar 44 px hoch, ohne die Zeile höher zu machen. */
.bsoakt__link { position: relative; }
.bsoakt__link::after { content: ''; position: absolute; inset: -12px -4px; }
/* Unter dem Namen steht auch am Rechner keine Textzeile mehr, der Name sitzt mittig
   neben dem Schild (Kili, 12.11.2026: „Lass bitte die Zeile unter der Phase weg“).
   Es bleibt nur der Mindestbestellwert, er ist eine Bedingung des Rabatts. Text und
   „Zu den Angeboten“ stehen weiter im Markup und im Plan, die Aktionsseite zeigt die
   Bedingungen. */
.bsoakt__info:not(:has(.bsoakt__zusatz:not([hidden]))) { display: none; }
.bsoakt__text,
.bsoakt__link { display: none; }

/* ── Mitte: Countdown ─────────────────────────────────────────────────── */
.bsoakt__zeit {
	flex: none;
	display: flex;
	align-items: center;
	gap: 8px;
	font-variant-numeric: tabular-nums;
}
.bsoakt__label {
	max-width: 120px;
	font-family: var(--bsoakt-kopf);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.05;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: right;
}
.bsoakt__label:empty { display: none; }
.bsoakt__uhr { display: flex; gap: 8px; }
.bsoakt__z {
	width: 50px;
	height: 50px;
	border-radius: 6px;
	background: var(--bsoakt-block);
	color: var(--bsoakt-block-ink);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
}
.bsoakt__zahl {
	font-family: var(--bsoakt-kopf);
	font-weight: 800;
	font-size: 26px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.bsoakt__einheit {
	font-size: 10px;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bsoakt-grund);
}
.bsoakt__kurz { display: none; }
.bsoakt__bis { font-weight: 700; white-space: nowrap; }

/* ── Rechts: Code oder Weg zum Newsletter ─────────────────────────────── */
.bsoakt__aktion { flex: none; display: flex; align-items: center; }

.bsoakt__code,
.bsoakt__nl {
	position: relative;
	box-sizing: border-box;
	background: var(--bsoakt-block);
	color: var(--bsoakt-block-ink);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	touch-action: manipulation;
	transition: background-color .15s ease-out, transform .12s ease-out;
}
.bsoakt__code {
	appearance: none;
	height: 50px;
	padding: 0 16px;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
	font: inherit;
}
.bsoakt__code-wort {
	font-size: 10px;
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bsoakt-grund);
}
.bsoakt__code-wert {
	font-family: var(--bsoakt-kopf);
	font-weight: 800;
	font-size: 20px;
	line-height: 1;
	letter-spacing: .08em;
}
/* „Kopiert" liegt für zwei Sekunden über dem Code, ohne die Breite zu ändern.
   Die zweite content-Zeile nimmt den Text aus dem Namen des Knopfs; die
   Ansage macht .bsoakt__kopiert. Browser ohne diese Schreibweise nehmen die erste. */
.bsoakt__code.ist-kopiert::after {
	content: 'Kopiert';
	content: 'Kopiert' / '';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: inherit;
	background: var(--bsoakt-block);
	color: var(--bsoakt-block-ink);
	font-family: var(--bsoakt-kopf);
	font-weight: 800;
	font-size: 17px;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.bsoakt__nl {
	min-height: 44px;
	padding: 0 16px;
	display: inline-flex;
	align-items: center;
	font-family: var(--bsoakt-kopf);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.1;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
}
.bsoakt__pfeil { margin-left: .35em; }
.bsoakt__code:active,
.bsoakt__nl:active { transform: scale(.97); }

.bsoakt__zu {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	touch-action: manipulation;
}

/* Fokusring in der Schriftfarbe der Fläche, mit Abstand: So liegt er auf
   Orange bzw. Gelb (6,44:1 bzw. 15,6:1), auch um die dunklen Knöpfe herum. */
.bsoakt button:focus-visible,
.bsoakt a:focus-visible {
	outline: 2px solid var(--bsoakt-ink);
	outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
	.bsoakt__code:hover,
	.bsoakt__nl:hover { background: var(--bsoakt-block-hover); color: var(--bsoakt-block-ink); }
	.bsoakt__link:hover { text-decoration-thickness: 2px; }
	.bsoakt__titel--link:hover .bsoakt__name {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 4px;
	}
}

/* Zwei Zeilen am Rechner (bsoakt--zweizeilig, leiste.js): wenn Name oder Text
   links in einer Zeile keinen Platz haben, etwa „Black Friday Early Access“
   zwischen 768 und 1023 px. Oben Schild, Name und Text über die ganze Breite,
   darunter Uhr links und Code rechts; das Schließen bleibt oben rechts. */
@media (min-width: 768px) {
	.bsoakt--zweizeilig .bsoakt__in { flex-wrap: wrap; row-gap: 10px; }
	.bsoakt--zweizeilig .bsoakt__kopf { flex: 1 0 100%; }
	.bsoakt--zweizeilig .bsoakt__zu { top: 10px; transform: none; }
}

/* Schmaler Rechner und Tablet hochkant: alles eine Stufe kleiner. */
@media (min-width: 768px) and (max-width: 1023px) {
	.bsoakt__in { min-height: 64px; padding: 10px 52px 10px 14px; gap: 8px 14px; }
	.bsoakt__kopf { gap: 10px; }
	.bsoakt__schild { height: 44px; padding: 0 10px; font-size: 28px; }
	.bsoakt__name { font-size: 22px; }
	.bsoakt__info { font-size: 13px; }
	.bsoakt__label { font-size: 12px; max-width: 96px; }
	.bsoakt__uhr { gap: 6px; }
	.bsoakt__z { width: 44px; height: 44px; }
	.bsoakt__zahl { font-size: 22px; }
	.bsoakt__einheit { font-size: 9.5px; }
	.bsoakt__code { height: 44px; padding: 0 12px; }
	.bsoakt__code-wert { font-size: 17px; }
	.bsoakt__nl { font-size: 15px; padding: 0 12px; }
}

/* Platz am Seitenende, damit der Fuß nicht unter der Handy-Leiste verschwindet.
   Höhe setzt leiste.js; die Kaufleiste polstert die Produktseite selbst. */
.bsoakt-platz { display: none; }
.bsoakt-platz[hidden] { display: none !important; }

/* ── Handy: Leiste unten (Ansatz C) ───────────────────────────────────────
   Fest am unteren Rand. --bsoakt-unten ist die Höhe einer festen Leiste des
   Shops darunter (Kaufleiste der Produktseite, Bestellknopf der Kasse,
   Gutschein-Leiste); leiste.js misst sie. Verschoben wird per transform, nicht
   per bottom, damit das Anheben kein Layout auslöst.
   z-index 59: unter der Kaufleiste (60) und allem, was sich darüberlegt
   (Menü 9999, Drawer ab 100000); liegt neben ihr, nie auf ihr. */
@media (max-width: 767px) {
	.bsoakt {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 59;
		transform: translateY(calc(-1 * var(--bsoakt-unten, 0px)));
		transition: transform .2s ease-out;
		box-shadow: 0 -4px 14px rgba(0, 0, 0, .35);
		font-size: 13px;
	}
	/* Volle Breite, auch auf der Produktseite: Der Garagen-Knopf rückt über die
	   Leiste (siehe Ende der Datei), statt dass sie ihm rechts Platz lässt.
	   Unten die Sichere Zone, solange die Leiste ganz unten sitzt. */
	.bsoakt__in {
		min-height: 0;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto 44px;
		grid-template-areas: "kopf aktion zu" "zeit aktion zu";
		align-items: center;
		gap: 4px 8px;
		padding: 9px 4px calc(10px + env(safe-area-inset-bottom, 0px)) 12px;
	}
	.bsoakt--gestapelt .bsoakt__in { padding-bottom: 9px; }

	/* Oben Schild und Name in einer Zeile. Der Name bricht nie um: Passt er nicht,
	   setzt leiste.js ihn eine Stufe kleiner (bsoakt--eng) und wechselt danach in
	   die lange Anordnung (bsoakt--lang, unten); den Rest kürzt die Ellipse.
	   Als Raster, damit der Mindestbestellwert unter Schild und Name über die
	   ganze Spalte läuft; der Textblock gibt seine Kinder dafür ab (contents). */
	.bsoakt__kopf {
		grid-area: kopf;
		align-self: end;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: 2px 8px;
	}
	.bsoakt__kopftext { display: contents; }
	.bsoakt__titel { grid-column: 2; }
	.bsoakt__kopf:has(.bsoakt__schild[hidden]) .bsoakt__titel { grid-column: 1 / -1; }
	.bsoakt__schild { height: 30px; padding: 0 7px; border-radius: 5px; font-size: 24px; }
	.bsoakt__name { font-size: 19px; }
	.bsoakt--eng .bsoakt__name { font-size: 16px; }

	/* Lange Namen: Schild und Name über die ganze Breite neben dem Schließen,
	   darunter Restzeit und Code. Die Zeile unten ist so hoch wie der Code-Knopf
	   (44 px); bricht die Restzeit dort um, dann zwischen Beschriftung und Ziffern. */
	.bsoakt--lang .bsoakt__in { grid-template-areas: "kopf kopf zu" "zeit aktion aktion"; gap: 6px 8px; }
	.bsoakt--lang.bsoakt--eng .bsoakt__name { font-size: 15px; }
	.bsoakt--lang .bsoakt__kopf { align-self: center; }
	.bsoakt--lang .bsoakt__zeit { align-self: center; }
	.bsoakt--lang .bsoakt__aktion { justify-self: end; margin-right: 8px; }
	/* Das Schließen bleibt 44 × 44 groß, ohne die 30 px hohe Kopfzeile zu strecken. */
	.bsoakt--lang .bsoakt__zu { margin: -7px 0; }
	/* Vom Text bleibt nur der Mindestbestellwert, er ist eine Bedingung des Rabatts.
	   Den übrigen Text (etwa „außer Geschenkgutscheine“) zeigt die Handy-Leiste
	   nicht (Kili, 12.11.2026). */
	.bsoakt__info { grid-column: 1 / -1; display: block; margin-top: 0; font-size: 12px; }
	.bsoakt__info:not(:has(.bsoakt__zusatz:not([hidden]))) { display: none; }
	/* Der Winkel hinter dem Namen nur am Rechner: In der schmalen Spalte brach er
	   den Namen um und machte die Leiste eine Zeile höher. Am Handy führt der
	   Menüpunkt zur Aktionsseite; der Name bleibt trotzdem ein Link. */
	.bsoakt__winkel { display: none; }

	.bsoakt__zeit { grid-area: zeit; align-self: start; display: block; font-size: 13px; line-height: 1.25; }
	.bsoakt__label {
		display: inline;
		max-width: none;
		margin-right: .3em;
		font: inherit;
		letter-spacing: 0;
		text-transform: none;
		text-align: left;
		white-space: nowrap;
	}
	.bsoakt__uhr { display: none; }
	/* inline-block: Zwischen Beschriftung und Ziffern darf die Zeile umbrechen
	   (im Markup steht dort kein Leerzeichen), sonst nirgends. */
	.bsoakt__kurz {
		display: inline-block;
		font-family: var(--bsoakt-kopf);
		font-weight: 800;
		font-size: 17px;
		letter-spacing: .03em;
		white-space: nowrap;
	}

	.bsoakt__aktion { grid-area: aktion; }
	.bsoakt__code { height: 44px; padding: 0 10px; flex-direction: row; align-items: center; }
	.bsoakt__code-wort {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.bsoakt__code-wert { font-size: 15px; letter-spacing: .05em; }
	.bsoakt__code.ist-kopiert::after { font-size: 14px; }
	.bsoakt__nl { max-width: 128px; padding: 4px 12px; font-size: 14px; }
	.bsoakt__pfeil { display: none; }

	.bsoakt__zu { grid-area: zu; position: static; transform: none; }

	.bsoakt-platz { display: block; }

	/* ── Garagen-Knopf über der Leiste ──────────────────────────────────────
	   KOPPLUNG mit spf-api-connector: #spf-gside aus spf-garage-hub.css/.js,
	   fest unten rechts, z-index 99990, frei verschiebbar. Solange die Leiste
	   unten steht, setzt leiste.js am body die Klasse bsoakt-unten und
	   --bsoakt-fab-hub (wie weit der Knopf hoch muss, damit er 21 px über der
	   Leiste sitzt; 0, wenn er schon höher liegt). spf-api-connector muss dafür
	   nichts wissen.
	   margin-bottom statt transform: Der Knopf animiert transform selbst (Atmen,
	   Puls), und margin-bottom wirkt nur, solange er von unten verankert ist,
	   also nicht während des Ziehens (dann setzt spf top).
	   Die Übergänge von spf (background bis box-shadow) stehen hier noch einmal,
	   weil transition die ganze Liste ersetzt; ändert spf sie, hier nachziehen.
	   Beim Ziehen schaltet spf alle Übergänge ab (!important), das bleibt so. */
	body.bsoakt-unten #spf-gside {
		margin-bottom: var(--bsoakt-fab-hub, 0px);
		transition: background .15s, color .15s, border-color .15s, box-shadow .2s, margin-bottom .2s ease-out;
	}
}

/* ── Menüpunkt im Schubkasten (BSOAKT_Seite::menue_eintrag) ───────────────
   Ganz oben im Handymenü des Theme, nur bei laufendem Plan mit Aktionsseite.
   Fläche wie die Stufe auf der Aktionsseite: tagsüber die Arbeitsfarbe der
   Marke (KTM Orange, Husky Dunkelblau), nachts die Signatur (KTM Orange,
   Husky Gelb). Die Schrift rechnet spf-api-connector je Fläche (ink-auto):
   #101112 auf Orange 6,44:1, Weiß auf Husky-Blau 11,3:1, #101112 auf Gelb
   15,6:1. Den Fokusring setzt das Theme (#ktmps-header :focus-visible) mit
   Abstand auf den Grund des Schubkastens. */
.bsoakt-menue {
	--bsoakt-m-grund: var(--spf-brand, #ff6600);
	--bsoakt-m-ink: var(--spf-brand-ink-auto, #101112);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 56px;
	margin: 10px var(--spfh-pad, 22px) 6px;
	padding: 11px 12px 11px 14px;
	border-radius: 12px;
	background: var(--bsoakt-m-grund);
	color: var(--bsoakt-m-ink);
	text-decoration: none;
}
html.spf-night .bsoakt-menue,
body.spf-night .bsoakt-menue {
	--bsoakt-m-grund: var(--spf-brand-night, #ff6600);
	--bsoakt-m-ink: var(--spf-brand-night-ink-auto, #101112);
}
.bsoakt-menue[hidden] { display: none; }
.bsoakt-menue__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.bsoakt-menue__titel {
	font-family: var(--spf-brand-head, var(--spf-brand-cond, system-ui, sans-serif));
	font-weight: 800;
	font-size: 20px;
	line-height: 1.05;
	letter-spacing: .02em;
}
/* Versalien nur bei KTM; Husky schreibt laut CD-Manual ohne. */
.bsoakt-menue--ktm .bsoakt-menue__titel { text-transform: uppercase; }
.bsoakt-menue__zeile {
	display: flex;
	align-items: center;
	gap: 5px;
	font-family: var(--spf-brand-sans, system-ui, sans-serif);
	font-weight: 600;
	font-size: 12.5px;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}
.bsoakt-menue__uhrzeichen { flex: none; }
.bsoakt-menue__winkel { flex: none; }
.bsoakt-menue__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Ohne Bewegung: keine Sekunden (leiste.js zählt dann alle 30 Sekunden),
   kein Gleiten beim Anheben, kein Eindrücken. Der Garagen-Knopf springt
   ohne Gleiten über die Leiste; die übrigen Übergänge bleiben wie bei spf. */
@media (prefers-reduced-motion: reduce) {
	.bsoakt__z--s { display: none; }
	.bsoakt,
	.bsoakt__code,
	.bsoakt__nl { transition: none; }
	.bsoakt__code:active,
	.bsoakt__nl:active { transform: none; }
	body.bsoakt-unten #spf-gside { transition: background .15s, color .15s, border-color .15s, box-shadow .2s; }
}