/* Fußball-Zitate Bausteine – Frontend + Editor.
   Alles ist über den Baustein konfigurierbar. Zusätzlich lassen sich die Standardwerte
   per CSS-Variablen überschreiben, z. B.:  .fzq { --fzq-accent:#FF5A36; }

   Grundsatz: Ohne Einstellung im Baustein ändert sich beim Hover, Klicken oder Fokussieren
   keine Farbe. Die Regeln unten sind bewusst spezifisch, damit Link- und Button-Stile
   des Themes (hover, visited, active) die Farben nicht überschreiben. */

.fzq {
	/* Farben */
	--fzq-accent: #C6FF3D;
	--fzq-card: #14181D;
	--fzq-line: #262C34;
	--fzq-line-strong: #3A424C;
	--fzq-divider: #262C34;
	--fzq-text: #F5F6F7;
	--fzq-muted: #A3ABB5;
	/* Jede Farbe hat ihren eigenen Standard und hängt von keiner anderen ab */
	--fzq-quote: #F5F6F7;
	--fzq-author: #F5F6F7;
	--fzq-icon: #F5F6F7;
	/* Schriften */
	--fzq-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
	--fzq-body: 'DM Sans', system-ui, sans-serif;
	/* Form */
	--fzq-radius: 14px;
	--fzq-bw: 1px;

	/* Responsive Werte: Desktop / Tablet (≤ 1024 px) / Mobil (≤ 768 px) */
	--fzq-cols: var(--fzq-cols-d, 3);
	--fzq-gap: var(--fzq-gap-d, 20px);
	--fzq-pad: var(--fzq-pad-d, 26px);
	--fzq-qs: var(--fzq-qs-d, 36px);

	font-family: var(--fzq-body);
	box-sizing: border-box;
}
@media (max-width: 1024px) {
	.fzq {
		--fzq-cols: var(--fzq-cols-t, var(--fzq-cols-d, 2));
		--fzq-gap: var(--fzq-gap-t, var(--fzq-gap-d, 20px));
		--fzq-pad: var(--fzq-pad-t, var(--fzq-pad-d, 24px));
		--fzq-qs: var(--fzq-qs-t, var(--fzq-qs-d, 32px));
	}
}
@media (max-width: 768px) {
	.fzq {
		--fzq-cols: var(--fzq-cols-m, var(--fzq-cols-t, 1));
		--fzq-gap: var(--fzq-gap-m, var(--fzq-gap-t, 16px));
		--fzq-pad: var(--fzq-pad-m, var(--fzq-pad-t, 20px));
		--fzq-qs: var(--fzq-qs-m, var(--fzq-qs-t, 28px));
	}
}
.fzq *, .fzq *::before, .fzq *::after { box-sizing: border-box; }

/* Jeder Baustein steht für sich: eigene Zeile, volle Breite. Das schützt vor Theme-Regeln, die
   Elemente floaten oder in einer Flex-Zeile nebeneinander legen. flow-root schließt Floats im
   Inneren ein, clear schiebt den Baustein unter vorangehende Floats. */
body .fzq {
	display: block;
	display: flow-root;
	float: none;
	clear: both;
	flex: 1 1 100%;
	box-sizing: border-box;
}
body .fzq:not(.alignwide):not(.alignfull) {
	width: 100%;
	max-width: 100%;
}

/* Theme-Unterstreichungen in jedem Zustand abschalten */
.fzq a, .fzq a:visited, .fzq a:hover, .fzq a:focus, .fzq a:active { text-decoration: none; }

/* Sichtbarer Fokus nur bei Tastaturbedienung */
.fzq a:focus-visible, .fzq button:focus-visible { outline: 3px solid var(--fzq-accent); outline-offset: 2px; }

/* ---------- Raster ---------- */
.fzq-grid {
	display: grid;
	grid-template-columns: repeat(var(--fzq-cols), minmax(0, 1fr));
	gap: var(--fzq-gap);
}

