/* KW Atelier – Fließtext-Widget (Phase 4, Schicht 1).
   Professionelle Typografie mit Token-System: optionale Überschrift (+ Kopf-
   Zicklinde), Initiale, Einleitungsabsatz, Spalten, Listenstile, Blockzitate,
   Hinweis-Boxen, Fußnoten und automatisch gekennzeichnete externe Links. Effekte
   sind CSS-only (kein JS). Tokens --kwat-rt-* fallen auf die Marken-Farben zurück.
   Portiert von KW Biohof, an das dunkle Single-Theme angepasst (kein Dark-Mode-
   Umschalter – die Boxen-Farben sind direkt WCAG-AA gesetzt). Kein !important. */

/* ── Widget-Scope Tokens (Fallback auf Marken-Token) ───────────────────────── */
.kwat-rt {
	--kwat-rt-text-color: var(--kwat-color-text);
	--kwat-rt-content-heading-color: var(--kwat-color-text);
	--kwat-rt-link-color: var(--kwat-color-accent);
	--kwat-rt-link-hover-color: var(--kwat-color-accent-hover);
	--kwat-rt-link-underline-color: color-mix(in srgb, var(--kwat-color-accent) 45%, transparent);
	--kwat-rt-paragraph-spacing: var(--kwat-space-4);
	--kwat-rt-dropcap-color: var(--kwat-color-accent);
	--kwat-rt-dropcap-size: 3.2em;
	--kwat-rt-lead-color: var(--kwat-color-text);
	--kwat-rt-lead-font-size: 1.2em;
	--kwat-rt-quote-accent: var(--kwat-color-accent);
	--kwat-rt-quote-bg: color-mix(in srgb, var(--kwat-color-accent) 8%, var(--kwat-color-surface));
	--kwat-rt-quote-text: var(--kwat-color-text);
	--kwat-rt-quote-border-width: 4px;
	--kwat-rt-list-marker-color: var(--kwat-color-accent);
	--kwat-rt-list-item-spacing: var(--kwat-space-2);
	--kwat-rt-list-indent: 1.5em;
	--kwat-rt-external-icon-color: var(--kwat-color-text-muted);
	--kwat-rt-external-icon-size: 0.8em;
	--kwat-rt-column-gap: var(--kwat-space-6);
	--kwat-rt-column-rule-color: var(--kwat-color-border);
	--kwat-rt-shadow-color: color-mix(in srgb, #000 55%, transparent);
	--kwat-rt-callout-radius: var(--kwat-radius-md);
	--kwat-rt-footnote-color: var(--kwat-color-accent);
	--kwat-rt-max-width: 66ch;
	--kwat-rt-radius: 0;
	--kwat-rt-bg: transparent;

	/* Spalten reagieren auf die Widget-Breite, nicht den Viewport. Container auf
	   der Wurzel: die @container-Query stylt __content (Spalten). Der Elementor-
	   Hüllen-Leerraum-Fix greift zentral (shared.css #5). */
	container-type: inline-size;
	container-name: kwat-rt;

	position: relative;
	display: flex;
	flex-direction: column;
	max-width: 100%;
	background: var(--kwat-rt-bg);
	border-radius: var(--kwat-rt-radius);
}

/* ── Content – Basis-Typografie ────────────────────────────────────────────── */
.kwat-rt.kwat-rt .kwat-rt__content {
	/* Standard: Text füllt die Container-Breite (keine schmale, schwebende Spalte). */
	max-inline-size: none;
	font-family: var(--kwat-font-body);
	font-size: var(--kwat-text-base);
	line-height: 1.6;
	color: var(--kwat-rt-text-color);
}

/* Optionale Lesebreite – „Lesebreite begrenzen" (nur bei einer Spalte). */
.kwat-rt.kwat-rt .kwat-rt__content--measure {
	max-inline-size: var(--kwat-rt-max-width);
}

.kwat-rt__content--measure-center {
	margin-inline: auto;
}

.kwat-rt__content > :first-child {
	margin-top: 0;
}

.kwat-rt__content > :last-child {
	margin-bottom: 0;
}

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

.kwat-rt__content :where(h2, h3, h4) {
	margin: var(--kwat-space-5) 0 var(--kwat-space-3);
	font-family: var(--kwat-font-heading);
	font-weight: 600;
	line-height: 1.2;
	color: var(--kwat-rt-content-heading-color);
}

/* ── Links – intern (element-basiert, WYSIWYG-Links tragen keine Klasse) ────
   Die Doppel-Klasse schlägt die Elementor-V4-Link-Farbe in allen Zuständen. */
.kwat-rt .kwat-rt__content a {
	color: var(--kwat-rt-link-color);
	text-decoration: underline;
	text-decoration-color: var(--kwat-rt-link-underline-color);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition:
		color var(--kwat-transition),
		text-decoration-color var(--kwat-transition);
}

.kwat-rt.kwat-rt .kwat-rt__content a:is(:hover, :focus, :focus-visible, :active) {
	color: var(--kwat-rt-link-hover-color);
	text-decoration-color: currentColor;
}

.kwat-rt.kwat-rt .kwat-rt__content a:focus-visible {
	outline: var(--kwat-focus-width) solid var(--kwat-color-focus);
	outline-offset: var(--kwat-focus-offset);
}

/* ── Links – extern (automatisch gekennzeichnet) ───────────────────────────── */
.kwat-rt__ext-icon {
	display: inline-flex;
	width: var(--kwat-rt-external-icon-size);
	height: var(--kwat-rt-external-icon-size);
	vertical-align: baseline;
	color: var(--kwat-rt-external-icon-color);
}

.kwat-rt__ext-icon svg {
	width: 1em;
	height: 1em;
	vertical-align: -0.1em;
}

/* Screenreader-Text (visuell versteckt). */
.kwat-rt__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Initiale (Drop Cap) ───────────────────────────────────────────────────── */
.kwat-rt__content--dropcap > p:first-of-type::first-letter {
	float: left;
	font-family: var(--kwat-font-heading);
	font-size: var(--kwat-rt-dropcap-size);
	font-weight: 700;
	line-height: 1;
	color: var(--kwat-rt-dropcap-color);
	margin-right: 0.12em;
	margin-top: 0.05em;
}

/* Fortschrittliche Variante (echte Initiale ohne Float). */
@supports (initial-letter: 3) {
	.kwat-rt__content--dropcap > p:first-of-type::first-letter {
		initial-letter: 3;
		float: none;
		margin-top: 0;
	}
}

/* ── Einleitungsabsatz (Lead) ──────────────────────────────────────────────── */
.kwat-rt.kwat-rt .kwat-rt__content--lead > p:first-of-type {
	font-size: var(--kwat-rt-lead-font-size);
	font-weight: 500;
	line-height: 1.5;
	color: var(--kwat-rt-lead-color);
}

/* ── Blockzitat ────────────────────────────────────────────────────────────── */
.kwat-rt__content blockquote {
	position: relative;
	margin: var(--kwat-space-5) 0;
	padding: var(--kwat-space-5) var(--kwat-space-5) var(--kwat-space-4);
	border-left: var(--kwat-rt-quote-border-width) solid var(--kwat-rt-quote-accent);
	border-radius: 0 var(--kwat-radius-sm) var(--kwat-radius-sm) 0;
	background: var(--kwat-rt-quote-bg);
	color: var(--kwat-rt-quote-text);
	font-style: italic;
	line-height: 1.6;
}

/* „Zitat"-Badge oben im Padding (übersetzbar via PHP statt CSS-content). */
.kwat-rt__quote-label {
	position: absolute;
	top: 0.5em;
	left: var(--kwat-space-5);
	font-family: var(--kwat-font-body);
	font-size: var(--kwat-text-xs);
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--kwat-rt-quote-accent);
	opacity: 0.7;
	pointer-events: none;
}

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

