/*
 * BigGLOSSARY – Frontend
 *
 * Gestaltung nach dem BigSolutions-Design-System: Akzent-Orange über CSS-Variablen,
 * Anthrazit, großzügige Rundungen, 2px-Rahmen, kräftige Buchstaben und als
 * Erkennungszeichen die „Buchstaben-Kachel“ (dunkles Quadrat, orangener Rahmen,
 * orangener Buchstabe) aus dem Logo.
 *
 * Variablen (vom Plugin als :root-Block ausgegeben, siehe Assets::css_variables()):
 *   --bigglossary-accent        Akzentfarbe (Flächen, Rahmen, Fokus)
 *   --bigglossary-accent-text   Akzent als TEXTfarbe auf Weiß (WCAG AA)
 *   --bigglossary-on-accent     Schriftfarbe AUF der Akzentfarbe
 *   --bigglossary-dark          Anthrazit
 *
 * Design-Einstellungen (ebenfalls im :root-Block; fehlt eine Variable, gilt der Fallback
 * im CSS = bisheriges Aussehen):
 *   --bigglossary-scale         Schriftgröße der Übersicht (Faktor, z. B. 1.1)
 *   --bigglossary-space         Abstände der Übersicht (Faktor 0.7 / 1 / 1.4)
 *   --bigglossary-corner        Eckenradius (px); alle anderen Radien leiten sich davon ab
 *   --bigglossary-term-weight   Schriftstärke der Begriffe
 *   --bigglossary-link-line     Autolinks: underline | none
 *   --bigglossary-link-style    Autolinks: dotted | solid
 *   --bigglossary-font          Schriftfamilie (nur wenn nicht „vom Theme“)
 *   --bigglossary-text          Textfarbe der Übersicht (nur wenn nicht „vom Theme“)
 *
 * Inhalt:
 *   1. Hilfswerte und Utilities
 *   2. Übersicht: Werkzeugleiste (Suche, A–Z)
 *   3. Übersicht: Buchstaben-Blöcke und Begriffe
 *   4. Automatische Links
 *   5. Tooltip
 *   6. Einzelseite: Definition und Rücklink
 *   7. Reduzierte Bewegung, Druck
 *
 * Alles ist unter Plugin-Klassen eingegrenzt; Schrift und Textfarbe kommen vom Theme.
 */

/* ==========================================================================
   1. Hilfswerte und Utilities
   ========================================================================== */

.bigglossary,
.bigglossary-definition,
.bigglossary-back,
.bigglossary-tooltip {
	--bigglossary-line: #e7e5e4;
	--bigglossary-muted: #57534e;
	--bigglossary-field: #8c8681;
	/* Ecken: Design-Einstellung --bigglossary-corner; die übrigen Radien leiten sich davon ab. */
	--bigglossary-radius: var(--bigglossary-corner, 12px);
	--bigglossary-radius-sm: max(0px, calc(var(--bigglossary-radius) - 2px));
	--bigglossary-radius-lg: calc(var(--bigglossary-radius) * 7 / 6);
	--bigglossary-radius-pill: calc(var(--bigglossary-radius) * 2);
}

/* Wo die Textfarbe vom Theme kommt, adaptieren Linien und Hover-Flächen mit. */
@supports (color: color-mix(in srgb, red 10%, transparent)) {
	.bigglossary {
		--bigglossary-line: color-mix(in srgb, currentColor 16%, transparent);
		--bigglossary-muted: color-mix(in srgb, currentColor 72%, transparent);
		--bigglossary-field: color-mix(in srgb, currentColor 55%, transparent);
	}
}

.bigglossary,
.bigglossary *,
.bigglossary *::before,
.bigglossary *::after,
.bigglossary-definition,
.bigglossary-back a {
	box-sizing: border-box;
}

/* Per `hidden`-Attribut ausgeblendet = wirklich weg, egal was das Theme mit display macht. */
.bigglossary [hidden] {
	display: none !important;
}

.bigglossary-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Kurzformen für die Design-Faktoren der Übersicht (Schriftgröße, Abstände). */
.bigglossary {
	--bigglossary-s: var(--bigglossary-scale, 1);
	--bigglossary-sp: var(--bigglossary-space, 1);
}

