/* HTG-Connect Frontend-Grid (Paket 4). Alles im "htgc-"-Namensraum,
   damit nichts mit dem Theme (Unos Magazine Vu Premium/HootKit)
   kollidiert. Keine Abhaengigkeit von Theme-Klassen. */

.htgc-grid {
	--htgc-spalten: 3;
	display: grid;
	grid-template-columns: repeat(var(--htgc-spalten), minmax(0, 1fr));
	gap: 16px;
	margin: 0 0 16px;
}

@media (max-width: 900px) {
	.htgc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.htgc-grid {
		grid-template-columns: 1fr;
	}
}

.htgc-kachel {
	display: flex;
	flex-direction: column;
	border: 1px solid #e2e0d8;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

.htgc-kachel-bild {
	aspect-ratio: 16 / 10;
	background: #e8e6df;
	overflow: hidden;
}

.htgc-kachel-bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.htgc-kachel-body {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 12px 14px 14px;
}

.htgc-kachel-titel {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 3px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (min-width: 900px) {
	.htgc-kachel-titel {
		font-size: 18px;
	}
}

.htgc-kachel-ort {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	color: #333;
	margin: 0 0 2px;
}

.htgc-kachel-ort .htgc-pin {
	flex: 0 0 auto;
	color: #777;
}

/* Nachtrag Paket 5, Teil 5: einzeilig, Abschneiden mit "…" statt Umbruch -
   der volle Text bleibt im title-Attribut (Tooltip/Screenreader). min-width:0
   ist noetig, damit ein Flex-Kind ueberhaupt unter seine Inhaltsbreite
   schrumpfen und text-overflow greifen kann. */
.htgc-kachel-ort-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.htgc-kachel-eckdaten {
	font-size: 14px;
	color: #333;
	margin: 0 0 4px;
}

.htgc-kachel-preis {
	font-size: 16px;
	margin: 0 0 2px;
}

.htgc-kachel-preis-degradiert {
	color: #7a5b00;
	font-size: 14px;
}

.htgc-sterne {
	position: relative;
	display: inline-block;
	font-size: 15px;
	line-height: 1;
	white-space: nowrap;
	vertical-align: middle;
}

.htgc-sterne-hg {
	color: #ddd;
}

.htgc-sterne-fg {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	color: #FFCC00;
	white-space: nowrap;
}

.htgc-sterne-zahl {
	font-size: 13px;
	color: #555;
	vertical-align: middle;
}

.htgc-kachel-sterne {
	margin: 0 0 6px !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	flex-wrap: wrap !important;
}

.htgc-kachel-sterne > * {
	flex: 0 0 auto;
}

.htgc-bewertungshinweis {
	display: inline-block !important;
	vertical-align: middle;
}

/* Springt bei geöffnetem Zustand auf eine eigene, volle Zeile innerhalb
   der Kachel-Breite (Flexbox-Zeilenumbruch-Trick) - dadurch kann die Box
   nie über den Bildschirmrand hinauslaufen, unabhängig davon, wo das
   Symbol selbst innerhalb der Zeile steht (Katrins Fund vom 16.07.2026:
   die vorherige frei positionierte Box lief auf schmalen Bildschirmen
   über den rechten Rand hinaus und schnitt den Text ab). */
.htgc-bewertungshinweis[open] {
	flex-basis: 100%;
}

.htgc-bewertungshinweis summary {
	list-style: none;
	cursor: pointer;
	color: #888;
	display: inline-flex !important;
	align-items: center;
	margin: 0 !important;
	padding: 0 !important;
}

.htgc-bewertungshinweis summary::-webkit-details-marker {
	display: none;
}

.htgc-bewertungshinweis span {
	display: block;
	margin-top: 6px;
	background: #f7f6f2;
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 11px;
	color: #555;
	line-height: 1.4;
}

.htgc-kachel-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 6px;
	padding-top: 6px;
	border-top: 1px solid #eee;
}

.htgc-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #333;
}

.htgc-icon {
	color: #3a3a3a;
}

/* Bewusst nur visuell ausgeblendet (nicht "display:none") - bleibt im
   HTML-Quelltext vorhanden und damit fuer Suchmaschinen/KI-Crawler und
   Screenreader lesbar. Sichtbar bleibt nur das Icon + Tooltip (title-
   Attribut auf .htgc-icon-wrap). */
