/**
 * Parkplatzsuche.
 *
 * Wird nur auf der Seite mit der Vorlage „Parkplätze – Suche“ geladen (siehe
 * inc/parking/bootstrap.php) und benutzt ausschließlich die Farb- und
 * Radiusmarken des Themes – Kopf, Fuß und CI bleiben unberührt.
 *
 * Aufbau:
 *   0. Kopfleiste
 *   1. Seitenrahmen, Einleitung, Hinweise
 *   2. Suchfeld (.pks__bar)
 *   3. Layout und Filterspalte
 *   4. Kopfzeile der Treffer
 *   5. Stellplatzkarte (.pkc)
 *   6. Standortübersicht
 *   7. Ladezustand
 *   8. Schmale Geräte
 */

/* ====================================================================== *
 * 0. Kopfleiste
 * ====================================================================== */

/* Wie bei den Hotelseiten: Die überlagernde Fassung der Kopfleiste setzt ein
   dunkles Hero voraus. Diese Seite beginnt hell, die Leiste soll trotzdem
   mitlaufen. Die Datei lädt nur hier, die Regel wirkt also nirgends sonst. */
.site-header:not(.site-header--overlay) {
	position: sticky;
	top: 0;
	box-shadow: 0 6px 20px rgba(6, 20, 48, .16);
}

/* ====================================================================== *
 * 1. Seitenrahmen
 * ====================================================================== */

.pks { padding: 28px 0 72px; background: var(--ap-page); }

.pks__intro { margin: 0 0 20px; max-width: 760px; }
.pks__h1 { font-size: 38px; line-height: 1.12; margin: 0 0 10px; letter-spacing: -.02em; }
.pks__lead { margin: 0; color: var(--ap-muted); font-size: 16.5px; line-height: 1.6; }

.pks__note {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 16px;
	padding: 12px 15px;
	background: #fff;
	border: 1px solid var(--ap-line);
	border-inline-start: 4px solid var(--ap-blue);
	border-radius: var(--ap-r-sm);
	font-size: 15px;
	color: var(--ap-ink);
}
.pks__note svg { flex: 0 0 auto; margin-top: 2px; color: var(--ap-blue); }
.pks__note--warn { border-inline-start-color: var(--ap-gold); }
.pks__note--warn svg { color: var(--ap-gold-2); }
.pks__note--quiet {
	background: transparent;
	border: 0;
	border-inline-start: 0;
	padding: 4px 0;
	color: var(--ap-muted);
	font-size: 14px;
}
.pks__note--quiet svg { color: var(--ap-muted); }

.pks__text,
.pks__about { margin: 36px 0 0; }
.pks__about h2 { font-size: 23px; margin: 0 0 10px; }
.pks__about p { margin: 0 0 12px; color: var(--ap-muted); max-width: 72ch; line-height: 1.65; }

.pks__source {
	margin: 28px 0 0;
	font-size: 13px;
	color: var(--ap-muted);
	max-width: 80ch;
}
.pks__source a { color: inherit; }

/* ====================================================================== *
 * 2. Suchfeld
 * ====================================================================== */

.pks__bar {
	background: var(--ap-navy);
	border-radius: var(--ap-r);
	padding: 18px 20px 20px;
	box-shadow: var(--ap-shadow-lg);
	margin: 0 0 26px;
	color: #fff;
}

.pks__barhead {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
	color: #fff;
}
.pks__barhead svg { color: var(--ap-gold); }

/* Vier Felder und ein Knopf: Standort bekommt den meisten Platz, die Daten
   je ihre feste Breite. Unter 900px bricht alles auf eine Spalte um. */
.pks__fields {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) 10.5rem 10.5rem auto;
	gap: 12px;
	align-items: end;
}
.pks__fields:has(.pks__field--abfahrt) {
	grid-template-columns: minmax(0, 1.4fr) 9.5rem 9.5rem minmax(0, 1fr) auto;
}

.pks__field { min-width: 0; }
.pks__field label {
	display: block;
	margin: 0 0 5px;
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, .78);
}
.pks__field input,
.pks__field select {
	width: 100%;
	font: inherit;
	font-size: 15.5px;
	padding: 12px 13px;
	border: 1px solid transparent;
	border-radius: var(--ap-r-sm);
	background: #fff;
	color: var(--ap-ink);
	min-height: 48px;
}
.pks__field input[readonly] { background: #eef2f7; color: var(--ap-muted); }
.pks__field input:focus-visible,
.pks__field select:focus-visible {
	outline: 3px solid var(--ap-gold);
	outline-offset: 1px;
}

.pks__go { min-height: 48px; white-space: nowrap; }

.pks__barnote {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 12px 0 0;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .82);
}
.pks__barnote svg { flex: 0 0 auto; margin-top: 2px; color: var(--ap-gold); }