.bigglossary {
	margin: calc(1.5rem * var(--bigglossary-sp)) 0;
	font: inherit;
	/* Nach „font“ (die Kurzform setzt die Schriftart zurück): Schrift, Größe und Farbe aus dem Design-Tab. */
	font-family: var(--bigglossary-font, inherit);
	font-size: calc(1em * var(--bigglossary-s));
	color: var(--bigglossary-text, inherit);
	scroll-margin-top: 1rem;
}

/* ==========================================================================
   2. Übersicht: Werkzeugleiste
   ========================================================================== */

.bigglossary .bigglossary__toolbar {
	display: flex;
	flex-direction: column;
	gap: calc(1rem * var(--bigglossary-sp));
	margin: 0 0 calc(2rem * var(--bigglossary-sp));
}

/* Suchfeld ------------------------------------------------------------- */

.bigglossary .bigglossary__search {
	position: relative;
	width: 100%;
	max-width: calc(28rem * var(--bigglossary-s));
	margin: 0;
}

.bigglossary .bigglossary__search-icon {
	position: absolute;
	top: 50%;
	left: calc(1rem * var(--bigglossary-s));
	width: calc(1.25rem * var(--bigglossary-s));
	height: calc(1.25rem * var(--bigglossary-s));
	margin: 0;
	transform: translateY(-50%);
	color: var(--bigglossary-muted);
	pointer-events: none;
	transition: color 0.15s ease;
}

.bigglossary .bigglossary__search:focus-within .bigglossary__search-icon {
	color: var(--bigglossary-accent-text);
}

.bigglossary .bigglossary__input {
	display: block;
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: calc(3.25rem * var(--bigglossary-s));
	min-height: 0;
	margin: 0;
	padding: 0 calc(1rem * var(--bigglossary-s)) 0 calc(3rem * var(--bigglossary-s));
	border: 2px solid var(--bigglossary-field);
	border-radius: var(--bigglossary-radius);
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-size: calc(1rem * var(--bigglossary-s));
	font-weight: 500;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bigglossary .bigglossary__input::placeholder {
	color: var(--bigglossary-muted);
	opacity: 1;
}

.bigglossary .bigglossary__input:hover {
	border-color: var(--bigglossary-accent);
}

.bigglossary .bigglossary__input:focus,
.bigglossary .bigglossary__input:focus-visible {
	border-color: var(--bigglossary-accent);
	outline: 2px solid var(--bigglossary-accent);
	outline-offset: 2px;
	box-shadow: none;
}

.bigglossary .bigglossary__input::-webkit-search-decoration {
	-webkit-appearance: none;
}

/* Lösch-Kreuz des Browsers (Chromium/Safari) in Textfarbe statt Systemblau. */
.bigglossary .bigglossary__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	width: calc(1.25rem * var(--bigglossary-s));
	height: calc(1.25rem * var(--bigglossary-s));
	margin: 0 -0.25rem 0 0.5rem;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 65% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 65% no-repeat;
	opacity: 0.6;
	cursor: pointer;
}

.bigglossary .bigglossary__input::-webkit-search-cancel-button:hover {
	opacity: 1;
}

/* A–Z-Leiste ------------------------------------------------------------ */

.bigglossary .bigglossary__nav {
	margin: 0;
}

.bigglossary .bigglossary__letters {
	display: flex;
	flex-wrap: wrap;
	gap: calc(0.375rem * var(--bigglossary-sp));
	margin: 0;
	padding: 0;
	list-style: none;
}

.bigglossary .bigglossary__letters > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bigglossary .bigglossary__letters > li::marker {
	content: none;
}

/* Kachel: <a> (ohne JS, Sprungmarke) und <button> (mit JS, Filter). */
.bigglossary .bigglossary__letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	-webkit-appearance: none;
	appearance: none;
	min-width: calc(2.5rem * var(--bigglossary-s));
	height: calc(2.5rem * var(--bigglossary-s));
	margin: 0;
	padding: 0 0.5rem;
	border: 2px solid var(--bigglossary-line);
	border-radius: var(--bigglossary-radius-sm);
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-size: calc(1rem * var(--bigglossary-s));
	font-weight: 800;
	line-height: 1;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

