.dropcap-mini {
	float: left;
	height: 30px;
	width: 30px;
	line-height: 30px;
	text-align: center;
	margin: 5px 15px 0 0;
}

.dropcap-text {
	padding: 10px;
	white-space: nowrap;
	font-size: 14px;
}

.box {
	max-width: 720px;
	padding: 0 70px !important;
}

/* Villa Uhland CSS */

.vu-year {
	margin: 1px;
}

/* Gallery pictures are wrapped in a plain block link (data-vu-gallery); the former "+N photos"
   overlay (.vu-magnifier) doubled the "see photos" button and was removed 2026-08-30. */
.vu-gallery-link { display: block; }

.vu-responsive-img {
	width: 100%;
	height: auto;
	display: block;
}

.vu-img-mobile { padding: 50px 0px; }
.vu-mobile-only { display: none; }

.vu-box-banner-img { width: 700px; }

.vu-flag {
	width: 20px;
	height: 15px;
	display: inline-block;
	vertical-align: middle;
	border: 1px solid rgba(0, 0, 0, 0.08);
	object-fit: cover;
}

/* Phone numbers must never break to a second line, anywhere. */
a[href^="tel:"] {
	white-space: nowrap;
}

/* Keep the contact strip pinned to the top while the page scrolls.
   We use position:fixed (instead of sticky) because body has
   display:flex / height:100% in skin-red.css, which can disable
   CSS sticky. body gets an initial padding-top here so content is
   never hidden under the topBar before main.js fine-tunes it. */
body {
	padding-top: 42px;
}

.topBar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1031;
	/* Promote to its own compositor layer so MIUI/Android Chrome
	   don't repaint the bar each scroll tick while the URL bar
	   collapses — without this, the bar jiggles on Xiaomi devices. */
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.topBar ul.topBarNav li ul.w-150 li a {
	white-space: nowrap;
	padding-left: 12px;
	padding-right: 12px;
}

/* Feature list: icon + text rows that align on every viewport.
   The list sits on a white panel: once the icons lost their dark tiles the
   amenities and the paragraph under them read as one undivided grey block.
   The panel separates the facts from the prose without adding borders. */
.vu-feature-list {
	list-style: none;
	background: #ffffff;
	padding: 20px 24px;
	margin: 0 0 24px 0;
}

.vu-feature {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	line-height: 1.4;
}

.vu-feature:last-child {
	margin-bottom: 0;
}

.vu-feature .dropcap-mini {
	float: none;
	flex: 0 0 30px;
	margin: 0 14px 0 0;
}

.vu-feature .dropcap-text {
	flex: 1;
	padding: 0;
	white-space: normal;
	font-size: 14px;
}

@media screen and (max-width: 991px) {

	.breadcrumbs,
	.vu-desktop-only {
		display: none !important;
	}

	.topBar .vu-contact-info {
		float: left;
		margin: 0;
	}

	.topBar .vu-contact-info > li {
		display: inline-block;
		padding: 0 8px 0 0;
		font-size: 12px;
		line-height: 38px;
	}

	.topBar .vu-contact-info > li a {
		display: inline !important;
	}

	.vu-mobile-only { display: block; }
	.vu-box { padding: 70px 20px 100px !important; }

	.vu-box-banner-img { width: 347px; }

	/* On mobile the Swiper carousel is converted to a plain stacked list.
	   Fighting Swiper's flex/transform layout was unreliable; stacking is
	   simpler and gives a better mobile UX. */
	.swiper-container.swiper-coverflow {
		height: auto !important;
		overflow: visible !important;
	}

	.swiper-container.swiper-coverflow .swiper-wrapper {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		transform: none !important;
		-webkit-transform: none !important;
		-ms-transform: none !important;
	}

	.swiper-container.swiper-coverflow .swiper-slide {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		flex-shrink: 1 !important;
		margin: 0 0 8px !important;
		text-align: left !important;
		position: relative !important;
		left: 0 !important;
	}

	.swiper-container.swiper-coverflow .slider-content {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		padding: 20px 0 24px !important;
	}

	.swiper-container.swiper-coverflow .slider-content .box:not(.vu-desktop-only) {
		display: block !important;
		width: 100% !important;
		max-width: 640px !important;
		margin: 0 auto !important;
		padding: 4px 22px !important;
		text-align: left !important;
		vertical-align: baseline !important;
	}

	.swiper-container.swiper-coverflow .slider-content .box.vu-desktop-only {
		display: none !important;
	}

	.swiper-container.swiper-coverflow .swiper-button-prev,
	.swiper-container.swiper-coverflow .swiper-button-next,
	.swiper-container.swiper-coverflow .swiper-pagination {
		display: none !important;
	}

	.swiper-container.swiper-coverflow h2.thin {
		margin-top: 0;
	}

	.swiper-container.swiper-coverflow .meta-info {
		margin: 4px 0 14px;
	}

	.swiper-container.swiper-coverflow .btn {
		margin-top: 8px;
	}

	.vu-img-mobile {
		padding: 18px 0 8px;
		max-width: 100%;
	}

	.vu-img-mobile .vu-responsive-img {
		max-width: 100%;
		height: auto;
	}

	.vu-feature {
		margin-bottom: 8px;
	}

	.vu-feature-list {
		padding: 16px 18px;
	}
}

@media screen and (max-width: 480px) {

	.swiper-container .swiper-slide .slider-content .box {
		padding: 8px 16px !important;
	}

	.swiper-button-prev,
	.swiper-button-next {
		display: none;
	}

	.vu-feature .dropcap-mini {
		flex: 0 0 28px;
		height: 28px;
		width: 28px;
		line-height: 28px;
		margin-right: 12px;
	}

	.vu-feature .dropcap-text {
		font-size: 13px;
	}

	.topBar .vu-contact-info > li {
		font-size: 11px;
		padding-right: 6px;
		line-height: 36px;
	}
}

/* Swiper slide content (left text-box + right photo-box) has top/bottom padding of 0 in the skin,
   so the photo on the right side touches the top and bottom edges of the slider. Add vertical
   breathing room on desktop. */
