/* =============================================================
   Digiwox Immo Objekte — Public Stylesheet
   ============================================================= */

/* ---------------------------------------------------------------
   1. Design Tokens
   --------------------------------------------------------------- */
.dio-wrapper {
	--dio-primary    : #1a1a2e;
	--dio-accent     : #c9a84c;
	--dio-text       : #1e293b;
	--dio-muted      : #64748b;
	--dio-bg         : #f8f9fc;
	--dio-white      : #fff;
	--dio-radius-sm  : 6px;
	--dio-radius     : 12px;
	--dio-radius-lg  : 20px;
	--dio-shadow     : 0 4px 24px rgba(0, 0, 0, .08);
	--dio-shadow-hover: 0 12px 40px rgba(0, 0, 0, .16);
	--dio-transition : all .3s cubic-bezier(.4, 0, .2, 1);
	--dio-cols       : 3;

	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--dio-text);
}

.dio-wrapper *,
.dio-wrapper *::before,
.dio-wrapper *::after {
	box-sizing: inherit;
}

/* ---------------------------------------------------------------
   2. Grid Layout
   --------------------------------------------------------------- */
.dio-grid-wrap {
	width: 100%;
}

.dio-grid {
	display: grid;
	grid-template-columns: repeat(var(--dio-cols), 1fr);
	gap: 24px;
}

/* responsive breakpoints */
@media (max-width: 1100px) {
	.dio-wrapper[data-cols="4"] .dio-grid { grid-template-columns: repeat(2, 1fr); }
	.dio-wrapper[data-cols="3"] .dio-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
	.dio-wrapper:not([data-stil="list"]):not([data-stil="compact"]) .dio-grid {
		grid-template-columns: 1fr;
	}
	.dio-wrapper[data-stil="compact"] .dio-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------
   3. Card — Base
   --------------------------------------------------------------- */
.dio-card {
	background: var(--dio-white);
	border-radius: var(--dio-radius);
	box-shadow: var(--dio-shadow);
	overflow: hidden;
	transition: var(--dio-transition);
	display: flex;
	flex-direction: column;
}

.dio-card:hover {
	box-shadow: var(--dio-shadow-hover);
}

/* Scroll-reveal animation */
.dio-card[data-animate] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .5s ease, transform .5s ease, box-shadow .3s ease;
}

.dio-card[data-animate].is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Image container */
.dio-card__image {
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
}

.dio-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

.dio-card:hover .dio-card__image img {
	transform: scale(1.04);
}

.dio-card__placeholder {
	width: 100%;
	height: 100%;
	background: #e2e8f0;
}

/* Body */
.dio-card__body {
	padding: 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Footer */
.dio-card__footer {
	padding: 14px 20px;
	border-top: 1px solid rgba(0, 0, 0, .06);
}

/* Titles */
.dio-card__title {
	margin: 0 0 8px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--dio-text);
}

.dio-card__title a {
	color: inherit;
	text-decoration: none;
}

.dio-card__title a:hover {
	color: var(--dio-accent);
}

/* Location */
.dio-card__location {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: .82rem;
	color: var(--dio-muted);
	margin: 0 0 10px;
}

/* Price */
.dio-card__preis {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--dio-primary);
}

.dio-card__preis small {
	font-size: .75rem;
	font-weight: 400;
	color: var(--dio-muted);
}

.dio-preis--anfrage {
	font-style: italic;
	color: var(--dio-muted);
	font-weight: 600;
}

/* CTA button */
.dio-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 9px 20px;
	background: var(--dio-accent);
	color: #fff;
	border-radius: var(--dio-radius-sm);
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	transition: var(--dio-transition);
	white-space: nowrap;
}

.dio-card__cta:hover {
	background: #b8923e;
	color: #fff;
}

/* ---------------------------------------------------------------
   4. Badges
   --------------------------------------------------------------- */
.dio-card__badges {
	position: absolute;
	top: 12px;
	left: 12px;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	z-index: 2;
}

.dio-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 4px;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	white-space: nowrap;
}

.dio-badge--kauf,
.dio-badge--kaufen {
	background: #1e3a5f;
	color: #fff;
}

.dio-badge--miete,
.dio-badge--mieten {
	background: #14532d;
	color: #fff;
}

.dio-badge--status,
.dio-badge--status-list {
	background: rgba(0, 0, 0, .55);
	color: #fff;
}

.dio-badge--art {
	background: var(--dio-bg);
	color: var(--dio-text);
	border: 1px solid #e2e8f0;
}

/* ---------------------------------------------------------------
   5. SVG icons
   --------------------------------------------------------------- */
.dio-icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

/* ---------------------------------------------------------------
   6. style-modern
   --------------------------------------------------------------- */
.dio-style-modern .dio-card--modern .dio-card__image {
	aspect-ratio: 16 / 9;
}

.dio-style-modern .dio-card--modern .dio-card__type {
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--dio-accent);
	margin-bottom: 6px;
}

.dio-style-modern .dio-card--modern .dio-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 10px 0;
}

.dio-style-modern .dio-card--modern .dio-fact {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: .82rem;
	color: var(--dio-muted);
}

.dio-style-modern .dio-card--modern .dio-card__separator {
	height: 1px;
	background: #e2e8f0;
	margin: 12px 0;
}

.dio-style-modern .dio-card--modern .dio-card__preis-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
}

.dio-style-modern .dio-card--modern .dio-card__courtage {
	font-size: .78rem;
	color: var(--dio-muted);
}

.dio-style-modern .dio-card--modern .dio-card__footer {
	padding: 14px 20px;
}

.dio-style-modern .dio-card--modern .dio-card__cta {
	width: 100%;
	justify-content: center;
}