/* ---------- Karte ---------- */
.fzq .fzq-card {
	background: var(--fzq-card);
	border: var(--fzq-bw) solid var(--fzq-line);
	border-radius: var(--fzq-radius);
	padding: var(--fzq-pad);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 28px;
	color: var(--fzq-text);
	transition:
		transform var(--fzq-dur, 250ms) ease,
		box-shadow var(--fzq-dur, 250ms) ease,
		background-color var(--fzq-dur, 250ms) ease,
		border-color var(--fzq-dur, 250ms) ease,
		color var(--fzq-dur, 250ms) ease;
}
.fzq-card-top { display: flex; flex-direction: column; gap: 18px; }
.fzq .fzq-tag {
	align-self: flex-start;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fzq-muted);
	border: 1px solid var(--fzq-line-strong);
	border-radius: 4px;
	padding: 5px 9px;
}
.fzq .fzq-quote {
	margin: 0;
	font-family: var(--fzq-display);
	font-weight: var(--fzq-qw, 400);
	text-transform: var(--fzq-qtt, uppercase);
	font-size: var(--fzq-qs);
	line-height: var(--fzq-ql, 1);
	letter-spacing: .01em;
	color: var(--fzq-quote);
	overflow-wrap: break-word;
	hyphens: auto;
	transition: color var(--fzq-dur, 250ms) ease;
}
/* Der Zitat-Link erbt immer die Farbe des Zitats, egal in welchem Zustand */
.fzq .fzq-quote a,
.fzq .fzq-quote a:visited,
.fzq .fzq-quote a:hover,
.fzq .fzq-quote a:focus,
.fzq .fzq-quote a:active { color: inherit; }
.fzq .fzq-author { font-weight: 700; font-size: var(--fzq-as, 16px); color: var(--fzq-author); }
.fzq .fzq-meta { font-size: var(--fzq-ms, 14px); color: var(--fzq-muted); margin-top: 3px; }
.fzq-card-bottom {
	display: flex;
	flex-direction: column;
	gap: 16px;
	border-top: 1px solid var(--fzq-divider);
	padding-top: 18px;
}

/* ---------- Links (Poster, Wünschen, Lesen) ---------- */
.fzq .fzq-poster, .fzq .fzq-poster:visited, .fzq .fzq-poster:focus, .fzq .fzq-poster:active,
.fzq .fzq-wish,   .fzq .fzq-wish:visited,   .fzq .fzq-wish:focus,   .fzq .fzq-wish:active,
.fzq .fzq-more,   .fzq .fzq-more:visited,   .fzq .fzq-more:focus,   .fzq .fzq-more:active {
	color: var(--fzq-accent);
	background: none;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 44px;
	font-weight: 700;
	font-size: 15px;
	transition: color var(--fzq-dur, 250ms) ease;
}
.fzq .fzq-poster { min-height: 56px; }
.fzq .fzq-poster:hover, .fzq .fzq-wish:hover, .fzq .fzq-more:hover {
	color: var(--fzq-hover-link, var(--fzq-accent));
	background: none;
}
.fzq .fzq-thumb {
	flex: none;
	width: 36px;
	aspect-ratio: 3 / 4;
	border-radius: 2px;
	border: 2px solid;
	box-shadow: 0 6px 12px rgba(0, 0, 0, .4);
	transition: transform var(--fzq-dur, 250ms) ease;
}

/* ---------- Teilen-Icons ----------
   Gemeinsam für die Karten und den Baustein „Teilen“. Größe, Rundung, Rahmen und Farben
   kommen aus Variablen, die der jeweilige Baustein setzt. */
.fzq-share { display: flex; flex-wrap: wrap; gap: var(--fzq-sb-gap, 10px); }
.fzq .fzq-icon,
.fzq .fzq-icon:visited,
.fzq .fzq-icon:focus,
.fzq .fzq-icon:active {
	position: relative;
	width: var(--fzq-icon-size, 44px);
	height: var(--fzq-icon-size, 44px);
	margin: 0;
	padding: 0;
	border: var(--fzq-icon-bw, 1px) solid var(--fzq-line-strong);
	border-radius: var(--fzq-icon-radius, 8px);
	background: var(--fzq-icon-bg, transparent);
	box-shadow: none;
	color: var(--fzq-icon);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: inherit;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transform: none;
	transition:
		color var(--fzq-dur, 250ms) ease,
		border-color var(--fzq-dur, 250ms) ease,
		background-color var(--fzq-dur, 250ms) ease,
		transform var(--fzq-dur, 250ms) ease,
		box-shadow var(--fzq-dur, 250ms) ease;
}
.fzq .fzq-icon svg { width: var(--fzq-icon-glyph, 20px); height: var(--fzq-icon-glyph, 20px); display: block; pointer-events: none; }
.fzq .fzq-icon[hidden] { display: none; }
/* Hover: nur wenn im Baustein eine Hover-Farbe gesetzt ist, sonst bleibt alles gleich */
.fzq .fzq-icon:hover {
	transform: none;
	box-shadow: none;
	background: var(--fzq-icon-hover-bg, var(--fzq-icon-bg, transparent));
	color: var(--fzq-icon-hover-color, var(--fzq-hover-link, var(--fzq-icon)));
	border-color: var(--fzq-icon-hover-line, var(--fzq-hover-link, var(--fzq-line-strong)));
}
/* Rückmeldung beim Kopieren ohne Farbwechsel am Button: kleiner Hinweis darüber */
.fzq .fzq-icon[data-copied]::after {
	content: attr(data-copied);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	padding: 4px 8px;
	border-radius: 6px;
	border: 1px solid var(--fzq-line-strong);
	background: var(--fzq-card);
	color: var(--fzq-text);
	font: 700 12px var(--fzq-body);
	pointer-events: none;
}