@media (min-width: 767px) {
	.swiper-container .swiper-slide .slider-content .box {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}

/* skin-red.css makes <body> a fixed-height flex column (html, body { height: 100% } +
   display: flex). A direct body child with overflow: hidden — the Swiper container — has no
   automatic flex minimum size, so the browser crushes it to 0 px to make the column fit the
   viewport, and the whole slider disappears. Content children of body must never flex-shrink;
   the page scrolls instead. */
body > * {
	flex-shrink: 0;
}

/* The skin hardcodes .swiper-container { height: 700px }, which clips content on small monitors
   and after we made the slide taller (new See Photos button + vertical padding). Make the slider
   grow with content: 600px minimum on the slide itself, no upper cap. Paired with autoHeight:true
   in the Swiper init so slide positions recompute when heights change.

   The min-height sits on the SLIDE (not the container) so the slide's flex centering
   (align-items: center, already from the skin) has a frame to vertically centre its content within
   when the content is shorter than 600px. Putting min-height on the container would let the slide
   shrink to content and the slide content would slide to the top of the container instead. */
.swiper-container {
	height: auto !important;
	/* Same tone as the slides' own background, so the strip reserved for the pagination dots
	   below them reads as part of the slider instead of as a separate grey band. */
	background-color: var(--vu-surface-alt);
}
.swiper-container .swiper-slide {
	height: auto !important;
	min-height: 600px;
}
.swiper-container .swiper-slide .slider-content {
	height: auto !important;
}

/* The slider's grey band stays full-bleed, but the CONTENT inside the slides must line up with
   the same centered column as header, text sections and footer (Bootstrap .container widths).
   The skin used fixed paddings instead, and the global `.box { padding: 0 70px !important }`
   above forces 70px — so the paddings here need !important too.
   The photo cell gets the larger share (55%) so the picture stays prominent inside the column,
   and the prev/next arrows sit right next to the content column instead of at the screen edge. */
@media (min-width: 768px) {
	/* The pagination dots are absolutely positioned at the container's bottom edge, so with the
	   slides filling the container they used to sit on top of the last line of text / the photo.
	   Reserve a strip below the slides that belongs to the dots alone. Desktop only: on mobile the
	   carousel is a stacked list and both dots and arrows are hidden. */
	.swiper-container {
		padding-bottom: 72px;
	}
	.swiper-container .swiper-slide .slider-content {
		width: 750px;
		margin-left: auto;
		margin-right: auto;
	}
	.swiper-container .swiper-slide .slider-content .box {
		padding: 40px 15px !important;
	}
	.swiper-container .swiper-slide .slider-content .box.vu-desktop-only {
		width: 55%;
	}
	.swiper-container .swiper-button-prev { left: max(10px, calc(50% - 435px)); }
	.swiper-container .swiper-button-next { right: max(10px, calc(50% - 435px)); }
}
@media (min-width: 992px) {
	.swiper-container .swiper-slide .slider-content {
		width: 970px;
	}
	.swiper-container .swiper-button-prev { left: calc(50% - 545px); }
	.swiper-container .swiper-button-next { right: calc(50% - 545px); }
}
@media (min-width: 1200px) {
	.swiper-container .swiper-slide .slider-content {
		width: 1170px;
	}
	.swiper-container .swiper-button-prev { left: calc(50% - 645px); }
	.swiper-container .swiper-button-next { right: calc(50% - 645px); }
}

/* Lead photos are not one shape: 3:2 for the house and #6, 4:3 for #3 and #4, and
   a portrait 3:4 for #5. The picture box therefore changed height from slide to
   slide, so the card visibly resized while swiping. Pin the frame to 3:2 — the
   ratio the welcome illustration and half the photos already have, so they are
   untouched — and let the taller ones crop from the centre rather than distort.
   Desktop only: the stacked mobile list has no neighbour to line up with, and a
   portrait photo is worth its full height there. */
@media (min-width: 768px) {
	.swiper-slide .box.vu-desktop-only .vu-responsive-img {
		width: 100%;
		aspect-ratio: 3 / 2;
		object-fit: cover;
	}
}

/* The slide headline heads the whole card, not just the text column: it sits above
   the photo and the details together. Padding matches the columns' 15px so the headline
   lines up with the photo's left edge. Below 992px the card is a stacked block and the
   header is a plain block in the flow; at 992px and up the card is a grid and the rule
   further down spans the headline over both columns. The table-caption below is what is
   left of the theme's display:table card and only still applies in the 768–991px band,
   where the photo column is hidden anyway. */
.vu-flat-head {
	display: table-caption;
	caption-side: top;
	text-align: left;
	/* The caption sits outside the cells, so it does not inherit their 40px top
	   padding — without this the category line would start on the slide's edge. */
	padding: 40px 15px 0;
}
.vu-flat-head h2 {
	margin: 0;
}
@media (max-width: 991px) {
	.vu-flat-head {
		display: block;
		max-width: 640px;
		margin: 0 auto;
		padding: 4px 22px 0;
	}
	.vu-flat-head h2 {
		margin: 0 0 4px;
	}
}

/* "See Photos" secondary button on apartment slides — sits next to the primary "Make a reservation"
   button. Add a small left gap so the two buttons don't touch, and stack vertically on small screens. */
.vu-btn-photos {
	margin-left: 8px;
}
@media (max-width: 480px) {
	.vu-btn-photos {
		margin-left: 0;
		margin-top: 8px;
		display: inline-block;
	}
}

/* The slide's call-to-action buttons used to be simply the last thing in the text column, and
   nothing held them on a fixed line: the column is a vertical-align:middle cell inside a
   flex-centred card. Every difference in the text above them — 5 vs 6 feature rows, a feature row
   that wraps in German but not in English, a paragraph of 3 vs 4 lines, the welcome and house
   slides having no feature list at all — moved the buttons, and they visibly jumped while swiping.

   Two things are needed to stop that, and the display:table card could do neither:
   1. the card must fill the slide, so a taller text column cannot shift the whole card upwards;
   2. both columns must be as tall as the card, so the buttons can be pinned to their bottom.
   A table-cell's height comes from row distribution, which Chrome treats as indefinite — a
   height:100% child of the cell just falls back to its own content height. So on desktop the card
   becomes a grid instead: the headline spans both columns in an auto row, the two columns share a
   1fr row and stretch to it, each column is a flex column, and .vu-slide-actions is pushed to the
   bottom with an auto margin. The copy above still centres itself in the space that is left, so
   the short slides don't read as top-heavy, and the photo keeps being centred in its column.

   Desktop only: below 992px the card is a stacked block, the photo column is hidden and there is
   no neighbouring column to line up with. */
@media (min-width: 992px) {
	.swiper-container .swiper-slide {
		align-items: stretch;
	}
	.swiper-container .swiper-slide .slider-content {
		display: grid;
		grid-template-columns: 55% 45%;
		/* Row 1 is the headline, row 2 the two columns. The headline is not the same height on
		   every slide — the apartments' <ruby> titles carry an annotation line, the house slide's
		   plain h2 does not, and the welcome slide has no headline at all — so an `auto` row made
		   row 2 start at three different heights, and with it the photo. Reserve the tallest
		   headline's height on every slide instead, so row 2 is one and the same box everywhere;
		   `auto` as the maximum still lets a headline that wraps in some language grow. */
		grid-template-rows: minmax(var(--vu-slide-head-row), auto) 1fr;
	}
	.vu-flat-head {
		display: block;
		grid-row: 1;
		grid-column: 1 / -1;
	}
	.swiper-container .swiper-slide .slider-content .box {
		display: flex;
		flex-direction: column;
		grid-row: 2;
		/* The global .box cap would otherwise shrink the columns below their grid tracks. */
		max-width: none;
	}
	.swiper-container .swiper-slide .slider-content .box.vu-desktop-only {
		grid-column: 1;
		width: auto;
		/* Top, not centred: the picture keeps its 3:2 frame, so centring it in a column that is
		   taller than the frame left its bottom edge floating at a different height on every
		   slide — on some it cut straight through the buttons next to it. Aligned to the top it
		   starts on the same line as the details, and its bottom edge is the same line too. */
		justify-content: flex-start;
	}
	.swiper-container .swiper-slide .slider-content .box:not(.vu-desktop-only) {
		grid-column: 2;
	}
	.vu-slide-text {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
	}
	.vu-slide-body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1 1 auto;
	}
	/* The apartment slides lead with the feature list, and its white card has a hard top edge:
	   centring the copy would put that edge a dozen pixels off the photo's top edge, differently
	   on each apartment. Those slides start at the top so the two edges are one line. The welcome
	   and house slides have no such card, only running text, and keep the centring — they are the
	   sparse ones, where top-aligning would leave the copy stranded above a lot of empty space. */
	.vu-slide-body:has(.vu-feature-list) {
		justify-content: flex-start;
	}
	.vu-slide-actions {
		margin-top: auto;
		/* Flex, so the box ends where the buttons end: as an inline-block in a line box the
		   buttons left ~10px of descender space below them, and the column's bottom edge — the
		   line the photo and the copy are measured against — sat that much below the buttons. */
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		row-gap: 8px;
	}
	/* The paragraph's own bottom margin would sit between the copy and the buttons on slides
	   where there is no free space left to absorb it. */
	.vu-slide-body > p:last-child {
		margin-bottom: 0;
	}
}

