/* =========================================================================
 * liste.css  —  Übersichtsseiten  /schiffe/  und  /hotels/
 *
 * HTML-Seiten (§2): WordPress-Seite + Shortcode ([tortuga_schiffe] bzw.
 * [tortuga_hotels]), eingehängt per is_page() im Enqueue.
 *
 * Zweispaltig: Filter links, Kartenraster rechts.
 * Progressive Enhancement (wie die Schiff-Tabs): OHNE JavaScript steht nur
 * das volle Raster, der Filter ist ausgeblendet. Das kleine Skript im
 * Shortcode setzt .is-enhanced und schaltet Filter + Zweispaltigkeit frei.
 *
 * Die Karten (.t-karten/.t-karte/.t-preis/.t-karte__sterne …) kommen aus
 * land.css, das auf diesen Seiten mitgeladen wird — KEINE Kopie hier.
 * (Sobald die §9-Umschichtung .t-karte nach root.css hebt, kann land.css
 *  aus dem Enqueue dieser Seiten wieder raus.)
 * ====================================================================== */


/* --- Seitenkopf (analog reisen.css) ------------------------------------- */

.t-liste-kopf {
	width: min(100% - 2rem, var(--t-breite));
	margin-inline: auto;
	padding-block: var(--t-space-8) var(--t-space-4);
}

.t-liste-kopf__auge {
	margin: 0 0 var(--t-space-2);
	font-size: var(--t-fs-300);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--t-tuerkis);
}

.t-liste-kopf h1 { margin-bottom: var(--t-space-4); }

.t-liste-kopf__intro {
	max-width: var(--t-breite-text);
	font-size: var(--t-fs-600);
	line-height: 1.5;
	color: var(--t-text-mute);
	margin-bottom: 0;
}


/* --- Grundlayout -------------------------------------------------------- */

.t-liste {
	width: min(100% - 2rem, var(--t-breite));
	margin-inline: auto;
	margin-block: var(--t-space-6) var(--t-space-8);
	display: grid;
	gap: var(--t-space-6);
}

/* Ohne JS: Filter unsichtbar, nur das Raster. */
.t-filter { display: none; }

/* Mit JS: Filter sichtbar; ab Desktop zwei Spalten. */
.t-liste.is-enhanced .t-filter { display: block; }

@media (min-width: 60rem) {
	.t-liste.is-enhanced {
		grid-template-columns: 18rem 1fr;
		align-items: start;
	}
	/* Filter läuft beim Scrollen mit — unter der Kopfleiste geparkt. */
	.t-liste.is-enhanced .t-filter {
		position: sticky;
		top: calc(var(--t-kopf-hoehe) + var(--t-space-4));
	}
}


/* --- Filterpanel -------------------------------------------------------- */

.t-filter {
	padding: var(--t-space-4) var(--t-space-6) var(--t-space-6);
	background: var(--t-sand);
	border-radius: var(--t-radius);
}

.t-filter__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--t-space-2) var(--t-space-4);
	margin-bottom: var(--t-space-4);
}

.t-filter__titel {
	font-size: var(--t-fs-600);
	margin: 0;
}

.t-filter__reset {
	appearance: none;
	min-height: 44px;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	font-weight: 600;
	color: var(--t-blau-600);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	cursor: pointer;
}
.t-filter__reset:hover { color: var(--t-blau-900); }

/* Namenssuche */
.t-filter__feld { margin-bottom: var(--t-space-4); }
.t-filter__feld label {
	display: block;
	margin-bottom: var(--t-space-2);
	font-weight: 600;
	color: var(--t-blau-900);
}
.t-filter__feld input[type="search"] {
	width: 100%;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	font: inherit;
	color: var(--t-text);
	background: var(--t-weiss);
	border: 1px solid var(--t-linie);
	border-radius: var(--t-radius);
}

/* Reiseziel-Gruppe */
.t-filter__gruppe {
	margin: 0;
	padding: 0;
	border: 0;
}
.t-filter__gruppe legend {
	padding: 0;
	margin-bottom: var(--t-space-2);
	font-weight: 600;
	color: var(--t-blau-900);
}

.t-filter__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--t-space-1);
	max-height: 22rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.t-filter__wahl {
	display: flex;
	align-items: center;
	gap: var(--t-space-2);
	min-height: 44px;
	padding: var(--t-space-1) var(--t-space-2);
	border-radius: var(--t-radius);
	cursor: pointer;
}
.t-filter__wahl:hover { background: var(--t-weiss); }
.t-filter__wahl input {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--t-tuerkis);
}
.t-filter__name { flex: 1; }
.t-filter__zahl {
	color: var(--t-text-mute);
	font-size: var(--t-fs-300);
	font-variant-numeric: tabular-nums;
}


/* --- Hauptspalte -------------------------------------------------------- */

.t-liste__haupt { min-width: 0; }

.t-treffer {
	margin: 0 0 var(--t-space-4);
	color: var(--t-text-mute);
	font-size: var(--t-fs-300);
	font-variant-numeric: tabular-nums;
}

/* Kartenraster kommt aus land.css; hier nur der obere Abstand weg,
   der Trefferzähler trägt ihn schon. */
.t-liste .t-karten { margin-top: 0; }

/* Leerzustand bei 0 Treffern — sieht aus wie .t-leer (root.css). */
.t-liste__leer {
	max-width: var(--t-breite-text);
	margin-block: var(--t-space-4);
	padding: var(--t-space-4) var(--t-space-6);
	background: var(--t-sand);
	border-left: 4px solid var(--t-tuerkis);
	border-radius: 0 var(--t-radius) var(--t-radius) 0;
	color: var(--t-text-mute);
}
.t-liste__leer button {
	appearance: none;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	font-weight: 600;
	color: var(--t-blau-600);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	cursor: pointer;
}
.t-liste__leer button:hover { color: var(--t-blau-900); }


/* --- Bewegung reduzieren — WCAG 2.3.3 ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.t-liste.is-enhanced .t-filter { position: static; }
}