/* ====================================================================== *
 * 3. Layout und Filterspalte
 * ====================================================================== */

.pks__layout {
	display: grid;
	grid-template-columns: 288px minmax(0, 1fr);
	gap: 26px;
	align-items: start;
}

.pks__side { position: sticky; top: calc(var(--header-h) + 14px); }
.pks__main { min-width: 0; }

.pks__filters {
	background: #fff;
	border: 1px solid var(--ap-line);
	border-radius: var(--ap-r);
	box-shadow: var(--ap-shadow);
	overflow: hidden;
}

.pks__filterhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--ap-line);
}
.pks__filtertitle { margin: 0; font-size: 15px; font-weight: 700; }
.pks__filterclose {
	display: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--ap-line);
	border-radius: var(--ap-r-sm);
	background: #fff;
	cursor: pointer;
	color: var(--ap-ink);
}

.pks__group { border: 0; border-bottom: 1px solid var(--line-soft); margin: 0; padding: 14px 16px; }
.pks__group:last-of-type { border-bottom: 0; }
.pks__group legend,
.pks__grouptitle {
	padding: 0;
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--ap-muted);
}

.pks__check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 7px 0;
	cursor: pointer;
}
.pks__check input { margin: 3px 0 0; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--ap-pink); }
.pks__checkbody { min-width: 0; }
.pks__checklabel {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 15px;
	color: var(--ap-ink);
}
.pks__checklabel svg { color: var(--ap-blue); flex: 0 0 auto; }
.pks__checklabel small {
	margin-inline-start: auto;
	background: var(--ap-page);
	border-radius: var(--radius-pill);
	padding: 1px 8px;
	font-size: 12px;
	font-weight: 700;
	color: var(--ap-muted);
}
.pks__checkhint { display: block; font-size: 12.5px; color: var(--ap-muted); line-height: 1.45; }

.pks__services { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pks__services li { display: flex; gap: 7px; align-items: flex-start; font-size: 14px; color: var(--ap-muted); }
.pks__services svg { flex: 0 0 auto; margin-top: 3px; color: var(--ap-blue); }

.pks__reset,
.pks__apply { display: inline-flex; align-items: center; gap: 6px; margin: 0 16px 16px; font-size: 14px; }

.pks__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(7, 31, 73, .5);
	z-index: 90;
	border: 0;
}
.pks__backdrop[hidden] { display: none; }

/* ====================================================================== *
 * 4. Kopfzeile der Treffer
 * ====================================================================== */

.pks__head {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 18px;
	align-items: flex-end;
	justify-content: space-between;
	background: #fff;
	border: 1px solid var(--ap-line);
	border-radius: var(--ap-r);
	padding: 16px 18px;
	box-shadow: var(--ap-shadow);
	margin: 0 0 16px;
}
.pks__count { margin: 0 0 3px; font-size: 19px; }
.pks__count strong { font-size: 22px; }
.pks__summary { margin: 0; font-size: 14.5px; color: var(--ap-muted); }

.pks__tools { display: flex; align-items: center; gap: 12px; }

