/* Modern detail view for Händler + Hotels (hdv2-* markup).
   Mirrors the visual language of style/boerse_detail_modern.css (bdv2-*).
   Namespace: hdv2-*
 */

.hdv2-detail {
	--hdv2-red: #b9111d;
	--hdv2-dark: #1c1f24;
	--hdv2-text: #2b2f36;
	--hdv2-muted: #6b7280;
	--hdv2-border: #e5e7eb;
	--hdv2-soft: #f5f6f8;
	--hdv2-soft-2: #fafbfc;
	max-width: 1024px;
	width: 100%;
	margin: 0 auto 24px;
	color: var(--hdv2-text);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	min-width: 0;
}

.hdv2-detail * { box-sizing: border-box; }

/* Defensive: hdv2 content must never push past its container, even on narrow
   viewports where legacy page chrome may otherwise force horizontal scroll. */
.hdv2-detail .hdv2-gallery-grid,
.hdv2-detail .hdv2-content,
.hdv2-detail .hdv2-head {
	max-width: 100%;
	min-width: 0;
}

body.ipsApp .hdv2-detail,
body.ipsApp .hdv2-detail h1,
body.ipsApp .hdv2-detail h2,
body.ipsApp .hdv2-detail h3,
body.ipsApp .hdv2-detail .hdv2-title,
body.ipsApp .hdv2-detail .hdv2-breadcrumb,
body.ipsApp .hdv2-detail .hdv2-meta,
body.ipsApp .hdv2-detail .hdv2-meta a {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.hdv2-detail a.hdv2-btn,
.hdv2-detail button.hdv2-btn,
body.ipsApp .hdv2-detail a.hdv2-btn,
body.ipsApp .hdv2-detail button.hdv2-btn {
	text-shadow: none !important;
	box-shadow: none !important;
	font-family: inherit !important;
	text-decoration: none !important;
}

/* ====== Head row (title) ====== */
.hdv2-head {
	padding: 18px 0 16px;
	border-bottom: 1px solid var(--hdv2-border);
	margin-bottom: 20px;
}

.hdv2-breadcrumb {
	font-size: 13px;
	color: var(--hdv2-muted);
	margin-bottom: 6px;
}

.hdv2-breadcrumb a {
	color: var(--hdv2-muted);
	text-decoration: none;
}

.hdv2-breadcrumb a:hover {
	color: var(--hdv2-red);
}

.hdv2-title {
	margin: 0 0 10px;
	font-size: 28px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--hdv2-dark);
	letter-spacing: -0.02em;
}

.hdv2-meta {
	font-size: 14px;
	color: var(--hdv2-muted);
	line-height: 1.6;
	font-weight: 400;
}

.hdv2-meta a {
	color: var(--hdv2-dark);
	font-weight: 600;
	text-decoration: none;
}

.hdv2-meta a:hover {
	color: var(--hdv2-red);
}

.hdv2-meta i {
	color: var(--hdv2-red);
	margin-right: 4px;
	font-size: 13px;
	vertical-align: -1px;
}

/* ====== Grid (gallery + sidebar) ====== */
.hdv2-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 24px;
	margin-bottom: 24px;
}

/* ====== Gallery ====== */
.hdv2-gallery {
	min-width: 0;
}

.hdv2-gallery-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 320px;
	background: var(--hdv2-soft);
	border: 1px dashed var(--hdv2-border);
	border-radius: 10px;
	color: var(--hdv2-muted);
}

.hdv2-gallery-empty i {
	font-size: 40px;
	color: #c5c9d0;
}

/* Photo grid: magazine-cover pattern – hero on top, thumb strip below.
   Every layout share the same hero shape (300:169, matches overview tile)
   for visual consistency across the whole catalogue. */
.hdv2-gallery-grid {
	display: grid;
	gap: 8px;
	border-radius: 10px;
}

/* 1 photo: full-bleed hero, nothing below */
.hdv2-gallery-grid--1 {
	grid-template-columns: 1fr;
}

/* 2 photos: two side-by-side 16:9 tiles. With only two images, a stacked
   hero+single-thumb layout looks lopsided, so we keep the symmetric pair. */
