/* ============================================================
   Julias Herzblut – A42 (18.10.2026)
   Format-/Lieferart-Filter (Checkboxen, Live-Zahlen),
   Desktop-Panel mit linker Filterspalte, Mobil-Panel sticky +
   scrollbar, Kategoriebaum „Arbeitshefte“.
   Nur Filter-UI – keine Produktdaten, Preise oder Texte.
   Palette: Papier #FFFDF8 · Navy #1F2A37 · Linie #E3DBCD
   ============================================================ */

/* ---------------- Panel-Rahmen ---------------- */
.hb-filters{
	max-width:1180px;margin:8px auto 2px;padding:16px 18px;
	display:block;
	background:var(--jh-paper,#FFFDF8);
	border:1px solid var(--jh-line,#E3DBCD);
	border-radius:16px;
}
.hb-filters-form{
	display:grid;
	grid-template-columns:250px minmax(0,1fr);
	gap:16px 24px;
	align-items:start;
	width:100%;
	margin:0;
}
.hb-filter-side{
	display:flex;flex-direction:column;gap:16px;
	background:#F7F3EC;
	border:1px solid var(--jh-line,#E3DBCD);
	border-radius:12px;
	padding:14px 16px 12px;
}
.hb-filter-main{
	display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;
	min-width:0;
}
.hb-filter-main .hb-f{flex:1 1 128px;max-width:210px}
.hb-filter-main .hb-f-actions{flex:0 0 auto;max-width:none}

/* ---------------- Gruppen Format / Lieferart ---------------- */
.hb-fgroup{border:0;margin:0;padding:0;min-width:0}
.hb-fgroup legend{
	padding:0;margin:0 0 4px;
	font-size:11px;letter-spacing:.09em;text-transform:uppercase;
	color:#6B6B63;font-weight:700;
}
.hb-fgroup-body{display:flex;flex-direction:column}
.hb-opt{
	display:flex;align-items:center;gap:9px;
	padding:7px 0;margin:0;
	border-bottom:1px dashed rgba(31,42,55,.12);
	font-size:14px;line-height:1.3;color:var(--jh-navy,#1F2A37);
	cursor:pointer;
}
.hb-opt:last-child{border-bottom:0}
.hb-opt input[type="checkbox"]{
	flex:0 0 auto;width:16px;height:16px;margin:0;
	accent-color:var(--jh-navy,#1F2A37);cursor:pointer;
}
.hb-opt-label{flex:1 1 auto;min-width:0}
.hb-opt-count{
	flex:0 0 auto;font-size:12.5px;color:#6B6B63;
	font-variant-numeric:tabular-nums;
}
.hb-opt.is-checked .hb-opt-label{font-weight:600}
.hb-fhint{margin:8px 0 0;font-size:11.5px;line-height:1.4;color:#8A8A80}

/* Trefferzahl über die volle Breite */
.hb-filters-count{grid-column:1 / -1;margin:0;font-size:13px;color:#55554E}

/* Mobil: Panel ausklappbar, sticky Kopf, scrollbarer Inhalt */
@media (max-width:767px){
	.hb-filters{
		padding:10px 0 0;margin:8px auto 2px;
		background:transparent;border:0;border-radius:0;
	}
	.hb-filters-toggle{
		position:sticky;top:calc(var(--hb-hh,72px) + 6px);z-index:30;
	}
	.hb-filters-form{
		display:grid;grid-template-columns:1fr;gap:14px;
	}
	.hb-filters.hb-js .hb-filters-form{display:none}
	.hb-filters.hb-js.is-open .hb-filters-toggle{
		position:fixed;top:calc(var(--hb-hh,72px) + 6px);left:10px;z-index:70;
	}
	.hb-filters.hb-js.is-open .hb-filters-form{
		display:grid;
		position:fixed;
		top:calc(var(--hb-hh,72px) + 64px);
		left:10px;right:10px;bottom:12px;
		max-height:none;
		overflow-y:auto;
		overscroll-behavior:contain;
		-webkit-overflow-scrolling:touch;
		box-sizing:border-box;
		width:auto;
		background:var(--jh-paper,#FFFDF8);
		border:1px solid var(--jh-line,#E3DBCD);
		border-radius:14px;
		padding:14px;
		z-index:60;
		box-shadow:0 18px 40px rgba(31,42,55,.18);
	}
	.hb-filter-side{padding:12px 14px 10px}
	.hb-filter-main{display:flex;flex-direction:column;align-items:stretch;gap:10px}
	.hb-filter-main .hb-f{flex:1 1 auto;max-width:none}
	.hb-filter-main .hb-f-actions{justify-content:space-between;flex-wrap:wrap;gap:10px}
	.hb-filters-count{grid-column:auto}
}

@media (min-width:768px) and (max-width:1024px){
	.hb-filters-form{grid-template-columns:220px minmax(0,1fr);gap:14px 18px}
	.hb-filter-main .hb-f{max-width:170px}
}

/* ---------------- Kategoriebaum „Arbeitshefte“ ---------------- */
.hb-formattree{
	margin:0 0 16px;padding:13px 16px 12px;
	background:var(--jh-paper,#FFFDF8);
	border:1px solid var(--jh-line,#E3DBCD);
	border-radius:12px;
}
.hb-formattree-title{
	display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
	color:#6B6B63;font-weight:700;margin:0 0 6px;
}
.hb-formattree-list{
	list-style:none;margin:0;padding:0 0 0 14px;
	border-left:2px solid var(--jh-line,#E3DBCD);
}
.hb-formattree-list li{margin:0}
.hb-formattree-list a{
	display:flex;align-items:baseline;justify-content:space-between;gap:14px;
	padding:6px 0;font-size:14.5px;color:var(--jh-navy,#1F2A37);
	text-decoration:none;border-bottom:1px dashed rgba(31,42,55,.1);
}
.hb-formattree-list li:last-child a{border-bottom:0}
.hb-formattree-list a:hover .hb-formattree-name{text-decoration:underline}
.hb-formattree-name{font-weight:600}
.hb-formattree-count{
	font-size:12.5px;color:#6B6B63;font-variant-numeric:tabular-nums;white-space:nowrap;
}
@media (max-width:767px){
	.hb-formattree{padding:12px 14px 10px}
}