/* ------------------------------------------------------------------ *
 * CIT Portal – Frontend-Styles (ausgelagert aus den Template-Files)   *
 * ------------------------------------------------------------------ */

/* Erste-Schritte-Prozess (nummerierte Zeilen mit Bild) — home.php */
#content .cit-steps {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: .75rem;
}
#content .cit-steps > li {
	display: grid; grid-template-columns: 4rem 120px 1fr; gap: 1rem;
	align-items: center;
	padding: 1rem; border: 1px solid #eef0f3; border-radius: .6rem;
	background: #fbfcfe;
}
/* Nummer-Badge: orange Icon (img/step-badge.svg) links, Zahl rechts daneben */
#content .cit-step-num {
	display: inline-flex; align-items: center; justify-content: flex-end;
	width: 4rem; height: 2.3rem; flex: 0 0 auto;
	background: url('../img/step-badge.svg') no-repeat left center;
	background-size: 2.3rem 2rem;
	color: var(--cit-accent-dark, #d97e00); font-weight: 700; font-size: 1rem;
}
#content .cit-step-img img {
	width: 120px; height: 90px; object-fit: cover;
	border-radius: .4rem; display: block;
}
#content .cit-step-body { display: flex; flex-direction: column; gap: .25rem; }
#content .cit-step-title { font-weight: 600; }
#content .cit-step-text  { font-size: .9rem; color: #6c757d; }
#content .cit-step-text a { color: var(--cit-accent-dark, #0b5ed7); }
/* Ohne Bild: mittlere Spalte einklappen */
#content .cit-steps > li:has(.cit-step-img:empty) { grid-template-columns: 4rem 1fr; }
#content .cit-steps > li:has(.cit-step-img:empty) .cit-step-img { display: none; }
@media (max-width: 575px) {
	#content .cit-steps > li { grid-template-columns: 4rem 1fr; }
	#content .cit-step-img { display: none; }
}

/* Kunden-E-Mail unter dem Logout-Button (Desktop) — Rahmen */
.cit-user-badge {
	font-size: .72rem; line-height: 1.3;
	padding: .2rem .5rem;
	border: 1px solid #dee2e6; border-radius: .4rem;
	color: #6c757d; background: #f8f9fa;
}

/* LinkedIn-Profil-Hinweis — home.php */
#content .cit-linkedin-alert {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border: 1px solid #b6d4fe;
	border-left: 4px solid #0a66c2;
	border-radius: .6rem;
	background: #f4f8fc;
	color: #334155;
}

#content .cit-linkedin-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: .5rem;
	background: #0a66c2;
	color: #fff;
}

#content .cit-linkedin-icon svg {
	width: 1.65rem;
	height: 1.65rem;
	fill: currentColor;
}

#content .cit-linkedin-content {
	flex: 1;
	min-width: 0;
}

#content .cit-linkedin-title {
	display: block;
	margin-bottom: .2rem;
	font-weight: 700;
	color: #1f2937;
}

#content .cit-linkedin-text {
	margin: 0;
	font-size: .9rem;
	color: #64748b;
}

#content .cit-linkedin-link {
	flex: 0 0 auto;
	white-space: nowrap;
	background: #0a66c2;
	border-color: #0a66c2;
	color: #fff;
}

#content .cit-linkedin-link:hover,
#content .cit-linkedin-link:focus {
	background: #084f96;
	border-color: #084f96;
	color: #fff;
}

@media (max-width: 575px) {
	#content .cit-linkedin-alert {
		align-items: flex-start;
		flex-wrap: wrap;
	}

	#content .cit-linkedin-link {
		width: 100%;
		margin-left: 4rem;
	}
}