.hdv2-gallery-grid--2 {
	grid-template-columns: 1fr 1fr;
}
.hdv2-gallery-grid--2 > .hdv2-gallery-tile {
	aspect-ratio: 300 / 169;
}

/* 3, 4, 5+: hero on top (full-width), thumb strip below in a single row.
   The thumb strip uses N-1 equal columns and the hero spans all of them. */
.hdv2-gallery-grid--3 { grid-template-columns: repeat(2, 1fr); }
.hdv2-gallery-grid--4 { grid-template-columns: repeat(3, 1fr); }
.hdv2-gallery-grid--5 { grid-template-columns: repeat(4, 1fr); }

.hdv2-gallery-grid--3 > .hdv2-gallery-tile--hero,
.hdv2-gallery-grid--4 > .hdv2-gallery-tile--hero,
.hdv2-gallery-grid--5 > .hdv2-gallery-tile--hero {
	grid-column: 1 / -1;
}

.hdv2-gallery-grid--3 > .hdv2-gallery-tile:not(.hdv2-gallery-tile--hero),
.hdv2-gallery-grid--4 > .hdv2-gallery-tile:not(.hdv2-gallery-tile--hero),
.hdv2-gallery-grid--5 > .hdv2-gallery-tile:not(.hdv2-gallery-tile--hero) {
	aspect-ratio: 4 / 3;
}

.hdv2-gallery-tile {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--hdv2-soft);
	border: 1px solid var(--hdv2-border);
	border-radius: 8px;
	cursor: zoom-in;
	min-height: 0;
}

.hdv2-gallery-tile img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	transition: transform 0.35s ease, opacity 0.2s;
}

.hdv2-gallery-tile:hover img {
	transform: scale(1.04);
}

/* Hero tile mirrors the overview/filter grid – same 300:169 cover ratio
   so every dealer card has the same shape on both pages. The thumbnail
   server (bild class with ratio="300:169") already crops the image to
   the right aspect, so the tile just needs to hold the shape. */
.hdv2-gallery-tile--hero {
	aspect-ratio: 300 / 169;
}

/* Hide additional photos in the visual grid but keep them in the lightbox set */
.hdv2-gallery-tile--lightbox-only {
	display: none !important;
}

/* "+N weitere Fotos" overlay on the last visible tile */
.hdv2-gallery-more {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: rgba(28, 31, 36, 0.55);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: background 0.2s;
}

.hdv2-gallery-more i {
	font-size: 14px;
}

.hdv2-gallery-tile:hover .hdv2-gallery-more {
	background: rgba(28, 31, 36, 0.7);
}

/* ====== Sidebar ====== */
.hdv2-sidebar {
	background: var(--hdv2-soft-2);
	border: 1px solid var(--hdv2-border);
	border-radius: 10px;
	padding: 18px;
	align-self: start;
	position: sticky;
	top: 16px;
}

.hdv2-facts {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--hdv2-border);
}

.hdv2-fact {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	line-height: 1.4;
}

.hdv2-fact-icon {
	flex: 0 0 22px;
	color: var(--hdv2-red);
	font-size: 14px;
	margin-top: 2px;
	text-align: center;
}

.hdv2-fact-body {
	min-width: 0;
	flex: 1;
	word-break: break-word;
}

.hdv2-fact-key {
	display: block;
	color: var(--hdv2-muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 1px;
}

.hdv2-fact-val {
	color: var(--hdv2-dark);
	font-weight: 500;
}

.hdv2-fact-val a {
	color: var(--hdv2-dark);
	text-decoration: none;
}

.hdv2-fact-val a:hover {
	color: var(--hdv2-red);
}

.hdv2-fact-val--opening {
	font-weight: 400;
	color: var(--hdv2-text);
	/* Content carries its own <br/> tags from the editor; do NOT use
	   pre-line, otherwise the stored newlines render as extra blank
	   lines on top of the explicit breaks and the block bloats. */
	white-space: normal;
	line-height: 1.45;
}

.hdv2-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hdv2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 18px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background 0.15s, color 0.15s, transform 0.05s, border-color 0.15s;
	line-height: 1.2;
}

