/* Sea Smeralda · Beach Apartments — stylesheet
   Style: cream ground, navy primary, sea-green accent used only as a hairline / marker / focus
   ring, never as text on cream. Playfair Display for names and titles, Montserrat for body,
   kickers and labels. Photographs carry the page. Radius 4px throughout. */

/* ---------- 1. Fonts (self-hosted, no third-party request) ---------- */

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/playfair-display-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, 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: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/playfair-display-latin-ext-400-normal.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: "Playfair Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/playfair-display-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, 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: "Playfair Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/playfair-display-latin-ext-500-normal.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: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/playfair-display-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, 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: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/playfair-display-latin-ext-400-italic.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: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, 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: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext-400-normal.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: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, 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: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext-500-normal.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: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, 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: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext-600-normal.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;
}

/* ---------- 2. Tokens ---------- */

:root {
  --ground: #F6F5F2;
  --card: #FFFFFF;
  --primary: #1F2F4A;
  --primary-ink: #16223A;
  --accent: #6EC1A8;
  --muted: #5B6475;
  --line: #E4DED3;
  --whatsapp-ink: #FFFFFF;

  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", -apple-system, "Helvetica Neue", Arial, sans-serif;

  --radius: 4px;
  --radius-lg: 4px;

  --gutter: 16px;
  --maxw: 1200px;

  --shadow-card: 0 1px 2px rgba(31, 47, 74, 0.06), 0 8px 24px rgba(31, 47, 74, 0.07);
  --shadow-lift: 0 14px 36px rgba(31, 47, 74, 0.16);

  --dur: 220ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}

/* ---------- 3. Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--primary);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* Focus-visible: sea green ring everywhere, on cream, on photos, on navy */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--primary);
  letter-spacing: 0.005em;
}

.kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.kicker--on-photo { color: #FFFFFF; opacity: 0.92; }

.muted { color: var(--muted); }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: 64px 0;
}
.section--tight { padding: 40px 0; }
@media (min-width: 900px) {
  .section { padding: 96px 0; }
  .section--tight { padding: 56px 0; }
}

.section-head {
  max-width: 640px;
  margin: 0 0 32px;
}
.section-head .kicker { margin-bottom: 10px; }
.section-head h2 {
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.2;
}
.section-head p { margin-top: 14px; font-size: 16px; color: var(--muted); }

hr.hairline {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* ---------- 4. Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #FFFFFF; }
.btn-primary:hover { background: var(--primary-ink); }
.btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: #FFFFFF; }
.btn-outline-light { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,0.7); }
.btn-outline-light:hover { background: rgba(255,255,255,0.14); }
.btn-whatsapp { background: var(--primary); color: var(--whatsapp-ink); }
.btn-whatsapp:hover { background: var(--primary-ink); }
/* On the navy enquiry band a navy button would disappear into it. */
.enquiry-band .btn-whatsapp { background: #FFFFFF; color: var(--primary); }
.enquiry-band .btn-whatsapp:hover { background: rgba(255,255,255,0.88); }
.btn-whatsapp::before {
  content: "";
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16.02 3C9.4 3 4 8.36 4 15c0 2.3.64 4.44 1.75 6.28L4 29l7.9-1.67A11.9 11.9 0 0 0 16.02 27C22.65 27 28 21.64 28 15S22.65 3 16.02 3zm0 21.6c-1.93 0-3.75-.52-5.32-1.44l-.38-.22-4.7 1 1-4.58-.25-.4A9.5 9.5 0 0 1 6.4 15c0-5.3 4.32-9.6 9.62-9.6 5.29 0 9.6 4.3 9.6 9.6 0 5.3-4.31 9.6-9.6 9.6zm5.27-7.19c-.29-.15-1.7-.84-1.97-.93-.26-.1-.46-.15-.65.14-.19.29-.75.93-.92 1.12-.17.19-.34.22-.63.07-.29-.14-1.22-.45-2.32-1.43-.86-.76-1.44-1.7-1.6-1.99-.17-.29-.02-.44.13-.59.13-.13.29-.34.43-.5.14-.17.19-.29.29-.48.1-.19.05-.36-.02-.5-.07-.15-.65-1.57-.9-2.15-.24-.57-.48-.5-.65-.5-.17-.01-.36-.01-.55-.01-.19 0-.5.07-.76.36-.26.29-1 .98-1 2.38 0 1.4 1.02 2.76 1.16 2.95.14.19 2.01 3.07 4.87 4.3.68.29 1.21.47 1.62.6.68.22 1.3.19 1.79.11.55-.08 1.7-.69 1.94-1.36.24-.67.24-1.24.17-1.36-.07-.12-.26-.19-.55-.34z'/></svg>") center/contain no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16.02 3C9.4 3 4 8.36 4 15c0 2.3.64 4.44 1.75 6.28L4 29l7.9-1.67A11.9 11.9 0 0 0 16.02 27C22.65 27 28 21.64 28 15S22.65 3 16.02 3zm0 21.6c-1.93 0-3.75-.52-5.32-1.44l-.38-.22-4.7 1 1-4.58-.25-.4A9.5 9.5 0 0 1 6.4 15c0-5.3 4.32-9.6 9.62-9.6 5.29 0 9.6 4.3 9.6 9.6 0 5.3-4.31 9.6-9.6 9.6zm5.27-7.19c-.29-.15-1.7-.84-1.97-.93-.26-.1-.46-.15-.65.14-.19.29-.75.93-.92 1.12-.17.19-.34.22-.63.07-.29-.14-1.22-.45-2.32-1.43-.86-.76-1.44-1.7-1.6-1.99-.17-.29-.02-.44.13-.59.13-.13.29-.34.43-.5.14-.17.19-.29.29-.48.1-.19.05-.36-.02-.5-.07-.15-.65-1.57-.9-2.15-.24-.57-.48-.5-.65-.5-.17-.01-.36-.01-.55-.01-.19 0-.5.07-.76.36-.26.29-1 .98-1 2.38 0 1.4 1.02 2.76 1.16 2.95.14.19 2.01 3.07 4.87 4.3.68.29 1.21.47 1.62.6.68.22 1.3.19 1.79.11.55-.08 1.7-.69 1.94-1.36.24-.67.24-1.24.17-1.36-.07-.12-.26-.19-.55-.34z'/></svg>") center/contain no-repeat;
  flex: none;
}
.btn-block { width: 100%; }
.btn-sm { min-height: 38px; padding: 8px 18px; font-size: 12px; }

/* ---------- 5. Preview bar ---------- */

.preview-bar {
  position: fixed; left: 12px; bottom: 12px; z-index: 200; border-radius: 4px; pointer-events: none;
  background: var(--primary);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  padding: 6px 10px;
  font-size: 11px;
}
.preview-bar strong { color: var(--accent); }

/* ---------- 6. Header ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 0;
  background: transparent;
  transition: background var(--dur) var(--ease), padding var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* 27.09.2026 — Keno: "oberen Banner ganz nach oben": the preview note no longer sits above the header; it is a small
   chip at the bottom left (as on the HF sites), so the header starts at the top edge. */
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-header.is-solid {
  background: rgba(246, 245, 242, 0.96);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  backdrop-filter: saturate(160%) blur(8px);
  box-shadow: 0 1px 0 var(--line);
  padding: 12px 0;
}
.site-header:not(.is-solid):not(.no-hero) { padding: 22px 0; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.brand img { height: 32px; width: auto; }
@media (min-width: 640px) { .brand img { height: 40px; } }
.brand-word {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand-word .name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 22px;
  color: var(--primary);
}
.site-header:not(.is-solid) .brand-word .name,
.site-header:not(.is-solid) .brand-word .sub { color: #FFFFFF; }
.brand-word .sub {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}

.main-nav { display: none; }
@media (min-width: 1100px) {
  .main-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.03em;
  }
  .main-nav a { position: relative; padding: 4px 0; }
  .site-header:not(.is-solid) .main-nav a { color: #FFFFFF; }
  .main-nav a::after {
    content: "";
    position: absolute; left: 0; right: 100%; bottom: -2px;
    height: 1px; background: var(--accent);
    transition: right var(--dur) var(--ease);
  }
  .main-nav a:hover::after, .main-nav a.is-active::after { right: 0; }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lang-switch {
  display: flex;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.lang-switch a {
  padding: 3px 6px;
  border-radius: var(--radius);
  color: var(--muted);
}
.site-header:not(.is-solid) .lang-switch a { color: rgba(255,255,255,0.78); }
.lang-switch a.is-active { color: var(--primary); font-weight: 700; }
.site-header:not(.is-solid) .lang-switch a.is-active { color: #FFFFFF; }
.lang-switch span[aria-hidden] { color: var(--line); }
.site-header:not(.is-solid) .lang-switch span[aria-hidden] { color: rgba(255,255,255,0.4); }

.header-actions .btn { display: none; }
@media (min-width: 640px) {
  .header-actions .btn { display: inline-flex; }
}
/* Below 480px the header carries only the mark and the hamburger; language
   and the enquire button live in the mobile-nav drawer the hamburger opens. */
@media (max-width: 479px) {
  .header-actions .lang-switch { display: none; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex-direction: column;
  gap: 5px;
}
@media (min-width: 1100px) { .nav-toggle { display: none; } }
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--primary);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.site-header:not(.is-solid) .nav-toggle span { background: #FFFFFF; }
.mobile-nav.is-open ~ .site-header .nav-toggle span,
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--ground);
  padding: 96px 24px 40px;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  overflow-y: auto;
}
.mobile-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mobile-nav a {
  display: block;
  font-family: var(--font-heading);
  font-size: 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.mobile-nav .lang-switch { margin-top: 28px; font-size: 14px; }
.mobile-nav .btn { margin-top: 24px; }
@media (min-width: 1100px) { .mobile-nav { display: none; } }

/* ---------- 7. Hero (home) ---------- */

.hero {
  position: relative;
  min-height: 640px;
  min-height: min(88vh, 860px);
  display: flex;
  align-items: flex-end;
  color: #FFFFFF;
  overflow: hidden;
}
.hero picture, .hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 70%;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(20,30,48,0.50) 0%, rgba(20,30,48,0.22) 42%, rgba(20,30,48,0) 68%),
    linear-gradient(to top, rgba(20,30,48,0.62) 0%, rgba(20,30,48,0.28) 32%, rgba(20,30,48,0) 58%),
    linear-gradient(to bottom, rgba(20,30,48,0.45) 0, rgba(20,30,48,0) 140px);
}
.hero-inner {
  position: relative;
  z-index: 1;
  padding-top: 190px;
  padding-bottom: 72px;
  width: 100%;
}
.hero .kicker { color: rgba(255,255,255,0.88); margin-bottom: 18px; }
.hero h1 {
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1.08;
  color: #FFFFFF;
  max-width: 15ch;
  text-wrap: balance;   /* "A private way / to the sea." — no orphaned last word */
}
.hero .tagline {
  margin-top: 20px;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 2vw, 19px);
  max-width: 46ch;
  color: rgba(255,255,255,0.92);
}
.hero-actions { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }

/* Page hero (non-home): shorter, image + gradient */
.page-hero {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  color: #FFFFFF;
  overflow: hidden;
}
.page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,34,58,0.28) 0%, rgba(22,34,58,0.16) 30%, rgba(22,34,58,0.72) 100%);
}
.page-hero-inner { position: relative; z-index: 1; padding-top: 150px; padding-bottom: 48px; }
.page-hero h1 { color: #FFFFFF; font-size: clamp(28px, 4.4vw, 42px); }
.page-hero .kicker { color: rgba(255,255,255,0.88); margin-bottom: 14px; }

/* Fact row under hero (home) */
.fact-row {
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.fact-row .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 18px;
  padding-top: 28px;
  padding-bottom: 28px;
}
@media (min-width: 720px) {
  .fact-row .container { grid-template-columns: repeat(4, 1fr); }
}
.fact-row .fact {
  border-top: 2px solid var(--accent);
  padding-top: 14px;
}
.fact-row .fact .label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- 8. Grids & cards ---------- */

/* Grid/flex children default to a min-width equal to their content's
   min-content size, which lets a long option in a <select> or an
   unbroken word push its track wider than the viewport. Reset it so
   every column can actually shrink to the space it is given. */
.grid > *, .grid-2 > *, .grid-3 > *, .contact-form-wrap > *,
.unit-columns > *, .key-facts > *, .services-grid > *, .footer-grid > * {
  min-width: 0;
}

.grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}

