/* ===== RAIBA-IMMO STATUS-BANNER BUILD-MARKER: v1.0.0 ===== */
/*
 * Vollbreiter Statusbalken für den Kopf einer Projekt-Detailseite.
 * Akzentfarbe kommt als Inline-Variable --rpst-accent vom Widget.
 * Schrift immer per inherit (Theme-/Elementor-Globalschrift).
 */

.rpst {
	--rpst-accent: #0069b3;
	--rpst-ink: #16202b;
	--rpst-radius: 12px;
	--rpst-pad-y: 14px;
	--rpst-pad-x: 22px;
	--rpst-maxw: 1200px;
	font-family: inherit;
	box-sizing: border-box;
}
.rpst *, .rpst *::before, .rpst *::after { box-sizing: border-box; }

/* Äußere Hülle trägt Hintergrund/Rahmen, innere zentriert den Inhalt. */
.rpst-bar {
	position: relative;
	border-radius: var(--rpst-radius);
	overflow: hidden;
}
.rpst-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	max-width: none;
	margin: 0 auto;
	padding: var(--rpst-pad-y) var(--rpst-pad-x);
	min-width: 0;
}

/* ---- Ausrichtung ---- */
.rpst--left .rpst-inner { justify-content: flex-start; }
.rpst--center .rpst-inner { justify-content: center; text-align: center; }
.rpst--spread .rpst-inner { justify-content: space-between; }
.rpst--spread .rpst-main { flex: 1 1 auto; min-width: 0; }

/* ---- Hauptteil (Icon + Texte) ---- */
.rpst-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rpst--center .rpst-main { justify-content: center; }

.rpst-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; color: currentColor; }
.rpst-icon svg { width: var(--rpst-icon, 22px); height: var(--rpst-icon, 22px); stroke: currentColor; fill: none; }
.rpst-icon--chip {
	width: var(--rpst-chip, 32px); height: var(--rpst-chip, 32px);
	border-radius: 50%;
	background: color-mix(in srgb, var(--rpst-ink) 14%, transparent);
}

.rpst-texts { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rpst-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.rpst--center .rpst-line { justify-content: center; }

.rpst-prefix { font-size: .82em; opacity: .8; }
.rpst-status { font-size: 1.05em; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.rpst-meta { font-size: .86em; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Zusatz-Pille */
.rpst-pill {
	display: inline-flex; align-items: center;
	font-size: .74em; font-weight: 700; line-height: 1;
	padding: 5px 10px; border-radius: 999px;
	background: color-mix(in srgb, var(--rpst-ink) 12%, transparent);
	white-space: nowrap;
}

/* ---- CTA-Button ---- */
.rpst-cta { flex: none; }
.rpst-cta a,
.rpst-cta a:link,
.rpst-cta a:visited {
	display: inline-flex; align-items: center; justify-content: center;
	font-size: .9em; font-weight: 700; line-height: 1;
	padding: 11px 20px; border-radius: 999px;
	text-decoration: none;
	background: var(--rpst-btn-bg, #ffffff);
	color: var(--rpst-btn-ink, var(--rpst-accent)) !important;
	border: 2px solid transparent;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
/* Theme-Kit färbt Buttons sonst um – Zustände hart fixieren. */
.rpst-cta a:hover,
.rpst-cta a:focus,
.rpst-cta a:active {
	background: var(--rpst-btn-bg-hover, #ffffff) !important;
	color: var(--rpst-btn-ink, var(--rpst-accent)) !important;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5);
}

/* ============ Stile ============ */

/* Vollfarbe */
.rpst--solid .rpst-bar { background: var(--rpst-accent); }
.rpst--solid .rpst-bar, .rpst--solid .rpst-status, .rpst--solid .rpst-prefix, .rpst--solid .rpst-meta, .rpst--solid .rpst-pill, .rpst--solid .rpst-icon { color: #fff; }
.rpst--solid { --rpst-ink: #ffffff; }
.rpst--solid .rpst-cta a { --rpst-btn-bg: #ffffff; --rpst-btn-ink: var(--rpst-accent); }

/* Soft: getönter Hintergrund + feine Linien oben/unten */
.rpst--soft .rpst-bar {
	background: color-mix(in srgb, var(--rpst-accent) 10%, #fff);
	border-top: 1px solid color-mix(in srgb, var(--rpst-accent) 30%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--rpst-accent) 30%, transparent);
	border-radius: 0;
	color: var(--rpst-ink);
}
.rpst--soft .rpst-status { color: var(--rpst-accent); }
.rpst--soft .rpst-icon { color: var(--rpst-accent); }
.rpst--soft .rpst-cta a { --rpst-btn-bg: var(--rpst-accent); --rpst-btn-ink: #fff; }

/* Farbverlauf */
.rpst--gradient .rpst-bar {
	background: linear-gradient(115deg, var(--rpst-accent), color-mix(in srgb, var(--rpst-accent) 68%, #0b1c2c));
	color: #fff;
}
.rpst--gradient { --rpst-ink: #ffffff; }
.rpst--gradient .rpst-status, .rpst--gradient .rpst-prefix, .rpst--gradient .rpst-meta, .rpst--gradient .rpst-pill, .rpst--gradient .rpst-icon { color: #fff; }
.rpst--gradient .rpst-cta a { --rpst-btn-bg: #ffffff; --rpst-btn-ink: var(--rpst-accent); }

/* Umrandung */
.rpst--outline .rpst-bar {
	background: transparent;
	border: 2px solid var(--rpst-accent);
	color: var(--rpst-ink);
}
.rpst--outline .rpst-status { color: var(--rpst-accent); }
.rpst--outline .rpst-icon { color: var(--rpst-accent); }
.rpst--outline .rpst-cta a { --rpst-btn-bg: var(--rpst-accent); --rpst-btn-ink: #fff; }

/* ============ Größe ============ */
.rpst--slim { --rpst-pad-y: 12px; --rpst-icon: 20px; --rpst-chip: 32px; }
.rpst--slim .rpst-status { font-size: 1.02em; }

.rpst--banner { --rpst-pad-y: 26px; --rpst-icon: 26px; --rpst-chip: 40px; }
.rpst--banner .rpst-status { font-size: 1.5em; }
.rpst--banner .rpst-inner { gap: 22px; }

/* ============ Schatten ============ */
.rpst--shadow .rpst-bar { box-shadow: 0 10px 30px -14px rgba(0, 45, 103, .5); }

/* ============ Volle Browserbreite ============ */
.rpst--full .rpst-bar {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	border-radius: 0;
}
.rpst--full .rpst-inner { max-width: var(--rpst-maxw); }

/* ============ Sticky ============ */
.rpst--sticky { position: sticky; top: var(--rpst-sticky-top, 0px); z-index: 60; }

/* ============ Editor-Hinweis ============ */
.rpst-empty {
	padding: 16px 18px; border: 1px dashed #d5d8dd; border-radius: 10px;
	color: #646970; font-size: 14px;
}

/* ============ Mobil ============ */
@media (max-width: 767px) {
	.rpst-inner { flex-direction: column; align-items: stretch; gap: 12px; }
	/* „Verteilt" fällt auf zentriert zurück. */
	.rpst--spread .rpst-inner, .rpst--left .rpst-inner { justify-content: center; text-align: center; }
	.rpst-main { justify-content: center; }
	.rpst-line { justify-content: center; }
	.rpst-cta { width: 100%; }
	.rpst-cta a { width: 100%; }
}