.hdv2-btn:hover {
	transform: translateY(-1px);
}

.hdv2-btn--primary {
	background: var(--hdv2-red);
	color: #fff;
	border-color: var(--hdv2-red);
}

.hdv2-btn--primary:hover {
	background: #99131e;
	border-color: #99131e;
	color: #fff;
}

.hdv2-btn--ghost {
	background: #fff;
	color: var(--hdv2-dark);
	border-color: var(--hdv2-border);
}

.hdv2-btn--ghost:hover {
	background: var(--hdv2-dark);
	color: #fff;
	border-color: var(--hdv2-dark);
}

/* ====== Specials + map side-by-side (above offers / berichte) ====== */
.hdv2-split-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 20px;
	margin: 0 0 24px;
	align-items: stretch;
}

.hdv2-split-row--single {
	grid-template-columns: minmax(0, 1fr);
}

.hdv2-split-col {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.hdv2-split-col--map {
	min-height: 0;
}

/* Nested cards inside the split row – no extra outer margin */
.hdv2-section--inset {
	margin: 0;
	height: 100%;
}

.hdv2-split-col--map .hdv2-section--inset {
	display: flex;
	flex-direction: column;
}

.hdv2-split-col--map .hdv2-map {
	flex: 1;
	min-height: 240px;
}

.hdv2-section--sortiment {
	margin-top: 8px;
}

/* ====== Sections ====== */
.hdv2-section {
	margin: 24px 0;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--hdv2-border);
	border-radius: 10px;
}

.hdv2-section--plain {
	padding: 0;
	border: 0;
	background: transparent;
}

.hdv2-section-title {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 600;
	color: var(--hdv2-dark);
	text-transform: none;
	letter-spacing: normal;
}

.hdv2-section-title i {
	color: var(--hdv2-red);
	margin-right: 6px;
	font-size: 16px;
}

.hdv2-description {
	font-size: 15px;
	line-height: 1.6;
	color: var(--hdv2-text);
	word-wrap: break-word;
}

/* ====== Sortiment / chip lists ====== */
.hdv2-chip-group {
	margin-bottom: 14px;
}

.hdv2-chip-group:last-child {
	margin-bottom: 0;
}

.hdv2-chip-group-title {
	font-size: 12px;
	color: var(--hdv2-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 8px;
	font-weight: 600;
}

.hdv2-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.hdv2-chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--hdv2-soft);
	border: 1px solid var(--hdv2-border);
	color: var(--hdv2-dark);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.hdv2-chip:hover {
	background: var(--hdv2-dark);
	border-color: var(--hdv2-dark);
	color: #fff;
	text-decoration: none;
}

a.hdv2-chip {
	cursor: pointer;
}

/* ====== Boerse listing block (Aktuelle Angebote) ====== */
.hdv2-boerse-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
	margin-top: 6px;
}

.hdv2-boerse-item {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--hdv2-border);
	border-radius: 10px;
	overflow: hidden;
	transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
	text-decoration: none;
	color: inherit;
}

.hdv2-boerse-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
	border-color: #d6d8de;
	text-decoration: none;
}

.hdv2-boerse-img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	background: var(--hdv2-soft);
	overflow: hidden;
	position: relative;
}

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

.hdv2-boerse-img--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #c5c9d0;
	font-size: 32px;
}

.hdv2-boerse-body {
	padding: 10px 12px 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}

.hdv2-boerse-cat {
	font-size: 11px;
	color: var(--hdv2-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.hdv2-boerse-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--hdv2-dark);
	line-height: 1.3;
	margin: 0;
}

.hdv2-boerse-title .hdv2-boerse-brand {
	color: var(--hdv2-red);
}

.hdv2-boerse-price {
	margin-top: auto;
	padding-top: 6px;
	font-size: 15px;
	font-weight: 700;
	color: var(--hdv2-red);
	white-space: nowrap;
}

.hdv2-boerse-more {
	margin-top: 14px;
	text-align: center;
}

.hdv2-boerse-empty {
	color: var(--hdv2-muted);
	font-size: 14px;
}

