/* Linkliste
   Anpassbar über die Custom Properties unter .link-list
   Hinweis: erhöhte Spezifität (ul.link-list) gegen Theme-Defaults, z. B. Enfold */

ul.link-list {
	--ll-bg: #f4f5f7;
	--ll-text: #2b2545;
	--ll-arrow: #8a8a9a;
	--ll-accent: #ff5a1f;
	--ll-border: transparent;
	--ll-radius: 10px;
	--ll-gap: 12px;
	--ll-padding-y: 18px;
	--ll-padding-x: 24px;

	list-style: none;
	list-style-type: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ll-gap);
}

/* Enfold & Co. setzen Bullets teils über ::before oder list-style auf dem LI */
ul.link-list > li.link-list__item {
	list-style: none;
	list-style-type: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

ul.link-list > li.link-list__item::before,
ul.link-list > li.link-list__item::marker {
	content: none;
	display: none;
}

ul.link-list > li.link-list__item > a.link-list__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: var(--ll-padding-y) var(--ll-padding-x);
	background: var(--ll-bg);
	border: 1px solid var(--ll-border);
	border-radius: var(--ll-radius);
	color: var(--ll-text);
	text-decoration: none;
	line-height: 1.4;
	transition: filter 0.2s ease, color 0.2s ease;
}

ul.link-list > li.link-list__item > a.link-list__link:hover,
ul.link-list > li.link-list__item > a.link-list__link:focus,
ul.link-list > li.link-list__item > a.link-list__link:focus-visible,
ul.link-list > li.link-list__item > a.link-list__link:visited {
	color: var(--ll-text);
	text-decoration: none;
}

ul.link-list > li.link-list__item > a.link-list__link:hover,
ul.link-list > li.link-list__item > a.link-list__link:focus-visible {
	filter: brightness(0.96);
}

ul.link-list > li.link-list__item > a.link-list__link:focus-visible {
	outline: 2px solid var(--ll-accent);
	outline-offset: 2px;
}

.link-list__label {
	flex: 1 1 auto;
}

.link-list__arrow {
	flex: 0 0 auto;
	color: var(--ll-arrow);
	transition: color 0.2s ease, transform 0.2s ease;
}

a.link-list__link:hover .link-list__arrow,
a.link-list__link:focus-visible .link-list__arrow {
	color: var(--ll-accent);
	transform: translateX(4px);
}

/* Aktiver Eintrag (aktuelle Seite) */
ul.link-list > li.link-list__item.is-active .link-list__arrow {
	color: var(--ll-accent);
}

/* ---------------------------------------------------------------------------
   Farbvarianten
   Vordefiniert:  [link_item variant="accent"]
   Frei:          [link_item bg="#fdefe6" color="#d2601a" border="#f3c9ad"]
                  (setzt die Custom Properties inline auf dem LI)
   --------------------------------------------------------------------------- */

ul.link-list > li.link-list__item--accent {
	--ll-bg: #fdefe6;
	--ll-text: #d2601a;
	--ll-arrow: #d2601a;
	--ll-border: #f5cdb0;
}

ul.link-list > li.link-list__item--muted {
	--ll-bg: #f7f7f8;
	--ll-text: #6b6b7b;
	--ll-arrow: #a0a0ae;
	--ll-border: transparent;
}

ul.link-list > li.link-list__item--outline {
	--ll-bg: #fff;
	--ll-border: #dcdde3;
}

/* Textfarbe der Varianten gegen Theme-Defaults durchsetzen */
ul.link-list > li.link-list__item[class*="link-list__item--"] > a.link-list__link,
ul.link-list > li.link-list__item[style] > a.link-list__link,
ul.link-list > li.link-list__item[class*="link-list__item--"] > a.link-list__link:hover,
ul.link-list > li.link-list__item[style] > a.link-list__link:hover,
ul.link-list > li.link-list__item[class*="link-list__item--"] > a.link-list__link:visited,
ul.link-list > li.link-list__item[style] > a.link-list__link:visited {
	color: var(--ll-text);
}

ul.link-list > li.link-list__item[class*="link-list__item--"] .link-list__arrow,
ul.link-list > li.link-list__item[style] .link-list__arrow {
	color: var(--ll-arrow);
}

/* Optionale Variante: zweispaltig ab Tablet
   Nutzung: [link_list class="link-list--cols"] */
@media (min-width: 768px) {
	ul.link-list.link-list--cols {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	ul.link-list > li.link-list__item > a.link-list__link,
	.link-list__arrow {
		transition: none;
		transform: none;
	}
}