/* ---------------------------------------------------------------
   7. style-cards
   --------------------------------------------------------------- */
.dio-style-cards .dio-card--cards {
	border-radius: var(--dio-radius);
	overflow: hidden;
}

.dio-style-cards .dio-card--cards:hover {
	transform: translateY(-6px);
}

.dio-style-cards .dio-card--cards .dio-card__image {
	aspect-ratio: 4 / 3;
	position: relative;
}

/* dark gradient overlay */
.dio-style-cards .dio-card--cards .dio-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .1) 55%, transparent 100%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 18px;
}

.dio-style-cards .dio-card--cards .dio-card__overlay-content .dio-card__title {
	color: #fff;
	font-size: 1.05rem;
	margin-bottom: 4px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dio-style-cards .dio-card--cards .dio-card__overlay-content .dio-card__title a {
	color: inherit;
}

.dio-style-cards .dio-card--cards .dio-card__overlay-content .dio-card__preis {
	color: var(--dio-accent);
	font-size: 1rem;
}

/* below-image body */
.dio-style-cards .dio-card--cards .dio-card__body {
	padding: 14px 18px 10px;
}

.dio-style-cards .dio-card--cards .dio-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.dio-style-cards .dio-card--cards .dio-card__tag {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 3px 10px;
	background: var(--dio-bg);
	border-radius: 20px;
	font-size: .75rem;
	color: var(--dio-muted);
}

/* 3-column stat grid */
.dio-style-cards .dio-card--cards .dio-card__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.dio-style-cards .dio-card--cards .dio-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--dio-bg);
	border-radius: var(--dio-radius-sm);
	padding: 8px 4px;
}

.dio-style-cards .dio-card--cards .dio-stat__val {
	font-size: .92rem;
	font-weight: 700;
	color: var(--dio-text);
}

.dio-style-cards .dio-card--cards .dio-stat__label {
	font-size: .68rem;
	color: var(--dio-muted);
	margin-top: 2px;
}

.dio-style-cards .dio-card--cards .dio-card__footer {
	padding: 12px 18px;
}

.dio-style-cards .dio-card--cards .dio-card__cta {
	width: 100%;
	justify-content: center;
}

/* ---------------------------------------------------------------
   8. style-list
   --------------------------------------------------------------- */
.dio-style-list .dio-grid {
	grid-template-columns: 1fr;
	gap: 16px;
}

.dio-style-list .dio-card--list {
	flex-direction: row;
	border-radius: var(--dio-radius);
	min-height: 190px;
}

.dio-style-list .dio-card--list:nth-child(even) {
	background: #f1f5fb;
}

.dio-style-list .dio-card--list .dio-card__image {
	width: 35%;
	min-width: 200px;
	flex-shrink: 0;
	aspect-ratio: unset;
}

.dio-style-list .dio-card--list .dio-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dio-style-list .dio-card--list .dio-card__body {
	padding: 18px 20px;
	flex: 1;
}

.dio-style-list .dio-card--list .dio-card__title {
	font-size: 1.05rem;
}

.dio-style-list .dio-card--list .dio-card__desc {
	font-size: .85rem;
	color: var(--dio-muted);
	line-height: 1.55;
	margin: 6px 0 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dio-style-list .dio-card--list .dio-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0 14px;
}

.dio-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	border-radius: 20px;
	background: #e8edf5;
	font-size: .78rem;
	color: var(--dio-text);
}

.dio-style-list .dio-card--list .dio-card__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
}

@media (max-width: 600px) {
	.dio-style-list .dio-card--list {
		flex-direction: column;
	}

	.dio-style-list .dio-card--list .dio-card__image {
		width: 100%;
		min-width: unset;
		aspect-ratio: 16 / 9;
	}
}

/* ---------------------------------------------------------------
   9. style-compact
   --------------------------------------------------------------- */
.dio-style-compact .dio-grid {
	gap: 12px;
}

.dio-style-compact .dio-card--compact {
	flex-direction: row;
	border-radius: var(--dio-radius-sm);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
	min-height: 90px;
}

.dio-style-compact .dio-card--compact .dio-card__image {
	width: 130px;
	min-width: 130px;
	aspect-ratio: 4 / 3;
	flex-shrink: 0;
	border-radius: var(--dio-radius-sm) 0 0 var(--dio-radius-sm);
	overflow: hidden;
}

.dio-style-compact .dio-card--compact .dio-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dio-style-compact .dio-card--compact .dio-card__body {
	padding: 10px 14px;
}

.dio-style-compact .dio-card--compact .dio-card__type {
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--dio-accent);
	font-weight: 700;
}

.dio-style-compact .dio-card--compact .dio-card__title {
	font-size: .88rem;
	margin: 2px 0 4px;
	line-height: 1.3;
}

.dio-style-compact .dio-card--compact .dio-card__location {
	font-size: .75rem;
	margin-bottom: 5px;
}

.dio-style-compact .dio-card--compact .dio-card__mini-facts {
	display: flex;
	gap: 10px;
	font-size: .75rem;
	color: var(--dio-muted);
	margin-bottom: 5px;
}

.dio-style-compact .dio-card--compact .dio-card__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
}

.dio-style-compact .dio-card--compact .dio-card__preis {
	font-size: .9rem;
	font-weight: 700;
}

.dio-style-compact .dio-card--compact .dio-card__cta {
	padding: 0;
	background: none;
	color: var(--dio-accent);
	font-size: .78rem;
	font-weight: 600;
}

.dio-style-compact .dio-card--compact .dio-card__cta:hover {
	background: none;
	color: #b8923e;
	text-decoration: underline;
}