/* ====== Map / related lists wrappers ====== */
.hdv2-map {
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--hdv2-border);
}

/* "Relevante Berichte" – magazin-style card grid.
   Borderless, no box, image + uppercase title + description.
   Hover = background tint only (no transform / layout shift). */
.hdv2-section--cards {
	overflow: hidden;
}

.hdv2-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px 16px;
}

.hdv2-cards-grid .news-3,
.hdv2-cards-grid .news-3-uni,
.hdv2-cards-grid .news-3-hotelhaendler {
	float: none !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	overflow: hidden;
	border-radius: 4px;
	transition: background-color 0.15s ease;
}

.hdv2-cards-grid .news-3:hover {
	background-color: #f5f5f5 !important;
}

.hdv2-cards-grid .news-3 .newsimg-inner-div {
	display: block;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
}

.hdv2-cards-grid .news-3 img.newsimage {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 245 / 138;
	object-fit: cover;
	margin: 0 !important;
	border: 0 !important;
}

.hdv2-cards-grid .news-3 h3 {
	margin: 10px 0 6px !important;
	padding: 0 !important;
	font-size: 13px;
	line-height: 1.35;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	min-height: 0 !important;
	/* Legacy ".news-3 h3" carries width:286px and bottom:-3px which break the
	   responsive ~220px cards in hdv2-cards-grid. Force static + full width. */
	position: static !important;
	width: auto !important;
	bottom: auto !important;
}

.hdv2-cards-grid .news-3 h3 a {
	color: var(--hdv2-dark) !important;
	text-decoration: none;
}

.hdv2-cards-grid .news-3:hover h3 a {
	color: var(--hdv2-red) !important;
}

.hdv2-cards-grid .news-3-description {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13px;
	line-height: 1.5;
	color: var(--hdv2-muted);
}

.hdv2-cards-grid .news-3-description em {
	font-style: normal;
	color: var(--hdv2-muted) !important;
}

.hdv2-cards-grid .news-3 .newsdate,
.hdv2-cards-grid .news-3 .views {
	display: none;
}

/* "Touren in der Nähe" cards (rendered via newstriple) emit an <h6>Hotel</h6>
   type label and a <div class="subtitle"> with Schwierigkeit/Länge.
   Legacy CSS positions both ABSOLUTELY (h6 at top:148px; subtitle without an
   explicit top), which collides with the title and overflows the responsive
   modern card. Hide the redundant type label and let the subtitle flow inline
   below the title. */
.hdv2-cards-grid .news-3-uni h6 {
	display: none !important;
}
.hdv2-cards-grid .news-3-uni .subtitle {
	position: static !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: visible !important;
	font-size: 13px;
	line-height: 1.5;
	color: var(--hdv2-muted);
}
.hdv2-cards-grid .news-3-uni .subtitle a {
	color: var(--hdv2-muted) !important;
	text-decoration: none;
}
.hdv2-cards-grid .news-3-uni .subtitle .fa-cog {
	color: var(--hdv2-muted);
	margin-right: 2px;
	font-size: 0.9em;
}

/* Events in der Nähe – simple list rendering */
.hdv2-event-list ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.hdv2-event-list li {
	padding: 8px 0;
	border-bottom: 1px solid var(--hdv2-border);
	font-size: 14px;
	line-height: 1.4;
	color: var(--hdv2-text);
}

.hdv2-event-list li:last-child {
	border-bottom: 0;
}

.hdv2-event-list li a {
	color: var(--hdv2-dark);
	font-weight: 600;
	text-decoration: none;
}

.hdv2-event-list li a:hover {
	color: var(--hdv2-red);
}

.hdv2-related-col .moreitems {
	font-size: 14px;
}

/* Reset some legacy block chrome that bleeds into our sections via includes */
.hdv2-section .block.block-bg,
.hdv2-section .block.block-bg-more {
	background: transparent;
	padding: 0;
	margin: 0;
	border: 0;
	box-shadow: none;
}

.hdv2-section .block h2 {
	display: none; /* we use our own .hdv2-section-title */
}