/* Footer partner link: give it a visible dotted underline so it reads as a
   link against the dark footer (the skin renders footer links without one). */
.vu-partner-link {
	text-decoration: underline dotted;
	text-underline-offset: 3px;
}
.vu-partner-link:hover,
.vu-partner-link:focus {
	text-decoration: underline solid;
}

/* Desktop: give the Apartments mega-dropdown more vertical breathing room
   so the two stacked sections (Photos + Apartments at Airbnb) don't feel cramped. */
@media (min-width: 767px) {
	.yamm li .dropdown-menu .yamm-content {
		padding-top: 45px !important;
		padding-bottom: 45px !important;
		min-height: 480px;
	}
	.yamm li .dropdown-menu .yamm-content ul li a {
		padding: 11px 0 !important;
	}
	.yamm li .dropdown-menu .yamm-content ul li.title {
		margin: 12px 0 !important;
	}
}

/* FAQ page: native <details>/<summary> accordion (replaces the old Bootstrap
   collapse markup that needed JS). Multiple items may stay open at once.
   Mirrors the skin's .accordion.style1 look: a FontAwesome plus-circle marker
   (grey, closed) that flips to a minus-circle (red, open) and the heading text
   that brightens when expanded. */
.faq-accordion {
	margin-bottom: 20px;
}

/* Section separators (faq.h4.1 … faq.h4.5) between question groups. */
.faq-accordion .faq-group {
	margin: 28px 0 6px;
}

.faq-item {
	border: none;
	margin: 0;
}

.faq-item > summary {
	display: block; /* also suppresses the native disclosure triangle in most browsers */
	cursor: pointer;
	list-style: none;
	position: relative;
	padding: 5px 0 5px 30px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: #878c94; /* closed */
	outline: 0;
}

/* WebKit/Blink legacy marker. */
.faq-item > summary::-webkit-details-marker {
	display: none;
}

.faq-item > summary::before {
	font-family: FontAwesome;
	content: "\f055"; /* plus-circle, closed */
	position: absolute;
	left: 0;
	top: 3px;
	font-size: 24px;
	line-height: 1;
	color: #878c94;
}

.faq-item[open] > summary {
	color: #35404f; /* open */
}

.faq-item[open] > summary::before {
	content: "\f056"; /* minus-circle, open */
	color: var(--vu-accent);
}

.faq-item .faq-body {
	padding: 5px 0 12px 30px; /* align body under the question text */
}

/* Villa Uhland logo at the foot of the FAQ page (below the accordion), on its own
   line and right-aligned. display:block + margin-left:auto right-aligns it without
   floating. Original size (width="400") on desktop; scales down only when the
   screen is narrower than the image. */
/* Footer: align column content flush with the headings above it. The skin gives
   .social-icons li a a 10px left margin (spacing between icons) which also pushes
   the first icon off the edge, and .list/.alt-list indent the link list ~27px. */
.footer .social-icons li:first-child a {
	margin-left: 0;
}
.footer ul.list.alt-list {
	padding-left: 10px; /* angle icons sit at li -18px; 10 + 8 - 18 = 0 = heading edge */
}

/* The footer's top row uses .icon-boxes.style1: an icon at the column's left edge with
   the text pushed 70px to the right (.box-content margin-left). The second row has no
   icon, so its text would start 70px further left and not line up with the row above.
   Indent the second row's content by the same 70px so both rows' text align vertically. */
.footer .vu-footer-indent > *:not(.icon-boxes) {
	margin-left: 70px;
}