@media (max-width: 500px) {
	.dio-style-compact .dio-card--compact {
		flex-direction: column;
	}

	.dio-style-compact .dio-card--compact .dio-card__image {
		width: 100%;
		min-width: unset;
		border-radius: var(--dio-radius-sm) var(--dio-radius-sm) 0 0;
	}
}

/* ---------------------------------------------------------------
   10. style-luxury
   --------------------------------------------------------------- */
.dio-style-luxury {
	background: #0f0f1a;
	padding: 32px;
	border-radius: var(--dio-radius-lg);
}

.dio-style-luxury .dio-grid {
	gap: 28px;
}

.dio-style-luxury .dio-card--luxury {
	background: #1a1a2e;
	border-radius: var(--dio-radius);
	border: 1px solid rgba(201, 168, 76, .18);
	box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
	overflow: hidden;
	position: relative;
}

.dio-style-luxury .dio-card--luxury:hover {
	border-color: rgba(201, 168, 76, .45);
	box-shadow: 0 16px 48px rgba(0, 0, 0, .55);
}

/* shimmer on hover via pseudo-element */
@keyframes dio-shimmer {
	0%   { transform: translateX(-100%) skewX(-15deg); }
	100% { transform: translateX(200%) skewX(-15deg); }
}

.dio-style-luxury .dio-card--luxury .dio-card__image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(201, 168, 76, .18), transparent);
	transform: translateX(-100%) skewX(-15deg);
	pointer-events: none;
}

.dio-style-luxury .dio-card--luxury:hover .dio-card__image::after {
	animation: dio-shimmer .7s ease forwards;
}

.dio-style-luxury .dio-card--luxury .dio-card__image {
	aspect-ratio: 4 / 3;
	position: relative;
}

/* luxury badges */
.dio-badge--luxury-typ {
	background: rgba(201, 168, 76, .18);
	color: var(--dio-accent);
	border: 1px solid rgba(201, 168, 76, .35);
	font-size: .7rem;
	letter-spacing: .1em;
}

.dio-badge--luxury-status {
	background: rgba(255, 255, 255, .08);
	color: rgba(255, 255, 255, .7);
	border: 1px solid rgba(255, 255, 255, .12);
	font-size: .7rem;
}

/* body */
.dio-style-luxury .dio-card--luxury .dio-card__body {
	padding: 22px 22px 14px;
	background: #1a1a2e;
}

.dio-style-luxury .dio-card--luxury .dio-card__luxury-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.dio-style-luxury .dio-card--luxury .dio-card__luxury-type {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--dio-accent);
}

.dio-style-luxury .dio-card--luxury .dio-card__luxury-location {
	font-size: .75rem;
	color: #a09080;
}

.dio-style-luxury .dio-card--luxury .dio-card__title {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.25rem;
	font-weight: 400;
	color: #f0e8d8;
	margin-bottom: 10px;
	line-height: 1.4;
}

.dio-style-luxury .dio-card--luxury .dio-card__title a {
	color: inherit;
}

.dio-style-luxury .dio-card--luxury .dio-card__title a:hover {
	color: var(--dio-accent);
}

.dio-style-luxury .dio-card--luxury .dio-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 14px;
}

.dio-style-luxury .dio-card--luxury .dio-fact {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: .8rem;
	color: #a09080;
}

/* gold rule */
.dio-style-luxury .dio-card--luxury .dio-card__gold-rule {
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(201, 168, 76, .5), transparent);
	margin: 14px 0;
}

.dio-style-luxury .dio-card--luxury .dio-card__preis-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.dio-style-luxury .dio-card--luxury .dio-card__preis {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--dio-accent);
}

.dio-style-luxury .dio-card--luxury .dio-card__preis small {
	font-size: .75rem;
	color: #a09080;
}

.dio-style-luxury .dio-card--luxury .dio-card__courtage {
	font-size: .75rem;
	color: #a09080;
}

/* footer + ghost CTA */
.dio-style-luxury .dio-card--luxury .dio-card__footer {
	padding: 14px 22px;
	border-top: 1px solid rgba(201, 168, 76, .15);
	background: #1a1a2e;
}

.dio-style-luxury .dio-card--luxury .dio-card__cta--ghost {
	display: inline-flex;
	width: 100%;
	justify-content: center;
	padding: 10px 20px;
	background: transparent;
	color: var(--dio-accent);
	border: 1px solid var(--dio-accent);
	border-radius: var(--dio-radius-sm);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: var(--dio-transition);
}

.dio-style-luxury .dio-card--luxury .dio-card__cta--ghost:hover {
	background: var(--dio-accent);
	color: #1a1a2e;
}

/* dark empty state */
.dio-empty-state--dark {
	color: #a09080;
}

.dio-empty-state--dark svg {
	stroke: rgba(201, 168, 76, .4);
}

/* dark pagination */
.dio-pagination--dark .page-numbers {
	color: #a09080;
	border-color: rgba(201, 168, 76, .3);
}

.dio-pagination--dark .page-numbers.current,
.dio-pagination--dark .page-numbers:hover {
	background: var(--dio-accent);
	color: #1a1a2e;
	border-color: var(--dio-accent);
}

/* ---------------------------------------------------------------
   11. Pagination (shared)
   --------------------------------------------------------------- */
.dio-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 32px;
}

.dio-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid #e2e8f0;
	border-radius: var(--dio-radius-sm);
	font-size: .88rem;
	color: var(--dio-text);
	text-decoration: none;
	transition: var(--dio-transition);
	background: var(--dio-white);
}

.dio-pagination .page-numbers.current {
	background: var(--dio-accent);
	color: #fff;
	border-color: var(--dio-accent);
}

