/*
 * Bewusst nur innerhalb von .verlegung-status gescopt und ohne generische Elementselektoren, damit
 * sich nichts mit dem umgebenden Theme in Konflikt bringt — gleiches Muster wie assets/css/formular.css.
 *
 * Mobile first: die Fortschrittsanzeige ist eine vertikale Zeitleiste (Icon-Marker links, Karte mit
 * Schrittnummer/Label/optionalem Datum rechts, verbindende Linie zwischen den Markern) — funktioniert
 * unverändert auf schmalen wie breiten Bildschirmen, kein eigener @media-Block nötig (der max-width auf
 * .verlegung-status oben reicht für die Lesbarkeit auf Desktop-Breite).
 *
 * Zustand ist bewusst nicht nur über Farbe erkennbar (siehe Service\FortschrittsanzeigeBuilder für die
 * Icon-Auswahl je Zustand): erledigt = gefüllter Marker mit Haken-Icon, aktuell = Ring um den Marker mit
 * dem eigentlichen Schritt-Icon, ausstehend = grauer, abgeblasster Marker mit dem Schritt-Icon. Zusätzlich
 * trägt jeder Schritt einen versteckten Text (__sr-only) mit demselben Zustand für Screenreader.
 *
 * Überfällig/Abgebrochen sind keine eigenen Schritte in der Zeitleiste (siehe Service\
 * FortschrittsanzeigeBuilder), sondern eigene Hinweis-Boxen: __warnung (Amber, über der laufenden
 * Zeitleiste) bzw. __abgebrochen (ersetzt die Zeitleiste komplett).
 */

.verlegung-status {
	max-width: 32rem;
	margin: 0 auto;
	font-size: 1rem;
	line-height: 1.5;
	box-sizing: border-box;
}

.verlegung-status *,
.verlegung-status *::before,
.verlegung-status *::after {
	box-sizing: inherit;
}

.verlegung-status__titel {
	margin: 0 0 0.25rem;
}

.verlegung-status__rolle {
	margin: 0 0 0.75rem;
	font-size: 0.85rem;
	color: #555;
}

.verlegung-status__antragsart {
	margin: 0 0 1.5rem;
	color: #555;
}

.verlegung-status__hinweis,
.verlegung-status__hinweis-klein {
	padding: 0.75rem 1rem;
	background: #f4f4f4;
	border-radius: 0.4rem;
}

.verlegung-status__hinweis-klein {
	margin: 0 0 1rem;
	font-size: 0.9rem;
	color: #555;
}

.verlegung-status__warnung {
	padding: 0.75rem 1rem;
	margin: 0 0 1rem;
	background: #fdf3e0;
	color: #8a5a00;
	border: 1px solid #e8b84b;
	border-radius: 0.4rem;
	font-weight: 600;
}

.verlegung-status__abgebrochen {
	padding: 0.75rem 1rem;
	margin: 0 0 1.5rem;
	background: #fbeaea;
	color: #a33;
	border: 1px solid #a33;
	border-radius: 0.4rem;
	font-weight: 600;
}

.verlegung-status__zeitleiste {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.verlegung-status__zeitleiste-schritt {
	position: relative;
	display: flex;
	gap: 0.85rem;
	padding-bottom: 1.75rem;
	box-sizing: border-box;
}

.verlegung-status__zeitleiste-schritt:last-child {
	padding-bottom: 0;
}

/* Verbindende Linie zwischen diesem und dem nächsten Marker — von der Unterkante dieses Markers bis
   zur Unterkante dieses Schritts, die zugleich die Oberkante (und damit Marker-Position) des nächsten
   Schritts ist. So reicht die Linie immer exakt bis zum nächsten Marker, unabhängig von der Höhe des
   Karteninhalts dazwischen. */
.verlegung-status__zeitleiste-schritt:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 2.5rem;
	bottom: 0;
	left: 1.25rem;
	width: 2px;
	background: #ccc;
}

.verlegung-status__zeitleiste-schritt--erledigt:not(:last-child)::before {
	background: #2c6e49;
}

.verlegung-status__zeitleiste-marker {
	position: relative;
	z-index: 1;
	flex: 0 0 2.5rem;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	box-sizing: border-box;
}

.verlegung-status__zeitleiste-marker svg {
	width: 1.15rem;
	height: 1.15rem;
}

.verlegung-status__zeitleiste-schritt--erledigt .verlegung-status__zeitleiste-marker {
	background: #2c6e49;
	border: 2px solid #2c6e49;
	color: #fff;
}

.verlegung-status__zeitleiste-schritt--aktuell .verlegung-status__zeitleiste-marker {
	background: #fff;
	border: 3px solid #2c6e49;
	box-shadow: 0 0 0 3px #d9ede1;
	color: #2c6e49;
}

.verlegung-status__zeitleiste-schritt--ausstehend .verlegung-status__zeitleiste-marker {
	background: #fafafa;
	border: 2px solid #ccc;
	color: #aaa;
}

.verlegung-status__zeitleiste-inhalt {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.65rem 1rem;
	background: #fafafa;
	border: 1px solid #eee;
	border-radius: 0.5rem;
}

.verlegung-status__zeitleiste-schritt--aktuell .verlegung-status__zeitleiste-inhalt {
	background: #f1f8f4;
	border-color: #2c6e49;
}

.verlegung-status__zeitleiste-schritt--ausstehend .verlegung-status__zeitleiste-inhalt {
	color: #888;
}

.verlegung-status__zeitleiste-schrittnummer {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #888;
}

.verlegung-status__zeitleiste-label {
	display: block;
	font-weight: 600;
}

.verlegung-status__zeitleiste-datum {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.85rem;
	color: #555;
}

/* Standard "visually hidden"-Muster: der Zustand (erledigt/aktuell/ausstehend) steht damit zusätzlich
   zu Marker-Form und -Farbe auch als Text zur Verfügung (siehe oben), nur eben nicht sichtbar, wenn
   Marker/Karte das bereits zeigen. Bewusst eine eigene Klasse statt der von vielen Themes
   bereitgestellten .screen-reader-text — dieses Plugin verlässt sich nicht auf Theme-Klassen. */
.verlegung-status__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.verlegung-status__details {
	margin: 0 0 1.5rem;
}

.verlegung-status__details dt {
	margin-top: 1rem;
	font-weight: 600;
}

.verlegung-status__details dt:first-child {
	margin-top: 0;
}

.verlegung-status__details dd {
	margin: 0.25rem 0 0;
}

.verlegung-status__verlauf-titel {
	margin: 0 0 0.75rem;
}

.verlegung-status__verlauf {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.verlegung-status__nachricht {
	padding: 0.75rem 1rem;
	background: #f4f4f4;
	border-radius: 0.4rem;
}

.verlegung-status__nachricht-meta {
	margin: 0 0 0.35rem;
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: #555;
}

.verlegung-status__nachricht-absender {
	font-weight: 600;
}

.verlegung-status__nachricht-text {
	margin: 0;
	word-break: break-word;
}