.htgc-icon-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.htgc-kachel-attribution {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 5px !important;
	margin: 0 0 8px;
	font-size: 12px;
	color: #666;
}

.htgc-kachel-attribution > * {
	flex: 0 0 auto;
	margin: 0 !important;
}

.htgc-kachel-attribution-label {
	white-space: nowrap;
}

.htgc-kachel-attribution-logo {
	height: 22px;
	width: auto;
	max-width: 90px;
	object-fit: contain;
	flex-shrink: 0;
}

.htgc-kachel-button {
	display: inline-block;
	margin-top: 0;
	padding: 9px 16px;
	background: #FFCC00;
	color: #1a1a1a;
	text-decoration: none;
	border-radius: 5px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

.htgc-kachel-button:hover {
	background: #e6b800;
	color: #1a1a1a;
}

.htgc-preisstand {
	font-size: 12px;
	color: #666;
	margin: 4px 0 0;
	line-height: 1.5;
}

.htgc-grid-leer {
	font-size: 14px;
	color: #666;
	margin: 0 0 16px;
	padding: 20px;
	text-align: center;
	background: #f7f6f2;
	border-radius: 8px;
}

/* ===================================================================
   Paket 5: Filter-Modul.
   =================================================================== */

/* WICHTIG: ".htgc-kachel { display:flex }" oben hat dieselbe
   Spezifitaet wie die Browser-Standardregel "[hidden]{display:none}" -
   Autoren-CSS gewinnt aber grundsaetzlich gegen die UA-Standardregel,
   das native hidden-Attribut wuerde die Kachel also OHNE diese Regel
   NICHT wirklich verstecken. Deshalb hier explizit mit hoeherer
   Spezifitaet (".htgc-grid .htgc-kachel[hidden]") erzwungen. */
.htgc-grid .htgc-kachel[hidden] {
	display: none;
}

.htgc-filter-wrap {
	margin: 0 0 16px;
}

/* Nachtrag "Umfangsdeckel" (0.19.1/0.19.2): Ergebnis-Zaehler + Info-Symbol
   sitzen zusammen in einem kleinen, relativ positionierten Wrapper - damit
   applyCommitted() im JS weiterhin NUR den Zaehlertext
   (data-role="ergebnis") per textContent ersetzen kann, ohne das direkt
   danebenstehende Info-Symbol anzufassen. margin-left:auto (0.19.2,
   Fable-Fund) schiebt die ganze Einheit robust an die rechte Kante der
   Filterleiste - unabhaengig davon, wie viele andere Bedienelemente davor
   stehen oder ob die Leiste auf schmalen Bildschirmen umbricht (dort dann
   rechtsbuendig auf ihrer eigenen Zeile). */
.htgc-filter-ergebnis-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}

/* Info-Symbol neben dem Ergebnis-Zaehler auf gedeckelten Seiten - echter
   Button statt <summary> (0.19.2, siehe HTGC_Filter_UI::render_deckel_info()
   und assets/htgc-filter.js fuer die Auf-/Zu-Logik), in der Textfarbe der
   Filterleiste, leicht abgeschwaecht (#888, identischer Wert wie beim
   Bewertungs-Hinweis .htgc-bewertungshinweis). Kein eigener Rahmen/
   Hintergrund - sieht optisch wie das fruehere <summary>-Symbol aus,
   verhaelt sich aber wie ein echter Button (inkl. nativem Fokus-Ring -
   bewusst NICHT per outline:none entfernt). */