.dio-pagination .page-numbers:hover:not(.current) {
	background: var(--dio-bg);
	border-color: var(--dio-accent);
	color: var(--dio-accent);
}

.dio-pagination .page-numbers.dots {
	border: none;
	background: none;
	cursor: default;
}

/* ---------------------------------------------------------------
   12. Empty state (shared)
   --------------------------------------------------------------- */
.dio-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 60px 20px;
	color: var(--dio-muted);
	text-align: center;
}

.dio-empty-state svg {
	stroke: #c8d0db;
}

.dio-empty-state p {
	font-size: .95rem;
	margin: 0;
}

/* ---------------------------------------------------------------
   13. Filter bar (sticky)
   --------------------------------------------------------------- */
.dio-filter-bar {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, .95);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid #e2e8f0;
	padding: 12px 0;
	margin-bottom: 24px;
}

.dio-filter-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.dio-filter-form select,
.dio-filter-form input[type="text"],
.dio-filter-form input[type="number"] {
	padding: 8px 12px;
	border: 1px solid #e2e8f0;
	border-radius: var(--dio-radius-sm);
	font-size: .85rem;
	color: var(--dio-text);
	background: #fff;
	min-width: 140px;
	outline: none;
	transition: border-color .2s;
}

.dio-filter-form select:focus,
.dio-filter-form input:focus {
	border-color: var(--dio-accent);
}

.dio-filter-form button[type="submit"] {
	padding: 9px 20px;
	background: var(--dio-accent);
	color: #fff;
	border: none;
	border-radius: var(--dio-radius-sm);
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
	transition: var(--dio-transition);
}

.dio-filter-form button[type="submit"]:hover {
	background: #b8923e;
}

/* loading spinner overlay on grid */
.dio-grid-wrap.is-loading {
	position: relative;
	min-height: 160px;
}

.dio-grid-wrap.is-loading::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

/* ---------------------------------------------------------------
   14. Skeleton loader
   --------------------------------------------------------------- */
@keyframes dio-skeleton-pulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: .4; }
}

.dio-skeleton {
	border-radius: var(--dio-radius);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--dio-shadow);
}

.dio-skeleton__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #e2e8f0;
	animation: dio-skeleton-pulse 1.5s ease-in-out infinite;
}

.dio-skeleton__body {
	padding: 20px;
}

.dio-skeleton__line {
	height: 12px;
	border-radius: 6px;
	background: #e2e8f0;
	margin-bottom: 10px;
	animation: dio-skeleton-pulse 1.5s ease-in-out infinite;
}

.dio-skeleton__line--short { width: 55%; }
.dio-skeleton__line--med   { width: 75%; }
.dio-skeleton__line--full  { width: 100%; }

/* ---------------------------------------------------------------
   15. Lightbox
   --------------------------------------------------------------- */
.dio-lb-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, .92);
	display: flex;
	align-items: center;
	justify-content: center;
}

.dio-lb-overlay.is-hidden {
	display: none;
}

.dio-lb-inner {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
}

.dio-lb-inner img {
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
	display: block;
	border-radius: 4px;
}

.dio-lb-close {
	position: absolute;
	top: -38px;
	right: 0;
	background: none;
	border: none;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	opacity: .8;
}

.dio-lb-close:hover {
	opacity: 1;
}

.dio-lb-prev,
.dio-lb-next {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, .12);
	border: none;
	color: #fff;
	font-size: 26px;
	line-height: 1;
	padding: 12px 16px;
	cursor: pointer;
	border-radius: 4px;
	transition: background .2s;
}

.dio-lb-prev { left: 16px; }
.dio-lb-next { right: 16px; }

.dio-lb-prev:hover,
.dio-lb-next:hover {
	background: rgba(255, 255, 255, .25);
}

/* ---------------------------------------------------------------
   16. Contact / inquiry form (single template)
   --------------------------------------------------------------- */
.dio-anfrage-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.dio-anfrage-form input,
.dio-anfrage-form textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #e2e8f0;
	border-radius: var(--dio-radius-sm);
	font-size: .9rem;
	color: var(--dio-text);
	outline: none;
	transition: border-color .2s;
	font-family: inherit;
}

.dio-anfrage-form input:focus,
.dio-anfrage-form textarea:focus {
	border-color: var(--dio-accent);
}

.dio-anfrage-form textarea {
	resize: vertical;
	min-height: 110px;
}

.dio-anfrage-form .dio-honeypot {
	display: none;
}

.dio-anfrage-form button[type="submit"] {
	padding: 11px 28px;
	background: var(--dio-accent);
	color: #fff;
	border: none;
	border-radius: var(--dio-radius-sm);
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	transition: var(--dio-transition);
	align-self: flex-start;
}

.dio-anfrage-form button[type="submit"]:hover {
	background: #b8923e;
}

.dio-anfrage-notice {
	padding: 12px 16px;
	border-radius: var(--dio-radius-sm);
	font-size: .88rem;
}

.dio-anfrage-notice--success {
	background: #f0fdf4;
	color: #166534;
	border: 1px solid #bbf7d0;
}

.dio-anfrage-notice--error {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

/* =============================================================
   17. Single Property Page — Layout
   ============================================================= */

:root {
	--dio-s-accent  : #c9a84c;
	--dio-s-text    : #1e293b;
	--dio-s-muted   : #64748b;
	--dio-s-border  : #e2e8f0;
	--dio-s-bg      : #f8f9fc;
	--dio-s-white   : #fff;
	--dio-s-radius  : 12px;
	--dio-s-shadow  : 0 4px 24px rgba(0, 0, 0, .08);
}

.dio-single {
	margin: 0;
	padding: 0;
}

.dio-single-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 40px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 32px 20px 64px;
	align-items: start;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--dio-s-text);
	overflow-x: clip; /* prevent any child from causing page-level horizontal scroll */
}