.pks__filterbtn {
	display: none;
	align-items: center;
	gap: 8px;
	background: var(--ap-navy);
	color: #fff;
	border: 0;
	border-radius: var(--ap-r-sm);
	padding: 10px 14px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.pks__sort { display: flex; align-items: center; gap: 8px; }
.pks__sortlabel { font-size: 13.5px; color: var(--ap-muted); white-space: nowrap; }
.pks__sort select {
	font: inherit;
	font-size: 14.5px;
	padding: 9px 12px;
	border: 1px solid var(--ap-line);
	border-radius: var(--ap-r-sm);
	background: #fff;
	color: var(--ap-ink);
	max-width: 230px;
}
.pks__sortgo {
	font: inherit;
	font-size: 14px;
	padding: 8px 12px;
	border: 1px solid var(--ap-line);
	border-radius: var(--ap-r-sm);
	background: var(--ap-page);
	cursor: pointer;
}

.pks__view { display: flex; margin: 0; border: 1px solid var(--ap-line); border-radius: var(--ap-r-sm); overflow: hidden; }
.pks__viewbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	color: var(--ap-muted);
}
.pks__viewbtn + .pks__viewbtn { border-inline-start: 1px solid var(--ap-line); }
.pks__viewbtn.is-current { background: var(--ap-navy); color: #fff; }

.pks__disclosure {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	margin: 18px 0 0;
	font-size: 13px;
	color: var(--ap-muted);
	line-height: 1.55;
	max-width: 86ch;
}
.pks__disclosure svg { flex: 0 0 auto; margin-top: 2px; }

.pks__empty {
	background: #fff;
	border: 1px solid var(--ap-line);
	border-radius: var(--ap-r);
	box-shadow: var(--ap-shadow);
	padding: 40px 24px;
	text-align: center;
}
.pks__empty svg { color: var(--ap-blue); }
.pks__empty h2 { font-size: 21px; margin: 12px 0 8px; }
.pks__empty p { margin: 0 auto 18px; color: var(--ap-muted); max-width: 52ch; }

/* ====================================================================== *
 * 5. Stellplatzkarte
 * ====================================================================== */

.pks__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pks__list--raster { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

.pkc {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr) 220px;
	background: #fff;
	border: 1px solid var(--ap-line);
	border-radius: var(--ap-r);
	box-shadow: var(--ap-shadow);
	overflow: hidden;
	height: 100%;
}

.pkc__media { position: relative; background: var(--ap-page); }
.pks__img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 190px;
	object-fit: cover;
}
.pkc__type {
	position: absolute;
	inset-block-end: 10px;
	inset-inline-start: 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 5px 10px;
	background: rgba(8, 26, 62, .86);
	color: #fff;
	border-radius: var(--radius-pill);
	font-size: 12.5px;
	font-weight: 600;
}

.pkc__body { padding: 16px 18px; min-width: 0; }
.pkc__title { font-size: 19px; margin: 0 0 7px; line-height: 1.25; }

.pkc__where,
.pkc__transfer {
	display: flex;
	gap: 7px;
	align-items: flex-start;
	margin: 0 0 6px;
	font-size: 14px;
	color: var(--ap-muted);
}
.pkc__where svg,
.pkc__transfer svg { flex: 0 0 auto; margin-top: 2px; color: var(--ap-blue); }

.pkc__features { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; }
.pkc__features li { display: flex; gap: 7px; align-items: flex-start; font-size: 14px; }
.pkc__features svg { flex: 0 0 auto; margin-top: 3px; color: var(--ap-blue); }

.pkc__more { margin: 8px 0 0; font-size: 13.5px; }
.pkc__more summary { cursor: pointer; color: var(--ap-blue); font-weight: 600; }
.pkc__more[open] summary { margin-bottom: 6px; }

.pkc__provider {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 12px 0 0;
	font-size: 12.5px;
	color: var(--ap-muted);
}
.pkc__logo { height: 22px; width: auto; }