.card-unit {
  display: block;
  background: var(--card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card-unit:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.card-unit .thumb {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--line);
}
.card-unit .thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease);
}
.card-unit:hover .thumb img { transform: scale(1.05); }
.card-unit .tag {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255,255,255,0.92);
  color: var(--primary);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--radius);
}
.card-unit .body { padding: 20px 22px 22px; }
.card-unit h3 {
  font-size: 20px;
  line-height: 1.25;
}
.card-unit .specs {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--muted);
}
.card-unit .view {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
.card-unit .price {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-unit .price strong { font-family: var(--font-heading); font-size: 16px; font-weight: 500; }
.card-unit .cin-chip {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.apartments-group { margin-bottom: 12px; }
.apartments-group + .apartments-group { margin-top: 64px; }

/* ---------- 9. Teaser blocks (residence / services / area) ---------- */

.teaser {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
@media (min-width: 860px) {
  .teaser { grid-template-columns: 1.1fr 1fr; align-items: stretch; }
  .teaser.is-reverse { grid-template-columns: 1fr 1.1fr; }
  .teaser.is-reverse .teaser-media { order: 2; }
}
.teaser-media { position: relative; min-height: 260px; }
.teaser-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.teaser-body { padding: 40px 32px; display: flex; flex-direction: column; justify-content: center; }
.teaser-body h2 { font-size: clamp(22px, 2.6vw, 28px); margin-top: 10px; }
.teaser-body p { margin-top: 14px; color: var(--muted); }
.teaser-body .btn { margin-top: 22px; align-self: flex-start; }
.teaser + .teaser { margin-top: 28px; }

/* ---------- 10. Host block ---------- */

.host-block {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  box-shadow: var(--shadow-card);
}
.host-block img {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none;
}
.host-block .info { flex: 1 1 260px; }
.host-block .info .kicker { display: block; margin-bottom: 4px; }
.host-block .info h3 { font-size: 20px; }
.host-block .info p { margin-top: 6px; color: var(--muted); font-size: 14.5px; }
.host-block .actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- 11. Enquiry band ---------- */

.enquiry-band {
  background: var(--primary);
  color: #FFFFFF;
  text-align: center;
}
.enquiry-band h2 { color: #FFFFFF; font-size: clamp(24px, 3.2vw, 32px); }
.enquiry-band p { margin-top: 12px; color: rgba(255,255,255,0.78); max-width: 52ch; margin-left: auto; margin-right: auto; }
.enquiry-band .actions { margin-top: 26px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- 12. Footer ---------- */

.site-footer {
  background: var(--card);
  border-top: 1px solid var(--line);
  padding: 56px 0 28px;
}
.footer-grid {
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
}
.footer-brand .brand-word .name { color: var(--primary); }
.footer-brand p { margin-top: 14px; color: var(--muted); font-size: 14px; max-width: 32ch; }
.footer-col h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 14px;
}
.footer-col ul li { margin-bottom: 9px; }
.footer-col a { color: var(--muted); font-size: 14.5px; overflow-wrap: anywhere; }
.footer-col a:hover { color: var(--primary); }
.footer-col a.email { display: inline-block; max-width: 100%; }
.footer-bottom {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--muted);
}
.footer-bottom .legal-links { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; }
.footer-bottom .legal-links a { color: var(--muted); }
.footer-bottom .legal-links a:hover { color: var(--primary); }
.footer-note {
  margin-top: 18px;
  font-size: 12px;
  color: var(--muted);
  max-width: 70ch;
}

/* ---------- 13. Unit page ---------- */

.unit-head {
  padding-top: 118px;
}
.has-preview-bar .unit-head { padding-top: 150px; }
.unit-head .container { padding-top: 24px; padding-bottom: 24px; }
.breadcrumb { font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--primary); }
.unit-head h1 { font-size: clamp(28px, 4vw, 40px); }
.unit-head .specs-line { margin-top: 10px; color: var(--muted); font-size: 15px; }
.unit-head .cin-line { margin-top: 10px; font-size: 12.5px; color: var(--muted); letter-spacing: 0.02em; }
.unit-head .cin-line strong { color: var(--primary); font-weight: 600; }
.unit-head .cin-line.is-pending {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Unit gallery — one combined mosaic (the lead photo is its first, large
   tile). Mobile-first: a horizontal scroll-snap strip of every photo, with
   a "current / total" counter. From 768px it becomes a 4x2 grid: the lead
   photo spans the left half (2x2), the next four photos fill the right
   half one each, and photos beyond the 5th stay in the DOM (for the
   lightbox's arrow keys) but are hidden, behind a small pill on tile 5. */
.gallery-mosaic-wrap { position: relative; margin-top: 10px; }
.gallery-mosaic {
  display: flex;
  gap: 8px;
  height: 260px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
}
.gallery-mosaic::-webkit-scrollbar { display: none; }
.gallery-mosaic > a {
  position: relative;
  display: block;
  flex: 0 0 82%;
  scroll-snap-align: center;
  border-radius: var(--radius);
  overflow: hidden;
}
.gallery-mosaic > a img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); }
.gallery-mosaic > a:hover img { transform: scale(1.04); }
.gallery-mosaic .show-all-pill {
  position: absolute; right: 8px; bottom: 8px;
  background: var(--ground); color: var(--primary);
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  padding: 6px 11px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(22,34,58,0.22);
}
.mosaic-counter {
  position: absolute; top: 12px; right: 12px;
  background: rgba(22,34,58,0.62); color: #FFFFFF;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
  padding: 5px 10px; border-radius: 999px;
}
@media (min-width: 768px) {
  .gallery-mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 4px;
    height: 480px;
    overflow: hidden;
    border-radius: var(--radius-lg);
  }
  .gallery-mosaic > a { flex: initial; scroll-snap-align: none; border-radius: 0; }
  .gallery-mosaic > a:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
  .gallery-mosaic > a:nth-child(2) { grid-column: 3; grid-row: 1; }
  .gallery-mosaic > a:nth-child(3) { grid-column: 4; grid-row: 1; }
  .gallery-mosaic > a:nth-child(4) { grid-column: 3; grid-row: 2; }
  .gallery-mosaic > a:nth-child(5) { grid-column: 4; grid-row: 2; }
  .gallery-mosaic > a:nth-child(n+6) { display: none; }
  .mosaic-counter { display: none; }
}

.unit-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  margin-top: 56px;
  align-items: start;
}
@media (min-width: 960px) {
  .unit-layout { grid-template-columns: 1.7fr 1fr; }
}

.key-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 16px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) { .key-facts { grid-template-columns: repeat(6, 1fr); } }
.key-facts .kf .label {
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.key-facts .kf .value { margin-top: 5px; font-size: 15px; color: var(--primary); font-weight: 500; }

.unit-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 40px;
}
@media (min-width: 640px) { .unit-columns { grid-template-columns: 1fr 1fr; } }
.unit-columns h3 { font-size: 17px; margin-bottom: 14px; }
.unit-columns ul li {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--primary);
}
.unit-columns ul li:last-child { border-bottom: 0; }

.description { margin-top: 40px; max-width: 68ch; color: var(--primary); font-size: 16px; }
.description p + p { margin-top: 14px; }

