/**
 * Fließtext-Widget (#42)
 *
 * Professionelle Typografie mit Token-System, automatischer
 * Erkennung externer Links, Drop Cap, Blockzitate, Callouts,
 * Fußnoten, Spalten-Layout und Print-Optimierung.
 *
 * Dark-Mode: @media (prefers-color-scheme: dark)
 * Reduced Motion: @media (prefers-reduced-motion: reduce)
 */

/* =========================================================
   1. Widget-Scope Custom Properties
   ========================================================= */

.kw-rt {
	--kwl-rt-text-color: var(--kwl-text, #1a202c);
	--kwl-rt-heading-color: var(--kwl-text, #1a202c);
	--kwl-rt-link-color: var(--kwl-primary, #00315d);
	--kwl-rt-link-hover-color: var(--kwl-primary-hover, #1e3a5f);
	--kwl-rt-link-underline-color: var(--kwl-accent, #BD9B5C);
	--kwl-rt-paragraph-spacing: var(--kwl-space-md, 1rem);
	--kwl-rt-dropcap-color: var(--kwl-accent, #BD9B5C);
	--kwl-rt-dropcap-size: 3.2em;
	--kwl-rt-lead-color: var(--kwl-text, #1a202c);
	--kwl-rt-lead-font-size: 1.2em;
	--kwl-rt-quote-accent: var(--kwl-accent, #BD9B5C);
	--kwl-rt-quote-bg: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 6%, var(--kwl-bg, #ffffff));
	--kwl-rt-quote-text: var(--kwl-text, #1a202c);
	--kwl-rt-quote-padding-top: 2em;
	--kwl-rt-quote-border-width: 4px;
	--kwl-rt-list-marker-color: var(--kwl-accent, #BD9B5C);
	--kwl-rt-list-item-spacing: var(--kwl-space-sm, 0.5rem);
	--kwl-rt-footnote-color: var(--kwl-focus, #7B6835);
	--kwl-rt-external-icon-color: var(--kwl-text-muted, #718096);
	--kwl-rt-external-icon-size: 0.75em;
	--kwl-rt-column-gap: var(--kwl-space-xl, 2rem);
	--kwl-rt-column-rule-color: var(--kwl-border, #e2e8f0);
	--kwl-rt-column-rule-width: 1px;
	--kwl-rt-shadow-color: color-mix(in srgb, black 30%, transparent);
	--kwl-rt-shadow-x: 0px;
	--kwl-rt-shadow-y: 1px;
	--kwl-rt-shadow-blur: 3px;
	--kwl-rt-callout-border-width: 4px;
	--kwl-rt-callout-radius: var(--kwl-radius-md, 8px);
	--kwl-rt-divider-color: var(--kwl-accent, #BD9B5C);
	--kwl-rt-divider-width: 2px;
	--kwl-rt-divider-spacing-top: var(--kwl-space-sm, 0.5rem);
	--kwl-rt-divider-spacing-bottom: var(--kwl-space-md, 1rem);
	--kwl-rt-accent-color: var(--kwl-accent, #BD9B5C);
	--kwl-rt-separator-color: var(--kwl-accent, #BD9B5C);
	--kwl-rt-separator-height: 2px;
	--kwl-rt-max-width: 75ch;
	--kwl-rt-radius: 0;
	--kwl-rt-bg: transparent;

	container-type: inline-size;
}

/* =========================================================
   2. Base Layout
   ========================================================= */

.kw-rt {
	display: flex;
	flex-direction: column;
	background: var(--kwl-rt-bg);
	border-radius: var(--kwl-rt-radius);
	align-self: flex-start;
	padding: var(--kwl-space-md, 1rem) var(--kwl-space-lg, 1.5rem);
}

/* =========================================================
   3. Heading
   ========================================================= */

.kw-rt__heading {
	margin: 0 0 var(--kwl-space-sm, 0.5rem) 0;
	font-family: var(--kwl-font-heading);
	font-size: var(--kwl-fsize-h2);
	font-weight: var(--kwl-fw-bold);
	line-height: var(--kwl-lh-heading, 1.2);
	color: var(--kwl-rt-heading-color);
	text-wrap: balance;
}

.kw-rt__heading-text {
	display: contents;
}

.kw-rt__accent {
	color: var(--kwl-rt-accent-color);
}

/* ── Heading Alignment ──────────────────────────────── */

.kw-rt[data-kwl-heading-align="center"] .kw-rt__heading {
	text-align: center;
}

.kw-rt[data-kwl-heading-align="right"] .kw-rt__heading {
	text-align: right;
}

/* ── Heading Deco (Separator unter Überschrift) ─────── */

.kw-rt__heading-deco {
	width: 100%;
	max-width: 80px;
	height: var(--kwl-rt-separator-height);
	border-radius: 1px;
	background: linear-gradient(
		to right,
		var(--kwl-rt-separator-color),
		color-mix(in srgb, var(--kwl-rt-separator-color) 40%, transparent),
		transparent
	);
}

.kw-rt[data-kwl-heading-align="center"] .kw-rt__heading-deco {
	max-width: 120px;
	align-self: center;
	background: linear-gradient(
		to right,
		transparent,
		var(--kwl-rt-separator-color),
		transparent
	);
}

.kw-rt[data-kwl-heading-align="right"] .kw-rt__heading-deco {
	align-self: flex-end;
	background: linear-gradient(
		to left,
		var(--kwl-rt-separator-color),
		color-mix(in srgb, var(--kwl-rt-separator-color) 40%, transparent),
		transparent
	);
}

.kw-rt__ornament {
	display: block;
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	background: var(--kwl-rt-separator-color);
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* ── Stil: Ornamental ───────────────────────────────── */

.kw-rt[data-kwl-heading-style="ornamental"] .kw-rt__heading-deco {
	max-width: 280px;
	display: flex;
	align-items: center;
	gap: var(--kwl-space-sm, 0.5rem);
	background: none;
	height: auto;
}

.kw-rt[data-kwl-heading-style="ornamental"] .kw-rt__heading-deco::before,
.kw-rt[data-kwl-heading-style="ornamental"] .kw-rt__heading-deco::after {
	content: '';
	flex: 1;
	height: 1px;
}

.kw-rt[data-kwl-heading-style="ornamental"] .kw-rt__heading-deco::before {
	background: linear-gradient(to right, transparent, var(--kwl-rt-separator-color));
}

.kw-rt[data-kwl-heading-style="ornamental"] .kw-rt__heading-deco::after {
	background: linear-gradient(to left, transparent, var(--kwl-rt-separator-color));
}

/* ── Stil: Split-Color ──────────────────────────────── */

.kw-rt[data-kwl-heading-style="split-color"] .kw-rt__heading-deco {
	max-width: 100%;
	height: 1px;
	background: var(--kwl-border, #e2e8f0);
}

.kw-rt[data-kwl-heading-style="split-color"][data-kwl-heading-align="center"] .kw-rt__heading-deco,
.kw-rt[data-kwl-heading-style="split-color"][data-kwl-heading-align="right"] .kw-rt__heading-deco {
	background: var(--kwl-border, #e2e8f0);
}

/* ── Stil: Shimmer ──────────────────────────────────── */

.kw-rt[data-kwl-heading-style="shimmer"] .kw-rt__heading {
	color: var(--kwl-rt-accent-color);
}

@supports (background-clip: text) {
	.kw-rt[data-kwl-heading-style="shimmer"] .kw-rt__heading {
		background: linear-gradient(
			105deg,
			var(--kwl-rt-accent-color) 0%,
			var(--kwl-rt-accent-color) 20%,
			color-mix(in srgb, var(--kwl-rt-accent-color) 40%, #fff) 40%,
			color-mix(in srgb, var(--kwl-rt-accent-color) 30%, #fff) 50%,
			color-mix(in srgb, var(--kwl-rt-accent-color) 40%, #fff) 60%,
			var(--kwl-rt-accent-color) 80%,
			var(--kwl-rt-accent-color) 100%
		);
		background-size: 300% 100%;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		animation: kw-rt-shimmer 8s ease-in-out infinite;
	}

	.kw-rt[data-kwl-heading-style="shimmer"] .kw-rt__accent {
		color: transparent;
	}
}

@keyframes kw-rt-shimmer {
	0%,
	100% {
		background-position: 100% 50%;
	}

	50% {
		background-position: 0% 50%;
	}
}

/* ── Stil: Outline ──────────────────────────────────── */

.kw-rt[data-kwl-heading-style="outline"] .kw-rt__heading {
	color: var(--kwl-rt-heading-color, var(--kwl-primary, #00315d));
}

@supports (-webkit-text-stroke: 1px black) {
	.kw-rt[data-kwl-heading-style="outline"] .kw-rt__heading {
		-webkit-text-stroke: 2px var(--kwl-rt-heading-color, var(--kwl-primary, #00315d));
		color: transparent;
	}

	.kw-rt[data-kwl-heading-style="outline"] .kw-rt__accent {
		-webkit-text-stroke-color: var(--kwl-rt-accent-color);
		color: transparent;
	}
}

/* ── Stil: Depth (Prägung) ──────────────────────────── */

.kw-rt[data-kwl-heading-style="depth"] .kw-rt__heading {
	text-shadow:
		0 -1px 0 color-mix(in srgb, #fff 35%, transparent),
		0 1px 1px color-mix(in srgb, var(--kwl-primary, #00315d) 25%, transparent),
		0 3px 6px color-mix(in srgb, var(--kwl-primary, #00315d) 20%, transparent),
		0 8px 16px color-mix(in srgb, var(--kwl-primary, #00315d) 10%, transparent);
}

/* ── Feature: Seitenlinien (--lined) ────────────────── */

@media (min-width: 600px) {
	.kw-rt--lined .kw-rt__heading {
		align-self: stretch;
		display: flex;
		align-items: center;
		gap: var(--kwl-space-md, 1rem);
	}

	.kw-rt--lined .kw-rt__heading-text {
		display: inline;
		flex-shrink: 0;
	}

	.kw-rt--lined .kw-rt__heading::before,
	.kw-rt--lined .kw-rt__heading::after {
		content: '';
		flex: 1;
		height: 1px;
		min-width: 24px;
	}

	.kw-rt--lined .kw-rt__heading::before {
		background: linear-gradient(to right, transparent, var(--kwl-rt-lines-color, var(--kwl-rt-separator-color)));
	}

	.kw-rt--lined .kw-rt__heading::after {
		background: linear-gradient(to left, transparent, var(--kwl-rt-lines-color, var(--kwl-rt-separator-color)));
	}

	.kw-rt[data-kwl-heading-align="left"].kw-rt--lined .kw-rt__heading::before {
		display: none;
	}

	.kw-rt[data-kwl-heading-align="right"].kw-rt--lined .kw-rt__heading::after {
		display: none;
	}
}

/* =========================================================
   4. Divider (delegiert an [data-kwl-separator="gold"])
   ========================================================= */

.kw-rt__divider {
	display: block;
	width: 100%;
	min-height: var(--kwl-rt-divider-width);
	margin: var(--kwl-rt-divider-spacing-top) 0 var(--kwl-rt-divider-spacing-bottom);
}

/* =========================================================
   4b. Subtitle (nur Room)
   ========================================================= */

.kw-rt__subtitle {
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-body-lg, 1.125rem);
	font-weight: var(--kwl-fw-regular);
	font-style: italic;
	color: var(--kwl-text-muted, #64748b);
	line-height: var(--kwl-lh-relaxed, 1.6);
	letter-spacing: var(--kwl-ls-light, 0.01em);
	margin: 0 0 var(--kwl-space-sm, 0.5rem) 0;
}

/* =========================================================
   4c. Intro (nur Offer — kursive Einleitung)
   ========================================================= */

.kw-rt__intro {
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-body-lg, 1.125rem);
	font-weight: var(--kwl-fw-medium);
	font-style: italic;
	line-height: var(--kwl-lh-relaxed, 1.6);
	color: var(--kwl-text-muted, #64748b);
	margin: 0 0 var(--kwl-space-lg, 1.5rem);
	padding-bottom: var(--kwl-space-lg, 1.5rem);
	border-bottom: 1px solid var(--kwl-border, #e2e8f0);
}

/* =========================================================
   5. Content — Basis-Typografie
   ========================================================= */

.kw-rt__content {
	--kwl-link-color: var(--kwl-rt-link-color);
	--kwl-link-hover-color: var(--kwl-rt-link-hover-color);
	max-width: var(--kwl-rt-max-width);
	margin-inline: auto;
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-body, 1rem);
	font-weight: var(--kwl-fw-regular);
	line-height: var(--kwl-lh-body, 1.5);
	color: var(--kwl-rt-text-color);
}

.kw-rt__content p {
	margin: 0 0 var(--kwl-rt-paragraph-spacing) 0;
}

.kw-rt__content p:last-child {
	margin-bottom: 0;
}

/* =========================================================
   6. Links — Intern
   ========================================================= */

.kw-rt__content a {
	color: var(--kwl-rt-link-color);
	text-decoration: underline;
	text-decoration-color: var(--kwl-rt-link-underline-color);
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
	transition: color var(--kwl-transition, 200ms ease),
		text-decoration-color var(--kwl-transition, 200ms ease);
}

@media (hover: hover) {
	.kw-rt__content a:hover {
		color: var(--kwl-rt-link-hover-color);
		text-decoration-color: var(--kwl-rt-link-hover-color);
	}
}

.kw-rt__content a:active {
	opacity: 0.8;
}

.kw-rt__content a:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
	border-radius: 2px;
}

/* =========================================================
   7. Links — Extern (automatisch erkannt)
   ========================================================= */

.kw-rt__external-icon {
	display: inline-flex;
	width: var(--kwl-rt-external-icon-size);
	height: var(--kwl-rt-external-icon-size);
	vertical-align: baseline;
	color: var(--kwl-rt-external-icon-color);
}

.kw-rt__external-icon svg {
	display: inline;
	width: 1em;
	height: 1em;
	vertical-align: -0.1em;
	fill: currentColor;
}

/* =========================================================
   8. Drop Cap (Initiale)
   ========================================================= */

.kw-rt__content--dropcap > p:first-of-type::first-letter {
	float: left;
	font-family: var(--kwl-font-heading);
	font-size: var(--kwl-rt-dropcap-size);
	font-weight: var(--kwl-fw-bold);
	line-height: var(--kwl-lh-none, 1);
	color: var(--kwl-rt-dropcap-color);
	margin-right: 0.15em;
	margin-top: 0.05em;
}

/* Progressive Enhancement: initial-letter (Chrome 110+, Safari) */
@supports (initial-letter: 3) {
	.kw-rt__content--dropcap > p:first-of-type::first-letter {
		initial-letter: 3;
		float: none;
		margin-top: 0;
	}
}

/* =========================================================
   9. Lead-Paragraph (Einleitungsabsatz)
   ========================================================= */

.kw-rt__content--lead > p:first-of-type {
	font-size: var(--kwl-rt-lead-font-size);
	font-weight: var(--kwl-fw-medium);
	color: var(--kwl-rt-lead-color);
	line-height: var(--kwl-lh-relaxed, 1.6);
}

/* =========================================================
   10. Blockzitat
   ========================================================= */

.kw-rt__content blockquote {
	margin: var(--kwl-space-lg, 1.5rem) 0;
	padding: var(--kwl-rt-quote-padding-top) var(--kwl-space-lg, 1.5rem) var(--kwl-space-md, 1rem);
	border-left: var(--kwl-rt-quote-border-width) solid var(--kwl-rt-quote-accent);
	background: var(--kwl-rt-quote-bg);
	border-radius: 0 var(--kwl-radius-sm, 4px) var(--kwl-radius-sm, 4px) 0;
	color: var(--kwl-rt-quote-text);
	font-style: italic;
	font-size: var(--kwl-fsize-body, 1rem);
	line-height: var(--kwl-lh-relaxed, 1.6);
	position: relative;
}

/* Label „Zitat" — sitzt oben im Padding-Bereich als dezentes Badge (via PHP/Labels) */
.kw-rt__quote-label {
	position: absolute;
	top: 0.5em;
	left: var(--kwl-space-lg, 1.5rem);
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-caption);
	font-style: normal;
	font-weight: var(--kwl-fw-semibold);
	letter-spacing: var(--kwl-ls-wider);
	text-transform: uppercase;
	color: var(--kwl-rt-quote-accent);
	opacity: 0.6;
	line-height: var(--kwl-lh-none, 1);
	pointer-events: none;
}

.kw-rt__content blockquote p {
	margin-bottom: var(--kwl-space-sm, 0.5rem);
}

.kw-rt__content blockquote p:last-child {
	margin-bottom: 0;
}

/* Zitatquelle */
.kw-rt__content blockquote cite {
	display: block;
	margin-top: var(--kwl-space-sm, 0.5rem);
	font-size: var(--kwl-fsize-small);
	font-style: normal;
	font-weight: var(--kwl-fw-semibold);
	color: var(--kwl-rt-quote-accent);
	letter-spacing: var(--kwl-ls-wide);
}

.kw-rt__content blockquote cite::before {
	content: '\2014\00a0';
}

/* =========================================================
   11. Hinweis-Boxen (Callouts)
   ========================================================= */

.kw-rt__callout {
	margin: var(--kwl-space-lg, 1.5rem) 0;
	padding: var(--kwl-space-md, 1rem) var(--kwl-space-lg, 1.5rem);
	border-radius: var(--kwl-rt-callout-radius);
	border-left: var(--kwl-rt-callout-border-width) solid;
}

.kw-rt__callout-header {
	display: flex;
	align-items: center;
	gap: var(--kwl-space-xs, 0.25rem);
	margin-bottom: var(--kwl-space-xs, 0.25rem);
}

.kw-rt__callout-icon {
	flex-shrink: 0;
	width: 1.2em;
	height: 1.2em;
}

.kw-rt__callout-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.kw-rt__callout-title {
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-small);
	font-weight: var(--kwl-fw-bold);
	letter-spacing: var(--kwl-ls-wide);
	text-transform: uppercase;
}

.kw-rt__callout-body {
	font-size: var(--kwl-fsize-body, 1rem);
	line-height: var(--kwl-lh-body, 1.5);
}

.kw-rt__callout-body p:last-child {
	margin-bottom: 0;
}

/* Info (Blau) */
.kw-rt__callout--info {
	background: color-mix(in srgb, var(--kwl-primary, #00315d) 6%, var(--kwl-bg, #ffffff));
	border-color: var(--kwl-primary, #00315d);
	color: var(--kwl-text, #1a202c);
}

.kw-rt__callout--info .kw-rt__callout-icon,
.kw-rt__callout--info .kw-rt__callout-title {
	color: var(--kwl-primary, #00315d);
}

/* Tipp (Grün) */
.kw-rt__callout--tip {
	background: color-mix(in srgb, var(--kwl-success, #2f855a) 6%, var(--kwl-bg, #ffffff));
	border-color: var(--kwl-success, #2f855a);
	color: var(--kwl-text, #1a202c);
}

.kw-rt__callout--tip .kw-rt__callout-icon,
.kw-rt__callout--tip .kw-rt__callout-title {
	color: var(--kwl-success, #2f855a);
}

/* Warnung (Orange) */
.kw-rt__callout--warning {
	background: color-mix(in srgb, var(--kwl-warning, #c05621) 6%, var(--kwl-bg, #ffffff));
	border-color: var(--kwl-warning, #c05621);
	color: var(--kwl-text, #1a202c);
}

.kw-rt__callout--warning .kw-rt__callout-icon,
.kw-rt__callout--warning .kw-rt__callout-title {
	color: var(--kwl-warning, #c05621);
}

/* =========================================================
   12. Listen — Eigene Aufzählungszeichen
   ========================================================= */

.kw-rt__content ul,
.kw-rt__content ol {
	margin: 0 0 var(--kwl-rt-paragraph-spacing) 0;
	padding-left: 1.5em;
}

.kw-rt__content li {
	margin-bottom: var(--kwl-rt-list-item-spacing);
	line-height: var(--kwl-lh-body, 1.5);
}

.kw-rt__content li:last-child {
	margin-bottom: 0;
}

/* Gold-Punkt */
.kw-rt__content--list-gold ul {
	list-style: none;
	padding-left: 1.2em;
}

.kw-rt__content--list-gold ul li::before {
	content: '\25CF';
	color: var(--kwl-rt-list-marker-color);
	font-size: 0.6em;
	display: inline-block;
	width: 1.5em;
	margin-left: -1.5em;
	vertical-align: middle;
}

/* Häkchen */
.kw-rt__content--list-check ul {
	list-style: none;
	padding-left: 1.5em;
}

.kw-rt__content--list-check ul li::before {
	content: '\2713';
	color: var(--kwl-rt-list-marker-color);
	font-weight: var(--kwl-fw-bold);
	display: inline-block;
	width: 1.5em;
	margin-left: -1.5em;
}

/* Pfeil */
.kw-rt__content--list-arrow ul {
	list-style: none;
	padding-left: 1.5em;
}

.kw-rt__content--list-arrow ul li::before {
	content: '\2192';
	color: var(--kwl-rt-list-marker-color);
	display: inline-block;
	width: 1.5em;
	margin-left: -1.5em;
}

/* Geordnete Listen */
.kw-rt__content ol {
	list-style-type: decimal;
}

.kw-rt__content ol li::marker {
	color: var(--kwl-rt-list-marker-color);
	font-weight: var(--kwl-fw-semibold);
	font-variant-numeric: tabular-nums;
}

/* =========================================================
   13. Spalten-Layout
   ========================================================= */

/* 2 Spalten ab 600px Container-Breite */
@container (min-width: 600px) {
	.kw-rt__content--columns-2 {
		columns: 2;
		column-gap: var(--kwl-rt-column-gap);
		column-rule: var(--kwl-rt-column-rule-width) solid var(--kwl-rt-column-rule-color);
		max-width: none;
	}
}

/* 3 Spalten erst ab 900px — bei 600–900px wären die Spalten zu schmal */
@container (min-width: 900px) {
	.kw-rt__content--columns-3 {
		columns: 3;
		column-gap: var(--kwl-rt-column-gap);
		column-rule: var(--kwl-rt-column-rule-width) solid var(--kwl-rt-column-rule-color);
		max-width: none;
	}
}

/* Spaltenumbruch bei Callouts und Blockquotes verhindern */
.kw-rt__content blockquote,
.kw-rt__callout,
.kw-rt__content figure {
	break-inside: avoid;
}

/* =========================================================
   14. Silbentrennung
   ========================================================= */

.kw-rt__content--hyphens {
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}

/* =========================================================
   15. Textschatten
   ========================================================= */

.kw-rt--shadow .kw-rt__content {
	text-shadow: var(--kwl-rt-shadow-x) var(--kwl-rt-shadow-y) var(--kwl-rt-shadow-blur) var(--kwl-rt-shadow-color);
}

/* =========================================================
   16. Hochgestellt / Tiefgestellt
   ========================================================= */

.kw-rt__content sup,
.kw-rt__content sub {
	font-size: 0.75em;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

.kw-rt__content sup {
	top: -0.5em;
}

.kw-rt__content sub {
	bottom: -0.25em;
}

/* =========================================================
   17. Textmarker / Highlights (<mark>)
   ========================================================= */

.kw-rt__content mark {
	background: linear-gradient(
		to right,
		color-mix(in srgb, var(--kwl-accent, #BD9B5C) 25%, transparent),
		color-mix(in srgb, var(--kwl-accent, #BD9B5C) 15%, transparent)
	);
	color: inherit;
	padding: 0.05em 0.2em;
	border-radius: 2px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* =========================================================
   18. Fußnoten
   ========================================================= */

.kw-rt__footnote-ref {
	font-size: 0.75em;
	font-variant-numeric: tabular-nums;
}

.kw-rt__footnote-ref a {
	color: var(--kwl-rt-footnote-color);
	text-decoration: none;
	font-weight: var(--kwl-fw-bold);
	padding: 0 0.15em;
	transition: color var(--kwl-transition, 200ms ease);
}

@media (hover: hover) {
	.kw-rt__footnote-ref a:hover {
		color: color-mix(in srgb, var(--kwl-rt-footnote-color) 75%, var(--kwl-text, #1a202c));
	}
}

.kw-rt__footnote-ref a:active {
	opacity: 0.8;
}

.kw-rt__footnote-ref a:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 1px;
	border-radius: 2px;
}

.kw-rt__footnotes {
	margin-top: var(--kwl-space-lg, 1.5rem);
	font-size: var(--kwl-fsize-small);
	color: var(--kwl-text-muted, #718096);
}

.kw-rt__footnotes-divider {
	border: 0;
	border-top: 1px solid var(--kwl-border, #e2e8f0);
	margin: 0 0 var(--kwl-space-md, 1rem) 0;
	max-width: 120px;
}

.kw-rt__footnotes-heading {
	margin: 0 0 var(--kwl-space-sm, 0.5rem) 0;
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-small);
	font-weight: var(--kwl-fw-semibold);
	letter-spacing: var(--kwl-ls-wide);
	text-transform: uppercase;
	color: var(--kwl-text-muted, #718096);
}

.kw-rt__footnotes-list {
	margin: 0;
	padding-left: 1.5em;
	list-style-type: decimal;
}

.kw-rt__footnote-item {
	margin-bottom: var(--kwl-space-xs, 0.25rem);
	line-height: var(--kwl-lh-body, 1.5);
	font-variant-numeric: tabular-nums;
}

.kw-rt__footnote-item::marker {
	color: var(--kwl-rt-footnote-color);
	font-weight: var(--kwl-fw-semibold);
}

.kw-rt__footnote-back {
	--kwl-link-color: var(--kwl-rt-footnote-color);
	--kwl-link-hover-color: color-mix(in srgb, var(--kwl-rt-footnote-color) 75%, var(--kwl-text, #1a202c));
	margin-left: 0.3em;
	font-size: 0.85em;
}

.kw-rt__footnote-back:active {
	opacity: 0.8;
}

.kw-rt__footnote-back:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 1px;
	border-radius: 2px;
}

/* =========================================================
   19. Figures (Bilder mit Bildunterschrift)
   ========================================================= */

.kw-rt__content figure {
	margin: var(--kwl-space-lg, 1.5rem) 0;
	padding: 0;
}

.kw-rt__content figure img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--kwl-radius-sm, 4px);
}

.kw-rt__content figcaption {
	margin-top: var(--kwl-space-xs, 0.25rem);
	font-size: var(--kwl-fsize-caption);
	font-style: italic;
	color: var(--kwl-text-muted, #718096);
	text-align: center;
}

/* =========================================================
   20. Separator
   ========================================================= */

.kw-rt__separator {
	display: block;
	width: 100%;
	margin-top: var(--kwl-space-lg, 1.5rem);
	min-height: 2px;
}

/* =========================================================
   21. Textauswahl (::selection)
   ========================================================= */

.kw-rt__content ::selection {
	background: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 30%, transparent);
	color: var(--kwl-text, #1a202c);
}

/* =========================================================
   22. Kontrast-Warnung (nur Elementor-Editor)
   ========================================================= */

.kw-rt__contrast-warning {
	display: flex;
	align-items: center;
	gap: var(--kwl-space-xs, 0.25rem);
	padding: var(--kwl-space-sm, 0.5rem) var(--kwl-space-md, 1rem);
	margin-bottom: var(--kwl-space-md, 1rem);
	background: color-mix(in srgb, var(--kwl-warning, #c05621) 10%, var(--kwl-bg, #ffffff));
	border: 1px solid var(--kwl-warning, #c05621);
	border-radius: var(--kwl-radius-sm, 4px);
	font-size: var(--kwl-fsize-small);
	color: var(--kwl-warning, #c05621);
}

.kw-rt__contrast-warning > svg,
.kw-rt__editor-hint > svg {
	width: 16px;
	height: 16px;
}

/* Editor-Hinweis (Info-Stil, nicht Warnung) */
.kw-rt__editor-hint {
	display: flex;
	align-items: center;
	gap: var(--kwl-space-xs, 0.25rem);
	padding: var(--kwl-space-sm, 0.5rem) var(--kwl-space-md, 1rem);
	margin-bottom: var(--kwl-space-md, 1rem);
	background: color-mix(in srgb, var(--kwl-primary, #00315d) 8%, var(--kwl-bg, #ffffff));
	border: 1px solid var(--kwl-primary, #00315d);
	border-radius: var(--kwl-radius-sm, 4px);
	font-size: var(--kwl-fsize-small);
	color: var(--kwl-primary, #00315d);
}

/* =========================================================
   23. Placeholder (Editor)
   ========================================================= */

.kw-rt--placeholder {
	padding: var(--kwl-space-lg, 1.5rem);
	background: var(--kwl-bg-alt, #f7fafc);
	border: 2px dashed var(--kwl-border, #e2e8f0);
	border-radius: var(--kwl-radius-md, 8px);
	text-align: center;
	color: var(--kwl-text-muted, #718096);
	font-style: italic;
}

/* =========================================================
   24. Scroll-Reveal
   ========================================================= */

@supports (animation-timeline: view()) {
	.kw-rt--reveal {
		animation: kwl-reveal-up-subtle linear forwards;
		animation-timeline: view();
		animation-range: entry 0% entry 25%;
	}
}

/* JS-Fallback */
.kw-rt--reveal.kw-rt-pending {
	opacity: 0;
	transform: translateY(16px);
}

.kw-rt--reveal.kw-rt-revealed {
	animation: kwl-reveal-up-subtle 600ms var(--kwl-ease-entrance) forwards;
}

/* =========================================================
   24b. Read-More / Expand-Collapse (Backend-Quellen)
   ========================================================= */

/* Progressive Animation (Chrome/Edge 129+) */
@supports (interpolate-size: allow-keywords) {
	.kw-rt {
		interpolate-size: allow-keywords;
	}
}

/* No-JS-Fallback: hidden-Attribut bleibt wirksam */
.kw-rt__excerpt[hidden],
.kw-rt__full[hidden] {
	display: none;
}

/* JS-Enhanced: Collapsed State */
.kw-rt[data-state="collapsed"] .kw-rt__full {
	height: 0;
	opacity: 0;
	overflow: clip;
	transition: height 400ms ease, opacity 250ms ease;
}

/* JS-Enhanced: Expanded State */
.kw-rt[data-state="expanded"] .kw-rt__full {
	height: auto;
	opacity: 1;
	overflow: visible;
	transition: height 400ms ease, opacity 250ms ease 100ms;
}

.kw-rt[data-state="expanded"] .kw-rt__excerpt {
	display: none;
}

/* Button */
.kw-rt .kw-rt__read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-top: var(--kwl-space-sm, 0.5rem);
	padding: var(--kwl-space-xs, 0.25rem) 0;
	min-height: 44px;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-body, 1rem);
	font-weight: var(--kwl-fw-semibold);
	color: var(--kwl-primary, #00315d);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--kwl-accent, #BD9B5C);
	transition: color var(--kwl-transition, 200ms ease);
}

.kw-rt .kw-rt__read-more::after {
	content: "↓";
	font-size: 0.8em;
	transition: transform var(--kwl-transition, 200ms ease);
}

.kw-rt .kw-rt__read-more[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

@media (hover: hover) {
	.kw-rt .kw-rt__read-more:hover {
		color: var(--kwl-primary-hover, #1e3a5f);
	}
}

.kw-rt .kw-rt__read-more:active {
	opacity: 0.8;
}

.kw-rt .kw-rt__read-more:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
	border-radius: 2px;
}

/* =========================================================
   25. Dark Mode
   ========================================================= */

@media (prefers-color-scheme: dark) {
	.kw-rt {
		--kwl-rt-text-color: var(--kwl-text, #f7fafc);
		--kwl-rt-heading-color: var(--kwl-text, #f7fafc);
		--kwl-rt-lead-color: var(--kwl-text, #f7fafc);
		--kwl-rt-quote-text: var(--kwl-text, #f7fafc);
		--kwl-rt-quote-bg: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 8%, var(--kwl-bg, #1a202c));
		--kwl-rt-shadow-color: rgba(0, 0, 0, 0.6);
	}

	.kw-rt__content a {
		color: var(--kwl-rt-link-color, var(--kwl-accent, #BD9B5C));
	}

	@media (hover: hover) {
		.kw-rt__content a:hover {
			color: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 85%, white);
		}
	}

	.kw-rt__content a:focus-visible {
		outline-color: var(--kwl-focus, #c9a84c);
	}

	/* Heading-Stile im Dark Mode */
	.kw-rt[data-kwl-heading-style="depth"] .kw-rt__heading {
		text-shadow:
			0 0 8px color-mix(in srgb, var(--kwl-accent, #BD9B5C) 45%, transparent),
			0 0 24px color-mix(in srgb, var(--kwl-accent, #BD9B5C) 25%, transparent),
			0 0 48px color-mix(in srgb, var(--kwl-accent, #BD9B5C) 12%, transparent);
	}

	.kw-rt[data-kwl-heading-style="split-color"] .kw-rt__heading-deco,
	.kw-rt[data-kwl-heading-style="split-color"][data-kwl-heading-align="center"] .kw-rt__heading-deco,
	.kw-rt[data-kwl-heading-style="split-color"][data-kwl-heading-align="right"] .kw-rt__heading-deco {
		background: var(--kwl-border, #4a5568);
	}

	/* Callouts im Dark Mode */
	.kw-rt__callout--info {
		background: color-mix(in srgb, var(--kwl-primary, #63b3ed) 10%, var(--kwl-bg, #1a202c));
	}

	.kw-rt__callout--info .kw-rt__callout-icon,
	.kw-rt__callout--info .kw-rt__callout-title {
		color: var(--kwl-primary, #63b3ed);
	}

	.kw-rt__callout--tip {
		background: color-mix(in srgb, var(--kwl-success, #48bb78) 10%, var(--kwl-bg, #1a202c));
	}

	.kw-rt__callout--tip .kw-rt__callout-icon,
	.kw-rt__callout--tip .kw-rt__callout-title {
		color: var(--kwl-success, #48bb78);
	}

	.kw-rt__callout--warning {
		background: color-mix(in srgb, var(--kwl-warning, #ed8936) 10%, var(--kwl-bg, #1a202c));
	}

	.kw-rt__callout--warning .kw-rt__callout-icon,
	.kw-rt__callout--warning .kw-rt__callout-title {
		color: var(--kwl-warning, #ed8936);
	}

	/* Mark im Dark Mode */
	.kw-rt__content mark {
		background: linear-gradient(
			to right,
			color-mix(in srgb, var(--kwl-accent, #BD9B5C) 30%, transparent),
			color-mix(in srgb, var(--kwl-accent, #BD9B5C) 20%, transparent)
		);
	}

	/* Quote-Label im Dark Mode: leicht stärker für Lesbarkeit */
	.kw-rt__quote-label {
		opacity: 0.7;
	}

	/* Footnotes im Dark Mode */
	.kw-rt__footnotes-divider {
		border-top-color: var(--kwl-border, #4a5568);
	}

	.kw-rt {
		--kwl-rt-footnote-color: var(--kwl-accent, #BD9B5C);
	}

	@media (hover: hover) {
		.kw-rt__footnote-ref a:hover,
		.kw-rt__footnote-back:hover {
			color: color-mix(in srgb, var(--kwl-rt-footnote-color) 85%, white);
		}
	}

	/* Subtitle + Intro im Dark Mode */
	.kw-rt__subtitle {
		color: var(--kwl-text-muted, #a0aec0);
	}

	.kw-rt__intro {
		border-bottom-color: var(--kwl-border, #4a5568);
	}

	/* Read-More im Dark Mode */
	.kw-rt .kw-rt__read-more {
		color: var(--kwl-accent, #BD9B5C);
	}

	@media (hover: hover) {
		.kw-rt .kw-rt__read-more:hover {
			color: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 85%, white);
		}
	}

	.kw-rt .kw-rt__read-more:focus-visible {
		outline-color: var(--kwl-focus, #c9a84c);
	}

	/* Selection im Dark Mode */
	.kw-rt__content ::selection {
		background: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 40%, transparent);
		color: var(--kwl-text, #f7fafc);
	}
}

/* Shimmer Dark Mode: Wärmere Highlights */
@media (prefers-color-scheme: dark) {
	@supports (background-clip: text) {
		.kw-rt[data-kwl-heading-style="shimmer"] .kw-rt__heading {
			background-image: linear-gradient(
				105deg,
				var(--kwl-rt-accent-color) 0%,
				var(--kwl-rt-accent-color) 20%,
				color-mix(in srgb, var(--kwl-rt-accent-color) 50%, #e8d5a8) 40%,
				color-mix(in srgb, var(--kwl-rt-accent-color) 35%, #e8d5a8) 50%,
				color-mix(in srgb, var(--kwl-rt-accent-color) 50%, #e8d5a8) 60%,
				var(--kwl-rt-accent-color) 80%,
				var(--kwl-rt-accent-color) 100%
			);
		}
	}
}

/* Outline Dark Mode: primary wechselt automatisch */
@media (prefers-color-scheme: dark) {
	@supports (-webkit-text-stroke: 1px black) {
		.kw-rt[data-kwl-heading-style="outline"] .kw-rt__heading {
			-webkit-text-stroke: 2px var(--kwl-rt-heading-color, var(--kwl-primary, #63b3ed));
		}
	}
}

/* =========================================================
   26. Reduced Motion (BFSG)
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.kw-rt__content a,
	.kw-rt__footnote-ref a,
	.kw-rt__footnote-back,
	.kw-rt .kw-rt__read-more,
	.kw-rt .kw-rt__read-more::after {
		transition: none;
	}

	.kw-rt[data-state="collapsed"] .kw-rt__full,
	.kw-rt[data-state="expanded"] .kw-rt__full {
		transition: none;
	}

	.kw-rt--reveal {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.kw-rt--reveal.kw-rt-pending {
		opacity: 1;
		transform: none;
	}

	.kw-rt[data-kwl-heading-style="shimmer"] .kw-rt__heading {
		animation: none;
		background: none;
		-webkit-background-clip: unset;
		background-clip: unset;
		color: var(--kwl-rt-accent-color);
	}

	.kw-rt[data-kwl-heading-style="shimmer"] .kw-rt__accent {
		color: var(--kwl-rt-accent-color);
	}
}

/* =========================================================
   27. Print
   ========================================================= */

@media print {
	.kw-rt {
		background: none;
		box-shadow: none;
		border-radius: 0;
		color: #000;
	}

	.kw-rt__content {
		max-width: none;
	}

	.kw-rt__content a {
		color: #000;
		text-decoration: underline;
	}

	/* Externe Links: URL als Fußnote drucken */
	.kw-rt__content a[href^="http"]::after {
		content: ' (' attr(href) ')';
		font-size: 0.8em;
		font-weight: var(--kwl-fw-regular);
		word-break: break-all;
	}

	.kw-rt__external-icon {
		display: none;
	}

	.kw-rt__callout {
		border: 1px solid #999;
		background: #f9f9f9;
		page-break-inside: avoid;
	}

	.kw-rt__content blockquote {
		border-left-color: #999;
		background: #f9f9f9;
		page-break-inside: avoid;
	}

	.kw-rt__footnotes {
		page-break-before: avoid;
	}

	/* Keine Animationen und Transitions */
	.kw-rt--reveal,
	.kw-rt--shadow .kw-rt__content {
		animation: none;
		text-shadow: none;
	}

	.kw-rt__content a,
	.kw-rt__footnote-ref a,
	.kw-rt__footnote-back {
		transition: none;
	}
}

/* =========================================================
   28. Responsive (Container Queries)
   ========================================================= */

@container (min-width: 600px) {
	.kw-rt__content blockquote {
		margin-left: var(--kwl-space-md, 1rem);
		margin-right: var(--kwl-space-md, 1rem);
	}

	.kw-rt__callout {
		margin-left: var(--kwl-space-sm, 0.5rem);
		margin-right: var(--kwl-space-sm, 0.5rem);
	}
}

/* =========================================================
   29. Elementor V4 Reset
   ========================================================= */

.elementor-widget .kw-rt .kw-rt__heading,
.elementor-widget .kw-rt .kw-rt__heading-deco {
	margin: 0 0 var(--kwl-space-sm, 0.5rem) 0;
}

/* V4 Pink-Reset: zentral via [data-kwl-link-scope] auf .kw-rt__content (§281) */

/* V4 Pink-Reset: zentral in kwl-shared-components.css via [data-kwl-link] (§281).
   `.kw-rt__content a` bleibt als Fallback für user-content ohne data-kwl-link. */