/* „Alle“ ist ein Wort, kein Buchstabe: etwas mehr Luft. */
.bigglossary .bigglossary__letter--all {
	padding: 0 calc(1rem * var(--bigglossary-s));
}

.bigglossary .bigglossary__letter:hover {
	border-color: var(--bigglossary-accent);
	background: transparent;
	color: inherit;
	text-decoration: none;
	transform: translateY(-1px);
}

@supports (color: color-mix(in srgb, red 10%, transparent)) {
	.bigglossary .bigglossary__letter:hover {
		background: color-mix(in srgb, var(--bigglossary-accent) 12%, transparent);
	}
}

.bigglossary .bigglossary__letter:focus-visible {
	outline: 2px solid var(--bigglossary-accent);
	outline-offset: 2px;
}

/* Aktiv: das Logo-Kachel-Motiv – Anthrazit, orangener Rahmen, weißer Buchstabe. */
.bigglossary .bigglossary__letter[aria-pressed="true"],
.bigglossary .bigglossary__letter[aria-pressed="true"]:hover {
	border-color: var(--bigglossary-accent);
	background: var(--bigglossary-dark);
	color: #fff;
	transform: none;
}

/* Leerer Buchstabe (letters="all"). */
.bigglossary .bigglossary__letter.is-disabled,
.bigglossary .bigglossary__letter:disabled {
	border-color: var(--bigglossary-line);
	background: transparent;
	color: inherit;
	opacity: 0.35;
	cursor: default;
	transform: none;
}

/* Touch-Geräte: Kacheln auf 44px Zielgröße. */
@media (pointer: coarse) {
	.bigglossary .bigglossary__letter {
		min-width: calc(2.75rem * var(--bigglossary-s));
		height: calc(2.75rem * var(--bigglossary-s));
	}
}

/* Helle Kacheln (Design → Buchstaben-Kacheln; im Whitelabel-Modus der Standard): Klasse bigglossary--neutral. */
.bigglossary.bigglossary--neutral .bigglossary__letter[aria-pressed="true"],
.bigglossary.bigglossary--neutral .bigglossary__letter[aria-pressed="true"]:hover {
	background: var(--bigglossary-accent);
	color: var(--bigglossary-on-accent);
}