/* ---------- Hover-Zustände der Karte ----------
   Ohne eingestellte Hover-Farben entsprechen alle Werte dem Normalzustand. */
.fzq .fzq-card:hover {
	background: var(--fzq-hover-card, var(--fzq-card));
	border-color: var(--fzq-hover-line, var(--fzq-line));
}
.fzq .fzq-card:hover .fzq-quote { color: var(--fzq-hover-quote, var(--fzq-quote)); }
.fzq .fzq-card:hover .fzq-author { color: var(--fzq-hover-text, var(--fzq-author)); }
.fzq .fzq-card:hover .fzq-meta,
.fzq .fzq-card:hover .fzq-tag { color: var(--fzq-hover-text, var(--fzq-muted)); }

/* ---------- Hover-Effekte (nur wenn im Baustein gewählt) ---------- */
.fzq[data-hover="lift"] .fzq-card:hover { transform: translateY(calc(var(--fzq-hover-amt, 6) * -1px)); }
.fzq[data-hover="zoom"] .fzq-card:hover { transform: scale(calc(1 + var(--fzq-hover-amt, 3) / 100)); }
.fzq[data-hover="glow"] .fzq-card:hover {
	box-shadow: 0 0 calc(var(--fzq-hover-amt, 6) * 4px) calc(var(--fzq-hover-amt, 6) * 0.5px) var(--fzq-hover-glow, var(--fzq-accent));
}
.fzq[data-hover="tilt"] .fzq-card:hover { transform: rotate(calc(var(--fzq-hover-amt, 6) * -0.25deg)) translateY(-4px); }
.fzq[data-hover="tilt"] .fzq-card:hover .fzq-thumb { transform: rotate(6deg); }

/* ---------- Leerer Zustand ---------- */
.fzq-empty {
	text-align: center;
	padding: 72px 24px;
	border: 1px dashed var(--fzq-line-strong);
	border-radius: var(--fzq-radius);
	color: var(--fzq-muted);
}
.fzq-empty-title {
	margin: 0 0 12px;
	font-family: var(--fzq-display);
	text-transform: uppercase;
	font-size: 44px;
	line-height: 1;
	color: var(--fzq-text);
}

@media (prefers-reduced-motion: reduce) {
	.fzq *, .fzq *::before, .fzq *::after { transition: none !important; }
	.fzq[data-hover] .fzq-card:hover { transform: none; }
	.fzq[data-load-hover] .fzq-load:hover { transform: none; }
}

/* =====================================================================
   Zitate-Archiv: Filterleiste, Sortierung, „Mehr laden“
   Auch hier gilt: Ohne Einstellung ändert sich bei Hover, Klick oder Fokus keine Farbe,
   und Theme-Stile für Eingabefelder und Buttons werden in allen Zuständen überschrieben.
   ===================================================================== */
.fzq-archive {
	--fzq-tb-bg: #14181D;
	--fzq-tb-line: #262C34;
	--fzq-tb-label: #A3ABB5;
	--fzq-field-bg: #0B0D10;
	--fzq-field-line: #3A424C;
	--fzq-field-text: #F5F6F7;
	--fzq-chip-text: #F5F6F7;
	--fzq-chip-line: #3A424C;
	--fzq-chip-on-bg: #C6FF3D;
	--fzq-chip-on-text: #0B0D10;
	--fzq-count: #A3ABB5;
	--fzq-count-num: #F5F6F7;
	--fzq-load-bg: transparent;
	--fzq-load-text: #F5F6F7;
	--fzq-load-line: #F5F6F7;
	--fzq-reset: #C6FF3D;
}