.kwat-rt__content blockquote cite {
	display: block;
	margin-top: var(--kwat-space-3);
	font-size: var(--kwat-text-sm);
	font-style: normal;
	font-weight: 600;
	color: var(--kwat-rt-quote-accent);
	letter-spacing: 0.02em;
}

.kwat-rt__content blockquote cite::before {
	content: "\2014\00a0";
}

/* ── Hinweis-Boxen (Callouts) ──────────────────────────────────────────────── */
.kwat-rt__callout {
	margin: var(--kwat-space-5) 0;
	padding: var(--kwat-space-4) var(--kwat-space-5);
	border-left: 4px solid;
	border-radius: var(--kwat-rt-callout-radius);
}

.kwat-rt__callout-head {
	display: flex;
	align-items: center;
	gap: var(--kwat-space-2);
	margin-bottom: var(--kwat-space-1);
}

.kwat-rt__callout-icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 1.2em;
	height: 1.2em;
}

.kwat-rt__callout-icon svg {
	width: 100%;
	height: 100%;
}

.kwat-rt.kwat-rt .kwat-rt__callout-title {
	font-family: var(--kwat-font-body);
	font-size: var(--kwat-text-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.kwat-rt__callout-body {
	line-height: 1.6;
	color: var(--kwat-rt-text-color);
}

.kwat-rt__callout-body > :last-child {
	margin-bottom: 0;
}

/* Hinweis (Gold). Auf dem dunklen Theme direkt WCAG-AA gesetzt (kein Modus-Wechsel). */
.kwat-rt__callout--info {
	border-color: var(--kwat-color-accent);
	background: color-mix(in srgb, var(--kwat-color-accent) 12%, var(--kwat-color-surface));
}

.kwat-rt__callout--info .kwat-rt__callout-icon,
.kwat-rt__callout--info .kwat-rt__callout-title {
	color: var(--kwat-color-accent-hover);
}

/* Tipp (Erfolgsgrün). */
.kwat-rt__callout--tip {
	border-color: var(--kwat-color-success);
	background: color-mix(in srgb, var(--kwat-color-success) 14%, var(--kwat-color-surface));
}

.kwat-rt__callout--tip .kwat-rt__callout-icon,
.kwat-rt__callout--tip .kwat-rt__callout-title {
	color: var(--kwat-color-success);
}

/* Achtung (Warnfarbe). */
.kwat-rt__callout--warning {
	border-color: var(--kwat-color-danger);
	background: color-mix(in srgb, var(--kwat-color-danger) 14%, var(--kwat-color-surface));
}

.kwat-rt__callout--warning .kwat-rt__callout-icon,
.kwat-rt__callout--warning .kwat-rt__callout-title {
	color: var(--kwat-color-danger);
}

/* ── Listen ────────────────────────────────────────────────────────────────── */
.kwat-rt__content ul,
.kwat-rt__content ol {
	margin: 0 0 var(--kwat-rt-paragraph-spacing) 0;
	padding-inline-start: var(--kwat-rt-list-indent);
}

.kwat-rt__content li {
	margin-bottom: var(--kwat-rt-list-item-spacing);
	line-height: 1.6;
}

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

.kwat-rt__content ol li::marker {
	color: var(--kwat-rt-list-marker-color);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.kwat-rt__content ul li::marker {
	color: var(--kwat-rt-list-marker-color);
}

/* Eigene Aufzählungszeichen (Punkt/Häkchen/Pfeil). */
.kwat-rt__content--list-dot ul,
.kwat-rt__content--list-check ul,
.kwat-rt__content--list-arrow ul {
	list-style: none;
	padding-inline-start: var(--kwat-rt-list-indent);
}

.kwat-rt__content--list-dot ul li::before,
.kwat-rt__content--list-check ul li::before,
.kwat-rt__content--list-arrow ul li::before {
	display: inline-block;
	inline-size: var(--kwat-rt-list-indent);
	margin-inline-start: calc(var(--kwat-rt-list-indent) * -1);
	color: var(--kwat-rt-list-marker-color);
}

.kwat-rt__content--list-dot ul li::before {
	content: "\25CF";
	font-size: 0.7em;
	vertical-align: middle;
}

.kwat-rt__content--list-check ul li::before {
	content: "\2713";
	font-weight: 700;
}

.kwat-rt__content--list-arrow ul li::before {
	content: "\2192";
}

/* ── Spalten-Layout ────────────────────────────────────────────────────────── */
@container kwat-rt (min-width: 37.5rem) {
	.kwat-rt__content--columns-2 {
		columns: 2;
		column-gap: var(--kwat-rt-column-gap);
		column-rule: 1px solid var(--kwat-rt-column-rule-color);
		max-width: none;
	}
}

@container kwat-rt (min-width: 56rem) {
	.kwat-rt__content--columns-3 {
		columns: 3;
		column-gap: var(--kwat-rt-column-gap);
		column-rule: 1px solid var(--kwat-rt-column-rule-color);
		max-width: none;
	}
}

/* Boxen nicht über Spalten zerreißen. */
.kwat-rt__content blockquote,
.kwat-rt__callout,
.kwat-rt__content figure {
	break-inside: avoid;
}

/* Schmaler Container: Listen-Einrückung dezent verkleinern. */
@container kwat-rt (max-width: 26rem) {
	.kwat-rt__content {
		--kwat-rt-list-indent: 1.15em;
	}
}

/* ── Silbentrennung ────────────────────────────────────────────────────────── */
.kwat-rt__content--hyphens {
	hyphens: auto;
	overflow-wrap: break-word;
}

/* ── Textschatten ──────────────────────────────────────────────────────────── */
.kwat-rt--shadow .kwat-rt__content {
	text-shadow: 0 1px 3px var(--kwat-rt-shadow-color);
}

/* ── Hoch-/Tiefstellung, Textmarker ────────────────────────────────────────── */
.kwat-rt__content sup,
.kwat-rt__content sub {
	font-size: 0.75em;
	line-height: 0;
}

.kwat-rt__content mark {
	background: color-mix(in srgb, var(--kwat-color-accent) 28%, transparent);
	color: inherit;
	padding: 0.05em 0.2em;
	border-radius: var(--kwat-radius-sm);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ── Bilder mit Bildunterschrift ───────────────────────────────────────────── */
.kwat-rt__content figure {
	margin: var(--kwat-space-5) 0;
}

.kwat-rt__content figure img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--kwat-radius-md);
}

.kwat-rt__content figcaption {
	margin-top: var(--kwat-space-1);
	font-size: var(--kwat-text-sm);
	font-style: italic;
	color: var(--kwat-color-text-muted);
	text-align: center;
}

/* ── Fußnoten ──────────────────────────────────────────────────────────────── */
.kwat-rt__fn-ref {
	font-size: 0.75em;
	font-variant-numeric: tabular-nums;
}

/* Fußnoten-Verweis: kein Unterstrich (hochgestellte Ziffer). */
.kwat-rt.kwat-rt .kwat-rt__fn-ref a {
	color: var(--kwat-rt-footnote-color);
	text-decoration: none;
	font-weight: 700;
	padding: 0 0.15em;
}

.kwat-rt__footnotes {
	margin-top: var(--kwat-space-5);
	padding-top: var(--kwat-space-4);
	border-top: 1px solid var(--kwat-color-border);
	font-size: var(--kwat-text-sm);
	color: var(--kwat-color-text-muted);
}

.kwat-rt.kwat-rt .kwat-rt__footnotes-heading {
	margin: 0 0 var(--kwat-space-2) 0;
	font-family: var(--kwat-font-body);
	font-size: var(--kwat-text-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kwat-color-text-muted);
}

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

.kwat-rt__footnote {
	margin-bottom: var(--kwat-space-1);
	line-height: 1.6;
}

.kwat-rt__footnote::marker {
	color: var(--kwat-rt-footnote-color);
	font-weight: 600;
}

.kwat-rt.kwat-rt .kwat-rt__fn-back {
	margin-left: 0.3em;
	color: var(--kwat-rt-footnote-color);
	text-decoration: none;
}

.kwat-rt.kwat-rt .kwat-rt__fn-back:focus-visible,
.kwat-rt.kwat-rt .kwat-rt__fn-ref a:focus-visible {
	outline: var(--kwat-focus-width) solid var(--kwat-color-focus);
	outline-offset: var(--kwat-focus-offset);
}

/* ── Textauswahl ───────────────────────────────────────────────────────────── */
.kwat-rt__content ::selection {
	background: color-mix(in srgb, var(--kwat-color-accent) 32%, transparent);
}

/* ── Placeholder (nur Elementor-Editor) ────────────────────────────────────── */
.kwat-rt--placeholder {
	padding: var(--kwat-space-5);
	border: 2px dashed var(--kwat-color-border-strong);
	border-radius: var(--kwat-radius-md);
	text-align: center;
	font-style: italic;
	color: var(--kwat-color-text-muted);
	background: var(--kwat-color-surface);
}

.kwat-rt--placeholder p {
	margin: 0;
}

/* ── Scroll-Reveal: View Timeline (CSS, kein JS) ───────────────────────────── */
@supports (animation-timeline: view()) {
	.kwat-rt--reveal {
		animation: kwat-rt-rise linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 35%;
	}
}

@keyframes kwat-rt-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ── Bewegung reduzieren (BFSG) ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.kwat-rt__content a {
		transition: none;
	}

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

/* ── Windows-Kontrastmodus ─────────────────────────────────────────────────── */
@media (forced-colors: active) {
	.kwat-rt__callout {
		border: 1px solid CanvasText;
		border-left-width: 4px;
	}
}

/* ── Druck ─────────────────────────────────────────────────────────────────── */
@media print {
	.kwat-rt {
		background: none;
		box-shadow: none;
		border-radius: 0;
	}

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

	/* Externe Links: Ziel-URL als Klammerzusatz drucken. */
	.kwat-rt__content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}

	.kwat-rt__ext-icon {
		display: none;
	}

	.kwat-rt__callout,
	.kwat-rt__content blockquote {
		break-inside: avoid;
	}
}