.bigglossary.bigglossary--neutral .bigglossary__tile {
	border-width: 2px;
	background: #fff;
	background: color-mix(in srgb, var(--bigglossary-accent) 10%, #fff);
	color: var(--bigglossary-accent-text);
}

/* Ergebnis-/Leer-Hinweis -------------------------------------------------- */

.bigglossary .bigglossary__empty {
	margin: 0;
	padding: 2rem 1.5rem;
	border: 2px dashed var(--bigglossary-line);
	border-radius: var(--bigglossary-radius-lg);
	color: var(--bigglossary-muted);
	font-weight: 600;
	text-align: center;
}

/* ==========================================================================
   3. Übersicht: Buchstaben-Blöcke und Begriffe
   ========================================================================== */

/*
 * Spalten: --bigglossary-columns ist die Obergrenze. column-width sorgt dafür, dass
 * es in schmalen Theme-Containern automatisch weniger Spalten werden.
 */
.bigglossary .bigglossary__body {
	column-count: var(--bigglossary-columns, 3);
	column-width: 13rem;
	column-gap: calc(2.5rem * var(--bigglossary-sp));
}

@media (max-width: 1024px) {
	.bigglossary .bigglossary__body {
		column-count: min(var(--bigglossary-columns, 3), 2);
	}
}

@media (max-width: 640px) {
	.bigglossary .bigglossary__body {
		column-count: 1;
		column-width: auto;
	}
}

.bigglossary .bigglossary__block {
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
	margin: 0 0 calc(2rem * var(--bigglossary-sp));
	padding: 0;
	scroll-margin-top: 1.5rem;
}

/* Überschrift = Buchstaben-Kachel + feine Trennlinie. */
.bigglossary .bigglossary__heading {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin: 0 0 calc(0.75rem * var(--bigglossary-sp));
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
}

.bigglossary .bigglossary__heading::before {
	content: none;
}

.bigglossary .bigglossary__heading::after {
	content: "";
	flex: 1 1 auto;
	height: 2px;
	border-radius: 2px;
	background: var(--bigglossary-line);
}

.bigglossary .bigglossary__tile {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: calc(2.75rem * var(--bigglossary-s));
	height: calc(2.75rem * var(--bigglossary-s));
	border: 3px solid var(--bigglossary-accent);
	border-radius: var(--bigglossary-radius);
	background: var(--bigglossary-dark);
	color: var(--bigglossary-accent-on-dark, var(--bigglossary-accent));
	font-size: calc(1.375rem * var(--bigglossary-s));
	font-weight: 900;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
}

/* Nur ein Buchstabe gewählt: die Begriffe dieses Buchstabens auf die Spalten verteilen. */
.bigglossary.is-single-letter .bigglossary__body {
	column-count: 1;
}

.bigglossary.is-single-letter .bigglossary__list {
	column-count: var(--bigglossary-columns, 3);
	column-width: 13rem;
	column-gap: calc(2.5rem * var(--bigglossary-sp));
}

.bigglossary.is-single-letter .bigglossary__item {
	break-inside: avoid;
}

@media (max-width: 640px) {
	.bigglossary.is-single-letter .bigglossary__list {
		column-count: 1;
	}
}

/* Begriffsliste ------------------------------------------------------------ */

.bigglossary .bigglossary__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bigglossary .bigglossary__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bigglossary .bigglossary__item::marker {
	content: none;
}

.bigglossary .bigglossary__term {
	display: inline-block;
	padding: calc(0.25rem * var(--bigglossary-sp)) 0;
	color: inherit;
	font-weight: var(--bigglossary-term-weight, 600);
	line-height: 1.4;
	text-decoration: none;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.bigglossary .bigglossary__term:hover,
.bigglossary .bigglossary__term:focus-visible {
	color: var(--bigglossary-accent-text);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.bigglossary .bigglossary__term:focus-visible {
	border-radius: 4px;
	outline: 2px solid var(--bigglossary-accent);
	outline-offset: 2px;
}

.bigglossary .bigglossary__def {
	margin: 0 0 calc(0.5rem * var(--bigglossary-sp));
	padding: 0;
	color: #57534e;
	color: var(--bigglossary-muted);
	font-size: calc(0.875rem * var(--bigglossary-s));
	line-height: 1.5;
}

.bigglossary .bigglossary__item + .bigglossary__item {
	margin-top: calc(0.125rem * var(--bigglossary-sp));
}

@media (max-width: 640px) {
	.bigglossary .bigglossary__term {
		padding: calc(0.375rem * var(--bigglossary-sp)) 0;
	}
}

/* ==========================================================================
   4. Automatische Links
   ========================================================================== */

/*
 * Verdoppelte Klasse = Spezifität (0,2,1): Themes, die Links in Inhalten wie Buttons
 * stylen (Hintergrund, Rahmen, Padding …), sollen die Fachbegriffe nicht verformen.
 */
a.bigglossary-link.bigglossary-link {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--bigglossary-accent-text);
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	/* Unterstreichung laut Design → „Links im Text“; bei Hover/Fokus immer durchgezogen. */
	text-decoration-line: var(--bigglossary-link-line, underline);
	text-decoration-style: var(--bigglossary-link-style, dotted);
	text-decoration-color: currentColor;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

a.bigglossary-link.bigglossary-link:visited {
	color: var(--bigglossary-accent-text);
}

a.bigglossary-link.bigglossary-link:hover,
a.bigglossary-link.bigglossary-link:focus {
	background: none;
	color: var(--bigglossary-accent-text);
	text-decoration-line: underline;
	text-decoration-style: solid;
}

a.bigglossary-link.bigglossary-link:focus-visible {
	border-radius: 3px;
	outline: 2px solid var(--bigglossary-accent);
	outline-offset: 2px;
}

/* ==========================================================================
   5. Tooltip (ein gemeinsames Element, per JS positioniert)
   ========================================================================== */

.bigglossary-tooltip {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	box-sizing: border-box;
	width: max-content;
	max-width: min(320px, calc(100vw - 16px));
	margin: 0;
	padding: 0.75rem 1rem 0.875rem;
	border: 0;
	border-top: 3px solid var(--bigglossary-accent);
	border-radius: var(--bigglossary-radius);
	background: var(--bigglossary-dark);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.2);
	color: #fff;
	font-family: var(--bigglossary-font, inherit);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}

.bigglossary-tooltip[data-placement="bottom"] {
	transform: translateY(-4px);
}

.bigglossary-tooltip.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.bigglossary-tooltip *,
.bigglossary-tooltip *::before,
.bigglossary-tooltip *::after {
	box-sizing: border-box;
}

/* Das hidden-Attribut (leerer Titel) soll gegen display:block gewinnen. */
.bigglossary-tooltip [hidden] {
	display: none !important;
}

.bigglossary-tooltip__title {
	display: block;
	margin: 0 0 0.25rem;
	color: var(--bigglossary-accent-on-dark, var(--bigglossary-accent));
	font-size: 0.9375rem;
	font-weight: 800;
	line-height: 1.3;
}

.bigglossary-tooltip__text {
	display: block;
	margin: 0;
	color: #fff;
}

/* Button „Begriff öffnen“ */
.bigglossary-tooltip .bigglossary-tooltip__more {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin: 0.625rem 0 0;
	padding: 0.3rem 0.75rem;
	border: 2px solid var(--bigglossary-accent-on-dark, var(--bigglossary-accent));
	border-radius: var(--bigglossary-radius-pill);
	background: transparent;
	color: var(--bigglossary-accent-on-dark, var(--bigglossary-accent));
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
}

.bigglossary-tooltip .bigglossary-tooltip__more:hover,
.bigglossary-tooltip .bigglossary-tooltip__more:focus-visible {
	background: var(--bigglossary-accent-on-dark, var(--bigglossary-accent));
	color: var(--bigglossary-dark);
	text-decoration: none;
}

.bigglossary-tooltip .bigglossary-tooltip__more:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Pfeil: dunkel unter dem Tooltip, orange (wie der obere Rand) über dem Tooltip. */
.bigglossary-tooltip__arrow {
	position: absolute;
	bottom: -8px;
	left: var(--bigglossary-arrow-x, 50%);
	width: 16px;
	height: 8px;
	background: var(--bigglossary-dark);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transform: translateX(-50%);
	pointer-events: none;
}

.bigglossary-tooltip[data-placement="bottom"] .bigglossary-tooltip__arrow {
	top: -11px;
	bottom: auto;
	background: var(--bigglossary-accent);
	clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

/* Helle Variante (Design → Tooltip): weißer Grund, dunkle Schrift, Akzent-Rand oben. */
.bigglossary-tooltip.bigglossary-tooltip--light {
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-top: 3px solid var(--bigglossary-accent);
	background: #fff;
	color: #1c1917;
}

.bigglossary-tooltip--light .bigglossary-tooltip__title {
	color: var(--bigglossary-accent-text);
}

.bigglossary-tooltip--light .bigglossary-tooltip__text {
	color: #1c1917;
}

.bigglossary-tooltip.bigglossary-tooltip--light .bigglossary-tooltip__more {
	border-color: var(--bigglossary-accent-text);
	color: var(--bigglossary-accent-text);
}

.bigglossary-tooltip.bigglossary-tooltip--light .bigglossary-tooltip__more:hover,
.bigglossary-tooltip.bigglossary-tooltip--light .bigglossary-tooltip__more:focus-visible {
	border-color: var(--bigglossary-accent);
	background: var(--bigglossary-accent);
	color: var(--bigglossary-on-accent);
}

.bigglossary-tooltip.bigglossary-tooltip--light .bigglossary-tooltip__more:focus-visible {
	outline-color: var(--bigglossary-accent-text);
}

/* Pfeil unter dem Tooltip: weiß. Über dem Tooltip (Platz nach unten) bleibt er wie beim dunklen Tooltip in der Akzentfarbe – er schließt an den Akzent-Rand an und ist auch auf weißem Grund sichtbar. */
.bigglossary-tooltip--light .bigglossary-tooltip__arrow {
	background: #fff;
}

.bigglossary-tooltip--light[data-placement="bottom"] .bigglossary-tooltip__arrow {
	background: var(--bigglossary-accent);
}

/* Statisch: nur für die Live-Vorschau im Backend – normaler Fluss, sichtbar, Pfeil unten (Standard: Mitte, siehe --bigglossary-arrow-x). */
.bigglossary-tooltip.bigglossary-tooltip--static {
	position: relative;
	top: auto;
	left: auto;
	z-index: auto;
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: none;
}

/* ==========================================================================
   6. Einzelseite: Definition und Rücklink
   ========================================================================== */

.bigglossary-definition {
	margin: 0 0 2rem;
	padding: 1.25rem 1.5rem 1.35rem;
	border-left: 4px solid var(--bigglossary-accent);
	border-radius: var(--bigglossary-radius);
	/* Erst ein fester Wert, dann – wo unterstützt – der Akzentton. */
	background-color: #fff5ed;
	background-color: color-mix(in srgb, var(--bigglossary-accent) 7%, #fff);
	/* Heller Untergrund: Textfarbe fest, damit sie auch in dunklen Themes lesbar bleibt. */
	color: var(--bigglossary-dark);
	font-family: var(--bigglossary-font, inherit);
	font-size: 1.0625rem;
	line-height: 1.65;
}

.bigglossary-definition__label {
	margin: 0 0 0.5rem;
	padding: 0;
	/* Etwas dunkler als accent-text: auf dem Akzentton bleibt es ≥ 4.5:1. */
	color: var(--bigglossary-accent-text);
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.bigglossary-definition p {
	margin: 0 0 0.75em;
}

.bigglossary-definition > :last-child {
	margin-bottom: 0;
}

.bigglossary-definition a {
	color: var(--bigglossary-accent-text);
}

@supports (color: color-mix(in srgb, red 10%, #000)) {
	.bigglossary-definition__label,
	.bigglossary-definition a,
	.bigglossary-definition a.bigglossary-link.bigglossary-link {
		color: color-mix(in srgb, var(--bigglossary-accent-text) 88%, #000);
	}
}

/* Rücklink: kleine Pille mit Pfeil. */
.bigglossary-back {
	margin: 2rem 0 0;
	font-family: var(--bigglossary-font, inherit);
}

/* Doppelte Klasse = höhere Spezifität gegen Theme-Regeln für Links in Inhalten. */
.bigglossary-back.bigglossary-back a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.5rem 1rem 0.5rem 0.875rem;
	border: 2px solid var(--bigglossary-line);
	border-radius: var(--bigglossary-radius-pill);
	background: transparent;
	box-shadow: none;
	color: var(--bigglossary-accent-text);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.bigglossary-back.bigglossary-back a:hover,
.bigglossary-back.bigglossary-back a:focus-visible {
	border-color: var(--bigglossary-accent);
	text-decoration: none;
}

@supports (color: color-mix(in srgb, red 10%, transparent)) {
	.bigglossary-back.bigglossary-back a:hover,
	.bigglossary-back.bigglossary-back a:focus-visible {
		background: color-mix(in srgb, var(--bigglossary-accent) 8%, transparent);
	}
}

.bigglossary-back.bigglossary-back a:focus-visible {
	outline: 2px solid var(--bigglossary-accent);
	outline-offset: 2px;
}

.bigglossary-back__arrow {
	display: inline-block;
	font-size: 1.125em;
	line-height: 1;
	transition: transform 0.15s ease;
}

.bigglossary-back a:hover .bigglossary-back__arrow,
.bigglossary-back a:focus-visible .bigglossary-back__arrow {
	transform: translateX(-3px);
}

/* ==========================================================================
   7. Reduzierte Bewegung, Druck
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.bigglossary .bigglossary__letter,
	.bigglossary .bigglossary__input,
	.bigglossary .bigglossary__search-icon,
	.bigglossary-tooltip,
	.bigglossary-back.bigglossary-back a,
	.bigglossary-back__arrow {
		transition: none;
	}

	.bigglossary .bigglossary__letter:hover,
	.bigglossary-back a:hover .bigglossary-back__arrow,
	.bigglossary-back a:focus-visible .bigglossary-back__arrow {
		transform: none;
	}

	.bigglossary-tooltip,
	.bigglossary-tooltip[data-placement="bottom"] {
		transform: none;
	}
}

@media print {
	/* Alles zeigen, Bedienelemente weglassen. */
	.bigglossary .bigglossary__toolbar,
	.bigglossary .bigglossary__status,
	.bigglossary-tooltip,
	.bigglossary-back {
		display: none !important;
	}

	.bigglossary .bigglossary__block[hidden] {
		display: block !important;
	}

	.bigglossary .bigglossary__item[hidden] {
		display: block !important;
	}

	.bigglossary .bigglossary__body {
		column-count: 2;
		column-gap: 1.5rem;
	}

	/* Hintergründe werden oft nicht gedruckt – Kachel und Box bleiben lesbar. */
	.bigglossary .bigglossary__tile {
		border-color: #000;
		background: none;
		color: #000;
	}

	.bigglossary .bigglossary__term,
	a.bigglossary-link.bigglossary-link {
		color: inherit;
		text-decoration: none;
	}

	.bigglossary-definition {
		border: 1px solid #000;
		border-left-width: 4px;
		background: none;
		color: #000;
	}

	.bigglossary-definition__label,
	.bigglossary-definition a {
		color: #000;
	}
}


/* ==========================================================================
   9. Dunkle bzw. kontrastarme Hintergründe
   .bigglossary-on-dark / -on-light setzt das Script („Automatisch“),
   body.bigglossary-dark kommt von der Einstellung „Dunkel“.
   ========================================================================== */

.bigglossary.bigglossary-on-dark,
body.bigglossary-dark .bigglossary {
	--bigglossary-line: rgba(255, 255, 255, 0.22);
	--bigglossary-muted: rgba(255, 255, 255, 0.72);
	--bigglossary-field: rgba(255, 255, 255, 0.45);
	color: var(--bigglossary-text, #f5f5f4);
}

.bigglossary.bigglossary-on-dark .bigglossary__term:hover,
.bigglossary.bigglossary-on-dark .bigglossary__term:focus-visible,
.bigglossary.bigglossary-on-dark .bigglossary__search:focus-within .bigglossary__search-icon,
body.bigglossary-dark .bigglossary .bigglossary__term:hover,
body.bigglossary-dark .bigglossary .bigglossary__term:focus-visible,
body.bigglossary-dark .bigglossary .bigglossary__search:focus-within .bigglossary__search-icon {
	color: var(--bigglossary-accent-on-dark, var(--bigglossary-accent));
}

.bigglossary.bigglossary-on-light {
	--bigglossary-line: rgba(28, 25, 23, 0.16);
	--bigglossary-muted: rgba(28, 25, 23, 0.72);
	--bigglossary-field: rgba(28, 25, 23, 0.55);
	color: var(--bigglossary-text, #1c1917);
}

a.bigglossary-link.bigglossary-link.bigglossary-on-dark,
a.bigglossary-link.bigglossary-link.bigglossary-on-dark:visited,
a.bigglossary-link.bigglossary-link.bigglossary-on-dark:hover,
a.bigglossary-link.bigglossary-link.bigglossary-on-dark:focus,
body.bigglossary-dark a.bigglossary-link.bigglossary-link:not(.bigglossary-definition a) {
	color: var(--bigglossary-accent-on-dark, var(--bigglossary-accent));
}

.bigglossary-back.bigglossary-on-dark a,
body.bigglossary-dark .bigglossary-back.bigglossary-back a {
	--bigglossary-line: rgba(255, 255, 255, 0.28);
	color: var(--bigglossary-accent-on-dark, var(--bigglossary-accent));
}