/* Grid items must have min-width:0 or they can expand past their track */
.dio-single-main {
	min-width: 0;
	overflow: hidden;
}

.dio-single-wrap *,
.dio-single-wrap *::before,
.dio-single-wrap *::after {
	box-sizing: inherit;
}

/* ---------------------------------------------------------------
   17a. Gallery Hero
   --------------------------------------------------------------- */
.dio-single-gallery {
	margin-bottom: 8px;
	overflow: hidden;  /* prevent page-level horizontal scroll from thumb strip */
	min-width: 0;
}

.dio-hero-wrap {
	position: relative;
	width: 100%;
	height: 500px;
	overflow: hidden;
	border-radius: var(--dio-s-radius);
	background: #e2e8f0;
}

.dio-hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity .3s ease;
}

.dio-gallery-open-btn {
	position: absolute;
	bottom: 16px;
	right: 16px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 6px;
	font-size: .82rem;
	font-weight: 500;
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition: background .2s;
}

.dio-gallery-open-btn:hover {
	background: rgba(0, 0, 0, .75);
}

/* Thumbnail strip — navigable slider with prev/next arrows */
.dio-thumb-strip-nav {
	position: relative;
	margin-top: 10px;
}

.dio-thumb-strip-nav .dio-thumb-nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 28px;
	height: 44px;
	background: rgba(255, 255, 255, .92);
	border: 1px solid var(--dio-s-border);
	border-radius: 4px;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dio-s-text);
	transition: background .15s;
	padding: 0;
}

.dio-thumb-strip-nav .dio-thumb-nav-btn:hover {
	background: var(--dio-s-accent);
	color: #fff;
	border-color: var(--dio-s-accent);
}

.dio-thumb-strip-nav .dio-thumb-nav-btn--prev { left: 0; }
.dio-thumb-strip-nav .dio-thumb-nav-btn--next { right: 0; }
.dio-thumb-strip-nav .dio-thumb-nav-btn.is-hidden { display: none; }

.dio-thumb-strip-wrap {
	overflow: hidden;
	margin: 0 34px;  /* room for the arrows */
}

.dio-thumb-strip {
	display: flex;
	gap: 8px;
	transition: transform .3s ease;
	will-change: transform;
}

.dio-thumb {
	flex: 0 0 82px;
	height: 60px;
	border-radius: 6px;
	overflow: hidden;
	border: 2px solid transparent;
	cursor: pointer;
	padding: 0;
	background: none;
	transition: border-color .2s;
}

.dio-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

.dio-thumb:hover,
.dio-thumb:focus-visible {
	border-color: var(--dio-s-accent);
	outline: none;
}

.dio-thumb.is-active {
	border-color: var(--dio-s-accent);
}

/* ---------------------------------------------------------------
   17a-2. Gallery Slider (.dio-slider — used by template render_gallery_slider())
   --------------------------------------------------------------- */
.dio-slider {
	margin-bottom: 8px;
}

.dio-slider__stage {
	position: relative;
	width: 100%;
	height: 460px;
	background: #e2e8f0;
	border-radius: var(--dio-s-radius);
	overflow: hidden;
}

@media (max-width: 1024px) { .dio-slider__stage { height: 360px; } }
@media (max-width: 768px)  { .dio-slider__stage { height: 240px; } }

.dio-slider__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}

.dio-slider__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.dio-slider__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dio-slider__caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 8px 14px;
	background: rgba(0, 0, 0, .45);
	color: #fff;
	font-size: .8rem;
	line-height: 1.4;
}

/* Prev / Next arrows */
.dio-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, .45);
	border: none;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	padding: 10px 14px;
	cursor: pointer;
	border-radius: 4px;
	transition: background .2s;
	z-index: 2;
}

.dio-slider__arrow:hover { background: rgba(0, 0, 0, .7); }
.dio-slider__arrow--prev { left: 10px; }
.dio-slider__arrow--next { right: 10px; }

/* Counter badge */
.dio-slider__counter {
	position: absolute;
	bottom: 10px;
	right: 14px;
	background: rgba(0, 0, 0, .5);
	color: #fff;
	font-size: .75rem;
	padding: 3px 9px;
	border-radius: 20px;
	z-index: 2;
}

/* Thumbnail row */
.dio-slider__thumbs {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding: 8px 0 2px;
	scrollbar-width: thin;
	scrollbar-color: var(--dio-s-border) transparent;
}

.dio-slider__thumbs::-webkit-scrollbar       { height: 4px; }
.dio-slider__thumbs::-webkit-scrollbar-track { background: transparent; }
.dio-slider__thumbs::-webkit-scrollbar-thumb { background: var(--dio-s-border); border-radius: 2px; }

.dio-slider__thumb {
	flex-shrink: 0;
	width: 80px;
	height: 58px;
	border-radius: 5px;
	overflow: hidden;
	border: 2px solid transparent;
	cursor: pointer;
	padding: 0;
	background: none;
	transition: border-color .2s;
}

.dio-slider__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

.dio-slider__thumb:hover,
.dio-slider__thumb.is-active {
	border-color: var(--dio-s-accent);
}

/* ---------------------------------------------------------------
   17b. Facts Bar
   --------------------------------------------------------------- */
.dio-facts-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	background: var(--dio-s-white);
	border: 1px solid var(--dio-s-border);
	border-radius: var(--dio-s-radius);
	overflow: hidden;
	margin-bottom: 28px;
}

