/* Hausmeister-App Roadmap – Frontend
   Alle Klassen mit hrm- Präfix. Farben über CSS Custom Properties. */

.hrm-roadmap {
	--hrm-primary: #1a4fa0;
	--hrm-secondary: #f5a623;
	--hrm-purple: #7c4dff;
	--hrm-gray: #9aa0a6;
	--hrm-text: #1f2329;
	--hrm-muted: #5b6470;
	--hrm-border: rgba( 0, 0, 0, 0.09 );

	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	color: var( --hrm-text );
	background: #fff;
	max-width: 1080px;
	margin: 0 auto;
	padding: 8px 16px 48px;
	box-sizing: border-box;
	line-height: 1.55;
}

.hrm-roadmap *,
.hrm-roadmap *::before,
.hrm-roadmap *::after {
	box-sizing: border-box;
}

/* Header */
.hrm-header {
	text-align: center;
	max-width: 680px;
	margin: 0 auto 36px;
}

.hrm-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	font-weight: 600;
	color: var( --hrm-secondary );
	margin: 0 0 8px;
}

.hrm-headline {
	color: var( --hrm-primary );
	font-size: clamp( 28px, 5vw, 40px );
	line-height: 1.15;
	margin: 0 0 12px;
	font-weight: 700;
}

.hrm-description {
	color: var( --hrm-muted );
	font-size: 17px;
	margin: 0 0 20px;
}

.hrm-cta {
	display: inline-block;
	background: var( --hrm-secondary );
	color: #fff;
	text-decoration: none;
	padding: 12px 22px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 15px;
	transition: transform 0.12s ease, filter 0.12s ease;
}

.hrm-cta:hover {
	filter: brightness( 0.94 );
	transform: translateY( -1px );
	color: #fff;
}

/* Filter-Buttons */
.hrm-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 auto 32px;
}

.hrm-roadmap .hrm-filter {
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid var( --hrm-border );
	background: #fff;
	color: var( --hrm-muted );
	padding: 7px 16px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	font-family: inherit;
	box-shadow: none;
	text-shadow: none;
	transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

/* Theme-Hover/Focus-Hintergründe überschreiben. */
.hrm-roadmap .hrm-filter:hover,
.hrm-roadmap .hrm-filter:focus {
	background: #fff;
	border-color: var( --hrm-primary );
	color: var( --hrm-primary );
	box-shadow: none;
	outline: none;
}

.hrm-roadmap .hrm-filter.is-active,
.hrm-roadmap .hrm-filter.is-active:hover,
.hrm-roadmap .hrm-filter.is-active:focus {
	background: var( --hrm-primary );
	border-color: var( --hrm-primary );
	color: #fff;
}

/* Empty state */
.hrm-empty {
	text-align: center;
	color: var( --hrm-muted );
	padding: 32px 16px;
	font-size: 16px;
}

/* Phasen */
.hrm-phase {
	margin-bottom: 40px;
}

.hrm-phase-head {
	margin-bottom: 16px;
}

.hrm-pill {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
}

.hrm-pill--primary {
	background: color-mix( in srgb, var( --hrm-primary ) 12%, #fff );
	color: var( --hrm-primary );
}

.hrm-pill--secondary {
	background: color-mix( in srgb, var( --hrm-secondary ) 16%, #fff );
	color: #b9740a;
}

.hrm-pill--purple {
	background: color-mix( in srgb, var( --hrm-purple ) 12%, #fff );
	color: var( --hrm-purple );
}

.hrm-pill--gray {
	background: #f0f1f3;
	color: var( --hrm-muted );
}

/* Fallback ohne color-mix-Support */
@supports not ( background: color-mix( in srgb, #000 10%, #fff ) ) {
	.hrm-pill--primary { background: #e8eef7; }
	.hrm-pill--secondary { background: #fdf0db; }
	.hrm-pill--purple { background: #efeaff; }
}

/* Cards */
.hrm-cards {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) );
	gap: 16px;
}

.hrm-card {
	background: #fff;
	border: 1px solid var( --hrm-border );
	border-radius: 12px;
	padding: 20px;
	transition: box-shadow 0.16s ease, transform 0.16s ease;
}

.hrm-card:hover {
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.08 );
	transform: translateY( -2px );
}

/* Schutz gegen Theme-/Builder-Scroll-Animationen (z. B. AOS, Elementor-Effekte),
   die Elemente initial mit opacity:0 / transform versteckt halten. Unser eigener
   Filter (display:none) und Hover bleiben funktionsfähig. */
.hrm-roadmap .hrm-phase,
.hrm-roadmap .hrm-card {
	opacity: 1 !important;
	visibility: visible !important;
	animation: none !important;
	transition: box-shadow 0.16s ease, transform 0.16s ease;
}

.hrm-roadmap .hrm-card {
	transform: none !important;
}

.hrm-roadmap .hrm-card:hover {
	transform: translateY( -2px ) !important;
}

.hrm-badge {
	display: inline-block;
	background: #f0f1f3;
	color: var( --hrm-muted );
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 6px;
	margin-bottom: 10px;
}

.hrm-card-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var( --hrm-text );
	line-height: 1.3;
}

.hrm-card-text {
	color: var( --hrm-muted );
	font-size: 15px;
}

.hrm-card-text p {
	margin: 0 0 8px;
}

.hrm-card-text p:last-child {
	margin-bottom: 0;
}

/* Card ausgeblendet durch Filter */
.hrm-card.hrm-hidden {
	display: none;
}

.hrm-phase.hrm-hidden {
	display: none;
}

/* Footer */
.hrm-footer {
	margin-top: 24px;
	text-align: center;
	color: var( --hrm-muted );
	font-size: 13px;
	border-top: 1px solid var( --hrm-border );
	padding-top: 20px;
}

.hrm-footer p {
	margin: 0;
}

/* Responsive: ab 620px auf 1 Spalte */
@media ( max-width: 620px ) {
	.hrm-cards {
		grid-template-columns: 1fr;
	}

	.hrm-roadmap {
		padding: 8px 14px 40px;
	}
}