/* [hidden] muss gegen die display-Angaben unten gewinnen */
.fzq .fzq-card[hidden],
.fzq .fzq-empty[hidden],
.fzq .fzq-more-wrap[hidden],
.fzq .fzq-reset[hidden] { display: none; }

.fzq .fzq-toolbar {
	background: var(--fzq-tb-bg);
	border: var(--fzq-bw) solid var(--fzq-tb-line);
	border-radius: var(--fzq-radius);
	padding: var(--fzq-pad);
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin-bottom: 28px;
}
.fzq .fzq-fields { display: flex; flex-wrap: wrap; gap: 16px; }
.fzq .fzq-field { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.fzq .fzq-field-search { flex: 2 1 320px; }
.fzq .fzq-field-year { flex: 1 1 140px; }
.fzq .fzq-label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fzq-tb-label);
}

/* Eingabefelder und Auswahllisten */
.fzq .fzq-input,
.fzq .fzq-input:hover,
.fzq .fzq-input:focus,
.fzq .fzq-input:active {
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--fzq-field-line);
	border-radius: 8px;
	background: var(--fzq-field-bg);
	color: var(--fzq-field-text);
	box-shadow: none;
	font: 16px/1.2 var(--fzq-body);
	text-transform: none;
	letter-spacing: normal;
}
.fzq .fzq-input:focus { outline: 2px solid var(--fzq-accent); outline-offset: 1px; }
.fzq .fzq-input::placeholder { color: var(--fzq-tb-label); opacity: 1; }
.fzq .fzq-search-input { -webkit-appearance: none; appearance: none; }
.fzq .fzq-select option { background: var(--fzq-field-bg); color: var(--fzq-field-text); }

/* Themen-Chips */
.fzq .fzq-chips-wrap { display: flex; flex-direction: column; gap: 10px; }
.fzq .fzq-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.fzq .fzq-chip,
.fzq .fzq-chip:focus,
.fzq .fzq-chip:active {
	height: 44px;
	margin: 0;
	padding: 0 18px;
	border: 2px solid var(--fzq-chip-line);
	border-radius: 999px;
	background: transparent;
	color: var(--fzq-chip-text);
	box-shadow: none;
	font: 700 14px/1 var(--fzq-body);
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transform: none;
	transition: background-color var(--fzq-dur, 250ms) ease, color var(--fzq-dur, 250ms) ease;
}
.fzq .fzq-chip:hover {
	transform: none;
	border-color: var(--fzq-chip-line);
	background: var(--fzq-chip-hover-bg, transparent);
	color: var(--fzq-chip-hover-text, var(--fzq-chip-text));
}
.fzq .fzq-chip.is-active,
.fzq .fzq-chip.is-active:hover,
.fzq .fzq-chip.is-active:focus,
.fzq .fzq-chip.is-active:active {
	border-color: var(--fzq-chip-on-bg);
	background: var(--fzq-chip-on-bg);
	color: var(--fzq-chip-on-text);
}

/* Zeile mit Anzahl, Zurücksetzen und Sortierung */
.fzq .fzq-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px 24px;
	margin-bottom: var(--fzq-gap);
}
.fzq .fzq-bar-left { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.fzq .fzq-count { margin: 0; font-size: 15px; color: var(--fzq-count); }
.fzq .fzq-count strong { font-weight: 700; color: var(--fzq-count-num); }
.fzq .fzq-reset,
.fzq .fzq-reset:focus,
.fzq .fzq-reset:active {
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--fzq-reset);
	font: 700 var(--fzq-reset-size, 14px)/1 var(--fzq-body);
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
	text-underline-offset: 3px;
	cursor: pointer;
	transform: none;
	transition: color var(--fzq-dur, 250ms) ease;
}
.fzq .fzq-reset:hover {
	transform: none;
	background: none;
	text-decoration: none;
	color: var(--fzq-reset-hover, var(--fzq-reset));
}
/* Unterstreichung: nie / immer / nur beim Hover (Einstellung im Baustein) */
.fzq[data-reset-underline="always"] .fzq-reset,
.fzq[data-reset-underline="always"] .fzq-reset:hover,
.fzq[data-reset-underline="always"] .fzq-reset:focus,
.fzq[data-reset-underline="always"] .fzq-reset:active,
.fzq[data-reset-underline="hover"] .fzq-reset:hover { text-decoration: underline; }
.fzq .fzq-sort { display: flex; align-items: center; gap: 10px; }
.fzq .fzq-sort-label { font-size: 14px; color: var(--fzq-count); }
.fzq .fzq-sort .fzq-input { width: auto; height: 44px; padding: 0 12px; font-size: 15px; }