.rates-block {
  margin-top: 40px;
  padding: 24px;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.rates-block h3 { font-size: 16px; margin-bottom: 12px; }
.rates-block .row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.rates-block .row:last-child { border-bottom: 0; }
.rates-block .row .v { font-weight: 600; color: var(--primary); }

.fact-line { padding: 10px 0; border-bottom: 1px solid var(--line); }
.fact-line:last-child { border-bottom: 0; }
.fact-line .label { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.fact-line .value { margin-top: 4px; font-size: 14.5px; color: var(--primary); }

.enquiry-box {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 26px;
}
/* sticky only when the whole box fits the window (it carries 8 fields since 10.10.2026) */
@media (min-width: 960px) and (min-height: 1020px) {
  .enquiry-box { position: sticky; top: 110px; }
}
.enquiry-box h3 { font-size: 18px; }
.enquiry-box .price-line { margin-top: 8px; font-family: var(--font-heading); font-size: 22px; color: var(--primary); }
.enquiry-box .price-line span { font-family: var(--font-body); font-size: 13px; color: var(--muted); font-weight: 400; }
.enquiry-box .price-line .sep { display: none; }
.enquiry-box .price-line .min-stay { display: block; margin-top: 4px; }
.enquiry-box form { margin-top: 18px; display: grid; gap: 12px; }
.enquiry-box .btn { margin-top: 6px; }
.enquiry-box .form-note { margin-top: 14px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }

.other-units { margin-top: 96px; }

/* ---------- 14. Forms ---------- */

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field input, .field select, .field textarea { width: 100%; max-width: 100%; min-width: 0; }
.field.field--row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field label {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.field input, .field select, .field textarea {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 13px;
  background: var(--ground);
  font-size: 14.5px;
  color: var(--primary);
  transition: border-color var(--dur) var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  border-color: var(--accent);
}

.contact-form-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
}
@media (min-width: 900px) { .contact-form-wrap { grid-template-columns: 1.1fr 0.9fr; } }
.contact-form { background: var(--card); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-card); }
.contact-form form { display: grid; gap: 16px; }
.contact-form .grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 540px) { .contact-form .grid-2 { grid-template-columns: 1fr 1fr; } }
.contact-form .grid-3 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .contact-form .grid-3 { grid-template-columns: 1fr 1fr 1fr; } }
.contact-form .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.contact-form .form-note { margin-top: 6px; font-size: 12.5px; color: var(--muted); }

.contact-aside { display: flex; flex-direction: column; gap: 22px; }
.contact-card {
  background: var(--card); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-card);
}
.contact-card h3 { font-size: 15px; margin-bottom: 10px; }
.contact-card p { font-size: 14.5px; color: var(--muted); }
.contact-card a.line { display: block; margin-top: 6px; font-size: 14.5px; color: var(--primary); }

/* ---------- 15. Lightbox ---------- */

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15, 20, 30, 0.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox figure { max-width: min(92vw, 1200px); max-height: 84vh; margin: 0; position: relative; }
.lightbox img { max-width: 100%; max-height: 84vh; width: auto; height: auto; margin: 0 auto; border-radius: var(--radius); display: block; }
.lightbox figcaption { color: rgba(255,255,255,0.75); font-size: 13px; text-align: center; margin-top: 12px; }
.lightbox .lb-close, .lightbox .lb-prev, .lightbox .lb-next {
  position: absolute;
  color: #FFFFFF;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.lightbox .lb-close:hover, .lightbox .lb-prev:hover, .lightbox .lb-next:hover { background: rgba(255,255,255,0.18); }
.lightbox .lb-close { top: -56px; right: 0; }
.lightbox .lb-prev { left: -60px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: -60px; top: 50%; transform: translateY(-50%); }
@media (max-width: 720px) {
  .lightbox .lb-close { top: 14px; right: 14px; }
  .lightbox .lb-prev { left: 8px; top: 50%; }
  .lightbox .lb-next { right: 8px; top: 50%; }
}
.lightbox .lb-counter {
  position: absolute; bottom: -40px; left: 0; right: 0; text-align: center;
  color: rgba(255,255,255,0.6); font-size: 12px; letter-spacing: 0.06em;
}

/* ---------- 16. Legal pages ---------- */

.prose {
  max-width: 68ch;
  font-size: 16px;
  color: var(--primary);
}
.prose h1 { font-size: clamp(26px, 3.6vw, 34px); margin-bottom: 8px; }
.prose h2 { font-size: 19px; margin-top: 34px; margin-bottom: 10px; }
.prose p, .prose li { margin-top: 12px; color: var(--primary); }
.prose ul, .prose ol { padding-left: 22px; list-style: disc; }
.prose ol { list-style: decimal; }
.prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.prose .updated { color: var(--muted); font-size: 13.5px; margin-top: 4px; }

.placeholder {
  background: #FBEFD9;
  color: #9A5B12;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  border: 1px solid #F1D8A6;
}
.draft-flag {
  margin-bottom: 28px;
  padding: 14px 18px;
  background: #FBEFD9;
  border: 1px solid #F1D8A6;
  border-radius: var(--radius);
  color: #7A4A0C;
  font-size: 13.5px;
  line-height: 1.55;
}

/* ---------- 17. Misc page bits ---------- */

.area-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .area-list { grid-template-columns: 1fr 1fr; } }
.area-list li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.area-list li > span:first-child { flex: 0 1 auto; }
.area-list li .d { color: var(--muted); text-align: right; flex: 1 1 auto; min-width: 0; }

.services-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 720px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.service-card { background: var(--card); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-card); }
.service-card h3 { font-size: 17px; }
.service-card p { margin-top: 10px; color: var(--muted); font-size: 14.5px; }

.map-line {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  padding: 20px 24px; background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}

.simple-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 720px) { .simple-gallery { grid-template-columns: repeat(3, 1fr); } }
.simple-gallery a { position: relative; display: block; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; }
.simple-gallery a img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); }
.simple-gallery a:hover img { transform: scale(1.04); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--primary); color: #fff; padding: 10px 16px; z-index: 300; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

@media (max-width: 720px) {
  body { font-size: 16px; }
}

/* ---------- Review fixes, 27.09.2026 (orchestrator) ---------- */
/* Header button over the hero photo: navy outline disappears on the photo — light outline until solid */
.site-header:not(.is-solid) .header-actions .btn {
  background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,0.75);
}
.site-header:not(.is-solid) .header-actions .btn:hover { background: rgba(255,255,255,0.14); }
.hero .tagline { text-shadow: 0 1px 12px rgba(20,30,48,0.35); }

/* Featured card: first card spans the row when 10 cards would leave one alone in a 3-column grid */
.card-unit .tagline {
  margin-top: 10px; font-family: var(--font-heading); font-style: italic;
  font-size: 16px; line-height: 1.5; color: var(--text);
}
@media (min-width: 900px) {
  .grid--3 > .card-unit--featured {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 2fr 1fr;
  }
  .card-unit--featured .thumb { aspect-ratio: auto; min-height: 360px; }
  .card-unit--featured .body { padding: 36px 36px; display: flex; flex-direction: column; justify-content: center; }
  .card-unit--featured h3 { font-size: 28px; }
}


/* 27.09.2026 — the back link on the apartment pages (Keno: "Zurück-Button neu machen"), replacing the breadcrumb.
   A quiet outlined button; site.js sends it back in history when the visitor came from this site, otherwise to the
   list of apartments. */
