/* LSM Datenschutz Accordion – Frontend */

.lsm-dse {
	/* Farben */
	--lsm-dse-accent: #004898;
	--lsm-dse-number: var(--lsm-dse-accent);
	--lsm-dse-border: rgba(0, 0, 0, .12);
	--lsm-dse-bg: transparent;
	--lsm-dse-bg-hover: rgba(0, 0, 0, .03);
	--lsm-dse-text: inherit;
	--lsm-dse-link: var(--lsm-dse-accent);
	--lsm-dse-title-color-open: var(--lsm-dse-accent);
	--lsm-dse-toc-bg: transparent;
	--lsm-dse-toc-border: var(--lsm-dse-border);

	/* Typografie – Überschriften je Ebene */
	--lsm-dse-h1-font: inherit;
	--lsm-dse-h1-size: 1.6rem;
	--lsm-dse-h1-weight: 700;
	--lsm-dse-h1-lh: 1.3;
	--lsm-dse-h1-ls: normal;
	--lsm-dse-h1-tt: none;
	--lsm-dse-h1-color: inherit;
	--lsm-dse-h1-mt: 1.4em;
	--lsm-dse-h1-mb: .5em;
	--lsm-dse-h2-font: inherit;
	--lsm-dse-h2-size: clamp(1rem, 1.6vw, 1.2rem);
	--lsm-dse-h2-weight: 600;
	--lsm-dse-h2-lh: 1.35;
	--lsm-dse-h2-ls: normal;
	--lsm-dse-h2-tt: none;
	--lsm-dse-h2-color: inherit;
	--lsm-dse-h2-mt: 1.4em;
	--lsm-dse-h2-mb: .5em;
	--lsm-dse-h3-font: inherit;
	--lsm-dse-h3-size: 1.02em;
	--lsm-dse-h3-weight: 700;
	--lsm-dse-h3-lh: 1.4;
	--lsm-dse-h3-ls: normal;
	--lsm-dse-h3-tt: none;
	--lsm-dse-h3-color: inherit;
	--lsm-dse-h3-mt: 1.4em;
	--lsm-dse-h3-mb: .4em;
	--lsm-dse-h4-font: inherit;
	--lsm-dse-h4-size: 1em;
	--lsm-dse-h4-weight: 700;
	--lsm-dse-h4-lh: 1.4;
	--lsm-dse-h4-ls: normal;
	--lsm-dse-h4-tt: none;
	--lsm-dse-h4-color: inherit;
	--lsm-dse-h4-mt: 1.2em;
	--lsm-dse-h4-mb: .35em;
	--lsm-dse-h5-font: inherit;
	--lsm-dse-h5-size: .95em;
	--lsm-dse-h5-weight: 700;
	--lsm-dse-h5-lh: 1.4;
	--lsm-dse-h5-ls: normal;
	--lsm-dse-h5-tt: none;
	--lsm-dse-h5-color: inherit;
	--lsm-dse-h5-mt: 1.2em;
	--lsm-dse-h5-mb: .35em;
	--lsm-dse-h6-font: inherit;
	--lsm-dse-h6-size: .9em;
	--lsm-dse-h6-weight: 700;
	--lsm-dse-h6-lh: 1.4;
	--lsm-dse-h6-ls: normal;
	--lsm-dse-h6-tt: none;
	--lsm-dse-h6-color: inherit;
	--lsm-dse-h6-mt: 1.2em;
	--lsm-dse-h6-mb: .35em;

	/* Typografie – Fließtext */
	--lsm-dse-body-font: inherit;
	--lsm-dse-body-size: inherit;
	--lsm-dse-body-lh: inherit;
	--lsm-dse-toc-size: inherit;

	/* Abstände & Rahmen */
	--lsm-dse-offset: 0px;
	--lsm-dse-radius: 6px;
	--lsm-dse-border-width: 1px;
	--lsm-dse-row-padding: .95em;
	--lsm-dse-content-width: none;
	--lsm-dse-gap: .5rem;

	margin: 0 0 2rem;
}