/* Address row: a big location pin in the 70px left gutter, vertically centered on the
   address, with the text starting at 70px like the other footer columns. The skin's
   icon-box positions the icon absolutely (top-aligned, finicky for a single line), so
   here we override it with flexbox — align-items:center reliably centers the pin on the
   address whether it is one line or two. Scoped to .vu-address-box so the multi-line
   icon-boxes in the row above keep their original layout. */
.footer .vu-address-box {
	display: flex;
	align-items: flex-start;
	text-align: left;
	margin-top: 0;
	/* The address now sits between the column heading and the description paragraph; without this
	   the postal lines and the description read as one run-on block. */
	margin-bottom: var(--vu-s3);
}
.footer .vu-address-box .icon {
	position: static;
	flex: 0 0 70px;
	display: flex;
	align-items: flex-start;
	padding-left: 8px;
	transform: none;
	-webkit-transform: none;
}
/* Restore the skin's "jump up on hover" — the skin does it with top:-5px, which no longer
   works now the icon is position:static; use a transform instead (the skin's transition
   on .icon animates it). */
.footer .vu-address-box:hover .icon {
	transform: translateY(-5px);
	-webkit-transform: translateY(-5px);
}
.footer .vu-address-box .box-content {
	margin-left: 0 !important; /* skin sets 70px (space for its absolutely-positioned icon) */
	padding-left: 0 !important;
	flex: 1;
	text-align: left;
}
.footer .vu-address-box .box-content p,
.footer .vu-address-box .box-content address {
	margin-bottom: 0;
	font-style: normal;
}

/* =====================================================================
   Typography (2026-08). Exactly THREE text faces (plus FontAwesome icons):
     Roboto              – body, forms (google-fonts.css)
     Fraunces            – all headings (OFL, variable 300–700, /fonts/brand)
     Backlash Small Caps – nav, buttons, subtitles/eyebrows (licensed, shared
                           with secrets.realestate; echoes the Art-Nouveau caps
                           of the house logo). SHORT strings only, never prose.
   Do not add a fourth face. Photos/logo carry their own lettering.
   ===================================================================== */
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('/fonts/brand/fraunces-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('/fonts/brand/fraunces-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Backlash Small Caps';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/fonts/brand/backlash-smallcaps.woff2') format('woff2');
}

:root {
	--vu-font-display: 'Fraunces', Georgia, serif;
	--vu-font-caps: 'Backlash Small Caps', 'Fraunces', Georgia, serif;
	--vu-font-body: 'Roboto', sans-serif;
	--vu-ink: #1d2129;
	--vu-text: #5f6368;
}

/* body */
body, p {
	font-family: var(--vu-font-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--vu-text);
}

/* headings — Fraunces, light, near-black */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--vu-font-display);
	font-weight: 400;
	font-variation-settings: 'opsz' 144, 'SOFT' 50;
	color: var(--vu-ink);
	line-height: 1.15;
	letter-spacing: -0.01em;
}
h1 { font-size: 46px; font-weight: 300; }
h2 { font-size: 38px; font-weight: 300; }
h3 { font-size: 30px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 17px; }
h1.thin, h2.thin, h3.thin { font-weight: 300; }
em { font-family: var(--vu-font-display); font-style: italic; }

/* small caps — short strings only. The face is already small-caps: no text-transform. */
.alt-font,
.subtitle,
.title-wrap label,
.title-wrap .subtitle,
.yamm .navbar-nav > li > a,
.btn {
	font-family: var(--vu-font-caps);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: none;
}
.alt-font.text-uppercase { text-transform: none; }
.subtitle,
.title-wrap .subtitle,
.title-wrap label {
	font-size: 20px;
	color: #878c94;
}
/* nav — Backlash is a small face; 20px here reads like 16px Roboto */
.yamm .navbar-nav > li > a {
	font-size: 21px;
	letter-spacing: 0.1em;
}
/* "Apartments" is the only nav label wrapped in a <span>, and the skin's
   `* { font-family: Roboto }` outranks inheritance — so that one item fell out
   of the caps face and set visibly larger beside it. Put it back on the face
   instead of trimming its size: the header row then carries two faces with one
   job each, Roboto for the site name and Backlash for navigation. */
.yamm .navbar-nav > li > a span {
	font-family: inherit;
}
/* dropdown / mega menu — Roboto, readable size, darker than the skin's #878c94 */
.yamm li .dropdown-menu li a,
.yamm li .dropdown-menu .yamm-content ul li a {
	font-family: var(--vu-font-body);
	font-size: 16px;
	line-height: 1.5;
	color: #4a4f57;
}
.yamm li .dropdown-menu .yamm-content ul li a {
	padding: 9px 0;
}
.yamm li .dropdown-menu .yamm-content ul li.title h6 {
	font-family: var(--vu-font-caps);
	font-size: 32px;
	letter-spacing: 0.1em;
	color: var(--vu-accent);
	margin: 0 0 6px;
}
/* buttons — square */
.btn {
	font-size: 17px;
	letter-spacing: 0.12em;
	border-radius: 0 !important;
	padding-top: 10px;
	padding-bottom: 10px;
}

@media (max-width: 767px) {
	body, p { font-size: 16px; }
	h1 { font-size: 34px; }
	h2 { font-size: 30px; }
	h3 { font-size: 25px; }
	h4 { font-size: 21px; }
	.yamm .navbar-nav > li > a { font-size: 20px; }
}

/* ---- "Trust" dropdown as an aligned table: year | platform | text | score ---- */
.vu-trust-menu {
	min-width: 580px;
}
/* The panel spans from its own menu item to the right edge of the container.
   The theme positions every navbar dropdown against .container (.yamm .dropdown
   { position: static }), so right:0 is the container edge — but the LEFT edge
   cannot be written here: it sits wherever "Vertrauen" happens to end, and that
   moves with every translation. The inline script in fragments/javascript.html
   measures that item and sets an inline
   left, which stretches the panel. Without that (or below 768px) it falls back
   to right-aligned at min-width. */
@media (min-width: 768px) {
	.vu-trust-menu {
		left: auto;
		right: 0;
	}
}
/* rows are inset like the apartments table, so the hairlines stop short of the
   menu edge instead of cutting across it */