/* „Mehr laden“ */
.fzq .fzq-more-wrap { display: flex; justify-content: center; margin-top: 44px; }
.fzq .fzq-load,
.fzq .fzq-load:focus,
.fzq .fzq-load:active {
	height: 50px;
	margin: 0;
	padding: 0 34px;
	border: var(--fzq-load-bw, 2px) solid var(--fzq-load-line);
	border-radius: var(--fzq-load-radius, 4px);
	background: var(--fzq-load-bg);
	color: var(--fzq-load-text);
	box-shadow: none;
	font: 700 14px/1 var(--fzq-body);
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	transform: none;
	transition:
		transform var(--fzq-dur, 250ms) ease,
		box-shadow var(--fzq-dur, 250ms) ease,
		background-color var(--fzq-dur, 250ms) ease,
		color var(--fzq-dur, 250ms) ease,
		border-color var(--fzq-dur, 250ms) ease;
}
.fzq .fzq-load:hover {
	transform: none;
	border-color: var(--fzq-load-hover-line, var(--fzq-load-line));
	background: var(--fzq-load-hover-bg, var(--fzq-load-bg));
	color: var(--fzq-load-hover-text, var(--fzq-load-text));
}
.fzq .fzq-empty { margin-top: 0; }

/* Hover-Effekt des Buttons „Mehr laden“ (nur wenn im Baustein gewählt) */
.fzq[data-load-hover="lift"] .fzq-load:hover { transform: translateY(calc(var(--fzq-load-amt, 4) * -1px)); }
.fzq[data-load-hover="zoom"] .fzq-load:hover { transform: scale(calc(1 + var(--fzq-load-amt, 4) / 100)); }
.fzq[data-load-hover="glow"] .fzq-load:hover {
	box-shadow: 0 0 calc(var(--fzq-load-amt, 4) * 4px) calc(var(--fzq-load-amt, 4) * 0.5px) var(--fzq-load-hover-line, var(--fzq-load-line));
}

/* =====================================================================
   Zitat-Angaben (Person, Rolle · Verein, Jahr) für den Kopf eines Beitrags
   Mobil: je Gerät einstellbar, Standard ist eine Angabe pro Zeile.
   ===================================================================== */
.fzq-info {
	--fzq-i-label: #A3ABB5;
	--fzq-i-value: #F5F6F7;
	--fzq-i-line: #262C34;
	--fzq-i-item: var(--fzq-i-item-d, 0 1 auto);
	--fzq-i-cgap: var(--fzq-i-cgap-d, 40px);
	--fzq-i-rgap: var(--fzq-i-rgap-d, 20px);
	--fzq-i-vs: var(--fzq-i-vs-d, 18px);
	--fzq-i-pad: 24px;
	color: var(--fzq-i-value);
}
@media (max-width: 1024px) {
	.fzq-info {
		--fzq-i-item: var(--fzq-i-item-t, var(--fzq-i-item-d, 0 1 auto));
		--fzq-i-cgap: var(--fzq-i-cgap-t, var(--fzq-i-cgap-d, 32px));
		--fzq-i-rgap: var(--fzq-i-rgap-t, var(--fzq-i-rgap-d, 20px));
		--fzq-i-vs: var(--fzq-i-vs-t, var(--fzq-i-vs-d, 18px));
	}
}
@media (max-width: 768px) {
	.fzq-info {
		--fzq-i-item: var(--fzq-i-item-m, var(--fzq-i-item-t, 0 0 100%));
		--fzq-i-cgap: var(--fzq-i-cgap-m, var(--fzq-i-cgap-t, 24px));
		--fzq-i-rgap: var(--fzq-i-rgap-m, var(--fzq-i-rgap-t, 18px));
		--fzq-i-vs: var(--fzq-i-vs-m, var(--fzq-i-vs-t, 17px));
		--fzq-i-pad: 20px;
	}
}

