.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;
}

.vu-magnifier {
	position: absolute;
	background: white;
	padding: 18px 18px;
	margin: 1px;
	border: thin;
}

.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 */
.vu-feature-list {
	list-style: none;
	padding: 0;
	margin: 0 0 18px 0;
}

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

.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-img-mobile .vu-magnifier {
		display: none;
	}

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

@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); }
}

/* "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;
	}
}

/* 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. */
.vu-faq-logo {
	display: block;
	margin: 0 0 14px auto;
	max-width: 100%;
	height: auto;
}

/* 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: 420px;
}
.vu-trust-menu li a {
	display: grid;
	grid-template-columns: 3.6em 7.5em 1fr auto;
	column-gap: 10px;
	align-items: center;
	white-space: nowrap;
}
.vu-trust-menu .label {
	display: inline-block;
	text-align: center;
	padding: 4px 6px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	border-radius: 0;
}
.vu-trust-menu .vu-text {
	white-space: normal;
}
.vu-trust-menu li.divider {
	margin: 8px 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; }
}

/* 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: 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;
}

/* 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); }
.vu-faq-logo { margin-top: var(--vu-s5); opacity: .85; }

/* ---- 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;
}
.vu-flat-title rt {
	font-family: var(--vu-font-caps);
	font-size: 15px;
	font-weight: 400;
	font-variation-settings: normal;
	letter-spacing: 0.08em;
	line-height: 1.3;
	color: #878c94;
	margin-bottom: var(--vu-s1);
	text-align: left;
}
.section .col-sm-12 > p, .section .col-sm-12 > h1 { max-width: var(--vu-measure); }
.section .col-sm-12 > h1 + p { font-size: 19px; color: var(--vu-ink); }
.dropcap-mini { border-radius: 0 !important; background: var(--vu-ink) !important; color: #fff; 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); }
	.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; }