.dio-fact-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 18px 20px;
	flex: 1 1 120px;
	border-right: 1px solid var(--dio-s-border);
	gap: 4px;
}

.dio-fact-item:last-child {
	border-right: none;
}

.dio-fact-icon {
	color: var(--dio-s-accent);
	display: flex;
	align-items: center;
	justify-content: center;
}

.dio-fact-value {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--dio-s-text);
	line-height: 1.2;
}

.dio-fact-label {
	font-size: .72rem;
	color: var(--dio-s-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* ---------------------------------------------------------------
   17c. Single Header
   --------------------------------------------------------------- */
.dio-single-header {
	margin-bottom: 28px;
}

.dio-single-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.dio-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.5;
}

.dio-badge--art {
	background: #eff6ff;
	color: #1d4ed8;
}

.dio-badge--typ {
	background: #f0fdf4;
	color: #15803d;
}

.dio-badge--status {
	background: #fefce8;
	color: #a16207;
}

.dio-badge--featured {
	background: var(--dio-s-accent);
	color: #fff;
}

.dio-single-title {
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--dio-s-text);
	margin: 0 0 10px;
}

.dio-single-address {
	display: flex;
	align-items: center;
	gap: 5px;
	color: var(--dio-s-muted);
	font-size: .88rem;
	margin: 0;
}

.dio-single-address svg {
	flex-shrink: 0;
	color: var(--dio-s-accent);
}

/* ---------------------------------------------------------------
   17d. Media links (Video / Virtual Tour)
   --------------------------------------------------------------- */
.dio-single-media-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 28px;
}

.dio-media-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: 1px solid var(--dio-s-border);
	border-radius: 6px;
	color: var(--dio-s-text);
	font-size: .85rem;
	font-weight: 500;
	text-decoration: none;
	transition: border-color .2s, color .2s;
}

.dio-media-link:hover {
	border-color: var(--dio-s-accent);
	color: var(--dio-s-accent);
}

/* ---------------------------------------------------------------
   17e. Sections
   --------------------------------------------------------------- */
.dio-single-section {
	margin-bottom: 40px;
}

.dio-section-heading {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--dio-s-text);
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--dio-s-accent);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.dio-single-beschreibung {
	font-size: .95rem;
	line-height: 1.7;
	color: var(--dio-s-text);
}

.dio-single-beschreibung p {
	margin: 0 0 1em;
}

/* Expandable sections */
.dio-expand {
	border: 1px solid var(--dio-s-border);
	border-radius: 8px;
	margin-top: 12px;
	overflow: hidden;
}

.dio-expand[open] > .dio-expand__trigger .dio-expand__arrow {
	transform: rotate(180deg);
}

.dio-expand__trigger {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	font-size: .92rem;
	font-weight: 600;
	color: var(--dio-s-text);
	cursor: pointer;
	list-style: none;
	background: var(--dio-s-bg);
	user-select: none;
}

.dio-expand__trigger::-webkit-details-marker { display: none; }

.dio-expand__arrow {
	margin-left: auto;
	flex-shrink: 0;
	transition: transform .25s ease;
}

.dio-expand__body {
	padding: 16px 18px;
	font-size: .92rem;
	line-height: 1.7;
	color: var(--dio-s-text);
	border-top: 1px solid var(--dio-s-border);
}

/* ---------------------------------------------------------------
   17f. Feature Badges Grid
   --------------------------------------------------------------- */
.dio-features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 8px 12px;
}

.dio-feature-badge {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 8px 12px;
	background: var(--dio-s-bg);
	border: 1px solid var(--dio-s-border);
	border-radius: 6px;
	font-size: .85rem;
	color: var(--dio-s-text);
}

.dio-feature-check {
	color: var(--dio-s-accent);
	flex-shrink: 0;
}

/* ---------------------------------------------------------------
   17g. Energy Table
   --------------------------------------------------------------- */
.dio-energy-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .88rem;
	margin-bottom: 20px;
}

.dio-energy-table th,
.dio-energy-table td {
	padding: 9px 14px;
	text-align: left;
	border-bottom: 1px solid var(--dio-s-border);
}

.dio-energy-table th {
	width: 50%;
	color: var(--dio-s-muted);
	font-weight: 500;
}

.dio-energy-table td {
	color: var(--dio-s-text);
	font-weight: 600;
}

.dio-energy-table tr:last-child th,
.dio-energy-table tr:last-child td {
	border-bottom: none;
}

/* Energy scale bar */
.dio-energy-bar-wrap {
	margin-top: 8px;
}

.dio-energy-labels {
	display: flex;
	justify-content: space-between;
	margin-bottom: 4px;
}

.dio-energy-label {
	font-size: .7rem;
	color: var(--dio-s-muted);
	font-weight: 600;
	flex: 1;
	text-align: center;
}

.dio-energy-label.is-active {
	color: var(--dio-s-text);
}

.dio-energy-bar {
	position: relative;
	height: 22px;
	border-radius: 11px;
	background: linear-gradient(
		to right,
		#22c55e  0%,
		#86efac 11%,
		#d9f99d 22%,
		#fde68a 34%,
		#fbbf24 46%,
		#f97316 58%,
		#ef4444 70%,
		#b91c1c 100%
	);
	overflow: visible;
}