/* ====== Footer stats ====== */
.hdv2-stats {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--hdv2-border);
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 12px;
	color: var(--hdv2-muted);
}

/* ====== Responsive ====== */
@media (max-width: 880px) {
	.hdv2-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.hdv2-sidebar {
		position: static;
	}
	.hdv2-title {
		font-size: 24px;
	}
	.hdv2-split-row {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

@media (max-width: 640px) {
	/* Breathing room on phones – the parent content_div drops its own
	   horizontal padding on mobile, so the detail wrapper needs its own. */
	.hdv2-detail {
		padding-left: 14px;
		padding-right: 14px;
	}
	.hdv2-gallery-grid {
		gap: 6px;
	}
	/* On narrow phones, drop the strip down to 2 thumbs – more than that
	   becomes a postage stamp. Extra photos still open via the lightbox. */
	.hdv2-gallery-grid--4,
	.hdv2-gallery-grid--5 {
		grid-template-columns: 1fr 1fr;
	}
	.hdv2-gallery-grid--4 > .hdv2-gallery-tile:nth-of-type(n+4),
	.hdv2-gallery-grid--5 > .hdv2-gallery-tile:nth-of-type(n+4) {
		display: none !important;
	}
	.hdv2-section {
		padding: 14px 16px;
	}
	.hdv2-title {
		font-size: 22px;
	}
	.hdv2-boerse-list {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 10px;
	}
	.hdv2-boerse-title {
		font-size: 13px;
	}
	.hdv2-boerse-price {
		font-size: 14px;
	}
}

/* ====== Hotel-specific ====== */
.hdv2-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-left: 10px;
	font-size: 14px;
	font-weight: 500;
	color: #d97706;
	vertical-align: middle;
}

.hdv2-stars i {
	font-size: 13px;
}

.hdv2-subtitle {
	font-size: 15px;
	color: var(--hdv2-muted);
	font-style: italic;
	margin-top: 4px;
}

.hdv2-muted-inline {
	color: var(--hdv2-muted);
	font-size: 13px;
}

/* CMS content blocks (hotel_elements) inside detail view.
   Overrides legacy layout2019.css rules (e.g. margin-left: -425px on .element.sechsxbild
   at >=1100px width) that were designed for the old 813px-wide .haendler_elements wrapper. */
.hdv2-elements {
	margin-left: 0;
	width: 100%;
	max-width: 100%;
	margin-bottom: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--hdv2-text);
	overflow: hidden;
}

.hdv2-elements .textwrap,
.hdv2-elements .textwrap.whiteback,
.hdv2-elements .inner_text,
.hdv2-elements .element,
.hdv2-elements .el163,
.hdv2-elements .sechsxbild_surr,
.hdv2-elements .el_surr,
.hdv2-elements .gallery_outer,
.hdv2-elements .bilder1,
.hdv2-elements .youtube-video,
.hdv2-elements .bildunterschrift {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	background: transparent;
}

.hdv2-elements .inner_text[style*="float:left"],
.hdv2-elements .inner_text[style*="float: left"] {
	float: none !important;
	width: 100% !important;
}

.hdv2-elements h2.element,
.hdv2-elements h3.element,
.hdv2-elements h4.element,
.hdv2-elements h5.element {
	margin-left: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	color: var(--hdv2-dark);
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
}

.hdv2-elements img {
	max-width: 100% !important;
	height: auto !important;
}

.hdv2-elements .element.bilder1,
.hdv2-elements .bilder1 {
	margin-left: 0 !important;
	clear: both;
}

.hdv2-elements .element.bilder1 img,
.hdv2-elements .bilder1 img,
.hdv2-elements .element.bilder1 .bild.marginleft,
.hdv2-elements .bild.marginleft,
.hdv2-elements .el163 img {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	margin-left: 0 !important;
}

.hdv2-elements .element.sechsxbild,
.hdv2-elements .element.sechsxbild .wd620,
.hdv2-elements .element.sechsxbild .wd860 {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
}

/* Force the small (wd620) image variants visible and hide the 860px-wide ones.
   Selectors are .bild img.wd... so they beat the .bild img display:block rule below. */
