/* ====================================================================
   awi-modern.css — Übersichts-Layout "Kachel AWI Modern"
   Premium-Look für Aller-Weser Immobilien
   ====================================================================
   Aufbau:
   1. Web-Font (lokales Playfair Display – DSGVO-konform)
   2. CSS-Variablen / Design-Tokens
   3. Kopfzeile (Titel + Sortierung)
   4. Filter-Leiste (Treffer / Pills / Limit)
   5. Grid + Karten
   6. Status- und Tour-Marker
   7. Pagination + Empty-State
   8. Responsive Breakpoints
   ==================================================================== */

/* 1) ------------------ Web-Font (lokal, DSGVO-konform) ---------------
   Lege die WOFF2-Dateien in /media/com_bsdimmo/fonts/ ab:
     - playfair-display-regular.woff2
     - playfair-display-700.woff2
   Quelle z.B. https://gwfh.mranftl.com/fonts/playfair-display
   --------------------------------------------------------------------- */
@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/playfair-display-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/playfair-display-700.woff2') format('woff2');
}

/* 2) ----------------------- Design-Tokens ---------------------------- */
.awi-overview {
	--awi-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--awi-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--awi-ink:        #1a1a1a;
	--awi-ink-soft:   #4a4a4a;
	--awi-line:       #e4e1dc;
	--awi-bg:         #ffffff;
	--awi-bg-soft:    #f4f1ec;     /* warmer beige */
	--awi-accent:     #8a6d3b;     /* dezentes Bronze */
	--awi-success:    #2d6a3d;
	--awi-warning:    #b8860b;
	--awi-danger:     #8b1e1e;
	--awi-overlay:    linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.78) 100%);

	--awi-radius:  2px;
	--awi-shadow:  0 2px 8px rgba(0,0,0,0.06);
	--awi-shadow-hover: 0 8px 24px rgba(0,0,0,0.12);

	font-family: var(--awi-sans);
	color: var(--awi-ink);
}

/* 3) ----------------------- Kopfzeile -------------------------------- */
.awi-page-head {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 1rem;
	padding: 1.5rem 0 1rem;
	border-bottom: 1px solid var(--awi-line);
	margin-bottom: 1.25rem;
}

.awi-page-title {
	font-family: var(--awi-serif);
	font-weight: 400;
	font-size: clamp(1.6rem, 2.4vw, 2.2rem);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-align: center;
	margin: 0;
	color: var(--awi-ink);
}

.awi-sort .js-stools,
.awi-sort .js-stools-container-list {
	margin: 0;
}

/* 4) -------------------- Filter-Leiste ------------------------------- */
.awi-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--awi-line);
	font-size: 0.95rem;
}

.awi-filter-bar__count {
	font-family: var(--awi-serif);
	font-style: italic;
	color: var(--awi-ink-soft);
}

.awi-filter-bar__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	flex: 1 1 auto;
	justify-content: center;
}

.awi-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.8rem;
	background: var(--awi-bg-soft);
	border: 1px solid var(--awi-line);
	border-radius: 999px;
	font-size: 0.85rem;
	color: var(--awi-ink-soft);
	white-space: nowrap;
}

.awi-filter-bar__limit {
	display: inline-flex;
	gap: 0;
	background: var(--awi-bg-soft);
	padding: 0.25rem;
	border-radius: 999px;
	margin-left: auto;
}

.awi-limit {
	padding: 0.3rem 0.9rem;
	font-size: 0.85rem;
	color: var(--awi-ink-soft);
	text-decoration: none;
	border-radius: 999px;
	transition: background 0.15s, color 0.15s;
}
.awi-limit:hover { color: var(--awi-ink); text-decoration: none; }
.awi-limit.is-active {
	background: var(--awi-ink);
	color: #fff;
}

/* 5) --------------------- Grid + Karten ------------------------------ */
.awi-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
	margin-bottom: 2rem;
}

.awi-card {
	background: var(--awi-bg);
	box-shadow: var(--awi-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.awi-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--awi-shadow-hover);
}

.awi-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
}
.awi-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}
.awi-card:hover .awi-card__media img {
	transform: scale(1.04);
}
.awi-card__placeholder {
	width: 100%;
	height: 100%;
	background: var(--awi-bg-soft);
}

/* Preis-Badge oben rechts */
.awi-card__price {
	position: absolute;
	top: 0;
	right: 0;
	background: rgba(255,255,255,0.95);
	padding: 0.65rem 1rem 0.55rem;
	text-align: right;
	line-height: 1.1;
	min-width: 12rem;
}
.awi-card__price-label {
	display: block;
	font-size: 0.7rem;
	letter-spacing: 0.15em;
	color: var(--awi-ink-soft);
	font-weight: 500;
}
.awi-card__price-value {
	display: block;
	font-family: var(--awi-serif);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--awi-ink);
	margin-top: 0.15rem;
}