/* ---------- Inhaltsverzeichnis ---------- */

.lsm-dse__toc {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: var(--lsm-dse-border-width) solid var(--lsm-dse-toc-border);
	border-radius: var(--lsm-dse-radius);
	background: var(--lsm-dse-toc-bg);
	font-size: var(--lsm-dse-toc-size);
}

.lsm-dse__toc-title {
	margin: 0 0 .5rem;
	font-weight: 700;
}

.lsm-dse__toc-list {
	margin: 0;
	padding-left: 1.5rem;
	columns: 2;
	column-gap: 2rem;
}

@media (max-width: 782px) {
	.lsm-dse__toc-list {
		columns: 1;
	}
}

.lsm-dse__toc-item {
	margin: 0 0 .25rem;
	break-inside: avoid;
}

.lsm-dse__toc-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.lsm-dse__toc-link:hover,
.lsm-dse__toc-link:focus-visible {
	color: var(--lsm-dse-accent);
	border-bottom-color: currentColor;
}

/* ---------- Werkzeugleiste ---------- */

.lsm-dse__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lsm-dse-gap);
	margin: 0 0 1rem;
}

.lsm-dse__toggle-all {
	appearance: none;
	background: none;
	border: 1px solid var(--lsm-dse-border);
	border-radius: var(--lsm-dse-radius);
	padding: .4em .9em;
	font: inherit;
	font-size: .9em;
	color: inherit;
	cursor: pointer;
}

.lsm-dse__toggle-all:hover,
.lsm-dse__toggle-all:focus-visible {
	border-color: var(--lsm-dse-accent);
	color: var(--lsm-dse-accent);
}

.lsm-dse__search {
	flex: 1 1 14rem;
}

.lsm-dse__search-input {
	width: 100%;
	box-sizing: border-box;
	padding: .45em .8em;
	font: inherit;
	font-size: .95em;
	border: 1px solid var(--form_border_color, var(--lsm-dse-border));
	border-radius: var(--lsm-dse-radius);
	background: var(--form_bg_color, #fff);
	color: inherit;
}

.lsm-dse__no-results {
	margin: 0 0 1rem;
	font-style: italic;
	opacity: .8;
}

/* ---------- Accordion ---------- */

.lsm-dse__list {
	counter-reset: lsm-dse-section;
	border-top: var(--lsm-dse-border-width) solid var(--lsm-dse-border);
}

.lsm-dse__item {
	border-bottom: var(--lsm-dse-border-width) solid var(--lsm-dse-border);
	background: var(--lsm-dse-bg);
	scroll-margin-top: var(--lsm-dse-measured, calc(var(--lsm-dse-offset) + 24px));
}

.lsm-dse--numbered .lsm-dse__item {
	counter-increment: lsm-dse-section;
	counter-reset: lsm-dse-sub;
}

.lsm-dse__item[hidden] {
	display: none;
}

.lsm-dse__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: var(--lsm-dse-row-padding) 1em var(--lsm-dse-row-padding) 0;
	cursor: pointer;
	list-style: none;
	transition: background-color .15s ease;
}

.lsm-dse__summary::-webkit-details-marker {
	display: none;
}

.lsm-dse__summary:hover {
	background: var(--lsm-dse-bg-hover);
}

.lsm-dse__summary:focus-visible {
	outline: 2px solid var(--lsm-dse-accent);
	outline-offset: -2px;
}

.lsm-dse__title {
	margin: 0;
	padding: 0 0 0 1em;
	display: inline;
}

.lsm-dse--numbered .lsm-dse__title::before {
	content: counter(lsm-dse-section) ". ";
	color: var(--lsm-dse-number);
	font-variant-numeric: tabular-nums;
}

.lsm-dse__item[open] > .lsm-dse__summary .lsm-dse__title {
	color: var(--lsm-dse-title-color-open);
}

.lsm-dse__icon {
	flex: 0 0 auto;
	width: 1.4em;
	height: 1.4em;
	position: relative;
	margin-right: .25em;
}