/* Theme-Stile für Definitionslisten zurücksetzen (viele Themes rücken <dd> ein) */
.fzq .fzq-info-list {
	float: none;
	clear: none;
	width: auto;
	max-width: none;
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--fzq-i-cgap);
	row-gap: var(--fzq-i-rgap);
	justify-content: var(--fzq-i-justify, flex-start);
	margin: 0;
	padding: 0;
	list-style: none;
}
.fzq-info[data-line="1"] .fzq-info-list {
	border-top: 1px solid var(--fzq-i-line);
	padding-top: var(--fzq-i-pad);
}
.fzq .fzq-info-item {
	flex: var(--fzq-i-item);
	min-width: 0;
	margin: 0;
	padding: 0;
	text-align: var(--fzq-i-talign, left);
}
.fzq .fzq-info-label {
	display: block;
	float: none;
	clear: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	font-family: var(--fzq-body);
	font-size: var(--fzq-i-ls, 12px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .12em;
	text-transform: var(--fzq-i-ltt, uppercase);
	color: var(--fzq-i-label);
}
.fzq .fzq-info-value {
	display: block;
	float: none;
	clear: none;
	width: auto;
	max-width: none;
	margin: 6px 0 0;
	padding: 0;
	text-indent: 0;
	font-family: var(--fzq-body);
	font-size: var(--fzq-i-vs);
	font-weight: var(--fzq-i-vw, 700);
	line-height: 1.35;
	overflow-wrap: break-word;
	color: var(--fzq-i-value);
}

/* =====================================================================
   Baustein „Teilen“ (Share-Leiste mit Beschriftung, optional in einer Box)
   ===================================================================== */
.fzq-sharebox {
	--fzq-sb-bg: #14181D;
	--fzq-sb-line: #262C34;
	--fzq-sb-label: #A3ABB5;
	--fzq-sb-note: #A3ABB5;
	--fzq-icon-size: var(--fzq-icon-size-d, 44px);
	--fzq-sb-pad: var(--fzq-sb-pad-d, 24px);
	color: var(--fzq-icon);
}
@media (max-width: 1024px) {
	.fzq-sharebox {
		--fzq-icon-size: var(--fzq-icon-size-t, var(--fzq-icon-size-d, 44px));
		--fzq-sb-pad: var(--fzq-sb-pad-t, var(--fzq-sb-pad-d, 24px));
	}
}
@media (max-width: 768px) {
	.fzq-sharebox {
		--fzq-icon-size: var(--fzq-icon-size-m, var(--fzq-icon-size-t, 44px));
		--fzq-sb-pad: var(--fzq-sb-pad-m, var(--fzq-sb-pad-t, 18px));
	}
}
.fzq-sharebox[data-boxed="1"] {
	background: var(--fzq-sb-bg);
	border: var(--fzq-sb-bw, 1px) solid var(--fzq-sb-line);
	border-radius: var(--fzq-sb-radius, 14px);
	padding: var(--fzq-sb-pad);
}
.fzq .fzq-sharebox-label {
	margin: 0 0 14px;
	padding: 0;
	font-family: var(--fzq-body);
	font-size: var(--fzq-sb-ls, 13px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .1em;
	text-transform: var(--fzq-sb-ltt, uppercase);
	text-align: var(--fzq-sb-talign, left);
	color: var(--fzq-sb-label);
}
.fzq-sharebox .fzq-share { justify-content: var(--fzq-sb-justify, flex-start); }
.fzq .fzq-sharebox-note {
	margin: 14px 0 0;
	padding: 0;
	font-family: var(--fzq-body);
	font-size: 13px;
	line-height: 1.45;
	text-align: var(--fzq-sb-talign, left);
	color: var(--fzq-sb-note);
}

/* Hover-Effekt der Buttons (nur wenn im Baustein gewählt) */
.fzq-sharebox[data-icon-hover="lift"] .fzq-icon:hover { transform: translateY(calc(var(--fzq-hover-amt, 4) * -1px)); }
.fzq-sharebox[data-icon-hover="zoom"] .fzq-icon:hover { transform: scale(calc(1 + var(--fzq-hover-amt, 4) / 50)); }
@media (prefers-reduced-motion: reduce) {
	.fzq-sharebox[data-icon-hover] .fzq-icon:hover { transform: none; }
}