/*
 * Ratgeber-Design-Elemente – Stadtportal Core
 * Antwort-Box, Hinweis-Kästen (Tipp/Achtung), Eckdaten-Chips.
 * Themeunabhängig über CSS-Variablen mit Fallbacks. Farben lassen sich
 * projektweit über die --spc-* Variablen überschreiben (Additional CSS).
 * Klassen gibt es doppelt (spc- und sp-), damit Alt-Inhalte weiterlaufen.
 */

:root {
	--spc-box-bg: var(--wp--preset--color--tertiary, #eef2f7);
	--spc-box-border: rgba(0, 0, 0, .10);
	--spc-tip: var(--wp--preset--color--primary, #1d9e75);
	--spc-tip-bg: var(--wp--preset--color--tertiary, #eaf5f1);
	--spc-note: var(--wp--preset--color--accent, #e8543a);
	--spc-note-bg: #fdeeeb;
	--spc-heading: var(--wp--preset--color--secondary, #1f2937);
	--spc-muted: var(--wp--preset--color--muted, #64748b);
	--spc-fact-bg: var(--wp--preset--color--base, #f6f8fa);
	--spc-radius: 14px;
	--spc-radius-sm: 10px;
}

/* ---------- Antwort-Box „Das Wichtigste in Kürze" ---------- */
.spc-infobox,
.sp-infobox,
.wp-block-group.is-style-spc-answer {
	background: var(--spc-box-bg);
	border: 1px solid var(--spc-box-border);
	border-radius: var(--spc-radius);
	padding: 1.25rem 1.5rem;
	margin: 1.5rem 0;
}
.spc-infobox > :first-child,
.sp-infobox > :first-child,
.is-style-spc-answer > :first-child { margin-top: 0; }
.spc-infobox > :last-child,
.sp-infobox > :last-child,
.is-style-spc-answer > :last-child { margin-bottom: 0; }
.spc-infobox :is(h2, h3),
.sp-infobox :is(h2, h3),
.is-style-spc-answer :is(h2, h3) {
	font-size: 1.15rem;
	margin: 0 0 .75rem;
	color: var(--spc-heading);
}
.spc-infobox ul,
.sp-infobox ul,
.is-style-spc-answer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.spc-infobox li,
.sp-infobox li,
.is-style-spc-answer ul li {
	position: relative;
	padding-left: 1.9rem;
	margin: .55rem 0;
	line-height: 1.5;
}
.spc-infobox li::before,
.sp-infobox li::before,
.is-style-spc-answer ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .15em;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--spc-tip);
	-webkit-mask: var(--spc-ico-check) no-repeat center / contain;
	mask: var(--spc-ico-check) no-repeat center / contain;
}

/* ---------- Hinweis-Kästen: Tipp und Achtung/Gut zu wissen ---------- */
.spc-callout,
.sp-callout,
.wp-block-group.is-style-spc-tip,
.wp-block-group.is-style-spc-note {
	position: relative;
	border-radius: var(--spc-radius-sm);
	padding: 1rem 1.15rem 1rem 3rem;
	margin: 1.25rem 0;
	background: var(--spc-tip-bg);
	border-left: 4px solid var(--spc-tip);
}
.spc-callout::before,
.sp-callout::before,
.is-style-spc-tip::before,
.is-style-spc-note::before {
	content: "";
	position: absolute;
	left: .9rem;
	top: 1rem;
	width: 1.4rem;
	height: 1.4rem;
	background-color: var(--spc-tip);
	-webkit-mask: var(--spc-ico-bulb) no-repeat center / contain;
	mask: var(--spc-ico-bulb) no-repeat center / contain;
}
.spc-callout > :first-child,
.sp-callout > :first-child { margin-top: 0; }
.spc-callout > :last-child,
.sp-callout > :last-child { margin-bottom: 0; }
.spc-callout strong,
.sp-callout strong,
.is-style-spc-tip > :first-child,
.is-style-spc-note > :first-child {
	color: var(--spc-heading);
}
.spc-callout strong,
.sp-callout strong { display: block; margin-bottom: .15rem; }

/* Achtung-Variante (koralle) */
.spc-callout--note,
.sp-callout--note,
.wp-block-group.is-style-spc-note {
	background: var(--spc-note-bg);
	border-left-color: var(--spc-note);
}
.spc-callout--note::before,
.sp-callout--note::before,
.is-style-spc-note::before {
	background-color: var(--spc-note);
	-webkit-mask: var(--spc-ico-alert) no-repeat center / contain;
	mask: var(--spc-ico-alert) no-repeat center / contain;
}

/* ---------- Eckdaten-Chips ---------- */
.spc-facts,
.sp-facts {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 1.25rem 0;
	padding: 0;
	list-style: none;
}
.spc-facts.wp-block-columns { align-items: stretch; }
.spc-facts li,
.sp-facts li,
.spc-fact {
	flex: 1 1 120px;
	background: var(--spc-fact-bg);
	border: 1px solid var(--spc-box-border);
	border-radius: var(--spc-radius-sm);
	padding: .7rem .9rem;
}
.spc-facts .wp-block-column { flex-basis: 120px; }
.spc-fact > * { margin: 0; }
.spc-fact__label {
	display: block;
	font-size: .8rem;
	color: var(--spc-muted);
	margin: 0 0 .15rem;
}
.spc-fact__value {
	display: block;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--spc-heading);
	font-family: var(--wp--preset--font-family--heading, inherit);
}

/* ---------- Icons (als CSS-Mask, folgen der Farbe) ---------- */
:root {
	--spc-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
	--spc-ico-bulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.1h6c0-.8.4-1.6 1-2.1A7 7 0 0 0 12 2z'/%3E%3C/svg%3E");
	--spc-ico-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3C/svg%3E");
}