/* Modul: Hinweisbox */

/*
 * Farben, Strichfarbe und Radius kommen als Variablen: aus der Vorlage je
 * Variante, bei Bedarf vom einzelnen Modul per Inline-Style überschrieben.
 */
.cype-callout {
	display: flex;
	gap: 14px;
	padding: 18px 20px;
	background: var(--cype-callout-bg, transparent);
	color: var(--cype-callout-color, inherit);
	border-radius: var(--cype-callout-radius, var(--cype-radius, 8px));
}

/* Akzentstrich links — abschaltbar. */
.cype-callout--border {
	border-left: 4px solid var(--cype-callout-border, currentColor);
}

.cype-callout__icon {
	flex: 0 0 auto;
	font-size: 1.2em;
	line-height: 1.4;
}

.cype-callout__body {
	min-width: 0;
}

/*
 * Die Vorlage färbt Fließtext über `.cype-scope p, .cype-scope li` — eine
 * Klasse plus ein Element. Eine Regel auf `.cype-callout` allein verliert
 * dagegen, die Farbe der Box käme also nie am Absatz an. Deshalb erben die
 * Textelemente hier ausdrücklich, mit genug Gewicht.
 */
.cype-callout .cype-callout__body :where(p, li, ul, ol, blockquote, dd, dt),
.cype-callout .cype-callout__body .cype-text {
	color: inherit;
}

.cype-callout__body > :first-child {
	margin-top: 0;
}

.cype-callout__body > :last-child {
	margin-bottom: 0;
}

/* Muss die Vererbungsregel oben überstimmen, deshalb der volle Pfad. */
.cype-callout .cype-callout__body .cype-callout__title {
	margin-top: 0;
	margin-bottom: 0.3em;
	font-size: var(--cype-callout-title-size, inherit);
	color: var(--cype-callout-title-color, inherit);
	line-height: 1.3;
}

/*
 * Titel mit eigener Fläche: eigener Innenabstand, damit Hintergrund und
 * Radius wie bei einem Button wirken.
 */
.cype-callout__title--boxed {
	display: inline-block;
	background: var(--cype-callout-title-bg, transparent);
	border-radius: var(--cype-callout-title-radius, 0);
	padding: 0.28em 0.75em;
}