/*!
 * Generationenhaus – Angebote-Filter 2.1.0
 * (c) co-operation – https://co-operation.de
 *
 * ---------------------------------------------------------------------------
 * FARBEN – hier zentral anpassen
 * ---------------------------------------------------------------------------
 *   --gh-orange     Akzent- und Aktivfarbe        #FF5F01
 *   --gh-blue       Überschriftenblau der Seite   #0E72A3
 *   --gh-tint       helle Sektionsfläche          #FDF6EE
 *   --gh-tint-2     Hover-Fläche                  #FBEADA
 *   --gh-text       Fließtext                     #706C6B
 *   --gh-dark       kräftiger Text                #1E2327
 *   --gh-line       Linienfarbe                   #F2E6DA
 *   --gh-radius     Eckenradius der Kacheln       8px
 *   --gh-radius-box Eckenradius des Kastens       12px
 *   --gh-c          Kachelfarbe je Gruppe (Standard: --gh-orange)
 *
 * ---------------------------------------------------------------------------
 * KLASSENÜBERSICHT
 * ---------------------------------------------------------------------------
 * .gh-af                    Wurzel      .gh-af--cols-2|3|4      .has-selection
 * .gh-af__head              Kopf (nur wenn heading/hint gesetzt sind)
 * .gh-af__title    .gh-af__hint
 * .gh-af__groups            Raster
 * .gh-af__group             <details> je Oberkategorie   .gh-af__group--<slug>
 * .gh-af__group-title       <summary>
 * .gh-af__group-badge       Anzahl aktiver Filter der Gruppe (nur mobil)
 * .gh-af__facet             Facette  .gh-af__facet--<slug>  .gh-af__facet--flat
 * .gh-af__facet-title       Zwischenüberschrift (span, bewusst kein <h4>)
 * .gh-af__chips             Liste    .gh-af__chip-item      .gh-af__cb
 * .gh-af__chip              Kachel   .gh-af__chip--<slug>   .is-checked .is-empty
 * .gh-af__chip-label   .gh-af__chip-count
 * .gh-af__bar   .gh-af__result   .gh-af__reset   .gh-af__empty
 * .gh-af-is-hidden          an ausgefilterten Beitragskarten
 * .gh-af-notice             Fehlerhinweis
 *
 * Datenattribute: [data-group] [data-facet] [data-term] [data-count]
 * ---------------------------------------------------------------------------
 */

.gh-af{
	--gh-orange:#FF5F01;
	--gh-blue:#0E72A3;
	--gh-tint:#FDF6EE;
	--gh-tint-2:#FBEADA;
	--gh-text:#706C6B;
	--gh-dark:#1E2327;
	--gh-line:#F2E6DA;
	--gh-radius:8px;
	--gh-radius-box:12px;
	--gh-c:var(--gh-orange);

	box-sizing:border-box;
	margin:0 0 2.5rem;
	padding:1.75rem 1.75rem 1.25rem;
	background:#fff;
	border:1px solid var(--gh-line);
	border-radius:var(--gh-radius-box);
	color:var(--gh-text);
}
.gh-af *,.gh-af *::before,.gh-af *::after{box-sizing:border-box}

/* ---------- optionaler Kopf ---------- */
.gh-af .gh-af__head{margin:0 0 1.5rem}
.gh-af .gh-af__title{margin:0 0 .3rem;padding:0;font-size:1.35rem;line-height:1.25;color:var(--gh-blue)}
.gh-af .gh-af__hint{margin:0;padding:0;font-size:.9375rem;line-height:1.5;color:var(--gh-text)}

/* ---------- Raster ---------- */
.gh-af .gh-af__groups{display:grid;gap:1.75rem 2rem;grid-template-columns:1fr}

/* ---------- Gruppe ---------- */
.gh-af .gh-af__group{min-width:0;margin:0;padding:0;border:0;background:none}
.gh-af .gh-af__group+.gh-af__group{border-top:1px solid var(--gh-line);padding-top:1.25rem}

.gh-af .gh-af__group-title{
	display:flex;align-items:center;gap:.5rem;
	margin:0 0 .9rem;padding:0;
	list-style:none;cursor:pointer;
	font-family:inherit;font-size:.8125rem;font-weight:700;line-height:1.3;
	letter-spacing:.09em;text-transform:uppercase;
	color:var(--gh-c);
}
.gh-af .gh-af__group-title::-webkit-details-marker{display:none}
.gh-af .gh-af__group-title::marker{content:""}
.gh-af .gh-af__group-title::after{
	content:"";margin-left:auto;flex:0 0 auto;
	width:.5rem;height:.5rem;
	border-right:2px solid var(--gh-c);border-bottom:2px solid var(--gh-c);
	transform:rotate(45deg) translateY(-.12rem);
	transition:transform .15s ease;
}
.gh-af .gh-af__group[open]>.gh-af__group-title::after{transform:rotate(-135deg) translateY(.06rem)}
.gh-af .gh-af__group-title:focus-visible{outline:2px solid var(--gh-dark);outline-offset:3px}

.gh-af .gh-af__group-badge{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:1.25rem;height:1.25rem;padding:0 .3rem;
	border-radius:999px;background:var(--gh-c);color:#fff;
	font-size:.6875rem;font-weight:700;letter-spacing:0;
}
.gh-af .gh-af__group-badge[hidden]{display:none}

