/* KW Biohof – Fließtext-Widget.
 *
 * Professionelle Typografie mit Token-System: optionale Überschrift, Initiale,
 * Einleitungsabsatz, Spalten, Listenstile, Blockzitate, Hinweis-Boxen, Fußnoten
 * und automatisch gekennzeichnete externe Links. Effekte sind CSS-only (kein JS).
 * Tokens fallen auf die Marken-Farben aus „Design & Farben" zurück.
 */

/* ── Widget-Scope Tokens (Fallback auf Marken-Token) ───────────────────────── */

.biohof-rt {
	--biohof-rt-text-color: var(--biohof-color-text);
	--biohof-rt-content-heading-color: var(--biohof-color-text-strong);
	--biohof-rt-link-color: var(--biohof-color-primary);
	--biohof-rt-link-hover-color: var(--biohof-color-primary-hover);
	--biohof-rt-link-underline-color: var(--biohof-color-accent);

	/* Geteilter Inline-Link-Stil (core/link.css) auf die Fließtext-Tokens mappen. */
	--biohof-link-color: var(--biohof-rt-link-color);
	--biohof-link-line-color: var(--biohof-rt-link-underline-color);
	--biohof-link-active-color: var(--biohof-rt-link-hover-color);
	--biohof-rt-paragraph-spacing: var(--biohof-space-md);
	--biohof-rt-dropcap-color: var(--biohof-color-primary);
	--biohof-rt-dropcap-size: 3.2em;
	--biohof-rt-lead-color: var(--biohof-color-text-strong);
	--biohof-rt-lead-font-size: 1.2em;
	--biohof-rt-quote-accent: var(--biohof-color-primary);
	--biohof-rt-quote-bg: color-mix(in oklch, var(--biohof-color-primary) 6%, var(--biohof-color-bg));
	--biohof-rt-quote-text: var(--biohof-color-text);
	--biohof-rt-quote-border-width: 4px;
	--biohof-rt-list-marker-color: var(--biohof-color-primary);
	--biohof-rt-list-item-spacing: var(--biohof-space-xs);
	--biohof-rt-list-indent: 1.5em;
	--biohof-rt-external-icon-color: var(--biohof-color-text-muted);
	--biohof-rt-external-icon-size: 0.8em;
	--biohof-rt-column-gap: var(--biohof-space-xl);
	--biohof-rt-column-rule-color: var(--biohof-color-border);
	--biohof-rt-shadow-color: color-mix(in oklch, var(--biohof-color-text-strong) 22%, transparent);
	--biohof-rt-callout-radius: var(--biohof-radius-md);
	--biohof-rt-footnote-color: var(--biohof-color-primary);
	--biohof-rt-max-width: 70ch;
	--biohof-rt-radius: 0;
	--biohof-rt-bg: transparent;

	/* Spalten reagieren auf die Widget-Breite, nicht den Viewport. Die
	   Überschrift-Seitenlinien bringt die geteilte Komponente mit eigenem
	   Container mit (assets/css/core/heading.css). Container bewusst auf der Wurzel:
	   die @container-Query stylt __content selbst (Spalten) → Container muss Vorfahr
	   sein; Elementor-Hüllen-Konflikt global via elementor-defense (width:100%) gelöst. */
	container-type: inline-size;
	container-name: biohof-rt;
}

/* ── Basis-Layout ──────────────────────────────────────────────────────────── */

.biohof-rt {
	display: flex;
	flex-direction: column;
	max-width: 100%;
	background: var(--biohof-rt-bg);
	border-radius: var(--biohof-rt-radius);
	/* Gegen das Dehnen im Elementor-Flex-Container (V4 Gotcha). */
	align-self: flex-start;
}

/* Überschrift (Eyebrow, Titel, Akzent, Trenner, Seitenlinien): geteilte
   Komponente in assets/css/core/heading.css. */

/* ── Content – Basis-Typografie ────────────────────────────────────────────── */

.biohof.biohof-rt .biohof-rt__content {
	/* Standard: Text füllt die Container-Breite (keine schmale, schwebende Spalte). */
	max-inline-size: none;
	font-family: var(--biohof-font-body);
	font-size: var(--biohof-fs-400);
	line-height: var(--biohof-line-base);
	color: var(--biohof-rt-text-color);
}

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

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

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

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

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

.biohof-rt__content :where(h2, h3, h4) {
	margin: var(--biohof-space-lg) 0 var(--biohof-space-sm);
	font-family: var(--biohof-font-heading);
	color: var(--biohof-rt-content-heading-color);
}

