/* Haushaltshilfe Regionen – Frontend-Styles */

.hhv-regionen-section{
	--hhv-cream:#F4EFE6;
	--hhv-white:#FFFFFF;
	--hhv-ink:#33302A;
	--hhv-muted:#7A746A;
	--hhv-red:#9C3324;
	--hhv-red-dark:#7E2A1C;
	--hhv-red-soft:rgba(156,51,36,.08);
	--hhv-map-fill:#FBF8F2;
	--hhv-map-stroke:#E6DEC9;

	box-sizing:border-box;
	background:var(--hhv-cream);
	color:var(--hhv-ink);
	padding:88px 24px;
}
.hhv-regionen-section *{ box-sizing:border-box; }

.hhv-regionen-inner{
	max-width:1180px;
	margin:0 auto;
	display:grid;
	grid-template-columns:minmax(320px,440px) 1fr;
	gap:56px;
	align-items:center;
}

/* ---------- content ---------- */
.hhv-badge{
	display:inline-flex;
	align-items:center;
	gap:6px;
	background:var(--hhv-white);
	color:var(--hhv-red-dark);
	font-size:.78rem;
	letter-spacing:.04em;
	text-transform:uppercase;
	padding:7px 14px;
	border-radius:999px;
	margin-bottom:18px;
	box-shadow:0 2px 8px rgba(52,48,42,.06);
}
.hhv-badge svg{ width:11px; height:11px; fill:currentColor; }

.hhv-regionen-title{
	color:var(--hhv-red);
	font-size:clamp(2.1rem,4vw,2.9rem);
	line-height:1.08;
	margin:0 0 18px;
}

.hhv-regionen-text{
	color:var(--hhv-muted);
	font-size:1.05rem;
	line-height:1.65;
	max-width:480px;
	margin:0 0 28px;
}

.hhv-chip-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(142px,1fr));
	gap:10px;
	margin-bottom:32px;
}

.hhv-chip{
	display:flex;
	align-items:center;
	gap:7px;
	background:var(--hhv-white);
	border:1px solid transparent;
	border-radius:12px;
	padding:10px 13px;
	font-size:.92rem;
	color:var(--hhv-ink);
	text-decoration:none;
	cursor:pointer;
	text-align:left;
	box-shadow:0 1px 4px rgba(52,48,42,.05);
	transition:background .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
}
.hhv-chip svg{
	width:14px;height:14px;flex-shrink:0;
	fill:var(--hhv-red);
	transition:fill .18s ease;
}
.hhv-chip:hover{ transform:translateY(-1px); }
.hhv-chip.hhv-active{
	background:var(--hhv-red-soft);
	border-color:rgba(156,51,36,.28);
	color:var(--hhv-red-dark);
}
.hhv-chip.hhv-active svg{ fill:var(--hhv-red-dark); }

.hhv-cta{
	display:inline-block;
	background:var(--hhv-red);
	color:var(--hhv-white) !important;
	font-size:.98rem;
	text-decoration:none;
	padding:15px 26px;
	border-radius:12px;
	transition:background .18s ease, transform .18s ease;
}
.hhv-cta:hover{ background:var(--hhv-red-dark); transform:translateY(-1px); color:var(--hhv-white) !important; }

.hhv-regionen-footnote{
	margin:14px 0 0;
	font-size:.85rem;
	color:var(--hhv-muted);
}

/* ---------- map ---------- */
.hhv-regionen-map{ position:relative; }
.hhv-map-svg{
	width:100%;
	height:auto;
	display:block;
}

.hhv-kreis{
	fill:var(--hhv-white);
	stroke:var(--hhv-red-soft);
	stroke-width:1;
}
.hhv-kreis-active{ fill:var(--hhv-red-soft); }

.hhv-pin-hit{ fill:transparent; cursor:pointer; }
.hhv-pin-visual{
	transform-box:fill-box;
	transform-origin:center;
	transition:transform .2s ease;
}
.hhv-pin-group:hover .hhv-pin-visual,
.hhv-pin-group.hhv-active .hhv-pin-visual{ transform:scale(1.45); }

.hhv-pin-dot{
	fill:var(--hhv-red);
	stroke:var(--hhv-white);
	stroke-width:1;
	transition:fill .2s ease;
}
.hhv-pin-group:hover .hhv-pin-dot,
.hhv-pin-group.hhv-active .hhv-pin-dot{ fill:var(--hhv-red-dark); }

.hhv-pin-plus{
	stroke:var(--hhv-white);
	stroke-width:1;
	stroke-linecap:round;
}

.hhv-pin-label{
	font-size:9px;
	fill:var(--hhv-ink);
	opacity:0;
	pointer-events:none;
	paint-order:stroke;
	stroke:var(--hhv-cream);
	stroke-width:4px;
	stroke-linejoin:round;
	transition:opacity .15s ease;
}
.hhv-pin-group:hover .hhv-pin-label,
.hhv-pin-group.hhv-active .hhv-pin-label{ opacity:1; }

.hhv-pin-group:focus{ outline:none; }
.hhv-pin-group:focus-visible .hhv-pin-visual{ transform:scale(1.45); }
.hhv-pin-group:focus-visible .hhv-pin-label{ opacity:1; }

@media (max-width: 900px){
	.hhv-regionen-inner{
		grid-template-columns:1fr;
		gap:36px;
	}
	.hhv-regionen-section{ padding:64px 18px; }
	.hhv-regionen-text{ max-width:none; }
}