.dio-energy-marker {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

.dio-energy-marker::before {
	content: '';
	display: block;
	width: 18px;
	height: 18px;
	background: #fff;
	border: 3px solid var(--dio-s-text);
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.dio-energy-marker-label {
	position: absolute;
	top: -24px;
	background: var(--dio-s-text);
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 4px;
	white-space: nowrap;
}

/* ---------------------------------------------------------------
   17h. Map placeholder
   --------------------------------------------------------------- */
.dio-map-placeholder {
	background: var(--dio-s-bg);
	border: 1px solid var(--dio-s-border);
	border-radius: var(--dio-s-radius);
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dio-map-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--dio-s-text);
	text-decoration: none;
	font-weight: 500;
	font-size: .95rem;
	padding: 12px 20px;
	border: 1px solid var(--dio-s-border);
	border-radius: 8px;
	background: #fff;
	transition: border-color .2s, color .2s;
}

.dio-map-link:hover {
	border-color: var(--dio-s-accent);
	color: var(--dio-s-accent);
}

/* ---------------------------------------------------------------
   17i. Sidebar
   --------------------------------------------------------------- */
.dio-single-sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.dio-sidebar-card {
	background: var(--dio-s-white);
	border: 1px solid var(--dio-s-border);
	border-radius: var(--dio-s-radius);
	padding: 22px;
	box-shadow: var(--dio-s-shadow);
}

.dio-sidebar-card--price {
	border-color: var(--dio-s-accent);
	border-width: 2px;
}

.dio-sidebar-heading {
	font-size: .9rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--dio-s-muted);
	margin: 0 0 14px;
}

/* Sidebar meta rows (Angebotstyp, Online seit) */
.dio-sidebar-meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--dio-s-border);
}

.dio-sidebar-meta-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	font-size: .82rem;
}

.dio-sidebar-meta-label {
	color: var(--dio-s-muted);
}

.dio-sidebar-meta-value {
	font-weight: 600;
	color: var(--dio-s-text);
	text-align: right;
}

/* Price */
.dio-price-display {
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--dio-s-text);
	line-height: 1.1;
	margin-bottom: 6px;
}

.dio-preis-anfrage {
	font-size: 1.2rem;
	font-style: italic;
	color: var(--dio-s-muted);
}

.dio-preis-suffix {
	font-size: 1rem;
	font-weight: 400;
	color: var(--dio-s-muted);
	margin-left: 4px;
}

.dio-price-nk,
.dio-price-provision {
	font-size: .8rem;
	color: var(--dio-s-muted);
	margin: 0 0 4px;
}

.dio-price-provision--free {
	color: #15803d;
	font-weight: 600;
}

/* CTA button */
.dio-anfrage-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 18px;
	padding: 13px 20px;
	background: var(--dio-s-accent);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: .95rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s, transform .15s;
	text-align: center;
}

.dio-anfrage-cta:hover {
	background: #b8923e;
	color: #fff;
	transform: translateY(-1px);
}

/* Schnellinfos table */
.dio-quick-info-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .85rem;
}

.dio-quick-info-table th,
.dio-quick-info-table td {
	padding: 7px 0;
	border-bottom: 1px solid var(--dio-s-border);
	vertical-align: top;
}

.dio-quick-info-table tr:last-child th,
.dio-quick-info-table tr:last-child td {
	border-bottom: none;
}

.dio-quick-info-table th {
	color: var(--dio-s-muted);
	font-weight: 500;
	width: 45%;
}

.dio-quick-info-table td {
	font-weight: 600;
	text-align: right;
}

/* Contact person */
.dio-contact-person {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.dio-contact-person p {
	margin: 0;
	font-size: .9rem;
}

.dio-contact-firm {
	color: var(--dio-s-muted);
	font-size: .82rem !important;
}

.dio-contact-name {
	font-weight: 700;
}

.dio-contact-tel,
.dio-contact-email {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .88rem;
	color: var(--dio-s-text);
	text-decoration: none;
	font-weight: 500;
}

.dio-contact-tel:hover,
.dio-contact-email:hover {
	color: var(--dio-s-accent);
}

/* Exposé button */
.dio-expose-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 11px 20px;
	background: #fff;
	border: 2px solid var(--dio-s-accent);
	border-radius: 8px;
	color: var(--dio-s-text);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	transition: background .2s, color .2s;
}

.dio-expose-btn:hover {
	background: var(--dio-s-accent);
	color: #fff;
}

/* Consent checkbox */
.dio-checkbox-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: .8rem;
	color: var(--dio-s-muted);
	cursor: pointer;
	line-height: 1.5;
}

.dio-checkbox-consent input[type="checkbox"] {
	flex-shrink: 0;
	margin-top: 2px;
	width: 15px;
	height: 15px;
}

.dio-checkbox-consent a {
	color: var(--dio-s-accent);
}

/* ---------------------------------------------------------------
   18. Archive Page
   --------------------------------------------------------------- */
.dio-archive-wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: 32px 20px 64px;
	box-sizing: border-box;
	overflow-x: hidden;
}

.dio-archive-header {
	margin-bottom: 28px;
}