/* ---------- Facette ---------- */
.gh-af .gh-af__facet+.gh-af__facet{margin-top:1rem}
.gh-af .gh-af__facet-title{
	display:block;margin:0 0 .5rem;padding:0;
	font-family:inherit;font-size:.75rem;font-weight:600;line-height:1.3;
	letter-spacing:.07em;text-transform:uppercase;
	color:var(--gh-text);opacity:.75;
}

/* ---------- Kacheln ---------- */
.gh-af .gh-af__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.gh-af .gh-af__chip-item{margin:0;padding:0;list-style:none}
.gh-af .gh-af__chip-item::before{content:none;display:none}
.gh-af .gh-af__chip-item::marker{content:""}

.gh-af .gh-af__cb{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.gh-af .gh-af__chip{
	display:inline-flex;align-items:center;gap:.45rem;
	margin:0;padding:.45rem .75rem;
	border:0;border-radius:var(--gh-radius);
	background:var(--gh-tint);
	color:var(--gh-dark);
	font-family:inherit;font-size:.9375rem;font-weight:500;line-height:1.35;
	letter-spacing:normal;text-transform:none;text-align:left;
	cursor:pointer;
	transition:background-color .13s ease,color .13s ease;
}
.gh-af .gh-af__chip:hover{background:var(--gh-tint-2)}
.gh-af .gh-af__cb:focus-visible+.gh-af__chip{outline:2px solid var(--gh-dark);outline-offset:2px}
.gh-af .gh-af__chip.is-checked{background:var(--gh-c);color:#fff}
.gh-af .gh-af__chip.is-checked:hover{background:var(--gh-c);filter:brightness(.94)}

.gh-af .gh-af__chip-label{display:inline}
.gh-af .gh-af__chip-count{font-size:.8125rem;font-variant-numeric:tabular-nums;color:var(--gh-text)}
.gh-af .gh-af__chip.is-checked .gh-af__chip-count{color:#fff;opacity:.8}
.gh-af .gh-af__chip.is-empty{opacity:.4}
.gh-af .gh-af__chip.is-empty.is-checked{opacity:1}

/* ---------- Fußzeile ---------- */
.gh-af .gh-af__bar{
	display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;
	margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--gh-line);
}
.gh-af .gh-af__result{margin:0;padding:0;font-size:.9375rem;font-weight:600;color:var(--gh-dark)}
.gh-af .gh-af__reset{
	margin:0;padding:.4rem .9rem;
	border:1.5px solid var(--gh-orange);border-radius:var(--gh-radius);
	background:transparent;color:var(--gh-orange);
	font-family:inherit;font-size:.875rem;font-weight:600;line-height:1.35;
	letter-spacing:normal;text-transform:none;
	cursor:pointer;transition:background-color .13s ease,color .13s ease;
}
.gh-af .gh-af__reset:hover{background:var(--gh-orange);color:#fff}
.gh-af .gh-af__reset[hidden]{display:none}

.gh-af .gh-af__empty{
	margin:1rem 0 0;padding:1rem 1.15rem;
	border:0;border-radius:var(--gh-radius);
	background:var(--gh-tint);
	font-size:.9375rem;line-height:1.6;color:var(--gh-dark);
}
.gh-af .gh-af__empty[hidden]{display:none}

/* ---------- ausgefilterte Karten ---------- */
.gh-af-is-hidden{display:none !important}

.gh-af-notice{padding:1em;border-left:4px solid #FF5F01;background:#FDF6EE;color:#1E2327}

/* ---------- ab Tablet: zwei Spalten ---------- */
@media (min-width:768px){
	.gh-af{padding:2rem 2.25rem 1.5rem}
	.gh-af .gh-af__groups{grid-template-columns:repeat(2,minmax(0,1fr))}
	.gh-af .gh-af__group+.gh-af__group{border-top:0;padding-top:0}
	.gh-af .gh-af__group-title{cursor:default;pointer-events:none}
	.gh-af .gh-af__group-title::after{display:none}
	.gh-af .gh-af__group-badge{display:none}
}

/* ---------- ab Desktop: Spaltenzahl laut Shortcode, dauerhaft offen ---------- */
@media (min-width:1100px){
	.gh-af--cols-2 .gh-af__groups{grid-template-columns:repeat(2,minmax(0,1fr))}
	.gh-af--cols-3 .gh-af__groups{grid-template-columns:repeat(3,minmax(0,1fr))}
	.gh-af--cols-4 .gh-af__groups{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- Telefon ---------- */
@media (max-width:767px){
	.gh-af{padding:1.25rem 1.25rem 1rem}
	.gh-af .gh-af__groups{gap:1.25rem}
	.gh-af .gh-af__chip{padding:.55rem .8rem;font-size:1rem}
	.gh-af .gh-af__bar{flex-direction:column;align-items:stretch;gap:.7rem}
	.gh-af .gh-af__reset{width:100%;text-align:center}
}

@media (prefers-reduced-motion:reduce){
	.gh-af .gh-af__chip,.gh-af .gh-af__reset,.gh-af .gh-af__group-title::after{transition:none}
}