.vu-trust-menu li:not(.title) {
	margin: 0 20px;
}
.vu-trust-menu li a {
	display: grid;
	grid-template-columns: 3.6em 7.5em 1fr auto;
	column-gap: 22px;
	align-items: center;
	white-space: nowrap;
	padding-left: 0;
	padding-right: 0;
	border-top: 1px solid var(--vu-rule);
}
.vu-trust-menu .label {
	display: inline-block;
	text-align: center;
	padding: 5px 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	border-radius: 0;
}
.vu-trust-menu .vu-text {
	white-space: normal;
}
/* group headings, same device as the apartments dropdown (li.title > h6) —
   they replace the old hairline divider: six near-identical booking rows need
   a label to scan by, not a rule. 24px rather than the mega menu's 32px: this
   dropdown is half its width, so the heading is matched optically, not 1:1. */
.vu-trust-menu li.title {
	padding: 0 20px;
	margin: 14px 0 4px;
}
.vu-trust-menu li.title:first-child {
	margin-top: 0;
}
.vu-trust-menu li.title h6 {
	font-family: var(--vu-font-caps);
	font-size: 24px;
	letter-spacing: 0.1em;
	color: var(--vu-accent);
	margin: 0;
}
@media (max-width: 767px) {
	.vu-trust-menu { min-width: 0; }
	.vu-trust-menu li a { grid-template-columns: 3.2em 6.5em 1fr auto; column-gap: 12px; }
}

/* Trust badges: one accent instead of four. The skin's stock status palette
   (warning/success/info/dark-background — apricot, mint, cyan, slate) belongs
   to the admin template, not to this site's ink/burgundy; white on #64d5f6 also
   sat near 1.8:1 at 12px. Years are ordering, platforms carry equal weight, and
   only the review score is worth an accent — same logic as .vu-flat-action /
   .vu-flat-airbnb in the apartments dropdown. */
.vu-trust-menu .label.vu-year {
	background: transparent;
	color: var(--vu-text);
	/* body font, not --vu-font-caps: the display face sets numerals as old-style
	   small caps, which turned the year column into noise. */
	font-family: var(--vu-font-body);
	padding-left: 0;
	padding-right: 0;
	text-align: left;
}
/* filled, not outlined: an outlined white box is what .vu-flat-action looks
   like in the apartments menu, and that IS a button. These chips are labels —
   the whole row is the link — so they must not borrow the control's shape. */
.label.vu-platform {
	background: var(--vu-surface-alt);
	color: var(--vu-ink);
	border-radius: 0;
}
/* in the dropdown grid the chip fills its column, so the platforms read as one */
.vu-trust-menu .label.vu-platform {
	display: block;
	width: 100%;
}
.vu-trust-menu .label.vu-score {
	background: var(--vu-accent);
	color: #ffffff;
}

/* footer headings (Support / Address …) — Backlash, +30% over h6 */
.footer h6.alt-font {
	font-size: 24px;
	letter-spacing: 0.1em;
}

/* ---- Vertical rhythm: more air between blocks -------------------------- */
.section {
	padding: 96px 0;
}
.section h1 {
	margin-top: 0;
	margin-bottom: 28px;
}
.section p + p {
	margin-top: 14px;
}
/* Slider height on desktop: the theme pins .swiper-container to 700px and Swiper's
   autoHeight (now off) re-set it per slide, which made the footer jump on every
   swipe. Height auto + the flex wrapper means all six slides take the height of the
   tallest one, so the page below never moves — and nothing clips when a translation
   runs long. Mobile keeps its own height:auto in the stacked-list block above. */
@media (min-width: 992px) {
	.swiper-container.swiper-coverflow {
		height: auto;
	}
}

/* slider: taller text box, clear gaps between headline / lead / copy / button */
@media (min-width: 767px) {
	.swiper-container .swiper-slide .slider-content .box {
		padding-top: 80px;
		padding-bottom: 80px;
	}
}
.swiper-slide .box h2 {
	margin-top: 0;
	margin-bottom: 22px;
}
.swiper-slide .box .meta-info {
	margin-bottom: 24px;
}
.swiper-slide .box p {
	margin-bottom: 18px;
}
.swiper-slide .box .btn {
	margin-top: 22px;
	margin-right: 12px;
	margin-bottom: 10px;
}
/* footer sits right after the slider — give it a gap */
.footer {
	margin-top: 0;
	padding-top: 72px;
}

/* buttons: call-to-action size ("Make a reservation", "See photos") */
.btn {
	font-size: 19px;
	padding: 13px 30px;
	line-height: 1.3;
}
.btn.btn-lg {
	font-size: 21px;
	padding: 15px 36px;
}
.btn.btn-sm {
	font-size: 15px;
	padding: 7px 14px;
}