.hdv2-elements .element.sechsxbild .bild img.wd620,
.hdv2-elements .element.sechsxbild img.wd620 {
	display: block !important;
	width: 100% !important;
	height: auto !important;
}
.hdv2-elements .element.sechsxbild .bild img.wd860,
.hdv2-elements .element.sechsxbild img.wd860,
.hdv2-elements .bildtext.wd860 {
	display: none !important;
}

/* Some galleries (e.g. older hotel records) emit THREE <img> variants per item:
   .wd620.full_only, .wd860.full_only and .resp_only (a square mobile crop).
   The catch-all .bild img { display:block !important } rule below would override
   the legacy ".resp_only { display:none }" and make both desktop and mobile
   variants visible at once. Respect full_only/resp_only explicitly inside the
   modern hdv2 wrapper, swapping at the mobile breakpoint. */
.hdv2-elements .element.sechsxbild .bild img.resp_only {
	display: none !important;
}
@media only screen and (max-width: 979px) {
	.hdv2-elements .element.sechsxbild .bild img.resp_only {
		display: block !important;
	}
	.hdv2-elements .element.sechsxbild .bild img.full_only {
		display: none !important;
	}
}

/* sechsxbild: lay out images as a responsive grid instead of floats
   (legacy float layout assumed a 813px-wide .haendler_elements wrapper). */
.hdv2-elements .sechsxbild_surr ul.sechsxbildsurround,
.hdv2-elements .element.sechsxbild ul.sechsxbildsurround {
	display: grid !important;
	grid-gap: 6px !important;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
	width: 100% !important;
}

/* Equal-width columns for "gleiche Breite" (.rats) and the default mode.
   .rath / .rathf ("gleiche Höhe" / "gleiche Höhe seitenbreite") are EXCLUDED
   so the inline grid-template-columns emitted by elements.class.php (e.g.
   style="grid-template-columns: 32.5% 33.4% 34.1%") applies and yields
   proportional widths -> equal image heights. */
.hdv2-elements .element.sechsxbild.bilder2:not(.rath):not(.rathf) ul.sechsxbildsurround { grid-template-columns: 1fr 1fr !important; }
.hdv2-elements .element.sechsxbild.bilder3:not(.rath):not(.rathf) ul.sechsxbildsurround { grid-template-columns: 1fr 1fr 1fr !important; }
.hdv2-elements .element.sechsxbild.bilder4:not(.rath):not(.rathf) ul.sechsxbildsurround { grid-template-columns: 1fr 1fr 1fr 1fr !important; }
.hdv2-elements .element.sechsxbild.bilder5:not(.rath):not(.rathf) ul.sechsxbildsurround { grid-template-columns: repeat(5, 1fr) !important; }
.hdv2-elements .element.sechsxbild.bilder6:not(.rath):not(.rathf) ul.sechsxbildsurround { grid-template-columns: repeat(6, 1fr) !important; }

.hdv2-elements .element.sechsxbild ul.sechsxbildsurround li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	width: 100% !important;
	float: none !important;
	display: block !important;
}

.hdv2-elements .element.sechsxbild .bild {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	display: block !important;
}

.hdv2-elements .element.sechsxbild .bild a {
	display: block !important;
	width: 100% !important;
}

.hdv2-elements .element.sechsxbild .bild img {
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	display: block !important;
}

/* einxbildsurround (single image inside bilder1) */
.hdv2-elements .element.bilder1 ul.einxbildsurround {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.hdv2-elements .element.bilder1 ul.einxbildsurround li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	width: 100% !important;
}

.hdv2-elements .element.bilder1 .bild {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
}

/* hide unused sechsxbild navigation arrows (the JS doesn't initialize here) */
.hdv2-elements .blaettern_sechsxl,
.hdv2-elements .blaettern_sechsxr {
	display: none !important;
}

.hdv2-elements .youtube-video iframe {
	width: 100% !important;
	max-width: 100% !important;
	height: auto;
	aspect-ratio: 16 / 9;
}

.hdv2-elements .bildunterschrift {
	font-size: 12px;
	color: var(--hdv2-muted);
}