.back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; margin-bottom: 20px;
  border: 1px solid var(--line, #E4DED3); border-radius: 4px; color: var(--primary); text-decoration: none;
  font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.back-link:hover { border-color: var(--primary); background: rgba(31, 47, 74, 0.04); }

/* 27.09.2026 — the address, map and route links on every apartment of the residence */
.unit-location { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.unit-location h3 { font-family: var(--font-heading); font-weight: 500; font-size: 22px; margin: 0 0 8px; }
.unit-location .address { margin: 0 0 16px; font-weight: 500; }
.unit-location .map { display: block; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); }
.unit-location .map img { display: block; width: 100%; height: auto; }
.unit-location .map-credit { font-size: 11px; color: var(--muted); margin: 6px 0 16px; }
.unit-location .route-links { display: flex; flex-wrap: wrap; gap: 12px; }
.unit-location .note { font-size: 14px; color: var(--muted); margin: 14px 0 0; }

/* 27.09.2026 — Keno: "Schreibschrift von der Wix-Page teilweise nutzen, das ist Signature-Schrift". The Wix site set its
   accents in Snell Roundhand (a licensed Monotype face that cannot be self-hosted); Great Vibes (SIL OFL) is the free
   formal-script look-alike. Used sparingly: Irene's name as a signature and the footer line — never for body text or
   anything that has to be read quickly. */
@font-face { font-family: "Great Vibes"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/great-vibes-latin-400-normal.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: "Great Vibes"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/great-vibes-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
.script { font-family: "Great Vibes", "Snell Roundhand", cursive; font-weight: 400; letter-spacing: 0; text-transform: none; }
.host-block h3.signature { font-size: 40px; line-height: 1.1; margin: 4px 0 10px; color: var(--primary); }
.footer-brand p.script { font-size: 26px; line-height: 1.3; margin-top: 10px; }
.site-footer a.social { display: inline-flex; align-items: center; gap: 8px; }
.site-footer a.social:hover { color: var(--accent); }

/* ---------- 15. Request form: honeypot, status, secondary buttons (10.10.2026) ---------- */

.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.field.is-required > label::after { content: " *"; }
.enquiry-box .req-sub, .contact-form .req-sub { margin-top: 8px; font-size: 14px; color: var(--muted); line-height: 1.55; }
.contact-form .req-title { font-size: 22px; }
.contact-form form { margin-top: 18px; }
.enquiry-box form [data-submit], .contact-form form [data-submit] { margin-top: 6px; }
.form-status { font-size: 13.5px; line-height: 1.55; color: var(--primary); padding: 12px 14px; border-radius: var(--radius); background: var(--ground); border: 1px solid var(--line); }
.form-status[hidden] { display: none; }
.form-status.is-error { border-color: var(--primary); }
.form-success { font-size: 15px; line-height: 1.6; padding: 18px 16px; border-radius: var(--radius); background: var(--ground); border: 1px solid var(--accent); margin-top: 18px; }
.form-success:focus { outline: none; }
.alt-send { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.alt-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.alt-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.alt-send.is-emphasised .btn { background: var(--primary); color: #FFFFFF; border-color: var(--primary); }
.alt-send.is-emphasised .btn:hover { background: var(--primary-ink); }
.btn[disabled] { opacity: 0.6; cursor: default; }

/* ---------- 16. Availability calendar (10.10.2026) ---------- */

.availability { padding-top: 24px; }
.cal { position: relative; max-width: 860px; }
.cal-bar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.cal-nav {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  font-size: 22px; line-height: 1; color: var(--primary);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cal-nav:hover:not([disabled]) { border-color: var(--primary); }
.cal-nav[disabled] { opacity: 0.35; cursor: default; }
.cal-months { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 700px) { .cal-months { grid-template-columns: 1fr 1fr; gap: 40px; } }
.cal-month { min-width: 0; background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 18px 16px 16px; }
.cal-month-name { font-family: var(--font-heading); font-weight: 500; font-size: 18px; text-align: center; margin-bottom: 12px; text-transform: capitalize; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-wd { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-align: center; padding: 4px 0 6px; }
.cal-day {
  position: relative; min-height: 44px; aspect-ratio: 1 / 1; max-height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; border-radius: var(--radius); color: var(--primary); background: transparent;
  transition: background var(--dur) var(--ease);
}
.cal-day:hover:not([disabled]):not(.is-booked) { background: var(--ground); box-shadow: inset 0 0 0 1px var(--line); }
.cal-day[disabled] { color: #B9B6AE; cursor: default; }
.cal-day.is-booked { background: #ECE8DF; color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; cursor: default; }
.cal-day.is-booked.is-pickable { cursor: pointer; }
.cal-day.in-range { background: rgba(31, 47, 74, 0.09); }
.cal-day.is-booked.in-range { background: #E3DDD0; }
.cal-day.is-start, .cal-day.is-end { background: var(--primary); color: #FFFFFF; text-decoration: none; }
.cal-day.is-today::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.cal-blank { min-height: 44px; }
.cal-legend { display: flex; gap: 24px; margin-top: 16px; font-size: 13px; color: var(--muted); }
.cal-legend li { display: inline-flex; align-items: center; gap: 8px; }
.cal-legend .sw { width: 18px; height: 18px; border-radius: var(--radius); display: inline-block; }
.cal-legend .sw-free { background: var(--card); border: 1px solid var(--line); }
.cal-legend .sw-booked { background: #ECE8DF; position: relative; }
.cal-legend .sw-booked::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; border-top: 1px solid var(--muted); }
.cal-note, .cal-warn, .cal-summary { margin-top: 14px; font-size: 14px; line-height: 1.55; }
.cal-note { color: var(--muted); }
.cal-warn { color: var(--primary); padding: 10px 14px; border: 1px solid var(--primary); border-radius: var(--radius); background: var(--card); }
.cal-summary a { text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.cal [hidden] { display: none !important; }

/* ---------- 18. Area page: hero, choice tiles, map + list (Rev 9.1, 10.10.2026) ---------- */
/* Principle (Keno, 10.10.2026): the page shows one thing at a time. Six tiles first; nothing is listed and nothing but the
   residence is on the map until a tile is chosen. Navy markers with white numbers match the numbered list; the residence is a
   sea-green ring. No category colours, no legend. */

.page-hero--area { min-height: 440px; }
@media (min-width: 900px) { .page-hero--area { min-height: 520px; } }
.page-hero--area .page-hero-inner { padding-bottom: 56px; }
.area-hero-lead { margin-top: 14px; max-width: 46ch; font-size: clamp(16px, 2vw, 19px); color: rgba(255,255,255,0.94); }

/* the choice */
.area-choose { padding: 48px 0 24px; }
@media (min-width: 900px) { .area-choose { padding: 72px 0 32px; } }
.area-choose-head { max-width: 56ch; margin-bottom: 24px; }
.area-choose-head h2 { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.2; }
.area-choose-head p { margin-top: 8px; font-size: 15px; color: var(--muted); }
.area-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .area-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.area-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 128px; padding: 16px 14px 14px; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--primary);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (min-width: 700px) { .area-tile { min-height: 148px; padding: 22px 22px 18px; gap: 8px; } }
.area-tile:hover { border-color: var(--primary); }
.area-tile:focus-visible, .area-subchip:focus-visible, .area-more:focus-visible, .area-row-name:focus-visible, .area-change:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.area-tile-title { font-family: var(--font-heading); font-size: 18px; line-height: 1.25; }
.area-tile-line { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.area-tile-count { margin-top: auto; padding-top: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 700px) { .area-tile-title { font-size: 22px; } .area-tile-line { font-size: 14px; } .area-tile-count { font-size: 11px; } }
.area-tile.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.area-tile.is-on .area-tile-line, .area-tile.is-on .area-tile-count { color: rgba(255,255,255,0.78); }

/* the one recommendation, always under the tiles */
.area-boat { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.area-boat h3 { font-size: 20px; line-height: 1.3; }
.area-boat p { font-size: 14.5px; line-height: 1.6; max-width: 62ch; }
.area-boat[hidden] { display: none; }
.area-boat-rentals { color: var(--muted); }
.area-boat--in { margin: 0; padding: 16px 0 14px; border-top: 0; border-bottom: 1px solid var(--line); grid-template-columns: minmax(0, 1fr); }
.area-boat--in h3 { grid-row: auto; font-size: 18px; }
.area-boat-rentals a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .area-boat:not(.area-boat--in) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px 40px; align-items: start; }
  .area-boat:not(.area-boat--in) h3 { grid-row: 1 / span 3; }
}

/* list + map */
.area-explore { padding: 16px 0 56px; }
.area-explore-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.area-map-col { order: -1; min-width: 0; }
.area-explore.is-idle .area-lists { display: none; }
@media (min-width: 900px) {
  .area-explore { padding: 24px 0 72px; }
  .area-explore-grid { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: 40px; align-items: start; }
  .area-explore.is-idle .area-explore-grid { grid-template-columns: minmax(0, 1fr); }
  .area-map-col { order: 0; position: sticky; top: 88px; }
}

.area-map-wrap { position: relative; }
.area-map {
  position: relative; width: 100%; height: 45vh; min-height: 300px; max-height: 480px; background: #CFE3EB; border-radius: var(--radius);
  box-shadow: var(--shadow-card); overflow: hidden; z-index: 1; font-family: var(--font-body);
}
@media (min-width: 900px) { .area-map { height: calc(100vh - 128px); min-height: 440px; max-height: 660px; } }
.area-explore.is-idle .area-map { height: 300px; min-height: 0; }
@media (min-width: 900px) { .area-explore.is-idle .area-map { height: 420px; } }
.area-map:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.area-map .leaflet-container, .area-map.leaflet-container { font-family: var(--font-body); background: #CFE3EB; }
.area-map.is-sat { background: #19313f; }
.area-idle { position: absolute; left: 12px; bottom: 12px; z-index: 500; margin: 0; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,0.94); box-shadow: 0 1px 6px rgba(31,47,74,0.2); font-size: 12.5px; line-height: 1.4; color: var(--primary); pointer-events: none; max-width: calc(100% - 76px); }
.area-idle[hidden] { display: none; }
@media (min-width: 900px) { .area-idle { top: 12px; bottom: auto; } }
.area-noscript { padding: 16px 0; font-size: 14.5px; color: var(--muted); }
.area-noscript a { text-decoration: underline; }
.area-map-credit { margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: var(--muted); }

/* layer switch (small) and zoom */
.area-layer { display: inline-flex; background: rgba(255,255,255,0.94); border-radius: 999px; padding: 2px; box-shadow: 0 1px 5px rgba(31,47,74,0.2); margin: 10px 10px 0 0 !important; }
.area-layer button { min-height: 30px; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; color: var(--primary); }
.area-layer button.is-on { background: var(--primary); color: #fff; }
.area-layer button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.area-map .leaflet-bar { border: 0; box-shadow: 0 1px 5px rgba(31,47,74,0.2); border-radius: var(--radius); overflow: hidden; margin: 0 10px 14px 0; }
.area-map .leaflet-bar a { width: 34px; height: 34px; line-height: 34px; color: var(--primary); font-size: 18px; }

/* popups */
.area-map .leaflet-popup-content-wrapper { border-radius: var(--radius); box-shadow: var(--shadow-lift); color: var(--primary); }
.area-map .leaflet-popup-content { margin: 14px 16px; font-size: 13.5px; line-height: 1.5; }
.area-map .leaflet-popup-close-button { width: 32px; height: 32px; font-size: 20px; line-height: 32px; color: var(--muted); }
.area-pop h4 { font-size: 16px; margin: 0 14px 2px 0; line-height: 1.3; }
.area-pop-meta { color: var(--muted); font-size: 12.5px; margin: 0; }
.area-pop-note { margin: 8px 0 0; font-size: 13px; }
.area-pop .area-tag { margin-top: 8px; }
.area-pop-links, .area-card-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.area-pop-links a, .area-card-links a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border: 1px solid var(--primary); border-radius: var(--radius);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--primary); background: transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.area-pop-links a:hover, .area-card-links a:hover { background: var(--primary); color: #fff; }
.area-tag { display: inline-block; padding: 1px 8px; border: 1px solid var(--accent); border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); background: rgba(110,193,168,0.14); white-space: nowrap; vertical-align: 1px; }

/* markers: navy, white number; the residence a sea-green ring */
.area-mk { background: none; border: 0; }
.area-mk span { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 1px; border-radius: 50%; background: var(--primary); color: #fff; font: 600 11px/1 var(--font-body); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(22,34,58,0.38); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.area-mk:hover span, .area-mk:focus span, .area-mk.is-hl span { transform: scale(1.2); box-shadow: 0 0 0 3px var(--accent), 0 1px 5px rgba(22,34,58,0.45); }
.area-mk:focus-visible { outline: none; }
.area-mk:focus-visible span { box-shadow: 0 0 0 3px var(--accent), 0 0 0 5px var(--primary); }
.area-res { background: none; border: 0; }
.area-res .ring { display: block; box-sizing: border-box; width: 22px; height: 22px; margin: 4px; border-radius: 50%; border: 5px solid var(--accent); background: #fff; box-shadow: 0 0 0 2px var(--primary), 0 1px 5px rgba(22,34,58,0.4); }
.area-res .lbl { position: absolute; left: 50%; top: 31px; transform: translateX(-50%); white-space: nowrap; font: 600 10px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); text-shadow: 0 0 3px #F6F5F2, 0 0 3px #F6F5F2, 0 0 2px #F6F5F2; }
.area-res:focus-visible { outline: none; }
.area-res:focus-visible .ring { box-shadow: 0 0 0 2px var(--primary), 0 0 0 5px var(--accent); }
.is-sat .area-res .lbl { color: #fff; text-shadow: 0 0 3px rgba(0,0,0,0.8), 0 1px 1px rgba(0,0,0,0.6); }

/* town labels: six, quiet */
.area-lbl { background: none; border: 0; pointer-events: none; }
.area-lbl span { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font: 600 10px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: #5B6475; text-shadow: 0 0 3px #F6F5F2, 0 0 3px #F6F5F2, 0 0 2px #F6F5F2, 0 0 2px #F6F5F2; }
.area-lbl.is-off { visibility: hidden; }
.is-sat .area-lbl span { color: #fff; text-shadow: 0 0 3px rgba(0,0,0,0.75), 0 0 2px rgba(0,0,0,0.75), 0 1px 1px rgba(0,0,0,0.6); }
.area-map.is-sat .leaflet-tile-pane { filter: brightness(1.35) contrast(1.08) saturate(1.25); }

.area-hint { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 1000; max-width: calc(100% - 32px); padding: 8px 16px; border-radius: 999px; background: rgba(31,47,74,0.92); color: #fff; font-size: 13px; text-align: center; pointer-events: none; }
.area-hint[hidden] { display: none; }
.area-hint, .area-map .leaflet-control { font-family: var(--font-body); }

/* the list of the chosen tile */
.area-pane[hidden], .area-row[hidden], .area-more[hidden] { display: none; }
.area-pane-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.area-pane-head h3 { font-size: 24px; line-height: 1.2; }
.area-count { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.area-change { margin-left: auto; padding: 6px 0; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.area-change:hover { color: var(--primary); }
.area-sub { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0 calc(var(--gutter) * -1); padding: 14px var(--gutter) 2px; overflow-x: auto; scrollbar-width: none; }
.area-sub::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .area-sub { flex-wrap: wrap; margin: 0; padding: 14px 0 2px; overflow: visible; } }
.area-subchip { flex: none; min-height: 36px; padding: 6px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--primary); white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.area-subchip:hover { border-color: var(--primary); }
.area-subchip.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.area-rows { margin-top: 6px; }
.area-row { padding: 14px 8px 14px 0; border-bottom: 1px solid var(--line); transition: background var(--dur) var(--ease); }
.area-row.is-hl, .area-row.is-sel { background: rgba(110,193,168,0.13); }
.area-row h4 { font-size: 17px; line-height: 1.3; }
.area-row-name { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 32px; text-align: left; font: inherit; color: inherit; }
button.area-row-name:hover .area-row-title { text-decoration: underline; text-underline-offset: 3px; }
.area-row-title { min-width: 0; overflow-wrap: anywhere; }
.area-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; font: 600 11.5px/1 var(--font-body); }
.area-num.is-none { width: 24px; height: 24px; background: none; position: relative; }
.area-num.is-none::after { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--muted); }
.area-row-meta, .area-row-note, .area-row-links { margin-left: 36px; }
.area-row-meta { margin-top: 2px; font-size: 13px; color: var(--muted); }
/* the walking tag is plain text in the meta line, not a pill: seven pills in ten rows were noise */
.area-row-meta .area-tag { padding: 0; border: 0; background: none; border-radius: 0; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); vertical-align: baseline; }
.area-row-meta .area-tag::before { content: "· "; font-weight: 400; color: var(--muted); }
.area-row-note { margin-top: 6px; font-size: 14px; line-height: 1.55; }
.area-row-links { display: flex; gap: 18px; margin-top: 6px; font-size: 13px; }
.area-row-links a { padding: 6px 0; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(31,47,74,0.4); }
.area-row-links a:hover { text-decoration-color: var(--primary); }
.area-more { margin-top: 18px; min-height: 40px; padding: 8px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--primary); }
.area-more:hover { border-color: var(--primary); }
.area-closing { padding-bottom: 72px; }

@media (prefers-reduced-motion: reduce) {
  .area-mk:hover span, .area-mk:focus span, .area-mk.is-hl span { transform: none; }
}

/* ---------- 19. Rev 10 (10.10.2026): cards with photo carousels, filters, unit page top, date-range picker, request sheet,
   residence hero. Benchmark: ../../2026-10-10_Design-Benchmark.md. Identity unchanged: cream, navy, sea green as hairline /
   marker only, Playfair + Montserrat, 4 px radius. Line icons: 20 px, 1.5 stroke, currentColor, functional only. ---------- */

.ic { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; color: var(--primary); }
.hl-row .ic, .cu-hl .ic { color: var(--accent); }
.link-btn { padding: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 3px; color: var(--primary); }
.block-title { font-size: 22px; line-height: 1.25; margin-bottom: 16px; }

/* cards */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 28px; }
@media (min-width: 720px) { .cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 32px; } }
@media (min-width: 720px) { .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; } }
.cards-group + .cards-group { margin-top: 72px; }
.cards-group-title { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.cards-group[hidden], .cu[hidden] { display: none; }
.cu { min-width: 0; }
.cu-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #E9E5DC; aspect-ratio: 4 / 3; }
.cu-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cu-track::-webkit-scrollbar { display: none; }
.cu-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: block; }
.cu-slide img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.cu:hover .cu-slide img { transform: scale(1.025); }
.cu-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.92); color: var(--primary);
  box-shadow: 0 2px 10px rgba(22,34,58,0.18); opacity: 0; transition: opacity var(--dur) var(--ease);
}
.cu-nav .ic { width: 18px; height: 18px; }
.cu-prev { left: 12px; } .cu-next { right: 12px; }
.cu-nav[hidden] { display: none; }
.cu-media:hover .cu-nav, .cu-nav:focus-visible { opacity: 1; }
@media (hover: none) { .cu-nav { display: none; } }
.cu-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.cu-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.55); box-shadow: 0 0 3px rgba(0,0,0,0.25); transition: background var(--dur), transform var(--dur); }
.cu-dots span.is-on { background: #FFFFFF; transform: scale(1.2); }
.cu-body { display: block; padding: 18px 2px 0; }
.cu-body h3 { font-size: 24px; line-height: 1.2; transition: color var(--dur) var(--ease); }
.cu-body:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--accent); }
.cu-facts { margin-top: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cu-facts .sep { color: var(--line); margin: 0 2px; }
.cu-view { margin-top: 8px; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.cu-view .ic { width: 16px; height: 16px; color: var(--muted); }
.cu-hl { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 22px; }
.cu-hl li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--primary); }
.cu-hl .ic { width: 18px; height: 18px; }
.cards--3 .cu-body h3 { font-size: 21px; }

/* apartments page */
.page-hero--short { min-height: 340px; }
.page-hero-lead { margin-top: 12px; max-width: 52ch; color: rgba(255,255,255,0.94); font-size: clamp(15px, 1.8vw, 18px); }
.filter-bar { position: sticky; top: 64px; z-index: 40; background: rgba(246,245,242,0.96); border-bottom: 1px solid var(--line); backdrop-filter: saturate(140%) blur(6px); -webkit-backdrop-filter: saturate(140%) blur(6px); }
.fb-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding-top: 12px; padding-bottom: 12px; }
.fb-guests { display: flex; align-items: center; gap: 10px; }
.fb-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.fb-segs { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.fb-seg { min-width: 40px; min-height: 38px; padding: 0 12px; font-size: 13.5px; color: var(--primary); border-left: 1px solid var(--line); }
.fb-seg:first-child { border-left: 0; }
.fb-seg.is-on { background: var(--primary); color: #FFFFFF; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 13.5px; color: var(--primary); transition: border-color var(--dur), background var(--dur), color var(--dur); }
.fb-chip .ic { width: 17px; height: 17px; }
.fb-chip:hover { border-color: var(--primary); }
.fb-chip.is-on { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
.fb-chip.is-on .ic { color: #FFFFFF; }
.fb-end { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.fb-count { font-size: 13px; color: var(--muted); white-space: nowrap; }
.fb-reset { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; color: var(--primary); }
.fb-reset[hidden] { display: none; }
@media (max-width: 719px) {
  .fb-chips { flex-wrap: nowrap; }
  .fb-inner { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 10px; }
  .fb-inner::-webkit-scrollbar { display: none; }
  .fb-guests .fb-label { display: none; }
  .fb-chip, .fb-guests, .fb-end { flex: none; }
  .fb-end { margin-left: 4px; }
}
.section--cards { padding-top: 40px; }
.no-results { padding: 40px 0; font-size: 16px; color: var(--muted); }
.no-results[hidden] { display: none; }

/* unit page: head */
.unit-title-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.unit-title { min-width: 0; }
.unit-head h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.1; }
.unit-head .specs-line { font-family: var(--font-heading); font-style: italic; font-size: clamp(16px, 1.9vw, 19px); color: var(--muted); max-width: 60ch; }
.unit-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.head-cta { gap: 10px; }
.head-cta .ic { width: 17px; height: 17px; color: currentColor; }
@media (max-width: 959px) { .head-cta { display: none; } }
.sale-btn { gap: 8px; }
.sale-btn .ic { width: 17px; height: 17px; color: currentColor; }
.sale-btn.is-pending { opacity: 0.45; cursor: default; border-style: dashed; }
.sale-btn.is-pending:hover { background: transparent; color: var(--primary); }
.sale-btn small { font-size: 10.5px; letter-spacing: 0.04em; text-transform: none; font-weight: 500; }
.hl-row { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 22px; }
.hl-row li { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; color: var(--primary); }
.hl-row .ic { width: 19px; height: 19px; }
.unit-head { padding-top: 76px; }
.has-preview-bar .unit-head { padding-top: 76px; }
.unit-head .container { padding-top: 28px; padding-bottom: 28px; }
.unit-facts-line { margin-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); }
.unit-facts-line .sep { color: var(--accent); margin: 0 4px; }

/* unit page: gallery taller lead */
@media (min-width: 768px) { .gallery-mosaic { height: clamp(420px, 46vw, 560px); } }

/* unit page: body */
.unit-layout { margin-top: 48px; }
@media (min-width: 960px) { .unit-layout { grid-template-columns: minmax(0, 1.65fr) minmax(340px, 1fr); gap: 56px; } }
.unit-main { min-width: 0; }
.key-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; padding: 26px 0; }
@media (min-width: 560px) { .key-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 720px) { .key-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.key-facts .kf { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.key-facts .kf .ic { margin-top: 2px; width: 22px; height: 22px; }
.key-facts .kf .value { font-size: 14.5px; line-height: 1.4; }
.unit-main .description { margin-top: 36px; font-size: 16.5px; }
.equipment, .rules { margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--line); }
.icon-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 28px; }
.icon-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.45; color: var(--primary); }
.icon-list .ic { margin-top: 0; }
@media (min-width: 600px) { .icon-list--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.unit-location { margin-top: 48px; padding-top: 36px; }

/* request card */
.unit-aside { min-width: 0; align-self: stretch; }
.enquiry-box { padding: 26px 24px 22px; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(31,47,74,0.05), 0 18px 40px rgba(31,47,74,0.08); }
@media (min-width: 960px) {
  .enquiry-box { position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
}
.eb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.enquiry-box h2 { font-size: 24px; }
.eb-close { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.eb-close[hidden] { display: none; }
.eb-close:hover { background: var(--ground); }
.enquiry-box form { gap: 14px; }
.field-hint { font-size: 12px; color: var(--muted); }
.field label .opt { text-transform: none; letter-spacing: 0; font-weight: 500; }
.field input::placeholder, .field textarea::placeholder { color: #9AA0AC; }
.field input:user-invalid, .field select:user-invalid { border-color: #9A3B2E; }

/* date range */
.field--dates { position: relative; }
.dr-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dr-trigger { display: none; }
.js .dr-trigger {
  display: flex; align-items: stretch; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--ground); min-height: 58px; transition: border-color var(--dur) var(--ease);
}
.dr-trigger:hover, .dr-trigger[aria-expanded="true"] { border-color: var(--primary); }
.dr-part { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 8px 12px; }
.dr-part + .dr-sep + .dr-part { border-left: 1px solid var(--line); }
.dr-k { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.dr-v { font-size: 14.5px; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field--dates:not(.has-dates) [data-dr="arrival"] { color: var(--muted); }
.dr-sep { display: none; }
.dr-ic { align-self: center; margin-right: 12px; color: var(--muted); }
.dr-native { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dr-native label { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dr-native input { border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 13px; background: var(--ground); font-size: 14.5px; color: var(--primary); }
.field--dates.is-enhanced .dr-native { display: none; }
.dr-pop[hidden] { display: none !important; }
.dr-pop {
  position: fixed; top: 0; left: 0; z-index: 130; width: 660px; max-width: calc(100vw - 32px);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(22,34,58,0.22); padding: 18px 20px 16px;
}
.dr-pop.is-inline { position: static; width: auto; max-width: none; box-shadow: none; margin-top: 8px; padding: 12px 10px 12px; }
.dr-pop .cal-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.dr-pop .cal-nav { width: 38px; height: 38px; border-radius: 50%; }
.dr-pop .cal-nav .ic { width: 18px; height: 18px; }
.cal-step { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: center; }
.dr-pop .cal-months { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 760px) { .dr-pop:not(.is-inline) .cal-months { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dr-pop .cal-month { background: transparent; box-shadow: none; padding: 0; }
.dr-pop .cal-month-name { font-size: 17px; margin-bottom: 8px; }
.dr-pop .cal-day { min-height: 34px; max-height: 38px; aspect-ratio: auto; font-size: 13.5px; }
.dr-pop .cal-blank { min-height: 34px; }
.dr-pop .cal-wd { padding: 2px 0 4px; }
.dr-pop .cal-grid { gap: 2px 2px; }
.cal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.dr-pop .cal-legend { margin-top: 0; gap: 16px; font-size: 12.5px; }
.cal-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.dr-pop .cal-note { margin-top: 10px; font-size: 13px; }
.field--dates .cal-warn { margin-top: 8px; font-size: 13.5px; color: var(--primary); padding: 9px 12px; border: 1px solid var(--primary); border-radius: var(--radius); background: var(--card); }
.field--dates .cal-warn[hidden], .dr-pop .cal-note[hidden] { display: none; }

/* add-ons */
.addons { border: 0; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; min-width: 0; }
.addons legend { padding: 0; margin-bottom: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); float: left; width: 100%; }
.check { display: flex; align-items: center; gap: 12px; min-height: 32px; font-size: 14.5px; color: var(--primary); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--primary); flex: none; }
.addon-sub { margin: -2px 0 4px 32px; }
.addon-sub[hidden] { display: none; }

/* phone: request bar + sheet */
.request-bar[hidden] { display: none; }
.request-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(22,34,58,0.08);
}
.rb-text { display: flex; flex-direction: column; min-width: 0; }
.rb-text strong { font-family: var(--font-heading); font-weight: 500; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-text span { font-size: 12px; color: var(--muted); }
.request-bar .btn { flex: none; padding: 10px 18px; }
body.has-request-bar { padding-bottom: 76px; }
body.has-request-bar .preview-bar { bottom: 84px; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 140; background: rgba(15,20,30,0.45); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
.enquiry-box.is-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 8px 8px 0 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(105%); visibility: hidden; transition: transform 280ms var(--ease), visibility 0s linear 280ms;
}
.enquiry-box.is-sheet.is-open { transform: none; visibility: visible; transition: transform 280ms var(--ease); }

/* residence */
.res-hero { position: relative; min-height: 460px; height: 82vh; max-height: 900px; display: flex; align-items: flex-end; overflow: hidden; color: #FFFFFF; background: #22344F; }
.res-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.res-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,30,48,0.40) 0, rgba(20,30,48,0) 160px), linear-gradient(0deg, rgba(20,30,48,0.62) 0%, rgba(20,30,48,0.12) 38%, rgba(20,30,48,0) 60%); }
.res-hero-inner { position: relative; z-index: 1; padding-bottom: 56px; width: 100%; }
.res-hero .kicker { color: rgba(255,255,255,0.9); margin-bottom: 14px; }
.res-hero h1 { color: #FFFFFF; font-size: clamp(34px, 5.4vw, 60px); line-height: 1.08; }
.res-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 64px; }
@media (min-width: 900px) { .res-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.res-lead { font-family: var(--font-heading); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; color: var(--primary); }
.res-body p { font-size: 16.5px; color: var(--primary); }
.res-body p + p { margin-top: 14px; }
.res-facts-title { margin-top: 64px; }
.hl-row--wide { margin-top: 0; }
.res-beach { margin-top: 48px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 20px; align-items: center; padding: 26px 28px; background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.res-beach-ic .ic { width: 36px; height: 36px; stroke-width: 1.2; }
.res-beach h3 { font-size: 21px; }
.res-beach p { margin-top: 6px; color: var(--muted); font-size: 15px; max-width: 64ch; }
.res-beach .btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 760px) { .res-beach { grid-template-columns: auto minmax(0, 1fr) auto; } .res-beach .btn { grid-column: auto; } }

/* contact page: rules card */
.contact-card .rules { margin: 0; padding: 0; border: 0; }
.contact-card .rules .block-title { font-size: 17px; margin-bottom: 12px; }
.contact-card .icon-list li { font-size: 14px; }
.contact-form .field--dates .dr-pop:not(.is-inline) { width: 640px; }
@media (max-width: 719px) {
  .unit-head .container { padding-top: 14px; padding-bottom: 22px; }
  .back-link { min-height: 40px; margin-bottom: 14px; padding: 0 12px; font-size: 11px; }
  .hl-row { gap: 8px; margin-top: 16px; }
  .hl-row li { padding: 7px 10px; font-size: 13.5px; gap: 8px; }
  .hl-row .ic { width: 17px; height: 17px; }
  .unit-facts-line { font-size: 11px; letter-spacing: 0.1em; }
  .cu-body h3 { font-size: 22px; }
}
.preview-bar { z-index: 110; }

/* Rev 10.1 (Keno: "wenn man Cursor auf Bildern hat, sollte man trotzdem runterscrollen können")
   Mouse/trackpad devices: the card photo tracks do not take part in wheel scrolling at all, so a vertical wheel or
   trackpad gesture over a photo always scrolls the page. Photos change by the arrows, or by a clearly horizontal
   trackpad swipe (handled in site.js). Touch devices keep native swipe. */
.cu-track, .gallery-mosaic { overflow-y: hidden; }
@media (hover: hover) and (pointer: fine) {
  .cu-track { overflow-x: hidden; }
}

/* Rev 10.2 (Keno: "etwas mehr Platz zu Beyond the residence und dann Villa mittig listen")
   More air before the second group; its title centred; a single card sits in the middle at the width of one column. */
.cards-group.cards-group--nearby, .cards-group + .cards-group--nearby { margin-top: 120px; }
.cards-group--nearby .cards-group-title { text-align: center; border-bottom: 0; padding-bottom: 0; margin-bottom: 32px; }
.cards-group--nearby .cards-group-title::after { content: ""; display: block; width: 48px; height: 1px; background: var(--accent, #6EC1A8); margin: 16px auto 0; }
@media (min-width: 720px) {
  .cards--2 > .cu:only-child, .cards-group--nearby .cards--2 > :only-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 16px); }
}
@media (max-width: 719px) { .cards-group.cards-group--nearby, .cards-group + .cards-group--nearby { margin-top: 80px; } }

/* Keno 10.10.2026: apartments for sale → HF Selection (residence page block, footer line) */
.sale-block { margin-top: 64px; padding: 32px 0 0; border-top: 1px solid var(--line); max-width: 760px; }
.sale-block p { color: var(--muted); margin: 8px 0 14px; }
.sale-links { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.sale-links a { font-family: var(--font-heading); font-size: 19px; color: var(--primary); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.footer-sale { margin-top: 14px; font-size: 13.5px; }
.footer-sale a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

.sale-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0; font-size: 14.5px; color: var(--muted); }
.sale-note .ic { width: 17px; height: 17px; color: var(--accent); }
.unit-head-actions { flex-wrap: wrap; }

/* Static mode (Cloudflare Pages, no PHP): WhatsApp and e-mail are the send buttons */
form.is-static [data-submit], form.is-static .alt-label, form.is-static .form-status { display: none; }
form.is-static .alt-send { margin-top: 6px; }
form.is-static .alt-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }

/* Quiet motion on scroll (Keno 10.10.2026) — added by site.js only to elements below the first screen */
.mv { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 800ms cubic-bezier(.2,.65,.25,1), transform 900ms cubic-bezier(.2,.65,.25,1); }
.mv.mv-in { opacity: 1; transform: none; }
.hero-inner, .res-hero-inner, .page-hero-inner { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { .mv { opacity: 1; transform: none; transition: none; } }

/* 10.10.2026 mobile QA: a fact never breaks inside itself ("124 m²") */
.nw{white-space:nowrap}
/* 10.10.2026 mobile QA: on a phone the walking tag gets its own line, without a leading dot */
@media (max-width: 480px) { .area-row-meta .area-tag { display: block; } .area-row-meta .area-tag::before { content: none; } }

/* 11.10.2026 — Keno's amenities list: grouped columns (2×2 from 640 px), parking and regatta as two lines above */
.amen-notes { margin: 4px 0 24px; }
.amen-notes li span { font-weight: 500; color: var(--primary); }
.amen-grid { margin-top: 0; row-gap: 32px; }
.amen-extra-title { font-size: 17px; margin: 36px 0 14px; }
.res-facts-title + .hl-row + .amenities { margin-top: 56px; }
.amen-list { gap: 0; }
.amen-list li { align-items: center; }

/* 11.10.2026 — Keno: "Pfeile immer auf selber Position, egal wie groß die Bilder sind". The buttons and the counter are placed
   against the screen, not against the photo: the figure no longer anchors them. Arrows 24 px from the screen edges at mid-height,
   close 24 px from the top right corner, counter 20 px above the bottom. The photo keeps 96 px clear on each side for the arrows. */
.lightbox figure { position: static; max-width: min(calc(100vw - 192px), 1200px); }
.lightbox .lb-close { position: fixed; top: 24px; right: 24px; }
.lightbox .lb-prev { position: fixed; left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-counter { position: fixed; bottom: 20px; left: 0; right: 0; }
@media (max-width: 720px) {
  .lightbox figure { max-width: 100vw; }
  .lightbox .lb-close { top: 14px; right: 14px; }
  .lightbox .lb-prev { left: 8px; }
  .lightbox .lb-next { right: 8px; }
}
/* the photo stops 180 px short of the screen height, so caption and counter never overlap (counter fixed 20 px above the bottom) */
.lightbox figure { max-height: none; }
.lightbox img { max-height: calc(100vh - 180px); max-height: calc(100dvh - 180px); }

/* 11.10.2026 — legal notice / privacy as a pop-up over the page (site.js) */
.legal-pop { position: fixed; inset: 0; z-index: 210; background: rgba(15, 20, 30, 0.55); display: flex; align-items: center;
  justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.legal-pop.is-open { opacity: 1; pointer-events: auto; }
.legal-pop-panel { position: relative; background: var(--bg, #F6F5F2); width: min(720px, 100%); max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px); overflow-y: auto; border-radius: var(--radius); padding: 48px 40px 40px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); }
.legal-pop-close { position: sticky; top: 0; float: right; margin: -32px -24px 0 0; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--primary); background: rgba(31, 47, 74, 0.06); }
.legal-pop-close:hover { background: rgba(31, 47, 74, 0.12); }
@media (max-width: 600px) {
  .legal-pop { padding: 0; align-items: stretch; }
  .legal-pop-panel { max-height: none; border-radius: 0; padding: 40px 20px 32px; }
  .legal-pop-close { margin: -24px -8px 0 0; }
}

/* 11.10.2026 — surroundings photos (Wikimedia Commons) on the Area page */
.area-photos .block-title { margin-bottom: 20px; }
.area-photos-note { margin-top: 14px; font-size: 13px; }
.area-photos-note a { text-decoration: underline; text-underline-offset: 3px; }

/* 11.10.2026 — Services hero: the rolled towels (lower third of the photo) stay in view; title moves to the top, the
   gradient darkens the top instead of the bottom. Height chosen so title (≈ 90–175 px) and towels (from ≈ 180 px) do not meet
   on a 1600 px wide window. */
.page-hero--services { min-height: 380px; align-items: flex-start; }
@media (min-width: 900px) { .page-hero--services { min-height: 600px; } }
.page-hero--services img { object-position: center 100%; }
.page-hero--services::after { background: linear-gradient(180deg, rgba(22,34,58,0.70) 0%, rgba(22,34,58,0.30) 28%, rgba(22,34,58,0) 50%); }
.page-hero--services .page-hero-inner { padding-top: 92px; padding-bottom: 0; }

/* 12.10.2026 — Residence page: the location map (same block as on the unit pages), at reading width */
.res-location .unit-location { max-width: 760px; margin-top: 56px; }
/* footer: maps links under the place line */
.footer-maps { font-size: 13px; }
.footer-maps a { text-decoration: underline; text-underline-offset: 3px; }

/* 12.10.2026 — a fourth language (FR) made the header 44 px wider than a 1024 px window. Between the burger breakpoint
   (1100 since 12.10.2026, measured: DE needs 1063 px) and 1240 the menu and the language switch tighten so the header always fits; no menu item wraps. */
@media (min-width: 1100px) and (max-width: 1239px) {
  .main-nav { gap: 16px; }
  .main-nav a { white-space: nowrap; font-size: 13px; }
  .header-actions { gap: 10px; }
  .lang-switch { gap: 4px; }
  .site-header .container { gap: 16px; }
}

/* 12.10.2026 — Residence page: interactive location map right under the intro (residence-map.js) */
.res-map-block { margin-top: 56px; }
.res-map-block .address { margin: 0 0 16px; font-weight: 500; }
.res-map-block .res-map { height: 380px; min-height: 0; border-radius: var(--radius); }
@media (min-width: 900px) { .res-map-block .res-map { height: 460px; } }
.res-map-block .area-map-credit { margin: 6px 0 16px; }
.res-map-block .route-links { display: flex; flex-wrap: wrap; gap: 12px; }

/* 12.10.2026 SEO package D — heading order fixed without changing the look: these h2 look like the former h3,
   the footer column titles are no longer headings */
.unit-columns h2.col-title, .service-card h2.card-title { font-family: var(--font-heading); font-weight: 500; font-size: 17px; line-height: 1.3; letter-spacing: 0; margin: 0 0 14px; }
.service-card h2.card-title { margin-bottom: 8px; }
.footer-col .footer-title { font-family: var(--font-body); font-weight: 600; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); margin: 0 0 14px; }

/* 12.10.2026 — cookie banner (vanilla-cookieconsent) in the site's palette and type; buttons of equal weight */
#cc-main {
  --cc-font-family: var(--font-body);
  --cc-bg: #FFFFFF; --cc-primary-color: var(--primary); --cc-secondary-color: var(--muted);
  --cc-btn-primary-bg: var(--primary); --cc-btn-primary-color: #FFFFFF; --cc-btn-primary-border-color: var(--primary);
  --cc-btn-primary-hover-bg: #0f1e36; --cc-btn-primary-hover-border-color: #0f1e36;
  --cc-btn-secondary-bg: var(--primary); --cc-btn-secondary-color: #FFFFFF; --cc-btn-secondary-border-color: var(--primary);
  --cc-btn-secondary-hover-bg: #0f1e36; --cc-btn-secondary-hover-color: #FFFFFF; --cc-btn-secondary-hover-border-color: #0f1e36;
  --cc-btn-border-radius: var(--radius); --cc-modal-border-radius: var(--radius);
  --cc-toggle-on-bg: var(--primary); --cc-link-color: var(--primary);
}
#cc-main .cm__title, #cc-main .pm__title { font-family: var(--font-heading); font-weight: 500; }

/* ---------- Rev 16 — 14.10.2026 (Keno: „Artefakt zeigt keine neuen Farben") ----------
   Rev 15 coloured only hover states and small icons, invisible at rest. These accents are visible on every page,
   still restrained, and reuse the sea-green of the logo. Text in --sea-ink (#2B7A68) measures 4.71:1 on the cream
   ground and 5.14:1 on white (WCAG AA ≥ 4.5:1); the light --accent stays for lines and fills only. No layout change. */
:root { --sea-ink: #2B7A68; --sea-wash: #EAF5F0; }
.kicker { color: var(--sea-ink); }                                   /* section labels: sea-green instead of grey */
.fact-row { background: var(--sea-wash); }                            /* fact strip under the hero: pale sea tint */
.cu-view .ic { color: var(--sea-ink); }                               /* "View: Sea" eye icon on the cards */
.host-block { border-left: 3px solid var(--accent); }                /* host block: one sea-green edge */
.enquiry-band { border-top: 3px solid var(--accent); }               /* navy enquiry band: sea-green top line */
.site-footer { border-top: 3px solid var(--accent); }                /* footer: sea-green top line */
.section-head h2::after { content: ""; display: block; width: 40px; height: 2px; background: var(--accent); margin-top: 14px; }

/* ---------- Rev 17 — 14.10.2026 (Keno: „Cookie-Banner kleiner") ----------
   consent.js now uses layout "bar inline" (one sentence, full text in the settings panel). This makes the bar slim:
   text left, the three buttons in one row, all three the same size (Garante 10.06.2021: accept, reject and customise
   equally prominent). Measured: desktop 1024×768 78 px high = 10 % of the screen (the old box: 409 px, 20 %);
   phone 375×812 173 px = 21 % (old box stacked: ≈ 32 %). The library forces stacked buttons below 640 px with
   !important, hence !important in the phone block; `.cm.cm--bar` outranks the library's stylesheet, which loads after this one. */
#cc-main .cm.cm--bar .cm__body { max-width: 1120px; margin: 0 auto; align-items: center; }
#cc-main .cm.cm--bar .cm__texts { flex: 1 1 auto; padding: 12px 20px; }
#cc-main .cm.cm--bar .cm__title { font-size: 14px; padding: 0; margin: 0 0 2px; }
#cc-main .cm.cm--bar .cm__desc { font-size: 12.5px; line-height: 1.45; padding: 0; margin: 0; max-height: none; }
#cc-main .cm.cm--bar.cm--inline .cm__btns { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; width: auto; max-width: none; flex: 0 0 auto; padding: 12px 20px; border-top: 0; }
#cc-main .cm.cm--bar.cm--inline .cm__btn-group { display: flex; flex-direction: row; align-items: center; gap: 8px; width: auto; margin: 0; padding: 0; }
#cc-main .cm.cm--bar .cm__btn { min-height: 0; height: 36px; margin: 0; padding: 0 14px; font-size: 12.5px; white-space: nowrap; width: auto; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
@media screen and (max-width: 640px) {
  #cc-main .cm.cm--bar .cm__body { flex-direction: column; align-items: stretch; }
  #cc-main .cm.cm--bar .cm__texts { padding: 10px 16px 6px; }
  #cc-main .cm.cm--bar.cm--inline .cm__btns { flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 6px; padding: 6px 16px 12px; border-top: 0 !important; }
  #cc-main .cm.cm--bar.cm--inline .cm__btn-group { display: contents !important; }
  #cc-main .cm.cm--bar.cm--inline .cm__btn { flex: 1 1 0 !important; min-width: 0 !important; min-height: 40px; height: auto; margin: 0 !important; padding: 9px 4px; font-size: 12px; white-space: normal; line-height: 1.2; }
}

/* ---------- Rev 18 — 14.10.2026 (Keno via Jarvis: „Auch auf Handy Banner verkleinern") ----------
   Phone only (≤ 640 px): the word "Cookies" runs into the sentence instead of taking its own line, smaller type, single-line
   buttons 34 px high, tighter padding. Same text, same three equal buttons. Measured at 375×812: 173 px → 132 px (21 % → 16 %).
   Below 360 px (iPhone SE 1st gen) the button labels may wrap again so nothing is cut. */
@media screen and (max-width: 640px) {
  #cc-main .cm.cm--bar .cm__texts { display: block !important; padding: 8px 12px 4px !important; }
  #cc-main .cm.cm--bar .cm__title { display: inline; font-size: 12.5px; padding: 0 !important; margin: 0 6px 0 0 !important; }
  #cc-main .cm.cm--bar .cm__desc { display: inline; font-size: 11.5px; line-height: 1.35; padding: 0 !important; }
  #cc-main .cm.cm--bar.cm--inline .cm__btns { padding: 4px 12px 8px !important; gap: 6px; }
  #cc-main .cm.cm--bar.cm--inline .cm__btn { min-height: 34px !important; height: 34px !important; padding: 0 2px !important; font-size: 11.5px !important; white-space: nowrap !important; letter-spacing: 0; }
}
@media screen and (max-width: 359px) {
  #cc-main .cm.cm--bar.cm--inline .cm__btn { height: auto !important; white-space: normal !important; padding: 6px 2px !important; }
}

/* Rev 20 (15.10.2026): booking steps in the request form; offer landing pages (winter, regatta) */
.book-steps { background: var(--sea-wash); border-radius: 3px; padding: 12px 14px; margin: 4px 0 12px; }
.book-steps-title { margin: 0 0 6px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--sea-ink); }
.book-steps ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
.offer { max-width: 760px; display: flex; flex-direction: column; gap: 20px; }
.offer-lead { font-size: 1.08rem; }
.offer-points { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.offer-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Rev 22 (15.10.2026): the unit facts line wraps on phones. Its items sit side by side with no space between them, so the line
   could not break and ran to 465–548 px on a 375 px screen (the phone zoomed the whole page out). */
.unit-facts-line { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 2px; }

/* Rev 23 (15.10.2026, Keno: "der obige Banner sollte immer da sein und den oberen Teil der Webseite schließen"): on iPhone Safari
   the page ran under the status bar above the fixed header, so scrolling content showed there. The page now uses
   viewport-fit=cover; the header starts at the very top, covers the status-bar area with an opaque background (--sat = the
   iPhone's top safe area, 0 on desktop), and every offset that depends on the header height grows by the same amount. */
:root { --sat: env(safe-area-inset-top, 0px); }
.site-header { padding-top: calc(20px + var(--sat)); }
.site-header.is-solid { padding-top: calc(12px + var(--sat)); background: var(--ground); -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header:not(.is-solid):not(.no-hero) { padding-top: calc(22px + var(--sat)); }
.mobile-nav { padding-top: calc(96px + var(--sat)); }
.hero-inner { padding-top: calc(190px + var(--sat)); }
.page-hero-inner { padding-top: calc(150px + var(--sat)); }
.page-hero--services .page-hero-inner { padding-top: calc(92px + var(--sat)); }
.unit-head, .has-preview-bar .unit-head { padding-top: calc(76px + var(--sat)); }
.filter-bar { top: calc(64px + var(--sat)); background: var(--ground); -webkit-backdrop-filter: none; backdrop-filter: none; }
.lightbox .lb-close { top: calc(24px + var(--sat)); }
.container { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }

/* Rev 24 (15.10.2026, Keno: "immer noch nicht richtig … der obere Kopf soll das obere Teil komplett verdecken"). Safari 26 on
   iPhone paints the strip above the page (behind its address pill) itself: it takes the colour of the fixed element at the top
   edge, and shows the page through when that element reads as transparent. Three causes are removed:
   1. Closed overlays (menu, legal pop-up, photo viewer, booking-sheet backdrop) were fixed full-screen layers at opacity 0 —
      still rendered, so Safari could sample them as "transparent". Closed, they are now visibility: hidden (not rendered).
   2. html had no background; it now carries the page colour, Safari's fallback.
   3. The header paints a band of its own colour 200 px above itself, into the strip Safari draws from the page. */
html { background: var(--ground); }
.mobile-nav, .legal-pop, .lightbox, .sheet-backdrop { visibility: hidden; transition-property: opacity, transform, visibility; transition-duration: var(--dur), var(--dur), 0s; transition-delay: 0s, 0s, var(--dur); }
.mobile-nav.is-open, .legal-pop.is-open, .lightbox.is-open, .sheet-backdrop.is-open { visibility: visible; transition-delay: 0s, 0s, 0s; }
.site-header::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 200px; background: inherit; pointer-events: none; }

/* Rev 25 (15.10.2026): direct link from every apartment card to its request form */
.cu-actions { margin: 10px 0 0; }
.cu-req { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sea-ink); text-decoration: none; }
.cu-req:hover, .cu-req:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
#request { scroll-margin-top: calc(88px + var(--sat)); }

/* Rev 27 (15.10.2026): winter / workation note on apartments that are ready for winter */
.winter-note { margin: 18px 0 0; font-size: 14px; }
.winter-note a { color: var(--sea-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* Rev 27: seven menu items — keep each on one line and tighten the gap up to 1399 px (DE wrapped at 1280 px) */
@media (min-width: 1100px) { .main-nav a { white-space: nowrap; } }
@media (min-width: 1240px) and (max-width: 1399px) { .main-nav { gap: 20px; } }

/* Rev 27: winter strip under the home facts */
.winter-strip { background: var(--sea-wash); border-bottom: 1px solid var(--line); }
.winter-strip a { display: block; padding: 14px 0; font-size: 14px; color: var(--primary-ink); text-decoration: none; }
.winter-strip a:hover, .winter-strip a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.winter-strip .ws-k { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sea-ink); margin-right: 6px; }

/* Rev 28 (15.10.2026, Keno: WhatsApp sign next to the phone number, mailbox next to the e-mail address, footer) */
.fc-link { display: inline-flex; align-items: center; gap: 8px; }
.fc-ic { width: 18px; height: 18px; flex: 0 0 18px; color: var(--sea-ink); }
.fc-wa { color: #25D366; }
.footer-col a.fc-link, .footer-col a.email.fc-link { display: inline-flex; align-items: center; gap: 8px; }