.htgc-filter-info {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.htgc-filter-info-btn {
	display: inline-flex;
	align-items: center;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	color: #888;
	line-height: 0;
}

/* Popover-Feld: rechts an das Info-Symbol angedockt und WACHSEND NACH
   LINKS (right:0 statt left:0) - das Symbol sitzt jetzt rechts aussen in
   der Filterleiste (0.19.2-Fund), ein nach rechts oeffnendes Popover liefe
   dort ueber den Bildschirmrand hinaus. max-width per min()-Funktion
   haelt die Breite zusaetzlich innerhalb von 90% der Viewport-Breite -
   wichtig auf schmalen Mobilgeraeten. [hidden] erzwingt display:none, weil
   eine Klassenregel mit display:block sonst Vorrang vor der
   Browser-Standardregel fuer [hidden] haette. */
.htgc-filter-info-popover {
	position: absolute;
	top: 100%;
	right: 0;
	left: auto;
	z-index: 5;
	width: max-content;
	max-width: min(320px, 90vw);
	margin-top: 6px;
	background: #f7f6f2;
	border: 1px solid #e3e1da;
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 12px;
	color: #555;
	line-height: 1.4;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.htgc-filter-info-popover[hidden] {
	display: none;
}

.htgc-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin: 0 0 14px;
	padding: 10px 14px;
	background: #f7f6f2;
	border-radius: 8px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
}

/* Personen-Stepper */
.htgc-filter-stepper {
	display: flex;
	align-items: center;
	gap: 8px;
}

.htgc-filter-stepper-label {
	color: #555;
}

.htgc-filter-stepper-btn {
	width: 26px;
	height: 26px;
	line-height: 24px;
	padding: 0;
	border: 1px solid #ccc;
	border-radius: 50%;
	background: #fff;
	color: #1a1a1a;
	font-size: 16px;
	cursor: pointer;
	text-align: center;
}

.htgc-filter-stepper-btn:hover {
	background: #eee;
}

.htgc-filter-stepper-value {
	min-width: 64px;
	text-align: center;
	font-weight: 600;
}

/* Preis-Regler (zwei ueberlagerte native range-Inputs) */
.htgc-filter-price {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 180px;
}

.htgc-filter-price-label {
	color: #555;
	white-space: nowrap;
}

.htgc-filter-price-track {
	position: relative;
	height: 26px;
}

.htgc-filter-price-track::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 4px;
	margin-top: -2px;
	background: #ddd;
	border-radius: 2px;
}

.htgc-filter-price-range {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 26px;
	margin: 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	pointer-events: none;
}

.htgc-filter-price-range::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	background: transparent;
	height: 26px;
}

.htgc-filter-price-range::-moz-range-track {
	background: transparent;
	height: 26px;
}

.htgc-filter-price-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 18px;
	height: 18px;
	margin-top: 4px;
	border-radius: 50%;
	background: #FFCC00;
	border: 2px solid #1a1a1a;
	cursor: pointer;
}

.htgc-filter-price-range::-moz-range-thumb {
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #FFCC00;
	border: 2px solid #1a1a1a;
	cursor: pointer;
}

/* "Alle Filter"-Knopf + Zaehl-Badge */
.htgc-filter-alle-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid #1a1a1a;
	border-radius: 5px;
	background: #fff;
	color: #1a1a1a;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.htgc-filter-alle-btn:hover {
	background: #f0f0f0;
}

.htgc-filter-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: #FFCC00;
	color: #1a1a1a;
	font-size: 11px;
	font-weight: 700;
}

.htgc-filter-ergebnis {
	margin-left: auto;
	color: #555;
	white-space: nowrap;
}

.htgc-filter-reset-btn,
.htgc-filter-inline-reset {
	padding: 7px 12px;
	border: none;
	background: transparent;
	color: #a00;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

@media (max-width: 560px) {
	.htgc-filter-bar {
		gap: 10px;
	}

	/* Bugfix (0.19.3, Katrins Fund per Screenshot): Diese Regel zielte
	   ursprünglich (vor 0.19.1) auf ".htgc-filter-ergebnis" selbst, weil
	   die Zähler-Spanne DAMALS das direkte Flex-Kind von ".htgc-filter-bar"
	   war. Seit 0.19.1 sitzt der Zähler in ".htgc-filter-ergebnis-wrap"
	   (Zähler + Info-Symbol zusammen) - das ist jetzt das eigentliche
	   Flex-Kind. Die alte Regel griff dadurch am falschen (inneren)
	   Element: "order:10" sortierte die Zähler-Spanne INNERHALB des
	   kleinen Wrappers hinter das Info-Symbol (dadurch stand das Symbol
	   optisch VOR der Zahl), und ".htgc-filter-ergebnis-wrap" bekam auf
	   schmalen Bildschirmen gar keine der drei mobilen Anpassungen -
	   landete irgendwo im normalen Zeilenumbruch statt auf einer eigenen,
	   sauberen Zeile. Jetzt korrekt auf den Wrapper gemünzt; die innere
	   Zähler-Spanne bekommt keine mobile Sonderbehandlung mehr (die
	   margin-left:auto der Desktop-Regel auf ".htgc-filter-ergebnis" oben
	   bleibt zwar bestehen, wirkt aber nur noch innerhalb des kleinen
	   Wrappers und damit dort ohnehin wirkungslos, weil sie das erste
	   Kind ist - unschädlich, absichtlich nicht entfernt, um die Regel
	   nicht doppelt zu pflegen). */
	.htgc-filter-ergebnis-wrap {
		margin-left: 0;
		flex-basis: 100%;
		order: 10;
	}

	.htgc-filter-price {
		flex: 1 1 100%;
	}
}

/* Overlay-Panel (natives <dialog>) */
.htgc-filter-dialog {
	padding: 0;
	border: none;
	border-radius: 10px;
	max-width: 560px;
	width: min(92vw, 560px);
	max-height: 85vh;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.htgc-filter-dialog::backdrop {
	background: rgba(0, 0, 0, 0.45);
}

.htgc-filter-dialog-inner {
	display: flex;
	flex-direction: column;
	max-height: 85vh;
}

.htgc-filter-dialog-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid #eee;
}

.htgc-filter-dialog-head h3 {
	margin: 0;
	font-size: 17px;
}

.htgc-filter-dialog-close {
	width: 30px;
	height: 30px;
	border: none;
	background: transparent;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: #555;
}

.htgc-filter-dialog-body {
	padding: 14px 16px;
	overflow-y: auto;
}

.htgc-filter-group {
	border: none;
	padding: 0 0 16px;
	margin: 0 0 16px;
	border-bottom: 1px solid #eee;
}

.htgc-filter-group:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.htgc-filter-group legend {
	padding: 0 0 8px;
	font-weight: 700;
	font-size: 14px;
}

.htgc-filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.htgc-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 10px;
	border: 1px solid #ddd;
	border-radius: 16px;
	font-size: 13px;
	cursor: pointer;
	background: #fff;
}