.pkc__buy {
	padding: 16px 18px;
	border-inline-start: 1px solid var(--line-soft);
	background: linear-gradient(180deg, #fff 0%, var(--ap-page) 100%);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	text-align: start;
}

.pkc__avail {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0 0 8px;
	padding: 3px 9px;
	background: #e7f4ec;
	color: #1c6b3d;
	border-radius: var(--radius-pill);
	font-size: 12px;
	font-weight: 700;
}

.pkc__price { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.pkc__pricepre { font-size: 13px; color: var(--ap-muted); }
.pkc__pricevalue { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }

.pkc__pricemeta { margin: 2px 0 0; font-size: 13px; color: var(--ap-muted); }
.pkc__pricemeta small { font-size: 11.5px; }
.pkc__perday { margin: 4px 0 0; font-size: 13px; color: var(--ap-muted); }
.pkc__hint { margin: 8px 0 0; font-size: 11.5px; color: var(--ap-muted); line-height: 1.45; }

.pkc__cta { margin: 14px 0 0; width: 100%; justify-content: center; }
.pkc__ext { margin: 7px 0 0; font-size: 11.5px; color: var(--ap-muted); }

/* Kachelansicht: ein Stapel statt drei Spalten. */
.pks__list--raster .pkc { grid-template-columns: minmax(0, 1fr); }
.pks__list--raster .pkc__buy {
	border-inline-start: 0;
	border-block-start: 1px solid var(--line-soft);
}
.pks__list--raster .pks__img { min-height: 170px; max-height: 190px; }

/* ====================================================================== *
 * 6. Standortübersicht
 * ====================================================================== */

.pks__orte { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }

.pks__ortgroup {
	background: #fff;
	border: 1px solid var(--ap-line);
	border-radius: var(--ap-r);
	box-shadow: var(--ap-shadow);
	padding: 18px 20px 10px;
}
.pks__orttitle { display: flex; align-items: center; gap: 9px; font-size: 19px; margin: 0 0 10px; }
.pks__orttitle svg { color: var(--ap-blue); }

.pks__ortlist { list-style: none; margin: 0; padding: 0; }
.pks__ortlist li + li { border-top: 1px solid var(--line-soft); }

.pks__ort {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "name pfeil" "meta pfeil";
	align-items: center;
	gap: 0 12px;
	padding: 12px 2px;
	color: var(--ap-ink);
	text-decoration: none;
}
.pks__ort:hover { color: var(--ap-blue); }
.pks__ortname { grid-area: name; font-weight: 600; font-size: 15.5px; }
.pks__ortname small {
	margin-inline-start: 7px;
	background: var(--ap-page);
	border-radius: var(--radius-pill);
	padding: 1px 7px;
	font-size: 11.5px;
	color: var(--ap-muted);
	font-weight: 700;
}
.pks__ortmeta { grid-area: meta; font-size: 13px; color: var(--ap-muted); }
.pks__ort svg { grid-area: pfeil; color: var(--ap-blue); }

/* ====================================================================== *
 * 7. Ladezustand
 * ====================================================================== */

.pks__results { position: relative; }
.pks__results[aria-busy="true"] .pks__list,
.pks__results[aria-busy="true"] .pks__empty { opacity: .45; transition: opacity .15s ease; }

.pks__loading {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 14px 0 0;
	font-size: 14.5px;
	color: var(--ap-muted);
}
.pks__loading[hidden] { display: none; }

.pks__spinner {
	width: 18px;
	height: 18px;
	border: 2px solid var(--ap-line);
	border-top-color: var(--ap-pink);
	border-radius: 50%;
	animation: pks-spin .7s linear infinite;
}

@keyframes pks-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.pks__spinner { animation-duration: 2.4s; }
	.pks__side { transition: none; }
}

/* ====================================================================== *
 * 8. Schmale Geräte
 * ====================================================================== */

@media (max-width: 1080px) {
	.pks__layout { grid-template-columns: minmax(0, 1fr); }
	.pks__filterbtn { display: inline-flex; }
	.pks__filterclose { display: inline-flex; }

	.pks__side {
		position: fixed;
		inset-block: 0;
		inset-inline-start: 0;
		width: min(360px, 92vw);
		z-index: 100;
		transform: translateX(-102%);
		transition: transform .24s ease;
		overflow-y: auto;
	}
	.pks__side.is-open { transform: none; }
	.pks__filters { border-radius: 0; min-height: 100%; border: 0; }

	.pkc { grid-template-columns: 210px minmax(0, 1fr); }
	.pkc__buy {
		grid-column: 1 / -1;
		border-inline-start: 0;
		border-block-start: 1px solid var(--line-soft);
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		gap: 10px;
	}
	.pkc__cta { width: auto; margin: 0; }
	.pkc__hint { flex: 1 1 100%; margin: 0; }
}

@media (max-width: 900px) {
	/* Vier Felder nebeneinander werden auf dem Tablet zu schmal; zwei Reihen
	   lesen sich besser als vier Spalten mit abgeschnittenen Beschriftungen. */
	.pks__fields,
	.pks__fields:has(.pks__field--abfahrt) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.pks__field--ort,
	.pks__field--abfahrt,
	.pks__field--go { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
	.pks { padding: 18px 0 56px; }
	.pks__h1 { font-size: 28px; }
	.pks__bar { padding: 16px; }
	.pks__fields,
	.pks__fields:has(.pks__field--abfahrt) { grid-template-columns: minmax(0, 1fr); }

	.pks__head { flex-direction: column; align-items: stretch; }
	.pks__tools { width: 100%; flex-wrap: wrap; gap: 10px; }
	.pks__sort { flex: 1 1 100%; min-width: 0; }
	.pks__sort select { flex: 1 1 auto; max-width: none; min-width: 0; }

	/* Bild über den Text: Ein 210px-Bild neben 150px Text ergibt zwei zu
	   schmale Spalten. */
	.pkc { grid-template-columns: minmax(0, 1fr); }
	.pks__img { min-height: 170px; max-height: 210px; }
	.pkc__buy { flex-direction: column; align-items: stretch; }
	.pkc__cta { width: 100%; }
	.pks__orte { grid-template-columns: minmax(0, 1fr); }
}