/* --- EssenceBox — „Auf einen Blick": die Vorteile einer Seite, verdichtet --- */

/* --- Custom Properties --- */

.kw-eb {
	--kwl-eb-accent: var(--kwl-accent, #BD9B5C);
	--kwl-eb-icon: var(--kwl-eb-icon-color, var(--kwl-eb-accent));
	--kwl-eb-surface: var(--kwl-eb-frame-bg, var(--kwl-bg, #ffffff));
	--kwl-eb-border: var(--kwl-eb-frame-border, var(--kwl-border, #e2e8f0));
	--kwl-eb-rule: color-mix(in srgb, var(--kwl-eb-accent) 16%, transparent);
	--kwl-eb-eyebrow-text: color-mix(in srgb, var(--kwl-eb-accent) 55%, var(--kwl-text, #1a202c));
	--kwl-eb-gap-x: var(--kwl-space-xl, 2rem);
	--kwl-eb-arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>');
	align-self: flex-start;
	width: 100%;
	font-family: var(--kwl-font-body);
	color: var(--kwl-text, #1a202c);
}

.kw-eb__inner {
	position: relative;
}

/* --- Rahmen-Variante: warme Toenung + goldene Kopfkante --- */

.kw-eb--framed .kw-eb__inner {
	overflow: hidden;
	padding: clamp(var(--kwl-space-md, 1rem), 3vw, var(--kwl-space-lg, 1.5rem)) clamp(var(--kwl-space-md, 1rem), 3vw, var(--kwl-space-xl, 2rem));
	border: 1px solid var(--kwl-eb-border);
	border-radius: var(--kwl-radius-lg, 12px);
	background: linear-gradient(180deg, color-mix(in srgb, var(--kwl-eb-accent) 5%, var(--kwl-eb-surface)), var(--kwl-eb-surface) 55%);
	box-shadow: var(--kwl-shadow-sm);
}

/* Goldene Kopfkante als Signatur */
.kw-eb--framed .kw-eb__inner::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: linear-gradient(90deg, var(--kwl-eb-accent), color-mix(in srgb, var(--kwl-eb-accent) 35%, transparent) 60%, transparent);
}

/* --- Kopf: Ueberschrift/Intro links, optionale Eyebrow-Marke rechts (Desktop) / oben (Handy) --- */

.kw-eb__header {
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-sm, 0.5rem);
	margin-bottom: var(--kwl-space-md, 1rem);
}

.kw-eb__heading {
	margin: 0 0 var(--kwl-space-xs, 0.25rem);
}

.kw-eb__intro {
	margin: 0;
	max-width: 62ch;
	color: var(--kwl-text-muted, #5b6473);
	font-size: var(--kwl-fsize-small, 0.875rem);
	line-height: var(--kwl-lh-snug, 1.3);
}

.kw-eb__eyebrow {
	order: -1;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: var(--kwl-space-xs, 0.25rem);
	padding: 0.3rem 0.7rem;
	border-radius: var(--kwl-radius-full, 9999px);
	font-size: var(--kwl-fsize-caption, 0.78rem);
	font-weight: var(--kwl-fw-semibold, 600);
	letter-spacing: var(--kwl-ls-light, 0.02em);
	color: var(--kwl-eb-eyebrow-text);
	background: color-mix(in srgb, var(--kwl-eb-accent) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--kwl-eb-accent) 25%, transparent);
}

.kw-eb__eyebrow::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--kwl-eb-accent);
}

@media (min-width: 560px) {
	.kw-eb__header {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--kwl-space-sm, 0.5rem) var(--kwl-space-lg, 1.2rem);
	}

	.kw-eb__headings {
		flex: 1 1 18rem;
		min-width: 0;
	}

	.kw-eb__eyebrow {
		order: 0;
		margin-top: 0.2rem;
	}
}

/* --- Fakten-Register (Definitionsliste) --- */

.kw-eb__facts {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	gap: 0 var(--kwl-eb-gap-x);
	margin: 0;
	padding: 0;
}

.kw-eb__item {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: var(--kwl-space-md, 0.65rem);
	align-items: center;
	padding: var(--kwl-space-sm, 0.5rem) 0;
	border-top: 1px solid var(--kwl-eb-rule);
}

/* Erste Reihe ohne Trennlinie (1 Spalte) */
.kw-eb__item:first-child {
	border-top: 0;
}

/* dt aufloesen: Icon + Stichwort werden direkte Raster-Kinder */
.kw-eb__term {
	display: contents;
}

/* --- Icon-Chip: zarter Gold-Kreis, vertikal mittig zum Eintrag --- */

.kw-eb__icon {
	grid-column: 1;
	grid-row: 1 / 3;
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2rem;
	block-size: 2rem;
	flex-shrink: 0;
	border-radius: var(--kwl-radius-full, 9999px);
	border: 1px solid color-mix(in srgb, var(--kwl-eb-icon) 22%, transparent);
	background: color-mix(in srgb, var(--kwl-eb-icon) 10%, transparent);
	color: var(--kwl-eb-icon);
}

.kw-eb__icon--empty {
	border-style: dashed;
	border-color: color-mix(in srgb, var(--kwl-text-muted, #5b6473) 30%, transparent);
	background: none;
}

.kw-eb__icon .kwl-icon {
	width: 1.05rem;
	height: 1.05rem;
}

/* --- Stichwort + Erklaerung --- */

.kw-eb__term-text {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	color: var(--kwl-eb-term-color, var(--kwl-text, #1a202c));
	font-weight: var(--kwl-fw-semibold, 600);
	font-size: var(--kwl-fsize-small, 0.875rem);
	line-height: var(--kwl-lh-snug, 1.3);
	overflow-wrap: break-word;
}

.kw-eb__detail {
	grid-column: 2;
	grid-row: 2;
	display: -webkit-box;
	margin: 0.05rem 0 0;
	color: var(--kwl-text-muted, #5b6473);
	font-size: var(--kwl-fsize-caption, 0.78rem);
	line-height: var(--kwl-lh-snug, 1.3);
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow-wrap: break-word;
}

.kw-eb__detail:empty {
	display: none;
}

/* --- Optionaler Mini-Hinweis (leise Fusszeile) --- */

.kw-eb__hint {
	display: flex;
	align-items: center;
	gap: var(--kwl-space-xs, 0.45rem);
	margin: var(--kwl-space-md, 0.95rem) 0 0;
	color: var(--kwl-text-muted, #5b6473);
	font-size: var(--kwl-fsize-caption, 0.78rem);
	line-height: var(--kwl-lh-snug, 1.3);
}

.kw-eb__hint::before {
	content: '';
	flex-shrink: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--kwl-eb-accent) 55%, transparent);
}

/* --- CTAs: Layout (Optik der Buttons via Shared [data-kwl-btn]) --- */

.kw-eb__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kwl-space-sm, 0.5rem) var(--kwl-space-md, 0.85rem);
	margin-block-start: var(--kwl-space-lg, 1.2rem);
}

.kw-eb--actions-center .kw-eb__actions {
	justify-content: center;
}

/* Sehr dezenter Textlink mit Pfeil (V4-Reset via data-kwl-link) */
.kw-eb__cta--link {
	--kwl-link-color: var(--kwl-primary, #00315d);
	--kwl-link-hover-color: var(--kwl-primary-hover, #1e3a5f);
	display: inline-flex;
	align-items: center;
	gap: var(--kwl-space-xs, 0.3rem);
	padding: 0.5rem 0.25rem;
	font-weight: var(--kwl-fw-semibold, 600);
	font-size: var(--kwl-fsize-small, 0.875rem);
	letter-spacing: var(--kwl-ls-subtle, 0.01em);
}

.kw-eb__cta--link::after {
	content: '';
	flex-shrink: 0;
	width: 1.05em;
	height: 1.05em;
	background-color: currentColor;
	-webkit-mask: var(--kwl-eb-arrow) center / contain no-repeat;
	mask: var(--kwl-eb-arrow) center / contain no-repeat;
	transition: transform 200ms var(--kwl-ease-soft, ease);
}

@media (hover: hover) {
	.kw-eb__cta--link:hover::after {
		transform: translateX(3px);
	}
}

/* --- Download-Button (Fact Sheet): Icon + Text + dezente Format/Groesse --- */

.kw-eb__cta--download .kw-eb__dl-icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.kw-eb__cta--download .kw-eb__dl-icon svg {
	display: block;
	width: 1.1em;
	height: 1.1em;
}

/* Erbt die Button-Textfarbe (currentColor) -> bleibt AA, nur kleiner/leiser */
.kw-eb__dl-size {
	font-size: 0.82em;
	font-weight: var(--kwl-fw-regular, 400);
	letter-spacing: var(--kwl-ls-subtle, 0.01em);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* --- Spaltenzahl am Desktop --- */

@media (min-width: 560px) {
	.kw-eb--cols-2 .kw-eb__facts {
		grid-template-columns: 1fr 1fr;
	}

	.kw-eb--cols-2 .kw-eb__item:nth-child(2) {
		border-top: 0;
	}

	.kw-eb--cols-3 .kw-eb__facts {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.kw-eb--cols-3 .kw-eb__item:nth-child(2),
	.kw-eb--cols-3 .kw-eb__item:nth-child(3) {
		border-top: 0;
	}
}

/* --- Zentriert-Variante (Fakten bleiben fuer Lesbarkeit linksbuendig) --- */

.kw-eb--center .kw-eb__header {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.kw-eb--center .kw-eb__intro {
	margin-inline: auto;
}

.kw-eb--center .kw-eb__actions {
	justify-content: center;
}

/* --- Dark Mode --- */

@media (prefers-color-scheme: dark) {
	.kw-eb--framed .kw-eb__inner {
		background: linear-gradient(180deg, color-mix(in srgb, var(--kwl-eb-accent) 12%, var(--kwl-eb-surface)), var(--kwl-eb-surface) 55%);
	}

	.kw-eb__icon {
		background: color-mix(in srgb, var(--kwl-eb-icon) 16%, transparent);
		border-color: color-mix(in srgb, var(--kwl-eb-icon) 30%, transparent);
	}

	.kw-eb__eyebrow {
		color: color-mix(in srgb, var(--kwl-eb-accent) 75%, var(--kwl-text, #f1f3f6));
	}
}

/* --- High-Contrast-Modus --- */

@media (forced-colors: active) {
	.kw-eb__icon {
		border: 1px solid CanvasText;
	}

	.kw-eb--framed .kw-eb__inner {
		border: 1px solid CanvasText;
	}

	.kw-eb__item {
		border-top-color: CanvasText;
	}

	.kw-eb__cta--link::after {
		background-color: LinkText;
	}
}