/* ============================================================
   Julias Herzblut – A18 (18.10.2026)
   Segment-Leiste (Welten), dritte Welt, Altersfilter.
   Lädt nach herzblut.css → overrides.css → a6.css → a12.css.
   Palette: Creme #F7F3EC · Papier #FFFDF8 · Navy #1F2A37
            Salbei #7C8F7A · Terrakotta #A85B3C · Linie #E3DBCD
   ============================================================ */

/* ---------------- Segment-Leiste: Reiter ---------------- */
.hb-segments-bar{
	max-width:1180px;
	margin:0 auto;
	padding:0 22px;
}
.hb-segments{
	display:flex;
	flex-wrap:nowrap;
	gap:8px;
	max-width:100%;
	overflow-x:auto;
	padding:14px 0 12px;
	scrollbar-width:none;
	-ms-overflow-style:none;
	-webkit-overflow-scrolling:touch;
}
.hb-segments::-webkit-scrollbar{display:none}

.hb-seg{
	display:inline-flex;
	align-items:center;
	gap:8px;
	flex:0 0 auto;
	white-space:nowrap;
	padding:9px 16px;
	border:1px solid var(--jh-line,#E3DBCD);
	border-radius:999px;
	background:var(--jh-paper,#FFFDF8);
	color:#1F2A37;
	font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
	font-size:14px;
	font-weight:600;
	line-height:1.4;
	text-decoration:none;
	transition:background-color .14s ease, border-color .14s ease, color .14s ease;
}
.hb-seg:visited{color:#1F2A37}
.hb-seg:hover,
.hb-seg:focus{
	border-color:#1F2A37;
	color:#1F2A37;
	background:#fff;
}
.hb-seg:focus-visible{outline:2px solid #9E2B25;outline-offset:2px}

.hb-seg-count{
	display:inline-block;
	min-width:22px;
	padding:1px 7px;
	border-radius:999px;
	background:rgba(31,42,55,.08);
	color:#1F2A37;
	font-size:12.5px;
	font-weight:700;
	line-height:1.5;
	text-align:center;
}

/* Aktiver Reiter: Weltfarbe, Zahl invertiert */
.hb-seg.is-active,
.hb-seg.is-active:visited{color:#FFFDF8 !important}
.hb-seg.is-active:hover,
.hb-seg.is-active:focus{color:#FFFDF8 !important}
.hb-seg.is-active .hb-seg-label{color:#FFFDF8 !important}
.hb-seg.is-active .hb-seg-count{
	background:rgba(255,255,255,.22) !important;
	color:#FFFDF8 !important;
}
.hb-seg-all.is-active,
.hb-seg-all.is-active:hover,
.hb-seg-all.is-active:focus{
	background:#55554E;
	border-color:#55554E;
}
.hb-seg-navy.is-active,
.hb-seg-navy.is-active:hover,
.hb-seg-navy.is-active:focus{
	background:#1F2A37;
	border-color:#1F2A37;
}
.hb-seg-sage.is-active,
.hb-seg-sage.is-active:hover,
.hb-seg-sage.is-active:focus{
	background:#7C8F7A;
	border-color:#7C8F7A;
}
.hb-seg-terracotta.is-active,
.hb-seg-terracotta.is-active:hover,
.hb-seg-terracotta.is-active:focus{
	background:#A85B3C;
	border-color:#A85B3C;
}

/* Welt ohne Produkte: „in Vorbereitung“ statt 0 */
.hb-seg-prep{
	background:transparent !important;
	color:#6B6B63 !important;
	font-weight:500;
	font-style:italic;
	padding:0;
	min-width:0;
}
.hb-seg-none{
	background:transparent !important;
	color:#6B6B63 !important;
	font-weight:500;
	padding:0;
	min-width:0;
}

/* Dritte Welt: Farbcode (Badge/Breadcrumb-Akzent) */
body.world-kindergarten{
	--world:#A85B3C;
	--world-soft:#F3E7E1;
	--world-contrast:#FFFDF8;
}
.hb-card-kindergarten-vorschule{--world:#A85B3C;--world-soft:#F3E7E1;--world-contrast:#FFFDF8}
.hb-badge-kindergarten{background-color:#A85B3C !important;color:#FFFDF8 !important}

/* Startseiten-Tür der dritten Welt (hb_worlds() speist die Türen mit) */
.hb-door-terracotta{
	background:#A85B3C !important;
	border:1px solid #8F4A2F !important;
}
.hb-door-terracotta:visited,
.hb-door-terracotta:hover,
.hb-door-terracotta:focus{color:#FFFDF8 !important}

body.world-kindergarten .entry-hero .entry-header.product-archive-title::after,
body.world-kindergarten .hb-main .woocommerce-products-header::after{
	background-color:#A85B3C;
}
body.world-kindergarten .kadence-breadcrumbs a,
body.world-kindergarten .kadence-breadcrumbs,
body.world-kindergarten .woocommerce-breadcrumb,
body.world-kindergarten .woocommerce-breadcrumb a{
	color:#A85B3C !important;
}

/* ---------------- Mobil: sticky unter dem Header, scrollbar ---------------- */
@media (max-width:767px){
	.hb-segments-bar{
		position:sticky;
		top:var(--hb-hh,72px);
		z-index:45;
		background:var(--jh-cream,#F7F3EC);
		background-color:#F7F3EC;
		padding:0 16px;
		box-shadow:0 8px 14px -10px rgba(31,42,55,.35);
	}
	.hb-segments{
		padding:9px 0 10px;
		gap:7px;
		flex-wrap:nowrap;
		overflow-x:auto;
		overflow-y:hidden;
	}
	.hb-seg{
		padding:8px 13px;
		font-size:13px;
		gap:6px;
	}
	.hb-seg-count{font-size:12px;padding:1px 6px}
}