/*
 * querschnitt.css — Die eine Tür zum Design des Querschnittsmoduls.
 *
 * Nur DIESE Datei wird von aussen eingebunden (→ `02`). Die Teile
 * darunter sind Interna und dürfen sich jederzeit ändern.
 *
 * Reihenfolge ist Absicht: Schrift und Tokens zuerst (alles andere
 * baut darauf auf), dann Reset/Grundlagen, dann Bauteile, zuletzt
 * Bewegung.
 */

@import url("design/schrift.css");
@import url("design/tokens.css");
@import url("design/basis.css");
@import url("design/komponenten.css");
@import url("design/bewegung.css");

/* ------------------------------------------------------------------
 * Kurzmeldungen — gehören zu ui/meldungen.js
 * ------------------------------------------------------------------ */
.meldungen {
	position: fixed;
	top: var(--raum-3);
	left: 50%;
	transform: translateX(-50%);
	z-index: var(--ebene-meldung);
	display: flex;
	flex-direction: column;
	gap: var(--raum-2);
	width: min(30rem, calc(100vw - 2 * var(--raum-3)));
	pointer-events: none;
}

.meldung {
	display: flex;
	align-items: center;
	gap: var(--raum-3);
	padding: var(--raum-3) var(--raum-4);
	border-left: 3px solid var(--linie-wach);
	background: color-mix(in srgb, var(--tiefe-schwebend) 92%, transparent);
	backdrop-filter: blur(12px);
	box-shadow: var(--hebung-2);
	color: var(--text);
	font-size: var(--grad-klein);
	pointer-events: auto;
	cursor: pointer;
	animation: meldung-herein var(--zeit-normal) var(--kurve-schwung);
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--schnitt-klein)),
		calc(100% - var(--schnitt-klein)) 100%,
		0 100%
	);
}

.meldung::before {
	content: "";
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: var(--kante-rund);
	background: var(--linie-wach);
	box-shadow: 0 0 10px currentcolor;
}

.meldung--gut {
	border-left-color: var(--gift);
	color: var(--gift);
}

.meldung--gut::before {
	background: var(--gift);
}

.meldung--warnung {
	border-left-color: var(--stufe-gelb);
	color: var(--stufe-gelb);
}

.meldung--warnung::before {
	background: var(--stufe-gelb);
}

.meldung--fehler {
	border-left-color: var(--blut);
	color: #ff8ea5;
}

.meldung--fehler::before {
	background: var(--blut);
}

.meldung--info {
	border-left-color: var(--plasma);
}

.meldung--info::before {
	background: var(--plasma);
}

.meldung--geht {
	animation: meldung-hinaus var(--zeit-normal) var(--kurve-ein) forwards;
}

.meldung__text {
	flex: 1;
}