/*
 * Gestaltungsgrundlage aller Bausteine.
 *
 * Haltung: Das amtliche Material – Mitteilung und GARAN-Label – ist von sich aus
 * laut. Kräftiges Blau, gelbe Sterne, große Versalien. Alles, was drumherum steht,
 * bleibt deshalb still: unbunte Flächen, Haarlinien statt Rahmen, normale
 * Schreibweise statt Versalien, echter Weißraum. Farbe kommt ausschließlich aus
 * dem Signet und aus der Mitteilung selbst.
 *
 * Keine Schatten, keine Verläufe, keine Eckradien, keine Bewegung außer einem
 * Wechsel der Linienfarbe. Das soll in zehn Jahren noch tragen.
 *
 * Die Vorlage lebt im Shadow Root; vom Theme kommt hier nichts an. `all: initial`
 * auf :host unterbindet zusätzlich die Vererbung von Schrift, Farbe und Zeilenhöhe.
 */

:host {
	all: initial;
	contain: layout style;

	--heuc-ink: #1c1c1c;
	--heuc-ink-2: #5e5e5e;
	--heuc-ink-3: #8a8a8a;
	--heuc-hairline: #e0e0e0;
	--heuc-hairline-strong: #c9c9c9;
	--heuc-bg: #fff;
	--heuc-bg-subtle: #fafafa;

	/* Einziger Farbwert außerhalb der amtlichen Grafiken – aus dem Signet. */
	--heuc-accent: #034ea2;

	--heuc-space: 8px;

	--heuc-font: 'HEUC Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	/*
	 * Für das Host-Element gilt die Kaskade des Dokuments. Ohne !important würde
	 * ein Theme mit `* { font-family: X !important }` die Schrift über die
	 * Vererbung in den gesamten Shadow Tree durchreichen, und ein
	 * `display: none !important` ließe die Pflichtangabe verschwinden.
	 */
	font-family: var(--heuc-font) !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	color: var(--heuc-ink) !important;
	text-align: left !important;
	visibility: visible !important;
	opacity: 1 !important;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:host(:not([hidden])) {
	display: block !important;
}

:host([hidden]) {
	display: none !important;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: inherit;
	border-radius: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
}

img,
svg {
	display: block;
	max-width: 100%;
}

:focus-visible {
	outline: 2px solid var(--heuc-accent);
	outline-offset: 2px;
}

/* Das Signet – die einzige Farbe im Baustein. */
.mark {
	display: block;
	width: auto;
	height: 100%;
}

.sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}