.htgc-filter-chip:has(input:checked) {
	background: #fff6d9;
	border-color: #FFCC00;
}

.htgc-filter-chip input {
	margin: 0;
}

.htgc-filter-chip-count {
	color: #888;
}

.htgc-filter-chips .htgc-filter-chip[hidden] {
	display: none;
}

.htgc-filter-mehr-btn {
	margin-top: 8px;
	padding: 4px 0;
	border: none;
	background: transparent;
	color: #1a1a1a;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

.htgc-filter-dialog-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-top: 1px solid #eee;
}

.htgc-filter-apply-btn {
	padding: 10px 18px;
	border: none;
	border-radius: 5px;
	background: #FFCC00;
	color: #1a1a1a;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}

.htgc-filter-apply-btn:hover {
	background: #e6b800;
}

/* "Mehr anzeigen" (Grid-Paginierung, Paket 5) */
.htgc-grid-mehr-btn {
	display: block;
	margin: 4px auto 16px;
	padding: 10px 20px;
	border: 1px solid #1a1a1a;
	border-radius: 5px;
	background: #fff;
	color: #1a1a1a;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.htgc-grid-mehr-btn:hover {
	background: #f0f0f0;
}

.htgc-grid-leer-client button {
	margin-left: 6px;
}

/* ===================================================================
   Paket S3: Teaser-Grid fuer Contentseiten ("modus=teaser").
   Kacheln selbst nutzen bewusst dieselben .htgc-grid/.htgc-kachel-Regeln
   oben (nur .htgc-teaser-grid/.htgc-kachel-teaser als Zusatzklassen fuer
   die wenigen Abweichungen) - eine Aufbaulogik, kein zweites Kachel-Layout.
   =================================================================== */

.htgc-teaser-wrap {
	margin: 20px 0;
}

.htgc-teaser-kennzeichnung {
	font-size: 12px;
	color: #666;
	margin: 0 0 8px;
}

.htgc-teaser-grid {
	margin: 0 0 8px;
}

/* Reduzierte Kachel (Punkt 2): kein Ort/Eckdaten/Icons/Provider-Zeile -
   der Freiraum, den diese Elemente sonst einnehmen wuerden, entfaellt
   ersatzlos, kein zusaetzliches CSS noetig. Bild/Preis-Verlinkung braucht
   keine eigene Optik (erbt die normalen Link-Grundstile). */
.htgc-kachel-teaser .htgc-kachel-titel {
	margin-bottom: 6px;
}

.htgc-teaser-kachel-anbieter {
	font-size: 12px;
	color: #666;
	margin: 0 0 8px;
}

.htgc-teaser-alle-link {
	font-size: 14px;
	margin: 8px 0 0;
}