.lsm-dse__icon::before,
.lsm-dse__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: .8em;
	height: 2px;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform .2s ease, opacity .2s ease;
}

.lsm-dse__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.lsm-dse__item[open] .lsm-dse__icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0;
}

/* Symbolvarianten: Chevron */

.lsm-dse--icon-chevron .lsm-dse__icon::before,
.lsm-dse--icon-chevron .lsm-dse__icon::after {
	width: .55em;
	height: 2px;
}

.lsm-dse--icon-chevron .lsm-dse__icon::before {
	transform: translate(-85%, -50%) rotate(45deg);
}

.lsm-dse--icon-chevron .lsm-dse__icon::after {
	transform: translate(-15%, -50%) rotate(-45deg);
	opacity: 1;
}

.lsm-dse--icon-chevron .lsm-dse__item[open] .lsm-dse__icon::before,
.lsm-dse--icon-chevron .lsm-dse__item[open] .lsm-dse__icon::after {
	opacity: 1;
}

.lsm-dse--icon-chevron .lsm-dse__item[open] .lsm-dse__icon::before {
	transform: translate(-85%, -50%) rotate(-45deg);
}

.lsm-dse--icon-chevron .lsm-dse__item[open] .lsm-dse__icon::after {
	transform: translate(-15%, -50%) rotate(45deg);
}

/* Symbolvarianten: Dreieck */

.lsm-dse--icon-triangle .lsm-dse__icon::before {
	width: 0;
	height: 0;
	background: none;
	border-left: .38em solid transparent;
	border-right: .38em solid transparent;
	border-top: .45em solid currentColor;
	transform: translate(-50%, -50%);
}

.lsm-dse--icon-triangle .lsm-dse__icon::after {
	display: none;
}

.lsm-dse--icon-triangle .lsm-dse__item[open] .lsm-dse__icon::before {
	transform: translate(-50%, -50%) rotate(180deg);
}

.lsm-dse__content {
	padding: 0 1em 1.5em 1em;
	max-width: var(--lsm-dse-content-width);
	font-family: var(--lsm-dse-body-font);
	font-size: var(--lsm-dse-body-size);
	line-height: var(--lsm-dse-body-lh);
	color: var(--lsm-dse-text);
}

.lsm-dse__content > *:first-child {
	margin-top: 0;
}

/* ---------- Überschriften H1–H6 ---------- */

.lsm-dse h1 {
	font-family: var(--lsm-dse-h1-font);
	font-size: var(--lsm-dse-h1-size);
	font-weight: var(--lsm-dse-h1-weight);
	line-height: var(--lsm-dse-h1-lh);
	letter-spacing: var(--lsm-dse-h1-ls);
	text-transform: var(--lsm-dse-h1-tt);
	color: var(--lsm-dse-h1-color);
}

.lsm-dse__content h1 {
	margin: var(--lsm-dse-h1-mt) 0 var(--lsm-dse-h1-mb);
}

.lsm-dse h2 {
	font-family: var(--lsm-dse-h2-font);
	font-size: var(--lsm-dse-h2-size);
	font-weight: var(--lsm-dse-h2-weight);
	line-height: var(--lsm-dse-h2-lh);
	letter-spacing: var(--lsm-dse-h2-ls);
	text-transform: var(--lsm-dse-h2-tt);
	color: var(--lsm-dse-h2-color);
}

.lsm-dse__content h2 {
	margin: var(--lsm-dse-h2-mt) 0 var(--lsm-dse-h2-mb);
}

.lsm-dse h3 {
	font-family: var(--lsm-dse-h3-font);
	font-size: var(--lsm-dse-h3-size);
	font-weight: var(--lsm-dse-h3-weight);
	line-height: var(--lsm-dse-h3-lh);
	letter-spacing: var(--lsm-dse-h3-ls);
	text-transform: var(--lsm-dse-h3-tt);
	color: var(--lsm-dse-h3-color);
}

.lsm-dse__content h3 {
	margin: var(--lsm-dse-h3-mt) 0 var(--lsm-dse-h3-mb);
}