/* Apartments mega-menu rows: name | booking.com name | capacity */
.yamm li .dropdown-menu .yamm-content ul li a.vu-flat-row {
	display: grid;
	grid-template-columns: minmax(16em, 1.3fr) minmax(14em, 1fr) minmax(12em, 1fr);
	column-gap: 24px;
	align-items: baseline;
}
.vu-flat-row b { font-weight: 500; color: var(--vu-ink); }
.vu-flat-row .vu-muted { color: #878c94; font-size: 15px; }
@media (max-width: 767px) {
	.yamm li .dropdown-menu .yamm-content ul li a.vu-flat-row { display: block; }
	.vu-flat-row .vu-muted { display: block; }
}

/* =====================================================================
   Reading system (2026-08-21) — Ruby-style: black headings over grey
   body, one spacing scale, bounded measure, no borders/shadows/radius,
   one accent. Tokens below; everything after uses them.

   The accent (2026-08-23) is the brick red of the word "WARM" in the house
   logo (#9c2a2a median of that lettering). The theme's original #e63e2d was
   an orange-red that appears in 0.2% of the chromatic pixels across all 70
   apartment photos and failed WCAG AA on the sand surface (3.78:1); brick
   is 6.93:1 there and sits with the oak/gold the rooms are actually made of.
   Do not reintroduce a second accent: the gold belongs to the photos.
   ===================================================================== */
:root {
	--vu-accent: #9c2a2a;
	--vu-accent-dark: #7a1f1f;
	--vu-rule: #e4e2dd;
	--vu-surface-alt: #f6f5f2;
	--vu-s1: 8px;  --vu-s2: 16px; --vu-s3: 24px; --vu-s4: 40px; --vu-s5: 64px; --vu-s6: 96px;
	--vu-measure: 68ch;
	/* Height reserved for a slide's headline row, so every slide's photo and details start on the
	   same line: 40px of top padding plus the tallest headline, an apartment's <ruby> title with
	   its annotation line (34px h2 + the rt line). The house slide's plain h2 and the welcome
	   slide's missing headline are shorter and simply leave the rest of the row empty. */
	--vu-slide-head-row: 112px;
}

/* heading scale: Fraunces for h1–h3; in-text headings (h4–h6) are Roboto 600, like Ruby's Open Sans 600 */
h2 { font-size: 34px; }
h3 { font-size: 26px; }
h4, h5, h6 {
	font-family: var(--vu-font-body);
	font-weight: 600;
	font-variation-settings: normal;
	letter-spacing: 0;
	line-height: 1.3;
}
h4 { font-size: 21px; }
h5 { font-size: 18px; }
h6 { font-size: 17px; }

/* links inside content: accent, underlined, 500 */
.vu-prose a, .faq-body a, .section p a, .swiper-slide .box p a {
	color: var(--vu-accent);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.vu-prose a:hover, .faq-body a:hover, .section p a:hover { color: var(--vu-accent-dark); }

/* flatten: no radius / shadow in content */
.section img, .swiper-slide img, .faq-body img, .dropdown-menu, .label, .panel, .thumbnail, .well, .alert, .form-control, .input-group-addon {
	border-radius: 0 !important;
	box-shadow: none !important;
}
.dropdown-menu { border: 1px solid var(--vu-rule); }

/* keyboard focus (skin removes it) */
a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible {
	outline: 2px solid var(--vu-accent);
	outline-offset: 2px;
}

/* ---- prose (AsciiDoc output on AGB, Impressum, Kurbeitrag, landing pages) ---- */
.vu-prose { max-width: var(--vu-measure); }
.vu-prose > .paragraph:first-child p,
.vu-prose .vu-lead {
	font-size: 19px;
	line-height: 1.6;
	color: var(--vu-ink);
}
.vu-prose h2 { margin: var(--vu-s5) 0 var(--vu-s3); }
.vu-prose h3 {
	font-family: var(--vu-font-body);
	font-size: 21px;
	font-weight: 600;
	font-variation-settings: normal;
	letter-spacing: 0;
	line-height: 1.3;
	margin: var(--vu-s4) 0 12px;
}
.vu-prose h4, .vu-prose h5, .vu-prose h6 { margin: 32px 0 12px; color: var(--vu-ink); }
.vu-prose > .sect1:first-child > h2, .vu-prose > .sect2:first-child > h3, .vu-prose > h2:first-child, .vu-prose > h3:first-child { margin-top: 0; }
.vu-prose p { margin: 0 0 var(--vu-s2); }
.vu-prose ul, .vu-prose ol { padding-left: 22px; margin: 0 0 var(--vu-s2); }
.vu-prose li { margin-top: var(--vu-s1); }
.vu-prose li::marker { color: #878c94; }
.vu-prose strong, .vu-prose b { color: var(--vu-ink); font-weight: 600; }
.vu-prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 var(--vu-s3); font-variant-numeric: tabular-nums; }
.vu-prose th, .vu-prose td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--vu-rule); }
.vu-prose th { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #878c94; }
.vu-prose hr { border: 0; border-top: 1px solid var(--vu-rule); margin: var(--vu-s4) 0; }
.vu-prose .admonitionblock { background: var(--vu-surface-alt); padding: var(--vu-s2) var(--vu-s3); margin: 0 0 var(--vu-s3); }
.vu-prose .admonitionblock td.icon { display: none; }
.vu-prose details { margin: var(--vu-s3) 0; }
.vu-prose details > summary { cursor: pointer; font-weight: 600; color: var(--vu-ink); padding: 12px 0; list-style: none; }
.vu-prose details > summary::-webkit-details-marker { display: none; }

/* sidebar on landing pages */
.vu-aside {
	margin-top: 6px;
	padding: 32px;
	background: var(--vu-surface-alt);
}
.vu-aside h5 { margin: 0 0 var(--vu-s2); }
.vu-aside p { font-size: 16px; line-height: 1.6; margin: 0 0 12px; }
.vu-aside .btn { display: block; text-align: center; margin: var(--vu-s2) 0 var(--vu-s1); white-space: nowrap; padding-left: 12px; padding-right: 12px; }
.vu-aside .vu-aside-phone { text-align: center; font-size: 17px; margin: 0 0 var(--vu-s2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vu-aside .vu-aside-phone a { color: var(--vu-ink); font-weight: 500; text-decoration: none; }
.vu-aside ul { list-style: none; padding: 0; margin: 0; }
.vu-aside li { margin: 0; padding: 10px 0; border-top: 1px solid var(--vu-rule); font-size: 16px; line-height: 1.45; }
.vu-aside li a { color: var(--vu-ink); font-weight: 500; text-decoration: none; }
.vu-aside li a:hover { color: var(--vu-accent); }
@media (max-width: 767px) { .vu-aside { margin-top: var(--vu-s4); } }

/* ---- FAQ — Ruby "Good to know": 18/600 black questions, 20px rows, no rules, CSS plus → minus ---- */
.faq-accordion { max-width: 760px; margin-bottom: var(--vu-s4); }
.faq-accordion .faq-group {
	font-family: var(--vu-font-display);
	font-weight: 300;
	font-size: 34px;
	line-height: 1.15;
	margin: var(--vu-s5) 0 var(--vu-s2);
}
.faq-accordion .faq-group:first-child { margin-top: 0; }
.faq-item > summary {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--vu-s3);
	padding: 20px 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--vu-ink);
	transition: color .15s ease;
}
.faq-item > summary:hover, .faq-item[open] > summary { color: var(--vu-accent); }
.faq-item > summary::before, .faq-item[open] > summary::before { content: none !important; }
.faq-item > summary::after {
	content: "";
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	margin-top: 6px;
	background:
		linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
}
.faq-item[open] > summary::after {
	background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat;
}
.faq-item .faq-body { padding: 0 40px 20px 0; max-width: var(--vu-measure); }
.faq-item .faq-body p { margin: 0 0 12px; }
.faq-item .faq-body img { max-width: 100%; height: auto; margin: var(--vu-s1) 0 var(--vu-s2); }
/* ---- navigation: underline accent instead of top border; flat dropdowns ---- */
@media (min-width: 767px) {
	.yamm .navbar-nav > li > a,
	.yamm .navbar-nav > li > a:hover,
	.yamm .navbar-nav > li.active > a,
	.yamm .navbar-nav > li.active > a:hover,
	.yamm .navbar-nav > li.active > a:focus,
	.yamm .navbar-nav > li.dropdown.open > a { border-top-color: transparent !important; }
	.yamm .navbar-nav > li > a { position: relative; }
	.yamm .navbar-nav > li > a::after {
		content: "";
		position: absolute;
		left: 15px; right: 15px; bottom: 14px;
		height: 1px;
		background: var(--vu-accent);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform .2s ease;
	}
	.yamm .navbar-nav > li:hover > a::after,
	.yamm .navbar-nav > li.active > a::after { transform: scaleX(1); }
}
.yamm li .dropdown-menu { padding: var(--vu-s2) 0; }
.yamm li .dropdown-menu li a { padding-top: 11px; padding-bottom: 11px; }
.yamm li .dropdown-menu .yamm-content { padding: var(--vu-s3) var(--vu-s4); }
.yamm li .dropdown-menu .yamm-content ul li a { padding: 10px 0; }
/* Apartments mega-menu: the two lists side by side */
.vu-mega-cols { display: flex; gap: var(--vu-s5); }
.vu-mega-cols > ul { flex: 1 1 0; margin: 0; padding: 0; }
@media (max-width: 991px) { .vu-mega-cols { display: block; } }
.topBar .vu-contact-info > li { font-size: 14px; line-height: 40px; }

/* ---- footer ---- */
.footer h5.title {
	font-family: var(--vu-font-caps);
	font-weight: 400;
	font-size: 24px;
	letter-spacing: .1em;
	margin: 0 0 var(--vu-s3);
}
.footer .icon-boxes.style1 .box-content p { font-size: 16px; line-height: 1.6; margin-top: 10px; }
.footer .list.alt-list li { margin: 0; }
.footer .list.alt-list li a { display: block; font-size: 16px; line-height: 1.5; padding: 5px 0; }
.footer .list.alt-list li a i { color: #6f7581; margin-right: 8px; }
.footer .list.alt-list li a:hover { color: #ffffff; }
.footer .text-sm { font-size: 14px; color: #878c94; }
.footer hr.spacer-30 { margin: var(--vu-s4) auto; }

/* ---- buttons: primary = accent fill, outline = ink border, no pills ---- */
.btn.btn-default, .btn.btn-primary {
	color: #ffffff;
	background-color: var(--vu-accent);
	border: 1px solid var(--vu-accent);
}
.btn.btn-default:hover, .btn.btn-default:focus, .btn.btn-default:active,
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active {
	color: #ffffff;
	background-color: var(--vu-accent-dark);
	border-color: var(--vu-accent-dark);
}
.btn.btn-default-outline, .btn.btn-gray-outline {
	color: var(--vu-ink);
	background: transparent;
	border: 1px solid var(--vu-ink);
}
.btn.btn-default-outline:hover, .btn.btn-gray-outline:hover {
	color: #ffffff;
	background: var(--vu-ink);
	border-color: var(--vu-ink);
}
.btn.round, .btn.semi-circle { border-radius: 0 !important; }

/* ---- index ---- */
.swiper-slide .box { max-width: 640px; }
.swiper-slide .box h2 { font-size: 34px; }
.swiper-slide .box .meta-info span { font-size: 19px; color: var(--vu-ink); }

/* Apartment headline: the room category rides above the title as a ruby
   annotation, so the old "Superior Studio, 39 m²" line is gone (the size moved
   into the feature list). display:flex pulls the annotation out of ruby layout
   so it sits left-aligned above the headline instead of centred over it; with
   no CSS it still renders as a plain ruby annotation. */
.vu-flat-title ruby {
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	/* the skin's `* { font-family: Roboto }` outranks inheritance, so wrapping the
	   headline in <ruby> silently dropped it out of Fraunces — the apartment titles
	   were the only headings on the site not in the display face. */
	font-family: inherit;
}
.vu-flat-title rt {
	font-family: var(--vu-font-caps);
	/* Backlash is a small-caps face: its cap height is well below the nominal size,
	   so 15px read as ~11px. 19px brings the category line level with the feature
	   labels, and #878c94 only reached 3.1:1 on the sand background — under AA. */
	font-size: 19px;
	font-weight: 400;
	font-variation-settings: normal;
	letter-spacing: 0.08em;
	line-height: 1.3;
	color: var(--vu-text);
	margin-bottom: var(--vu-s1);
	text-align: left;
}
/* The homepage intro (h1 + paragraphs in .section .col-sm-12) deliberately spans the
   full container, not --vu-measure: it sits directly above the two-column slider and
   a 68ch column looked out of bounds against it (2026-08-30). Long prose pages keep
   their measure via .vu-prose. */
.section .col-sm-12 > h1 + p { font-size: 19px; color: var(--vu-ink); }
/* Feature icons on the apartment slides: the glyph carries the meaning, so no
   filled tile — ink icon straight on the page, like the rest of the reading
   system's no-fills rule. The 30px column stays so the labels keep aligning. */
.dropcap-mini { border-radius: 0 !important; background: transparent !important; color: var(--vu-ink); font-weight: 600; }

/* breadcrumbs: the active crumb lives in a fixed col-sm-3, so long page titles wrapped.
   Let both columns size to content instead. */
@media (min-width: 768px) {
	.breadcrumbs .row { display: flex; align-items: center; justify-content: flex-start; }
	.breadcrumbs .row > .col-sm-3, .breadcrumbs .row > .col-sm-9 { width: auto; float: none; flex: 0 1 auto; }
	.breadcrumbs .row > .col-sm-3 { white-space: nowrap; text-align: left; margin-right: auto; }
	.breadcrumbs .row > .col-sm-3 ul { display: block; text-align: left; padding-left: 0; }
	.breadcrumbs .row > .col-sm-9 { margin-left: auto; }
}
.breadcrumbs ul { margin: 0; }
.breadcrumbs li { font-size: 14px; }

/* Apartments mega-menu: Photos list is short, give the Airbnb list the room; capacity never wraps */
.vu-mega-cols > ul:first-child { flex: 0 0 28%; }
.vu-mega-cols > ul:last-child { flex: 1 1 auto; min-width: 0; }
.yamm li .dropdown-menu .yamm-content ul li a.vu-flat-row {
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
	column-gap: 20px;
}
.vu-flat-row .vu-muted:last-child { white-space: nowrap; }

/* Airbnb list: one grid for the whole list (subgrid rows) so columns line up across all flats */
@media (min-width: 768px) {
	.vu-mega-cols > ul:last-child {
		display: grid;
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) max-content;
		column-gap: 20px;
	}
	.vu-mega-cols > ul:last-child > li { display: contents; }
	.vu-mega-cols > ul:last-child > li.title { display: block; grid-column: 1 / -1; }
	.yamm li .dropdown-menu .yamm-content .vu-mega-cols > ul:last-child li a.vu-flat-row {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: subgrid;
	}
}

/* Ruby-flat: no shadow under the nav bar; one alternate surface tone everywhere (slider, breadcrumbs) */
.navbar.yamm, .navbar-default { box-shadow: none !important; border-bottom: 1px solid var(--vu-rule); }
.breadcrumbs { background-color: var(--vu-surface-alt); }

/* slider dots: visible on the sand background, large enough to hit */
.swiper-container .swiper-pagination-bullet {
	width: 16px;
	height: 16px;
	margin: 0 9px !important;
	background: transparent;
	border: 2px solid var(--vu-ink);
	opacity: .55;
	border-radius: 50%;
}
.swiper-container .swiper-pagination-bullet:hover { opacity: 1; }
.swiper-container .swiper-pagination-bullet.swiper-pagination-bullet-active {
	/* two classes, to outrank skin-red's own .bullet.bullet-active background */
	background: var(--vu-accent);
	border-color: var(--vu-accent);
	opacity: 1;
}
.swiper-container-horizontal > .swiper-pagination-bullets { bottom: 18px; }

/* slider arrows: dark chevrons in a white square so they read on the sand background (desktop only) */
@media (min-width: 768px) {
	.swiper-container .swiper-button-prev,
	.swiper-container .swiper-button-next {
		width: 48px;
		height: 48px;
		/* -24px centres the 48px button on top:50%; the extra -36px is half the dots strip above,
		   so the arrows stay centred on the slide instead of on the slide-plus-strip. */
		margin-top: -60px;
		background: #ffffff;
		border: 1px solid var(--vu-rule);
		background-image: none;
		opacity: .9;
		transition: opacity .15s ease, background-color .15s ease;
	}
	.swiper-container .swiper-button-prev:hover,
	.swiper-container .swiper-button-next:hover { opacity: 1; background-color: var(--vu-accent); border-color: var(--vu-accent); }
	/* On the first and last slide Swiper only dims the arrow (its own opacity .35)
	   and drops its pointer events. It still reads as a button, so people keep
	   clicking a control that cannot do anything. Take it away instead. */
	.swiper-container .swiper-button-prev.swiper-button-disabled,
	.swiper-container .swiper-button-next.swiper-button-disabled {
		visibility: hidden;
	}
	.swiper-container .swiper-button-prev::after,
	.swiper-container .swiper-button-next::after {
		content: "";
		position: absolute;
		top: 50%; left: 50%;
		width: 12px; height: 12px;
		border-right: 2px solid var(--vu-ink);
		border-bottom: 2px solid var(--vu-ink);
		transform: translate(-30%, -50%) rotate(135deg);
	}
	.swiper-container .swiper-button-next::after { transform: translate(-70%, -50%) rotate(-45deg); }
	.swiper-container .swiper-button-prev:hover::after,
	.swiper-container .swiper-button-next:hover::after { border-color: #ffffff; }
}

/* Apartments menu: one row per flat — name (+ alias) | capacity | Photos | Airbnb */
.yamm li .dropdown-menu .yamm-content ul.vu-flat-table { margin: 0; padding: 0; }
.vu-flat-table li.title h6 { margin-bottom: 12px; }
.yamm li .dropdown-menu .yamm-content ul.vu-flat-table > li.vu-flat {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto auto;
	column-gap: 28px;
	align-items: center;
	padding: 12px 0;
	border-top: 1px solid var(--vu-rule);
}
.vu-flat-name { display: flex; flex-direction: column; line-height: 1.35; }
.vu-flat-name b { font-size: 17px; font-weight: 500; color: var(--vu-ink); }
.vu-flat-name .vu-muted { font-size: 14px; color: #878c94; }
.vu-flat-cap { font-size: 15px; color: #878c94; white-space: nowrap; }
.yamm li .dropdown-menu .yamm-content ul.vu-flat-table li a.vu-flat-action {
	display: inline-block !important;
	padding: 9px 18px !important;
	font-size: 14px !important;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--vu-ink);
	background: #ffffff;
	border: 1px solid var(--vu-ink);
	line-height: 1.2 !important;
	white-space: nowrap;
	text-align: center;
	min-width: 96px;
}
.yamm li .dropdown-menu .yamm-content ul.vu-flat-table li a.vu-flat-action:hover { background: var(--vu-ink); color: #fff; }
.yamm li .dropdown-menu .yamm-content ul.vu-flat-table li a.vu-flat-airbnb { border-color: var(--vu-accent); color: var(--vu-accent); }
.yamm li .dropdown-menu .yamm-content ul.vu-flat-table li a.vu-flat-airbnb:hover { background: var(--vu-accent); color: #fff; }
.vu-flat-action .fa { font-size: 11px; margin-left: 4px; }
@media (max-width: 767px) {
	.yamm li .dropdown-menu .yamm-content ul.vu-flat-table > li.vu-flat { grid-template-columns: 1fr 1fr; row-gap: 8px; }
	.vu-flat-name { grid-column: 1 / -1; }
	.vu-flat-cap { grid-column: 1 / -1; }
}

/* dropdown / mega-menu panels: clear boundary against the page — hairline frame + soft shadow + top accent */
.yamm .dropdown-menu,
.yamm li .dropdown-menu {
	background: #ffffff;
	border: 1px solid var(--vu-rule) !important;
	border-top: 2px solid var(--vu-accent) !important;
	box-shadow: 0 12px 32px rgba(29, 33, 41, .14) !important;
	border-radius: 0 !important;
}
.yamm .yamm-fw .dropdown-menu { left: 0; right: 0; }