/*
 * infra Störungen – Alert
 *
 * Lokaler Nachbau der Storybook-Komponente "Content / StoerungenAlert"
 * (https://storybook.dev.infra-fuerth.de/?path=/docs/content-stoerungenalert--docs),
 * da in dieser TYPO3-Installation kein Tailwind zur Verfügung steht.
 *
 * Übernommene Design-Tokens:
 *   secondary / border-secondary ... #e87500 (oklch(68.3% .173 53.27))
 *   sidebar-accent / muted ......... #eeeff2 (oklch(95.2% .0042 271.37))
 *   border ......................... #e5e7eb (oklch(92.8% .006 264.531))
 *   primary ........................ #00755e (oklch(50.2% .097 172.4))
 *   foreground ..................... #000000
 *   rounded-2xl 1rem | p-4 1rem | gap-3 .75rem | gap-1 .25rem | size-6 1.5rem
 *   text-nav clamp(17px, 12.43px + .4464vw, 21px) | font-bold 650 | prose strong 670
 *
 * Die Schriftart wird bewusst vom Seitenkontext geerbt. Soll exakt die Storybook-Schrift
 * verwendet werden, hier zusätzlich setzen:
 *   .infra-stoerungen-alert { font-family: "Source Sans 3", sans-serif; }
 */

.infra-stoerungen-alert {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	box-sizing: border-box;
	padding: 1rem;
	border: 1px solid transparent;
	border-radius: 1rem;
	color: #000;
	margin: 0 auto 30px;
	max-width: 1310px;
	width: 100%;
}

.infra-stoerungen-alert *,
.infra-stoerungen-alert *::before,
.infra-stoerungen-alert *::after {
	box-sizing: border-box;
}

/* Fallback für Browser ohne flex-gap (z.B. Safari < 14.1) */
@supports not (gap: .75rem) {
	.infra-stoerungen-alert > .infra-stoerungen-alert__icon {
		margin-right: .75rem;
	}
}

/* Variante: aktuelle Störungen */
.infra-stoerungen-alert--warning {
	border-color: #e87500;
	background-color: #eeeff2;
}

.infra-stoerungen-alert--warning .infra-stoerungen-alert__icon {
	color: #e87500;
}

/* Variante: keine Störungen bekannt */
.infra-stoerungen-alert--clear {
	border-color: #e5e7eb;
	background-color: #eeeff2;
}

.infra-stoerungen-alert--clear .infra-stoerungen-alert__icon {
	color: #00755e;
}

.infra-stoerungen-alert__icon {
	display: block;
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	fill: none;
	stroke: currentColor;
}

.infra-stoerungen-alert__body {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	min-width: 0;
}

.infra-stoerungen-alert__title {
	margin: 0;
	padding: 0;
	font-size: 17px;
	font-size: clamp(17px, calc(12.43px + .4464vw), 21px);
	font-weight: 650;
	line-height: 1.5;
	color: #000;
	text-transform: none;
	letter-spacing: normal;
}

.infra-stoerungen-alert__content {
	max-width: none;
	font-size: .875rem;
	line-height: 1.71429;
	color: #000;
}

.infra-stoerungen-alert__content p {
	margin: .6em 0 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.infra-stoerungen-alert__content > *:first-child {
	margin-top: 0;
}

.infra-stoerungen-alert__content strong {
	font-weight: 670;
	color: #000;
}