.lsm-dse h4 {
	font-family: var(--lsm-dse-h4-font);
	font-size: var(--lsm-dse-h4-size);
	font-weight: var(--lsm-dse-h4-weight);
	line-height: var(--lsm-dse-h4-lh);
	letter-spacing: var(--lsm-dse-h4-ls);
	text-transform: var(--lsm-dse-h4-tt);
	color: var(--lsm-dse-h4-color);
}

.lsm-dse__content h4 {
	margin: var(--lsm-dse-h4-mt) 0 var(--lsm-dse-h4-mb);
}

.lsm-dse h5 {
	font-family: var(--lsm-dse-h5-font);
	font-size: var(--lsm-dse-h5-size);
	font-weight: var(--lsm-dse-h5-weight);
	line-height: var(--lsm-dse-h5-lh);
	letter-spacing: var(--lsm-dse-h5-ls);
	text-transform: var(--lsm-dse-h5-tt);
	color: var(--lsm-dse-h5-color);
}

.lsm-dse__content h5 {
	margin: var(--lsm-dse-h5-mt) 0 var(--lsm-dse-h5-mb);
}

.lsm-dse h6 {
	font-family: var(--lsm-dse-h6-font);
	font-size: var(--lsm-dse-h6-size);
	font-weight: var(--lsm-dse-h6-weight);
	line-height: var(--lsm-dse-h6-lh);
	letter-spacing: var(--lsm-dse-h6-ls);
	text-transform: var(--lsm-dse-h6-tt);
	color: var(--lsm-dse-h6-color);
}

.lsm-dse__content h6 {
	margin: var(--lsm-dse-h6-mt) 0 var(--lsm-dse-h6-mb);
}

.lsm-dse--numbered .lsm-dse__content h3 {
	counter-increment: lsm-dse-sub;
}

.lsm-dse--numbered .lsm-dse__content h3::before {
	content: counter(lsm-dse-section) "." counter(lsm-dse-sub) " ";
	color: var(--lsm-dse-number);
	font-variant-numeric: tabular-nums;
}

.lsm-dse__content ul {
	margin: .5em 0 1em;
	padding-left: 1.4em;
}

.lsm-dse__content li {
	margin: 0 0 .3em;
}

.lsm-dse__content a {
	color: var(--lsm-dse-link);
	word-break: break-word;
}

/* ---------- Kopier-Link ---------- */

.lsm-dse__permalink {
	margin: 0 0 1em;
}

.lsm-dse__copy {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: .82em;
	color: var(--lsm-dse-accent);
	opacity: .75;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.lsm-dse__copy:hover,
.lsm-dse__copy:focus-visible {
	opacity: 1;
}

.lsm-dse__copy[data-state="done"] {
	color: #1a7f37;
	text-decoration: none;
}

/* ---------- Hinweis im Backend-Kontext ---------- */

.lsm-dse__empty {
	padding: 1rem;
	border: 1px dashed var(--lsm-dse-border);
	border-radius: var(--lsm-dse-radius);
}

/* ---------- Zugänglichkeit ---------- */

.lsm-dse .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.lsm-dse__item:target > .lsm-dse__summary {
	background: var(--lsm-dse-bg-hover);
}

@media (prefers-reduced-motion: reduce) {
	.lsm-dse * {
		transition: none !important;
	}
}

/* Optional für dunkle Sektionen: [vfl_datenschutz class="lsm-dse--dark"] */
.lsm-dse--dark {
	--lsm-dse-border: rgba(255, 255, 255, .18);
	--lsm-dse-bg-hover: rgba(255, 255, 255, .06);
}

.lsm-dse--dark .lsm-dse__search-input {
	background: rgba(255, 255, 255, .06);
	color: inherit;
}

/* ---------- Druck ---------- */

@media print {

	.lsm-dse__tools,
	.lsm-dse__permalink,
	.lsm-dse__icon {
		display: none !important;
	}

	.lsm-dse__item {
		break-inside: avoid;
	}

	.lsm-dse__summary {
		cursor: auto;
	}
}