/* Virtual-Tour-Marker unten rechts */
.awi-card__tour {
	position: absolute;
	bottom: 0.6rem;
	right: 0.6rem;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.6rem;
	background: rgba(0,0,0,0.55);
	color: #fff;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	backdrop-filter: blur(4px);
	border-radius: 2px;
	z-index: 2;
}
.awi-card__tour svg { flex: none; }

/* Titel-Overlay mit Gradient */
.awi-card__title-overlay {
	position: absolute;
	inset: 0;
	background: var(--awi-overlay);
	display: flex;
	align-items: flex-end;
	padding: 1.5rem 1.25rem 1.1rem;
	pointer-events: none;
}
.awi-card__title {
	font-family: var(--awi-serif);
	font-weight: 400;
	font-size: 1.25rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
	line-height: 1.25;
	text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* Karten-Body (Info-Streifen) */
.awi-card__body {
	background: var(--awi-bg-soft);
	padding: 0.85rem 1.25rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	flex: 1;
}

.awi-card__meta {
	font-size: 0.88rem;
	color: var(--awi-ink-soft);
	line-height: 1.4;
}
.awi-card__location {
	color: var(--awi-ink);
	font-weight: 500;
}
.awi-card__sep {
	margin: 0 0.4rem;
	color: var(--awi-line);
}
.awi-card__teaser {
	font-style: italic;
}

.awi-card__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.1rem;
	font-size: 0.85rem;
	color: var(--awi-ink-soft);
	align-items: center;
}
.awi-stat {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	white-space: nowrap;
}
.awi-stat svg { color: var(--awi-ink-soft); flex: none; }

/* 6) ----------------------- Status-Marker ---------------------------- */
.awi-stat--status {
	margin-left: auto;
	font-weight: 500;
}
.awi-stat--status svg { color: currentColor; }

.awi-stat--available { color: var(--awi-success); }
.awi-stat--rented    { color: var(--awi-warning); }
.awi-stat--reserved  { color: var(--awi-warning); }
.awi-stat--sold      { color: var(--awi-danger);  }

/* 7) -------------------- Pagination + Empty -------------------------- */
.awi-pagination {
	display: flex;
	justify-content: center;
	margin: 2rem 0 1rem;
}
.awi-pagination .pagination {
	display: inline-flex;
	gap: 0.25rem;
	list-style: none;
	padding: 0;
}
.awi-pagination .pagination > li > a,
.awi-pagination .pagination > li > span {
	display: inline-block;
	padding: 0.4rem 0.8rem;
	color: var(--awi-ink-soft);
	border: 1px solid var(--awi-line);
	text-decoration: none;
	font-size: 0.9rem;
}
.awi-pagination .pagination > .active > span,
.awi-pagination .pagination > .active > a {
	background: var(--awi-ink);
	color: #fff;
	border-color: var(--awi-ink);
}

.awi-empty {
	text-align: center;
	padding: 3rem 1rem;
	font-family: var(--awi-serif);
	font-style: italic;
	font-size: 1.2rem;
	color: var(--awi-ink-soft);
}

/* Anbieter-Box */
.awi-makler-info {
	background: var(--awi-bg-soft);
	border-left: 3px solid var(--awi-accent);
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	font-size: 0.9rem;
}
.awi-makler-info h3 {
	font-family: var(--awi-serif);
	font-weight: 400;
	font-size: 1.1rem;
	margin: 0 0 0.5rem;
}

/* Merken-Button reaktiviert BSDImmo-Iconfont */
.awi-stat--mark {
	cursor: pointer;
	color: var(--awi-ink-soft);
}
.awi-stat--mark:hover { color: var(--awi-accent); }

/* 8) ----------------------- Responsive ------------------------------- */
@media (max-width: 900px) {
	.awi-grid              { grid-template-columns: 1fr; gap: 1.25rem; }
	.awi-page-head         { grid-template-columns: 1fr; text-align: center; }
	.awi-page-title        { letter-spacing: 0.12em; }
	.awi-filter-bar__pills { justify-content: flex-start; }
	.awi-filter-bar__limit { margin-left: 0; }
	.awi-card__price       { min-width: 9.5rem; padding: 0.5rem 0.75rem; }
	.awi-card__price-value { font-size: 1.1rem; }
	.awi-card__title       { font-size: 1.05rem; }
}

@media (max-width: 480px) {
	.awi-card__title-overlay { padding: 1rem 0.85rem 0.8rem; }
	.awi-card__body          { padding: 0.75rem 0.9rem 0.85rem; }
	.awi-card__stats         { gap: 0.3rem 0.75rem; }
}

/* Print – nüchtern */
@media print {
	.awi-filter-bar, .awi-pagination, .awi-card__tour, .awi-stat--mark { display: none; }
	.awi-card { break-inside: avoid; box-shadow: none; border: 1px solid var(--awi-line); }
}