.dio-archive-title {
	font-size: clamp(1.5rem, 3.5vw, 2.4rem);
	font-weight: 800;
	color: var(--dio-s-text, #1e293b);
	margin: 0 0 8px;
}

.dio-archive-desc {
	color: var(--dio-s-muted, #64748b);
	font-size: .95rem;
	line-height: 1.6;
	margin: 0 0 8px;
}

.dio-archive-count {
	font-size: .88rem;
	color: var(--dio-s-muted, #64748b);
	margin: 0;
}

.dio-archive-filter {
	margin-bottom: 28px;
}

.dio-filter-bar__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	padding: 0 20px;
}

.dio-filter-bar__fields select {
	padding: 8px 12px;
	border: 1px solid #e2e8f0;
	border-radius: var(--dio-radius-sm, 6px);
	font-size: .85rem;
	color: var(--dio-text, #1e293b);
	background: #fff;
	min-width: 140px;
	outline: none;
	transition: border-color .2s;
}

.dio-filter-bar__fields select:focus {
	border-color: var(--dio-accent, #c9a84c);
}

.dio-filter-reset {
	padding: 8px 14px;
	background: transparent;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	font-size: .85rem;
	color: #64748b;
	cursor: pointer;
	transition: border-color .2s, color .2s;
}

.dio-filter-reset:hover {
	border-color: #c9a84c;
	color: #1e293b;
}

/* ---------------------------------------------------------------
   19. Responsive — Single & Archive
   --------------------------------------------------------------- */

/* 1280px → reduce sidebar width */
@media (max-width: 1280px) {
	.dio-single-wrap {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 28px;
	}
}

/* 1024px → stack sidebar below main */
@media (max-width: 1024px) {
	.dio-single-wrap {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.dio-single-sidebar {
		position: static !important;
	}

	.dio-hero-wrap {
		height: 380px;
	}

	.dio-facts-bar {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.dio-fact-item {
		flex: 0 0 120px;
	}
}

/* 768px → mobile */
@media (max-width: 768px) {
	.dio-single-wrap {
		padding: 20px 16px 48px;
	}

	.dio-hero-wrap {
		height: 260px;
	}

	.dio-facts-bar {
		border-radius: 8px;
	}

	.dio-fact-item {
		flex: 0 0 100px;
		padding: 14px 10px;
	}

	.dio-fact-value {
		font-size: .92rem;
	}

	.dio-price-display {
		font-size: 1.4rem;
	}

	.dio-features-grid {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}

	.dio-archive-wrap {
		padding: 20px 16px 48px;
	}
}

/* ---------------------------------------------------------------
   20. Energy Certificate (Energieausweis)
   --------------------------------------------------------------- */
.dio-ea {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--dio-s-text, #1e293b);
	max-width: 680px;
}

.dio-ea__title {
	font-size: 1.5rem;
	font-weight: 300;
	letter-spacing: .02em;
	margin: 0 0 18px;
	color: var(--dio-s-text, #1e293b);
}

/* Scale wrapper */
.dio-ea__scale-wrap {
	margin-bottom: 10px;
}

/* Numeric tick row (0 25 50 … >250) */
.dio-ea__nums {
	display: flex;
	justify-content: space-between;
	font-size: .7rem;
	color: var(--dio-s-muted, #64748b);
	margin-bottom: 4px;
	line-height: 1;
}

/* Gradient bar — position:relative so marker sits inside */
.dio-ea__bar {
	position: relative;
	height: 26px;
	border-radius: 4px;
	overflow: visible;
	background: linear-gradient(
		to right,
		#00b050 0%,
		#00b050 12%,
		#57b947 12%,
		#57b947 20%,
		#9dc840 20%,
		#9dc840 30%,
		#fef200 30%,
		#fef200 40%,
		#feb800 40%,
		#feb800 52%,
		#f36f21 52%,
		#f36f21 64%,
		#ee1c25 64%,
		#ee1c25 80%,
		#c1272d 80%,
		#c1272d 96%,
		#7b2c8b 96%,
		#7b2c8b 100%
	);
}

/* Vertical marker — positioned inside .dio-ea__bar */
.dio-ea__marker {
	position: absolute;
	top: 0;
	bottom: 0;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 3;
}

/* Small downward triangle above the line */
.dio-ea__marker-tip {
	position: absolute;
	top: -8px;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 7px solid #1e293b;
}

.dio-ea__marker-line {
	width: 2px;
	height: 100%;
	background: #1e293b;
}

/* Letter labels inside the bar */
.dio-ea__bar-lbl {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: .65rem;
	font-weight: 700;
	color: rgba(255, 255, 255, .92);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
	white-space: nowrap;
	line-height: 1;
	pointer-events: none;
}

/* Information table */
.dio-ea__info {
	margin-top: 18px;
	border-top: 1px solid var(--dio-s-border, #e2e8f0);
	padding-top: 14px;
}

.dio-ea__info-title {
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--dio-s-muted, #64748b);
	margin: 0 0 10px;
}

.dio-ea__table {
	width: 100%;
	border-collapse: collapse;
	font-size: .83rem;
}

.dio-ea__table tr {
	border-bottom: 1px solid var(--dio-s-border, #e2e8f0);
}

.dio-ea__table tr:last-child {
	border-bottom: none;
}

.dio-ea__table th {
	padding: 6px 4px;
	font-weight: 500;
	color: var(--dio-s-muted, #64748b);
	text-align: left;
	width: 52%;
	vertical-align: top;
}

.dio-ea__table td {
	padding: 6px 4px;
	font-weight: 600;
	color: var(--dio-s-text, #1e293b);
	text-align: right;
	vertical-align: top;
}

/* ---------------------------------------------------------------
   21. Print styles
   --------------------------------------------------------------- */
@media print {
	.dio-single-wrap {
		display: block;
	}

	.dio-single-sidebar {
		display: none;
	}

	.dio-single-main {
		width: 100%;
		max-width: 100%;
	}

	.dio-hero-wrap {
		height: 300px;
	}

	.dio-thumb-strip,
	.dio-gallery-open-btn,
	.dio-single-media-links,
	.dio-map-placeholder {
		display: none;
	}

	.dio-single-wrap,
	.dio-facts-bar,
	.dio-feature-badge,
	.dio-single-section {
		box-shadow: none !important;
	}

	.dio-facts-bar {
		page-break-inside: avoid;
	}

	.dio-single-section {
		page-break-inside: avoid;
	}
}