/* ==========================================================================
   Fentrax-Widgets (Kategorie «Fentrax»): fx-fazit, fx-tipp, fx-entstehung, fx-prompt.
   Farben und Schriften kommen aus den globalen Werten des Kits (Website-Einstellungen):
     Farben  --e-global-color-primary (Nachtblau), -secondary (Gelb), -text, -accent (Gelb dunkel),
             -gelbhell, -hellblau, -blau, -linie, -weiss, -creme
     Schrift --e-global-typography-fxtitel / fxtext / fxuntertitel / fxbeitrag / fxlabel / fxprompt (eigene Kit-Schriften),
             -primary (Wortmarke), -text
   Feste Werte stehen nur als Rückfall in var(). Die Variante setzt die --fx-w-… Variablen, die
   Stil-Einstellungen des Widgets überschreiben dieselben Variablen am Kasten.
   ========================================================================== */

.fx-w {
	--fx-w-bg: var(--e-global-color-gelbhell, #fdf4d8);
	--fx-w-akzent: var(--e-global-color-secondary, #f5c02f);
	--fx-w-rand: color-mix(in srgb, var(--fx-w-akzent) 42%, var(--e-global-color-weiss, #fff));
	--fx-w-randbreite: 1px;
	--fx-w-radius: 14px;
	--fx-w-text: var(--e-global-color-text, #16213a);
	--fx-w-titel: var(--e-global-color-primary, #16213a);
	--fx-w-label: var(--e-global-color-accent, #8a6408);
	position: relative;
	box-sizing: border-box;
	margin: 0;
	background: var(--fx-w-bg);
	color: var(--fx-w-text);
	border: var(--fx-w-randbreite) solid var(--fx-w-rand);
	border-radius: var(--fx-w-radius);
	text-align: start;
}
.fx-w--blau {
	--fx-w-bg: var(--e-global-color-hellblau, #eaf1f9);
	--fx-w-akzent: var(--e-global-color-blau, #1c4976);
	--fx-w-rand: color-mix(in srgb, var(--e-global-color-blau, #1c4976) 14%, var(--e-global-color-hellblau, #eaf1f9));
	--fx-w-label: var(--e-global-color-blau, #1c4976);
}
.fx-w--neutral {
	--fx-w-bg: var(--e-global-color-weiss, #fff);
	--fx-w-rand: var(--e-global-color-linie, #ebe5d6);
}
.fx-w--nacht {
	--fx-w-bg: var(--e-global-color-primary, #16213a);
	--fx-w-text: color-mix(in srgb, var(--e-global-color-creme, #faf7f0) 97%, var(--e-global-color-primary, #16213a));
	--fx-w-titel: var(--e-global-color-weiss, #fff);
	--fx-w-label: var(--fx-w-akzent);
	--fx-w-rand: var(--fx-w-bg);
	--fx-w-randbreite: 0px;
}

/* Titel: Werte des Beitrags-h2 (fentrax.css) neutralisieren, eigene Werte aus den Kit-Schriften */
.fx-w.fx-w .fx-w__titel {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--fx-w-titel);
	text-wrap: balance;
}
.fx-w__text { color: var(--fx-w-text); }
.fx-w.fx-w .fx-w__text > * { margin-block: 0; }
.fx-w.fx-w .fx-w__text > * + * { margin-block-start: 1em; }
.fx-w.fx-w .fx-w__text :is(p, li) { font-size: inherit; line-height: inherit; color: inherit; }
.fx-w .fx-w__text a { color: inherit; text-decoration-color: var(--fx-w-akzent); }

/* Anführungszeichen und Wortmarke (einfarbig) */
.fx-w__zeichen {
	display: block;
	height: 34px;
	font: 900 5rem/.6 Georgia, "Times New Roman", serif;
	color: var(--fx-w-akzent);
	user-select: none;
}
.fx-w.fx-w .fx-w__signatur {
	width: fit-content;
	padding-top: .85rem;
	border-top: 3px solid var(--fx-w-akzent);
	font: 800 1rem/1 var(--e-global-typography-primary-font-family, "Anybody"), "Arial Narrow", sans-serif;
	font-stretch: 125%;
	letter-spacing: .03em;
	color: var(--fx-w-titel);
}

/* ---------- Mein Fazit ---------- */
.fx-w-fazit { padding: 1.9rem 2rem 1.6rem; }
.fx-w-fazit > * + * { margin-block-start: .9rem; }
.fx-w.fx-w-fazit > .fx-w__signatur { margin: 1.15rem 0 0; font-size: 1.15rem; }
.fx-w.fx-w-fazit .fx-w__titel {
	font-family: var(--e-global-typography-fxtitel-font-family, var(--e-global-typography-primary-font-family, "Anybody")), "Arial Narrow", sans-serif;
	font-weight: var(--e-global-typography-fxtitel-font-weight, 800);
	font-size: var(--e-global-typography-fxtitel-font-size, 1.6rem);
	line-height: var(--e-global-typography-fxtitel-line-height, 1.2);
	font-stretch: 100%;
}
.fx-w.fx-w-fazit .fx-w__text {
	font-family: var(--e-global-typography-fxtext-font-family, var(--e-global-typography-text-font-family, "Atkinson Hyperlegible Next")), system-ui, sans-serif;
	font-weight: var(--e-global-typography-fxtext-font-weight, 400);
	font-size: var(--e-global-typography-fxtext-font-size, 1.15rem);
	line-height: var(--e-global-typography-fxtext-line-height, 1.72);
}

/* ---------- Mein Tipp ---------- */
.fx-w-tipp {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	gap: .9rem;
	align-items: start;
	--fx-w-randbreite: 0px;
	border-inline-start: 5px solid var(--fx-w-akzent);
	border-radius: 0 var(--fx-w-radius) var(--fx-w-radius) 0;
	padding: 1.1rem 1.4rem;
}
.fx-w-tipp .fx-w__icon { width: 1.9rem; height: 1.9rem; color: var(--fx-w-titel); }
.fx-w-tipp .fx-w__inhalt { min-width: 0; }
.fx-w-tipp.fx-w--doppelpunkt .fx-w__titel::after { content: ":"; }
.fx-w-tipp .fx-w__titel,
.fx-w-tipp .fx-w__text,
.fx-w.fx-w-tipp .fx-w__text > :first-child { display: inline; }
.fx-w.fx-w-tipp .fx-w__text,
.fx-w.fx-w-tipp .fx-w__titel {
	font-family: var(--e-global-typography-fxbeitrag-font-family, var(--e-global-typography-text-font-family, "Atkinson Hyperlegible Next")), system-ui, sans-serif;
	font-weight: var(--e-global-typography-fxbeitrag-font-weight, 400);
	font-size: var(--e-global-typography-fxbeitrag-font-size, 1.18rem);
	line-height: var(--e-global-typography-fxbeitrag-line-height, 1.72);
}
.fx-w.fx-w-tipp .fx-w__text > * + * { display: block; }
.fx-w.fx-w-tipp .fx-w__titel { font-weight: 700; }

/* ---------- Wie dieser Beitrag entstand ---------- */
.fx-w-entstehung { padding: 1.4rem 1.5rem; }
.fx-w-entstehung > * + * { margin-block-start: .6rem; }
.fx-w.fx-w-entstehung .fx-w__titel {
	font-family: var(--e-global-typography-fxuntertitel-font-family, var(--e-global-typography-primary-font-family, "Anybody")), "Arial Narrow", sans-serif;
	font-weight: var(--e-global-typography-fxuntertitel-font-weight, 700);
	font-size: var(--e-global-typography-fxuntertitel-font-size, 1.35rem);
	line-height: var(--e-global-typography-fxuntertitel-line-height, 1.12);
	font-stretch: 100%;
}
.fx-w.fx-w-entstehung .fx-w__text {
	font-family: var(--e-global-typography-fxbeitrag-font-family, var(--e-global-typography-text-font-family, "Atkinson Hyperlegible Next")), system-ui, sans-serif;
	font-weight: var(--e-global-typography-fxbeitrag-font-weight, 400);
	font-size: var(--e-global-typography-fxbeitrag-font-size, 1.18rem);
	line-height: var(--e-global-typography-fxbeitrag-line-height, 1.72);
}

/* ---------- So wurde gefragt (Prompt) ---------- */
.fx-w-prompt {
	--fx-w-radius: 12px;
	padding: 1rem 1.2rem 3.4rem;
}
.fx-w-prompt.fx-w--ohne-knopf { padding-bottom: 1.2rem; }
.fx-w.fx-w-prompt .fx-w__titel {
	margin-block-end: .72rem;
	color: var(--fx-w-label);
	font-family: var(--e-global-typography-fxlabel-font-family, var(--e-global-typography-accent-font-family, "Atkinson Hyperlegible Mono")), ui-monospace, monospace;
	font-weight: var(--e-global-typography-fxlabel-font-weight, 700);
	font-size: var(--e-global-typography-fxlabel-font-size, .68rem);
	line-height: var(--e-global-typography-fxlabel-line-height, 1);
	letter-spacing: var(--e-global-typography-fxlabel-letter-spacing, .14em);
	text-transform: var(--e-global-typography-fxlabel-text-transform, uppercase);
}
.fx-w.fx-w-prompt .fx-w__prompt {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-family: var(--e-global-typography-fxprompt-font-family, var(--e-global-typography-accent-font-family, "Atkinson Hyperlegible Mono")), ui-monospace, monospace;
	font-weight: var(--e-global-typography-fxprompt-font-weight, 400);
	font-size: var(--e-global-typography-fxprompt-font-size, .98rem);
	line-height: var(--e-global-typography-fxprompt-line-height, 1.55);
}
.fx-w.fx-w-prompt .fx-w__notiz {
	margin-block-start: .75rem;
	font-family: var(--e-global-typography-text-font-family, "Atkinson Hyperlegible Next"), system-ui, sans-serif;
	font-size: .95rem;
	line-height: 1.55;
	color: var(--fx-w-text);
	opacity: .85;
}
.fx-w.fx-w-prompt .fx-w__notiz > * { margin-block: 0; }
.fx-w.fx-w-prompt .fx-w__notiz > * + * { margin-block-start: .6rem; }
.fx-w-prompt .fx-w__notiz a { color: var(--fx-w-akzent); }
body[class] .fx-w-prompt .fx-prompt__copy {
	position: absolute;
	right: .75rem;
	bottom: .75rem;
	font: 700 .78rem/1 var(--e-global-typography-accent-font-family, "Atkinson Hyperlegible Mono"), ui-monospace, monospace;
	background: linear-gradient(135deg, var(--fx-w-akzent) 0%, color-mix(in srgb, var(--fx-w-akzent) 75%, var(--e-global-color-weiss, #fff)) 100%);
	color: var(--e-global-color-primary, #16213a);
	border: 0;
	border-radius: 999px;
	padding: .55rem .9rem;
	cursor: pointer;
	text-shadow: none;
	box-shadow: none;
}
body[class] .fx-w-prompt .fx-prompt__copy.is-done { background: var(--e-global-color-weiss, #fff); }

/* ---------- Abstände im Beitrag ---------- */
/* Fazit wie .fx-kt-fazit (margin-block 2.6rem 1.6rem), auch in Containern ohne fx-eb */
.elementor-element.elementor-widget-fx-fazit { margin-block: 2.6rem 1.6rem; }
.fp-post-content .fx-eb > .elementor-element.elementor-widget-fx-fazit { margin-block: 2.6rem 1.6rem; }
/* Kasten selbst ohne Aussenrand (die Hülle regelt den Abstand) */
.fp-post-content .elementor-element > .fx-w { margin-block: 0; }

@media (max-width: 640px) {
	.fx-w-fazit { padding: 1.5rem 1.25rem 1.3rem; }
}
@media (prefers-reduced-motion: no-preference) {
	body[class] .fx-w-prompt .fx-prompt__copy { transition: transform .15s cubic-bezier(.2, .8, .2, 1); }
	body[class] .fx-w-prompt .fx-prompt__copy:hover { transform: translateY(-1px); }
}