/* ── Links – intern ────────────────────────────────────────────────────────── */
/* Pinselstrich-Hover = geteilter Baustein `assets/css/core/link.css`
   (Haken `.biohof-inklinks` am Content-Wrapper). Farben oben gemappt. */

/* ── Links – extern (automatisch gekennzeichnet) ───────────────────────────── */

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

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

/* ── Initiale (Drop Cap) ───────────────────────────────────────────────────── */

.biohof-rt__content--dropcap > p:first-of-type::first-letter {
	float: left;
	font-family: var(--biohof-font-heading);
	font-size: var(--biohof-rt-dropcap-size);
	font-weight: var(--biohof-weight-bold);
	line-height: 1;
	color: var(--biohof-rt-dropcap-color);
	margin-right: 0.12em;
	margin-top: 0.05em;
}

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

/* ── Einleitungsabsatz (Lead) ──────────────────────────────────────────────── */

.biohof.biohof-rt .biohof-rt__content--lead > p:first-of-type {
	font-size: var(--biohof-rt-lead-font-size);
	font-weight: var(--biohof-weight-medium);
	line-height: var(--biohof-line-snug);
	color: var(--biohof-rt-lead-color);
}

/* ── Blockzitat ────────────────────────────────────────────────────────────── */

.biohof-rt__content blockquote {
	position: relative;
	margin: var(--biohof-space-lg) 0;
	padding: var(--biohof-space-lg) var(--biohof-space-lg) var(--biohof-space-md);
	border-left: var(--biohof-rt-quote-border-width) solid var(--biohof-rt-quote-accent);
	border-radius: 0 var(--biohof-radius-sm) var(--biohof-radius-sm) 0;
	background: var(--biohof-rt-quote-bg);
	color: var(--biohof-rt-quote-text);
	font-style: italic;
	line-height: var(--biohof-line-base);
}

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

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

.biohof-rt__content blockquote cite {
	display: block;
	margin-top: var(--biohof-space-sm);
	font-size: var(--biohof-fs-300);
	font-style: normal;
	font-weight: var(--biohof-weight-semibold);
	color: var(--biohof-rt-quote-accent);
	letter-spacing: 0.02em;
}

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

/* ── Hinweis-Boxen (Callouts) ──────────────────────────────────────────────── */

.biohof-rt__callout {
	margin: var(--biohof-space-lg) 0;
	padding: var(--biohof-space-md) var(--biohof-space-lg);
	border-left: 4px solid;
	border-radius: var(--biohof-rt-callout-radius);
}

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

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

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

.biohof.biohof-rt .biohof-rt__callout-title {
	font-family: var(--biohof-font-body);
	font-size: var(--biohof-fs-300);
	font-weight: var(--biohof-weight-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

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

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

/* Hinweis (Primärgrün) */
.biohof-rt__callout--info {
	border-color: var(--biohof-color-primary);
	background: color-mix(in oklch, var(--biohof-color-primary) 7%, var(--biohof-color-bg));
}

.biohof-rt__callout--info .biohof-rt__callout-icon,
.biohof-rt__callout--info .biohof-rt__callout-title {
	color: var(--biohof-color-primary);
}

/* Tipp (Erfolgsgrün) */
.biohof-rt__callout--tip {
	border-color: var(--biohof-color-success);
	background: color-mix(in oklch, var(--biohof-color-success) 8%, var(--biohof-color-bg));
}

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

/* Achtung (Warnfarbe) */
.biohof-rt__callout--warning {
	border-color: var(--biohof-color-warning);
	background: color-mix(in oklch, var(--biohof-color-warning) 8%, var(--biohof-color-bg));
}

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

/* ── Listen ────────────────────────────────────────────────────────────────── */

.biohof-rt__content ul,
.biohof-rt__content ol {
	margin: 0 0 var(--biohof-rt-paragraph-spacing) 0;
	padding-inline-start: var(--biohof-rt-list-indent);
}

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

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

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

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

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

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

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

.biohof-rt__content--list-check ul li::before {
	content: "\2713";
	font-weight: var(--biohof-weight-bold);
}

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

/* ── Spalten-Layout ────────────────────────────────────────────────────────── */

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

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

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

/* Schmaler Container: Listen-Einrückung dezent verkleinern (reagiert auf die
   Widget-Breite, nicht den Viewport). */
@container biohof-rt (max-width: 26rem) {
	.biohof-rt__content {
		--biohof-rt-list-indent: 1.15em;
	}
}

/* ── Silbentrennung ────────────────────────────────────────────────────────── */

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

/* ── Textschatten ──────────────────────────────────────────────────────────── */

.biohof-rt--shadow .biohof-rt__content {
	text-shadow: 0 1px 3px var(--biohof-rt-shadow-color);
}

/* ── Hoch-/Tiefstellung, Textmarker ────────────────────────────────────────── */

.biohof-rt__content sup,
.biohof-rt__content sub {
	font-size: 0.75em;
	line-height: 0;
}

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

/* ── Bilder mit Bildunterschrift ───────────────────────────────────────────── */

.biohof-rt__content figure {
	margin: var(--biohof-space-lg) 0;
}

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

.biohof-rt__content figcaption {
	margin-top: var(--biohof-space-2xs);
	font-size: var(--biohof-fs-300);
	font-style: italic;
	color: var(--biohof-color-text-muted);
	text-align: center;
}

/* ── Fußnoten ──────────────────────────────────────────────────────────────── */

.biohof-rt__fn-ref {
	font-size: 0.75em;
	font-variant-numeric: tabular-nums;
}

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

.biohof-rt .biohof-rt__fn-ref a::before {
	content: none;
}

.biohof-rt__footnotes {
	margin-top: var(--biohof-space-lg);
	padding-top: var(--biohof-space-md);
	border-top: 1px solid var(--biohof-color-border);
	font-size: var(--biohof-fs-300);
	color: var(--biohof-color-text-muted);
}

.biohof.biohof-rt .biohof-rt__footnotes-heading {
	margin: 0 0 var(--biohof-space-xs) 0;
	font-family: var(--biohof-font-body);
	font-size: var(--biohof-fs-300);
	font-weight: var(--biohof-weight-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--biohof-color-text-muted);
}

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

.biohof-rt__footnote {
	margin-bottom: var(--biohof-space-2xs);
	line-height: var(--biohof-line-base);
}

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

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

/* ── Textauswahl ───────────────────────────────────────────────────────────── */

.biohof-rt__content ::selection {
	background: color-mix(in oklch, var(--biohof-color-accent) 32%, transparent);
}

/* ── Placeholder (nur Elementor-Editor) ────────────────────────────────────── */

.biohof-rt--placeholder {
	padding: var(--biohof-space-lg);
	border: 2px dashed var(--biohof-color-border);
	border-radius: var(--biohof-radius-md);
	text-align: center;
	font-style: italic;
	color: var(--biohof-color-text);
	background: var(--biohof-color-surface);
}

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

/* ── Scroll-Reveal: View Timeline (CSS, kein JS) ───────────────────────────── */

@supports (animation-timeline: view()) {
	.biohof-rt--reveal {
		animation: biohof-rt-rise linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 35%;
	}
}

@keyframes biohof-rt-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ── Dark Mode ─────────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
	.biohof-rt {
		--biohof-rt-quote-bg: color-mix(in oklch, var(--biohof-color-primary) 12%, var(--biohof-color-surface));
		--biohof-rt-shadow-color: color-mix(in oklch, var(--biohof-color-bg) 75%, transparent);
	}

	.biohof-rt__callout--info {
		background: color-mix(in oklch, var(--biohof-color-primary) 14%, var(--biohof-color-surface));
	}

	.biohof-rt__callout--tip {
		background: color-mix(in oklch, var(--biohof-color-success) 16%, var(--biohof-color-surface));
	}

	.biohof-rt__callout--warning {
		background: color-mix(in oklch, var(--biohof-color-warning) 16%, var(--biohof-color-surface));
	}

	/* Tipp/Achtung nutzen feste Status-Farben (kein Dunkel-Wechsel). Auf dunklem
	   Box-Grund den Titel/das Icon aufhellen, sonst < WCAG-AA (gemessen 2,4:1). */
	.biohof-rt__callout--tip .biohof-rt__callout-icon,
	.biohof-rt__callout--tip .biohof-rt__callout-title {
		color: color-mix(in oklch, var(--biohof-color-success) 55%, var(--biohof-color-text-strong));
	}

	.biohof-rt__callout--warning .biohof-rt__callout-icon,
	.biohof-rt__callout--warning .biohof-rt__callout-title {
		color: color-mix(in oklch, var(--biohof-color-warning) 55%, var(--biohof-color-text-strong));
	}
}

/* ── Bewegung reduzieren (BFSG) ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.biohof-rt__content a {
		transition: none;
	}

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

/* ── Druck ─────────────────────────────────────────────────────────────────── */

@media print {
	.biohof-rt {
		background: none;
		box-shadow: none;
		border-radius: 0;
	}

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

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

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

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