/* ============================================================
   KHUN LIVING — Design System
   ============================================================ */
:root {
  --ink: #1b1714;
  --ink-soft: #4b443d;
  --muted: #6f685e;
  --line: #e7e0d6;
  --paper: #faf7f2;
  --paper-2: #f3eee5;
  --white: #ffffff;
  --brass: #a9853e;
  --brass-dark: #7d5e24;
  --sand: #efe7d8;
  --success: #3c7a52;
  --danger: #b04a3a;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --radius: 4px;
  --shadow: 0 18px 50px -24px rgba(27, 23, 20, .35);
  --shadow-sm: 0 8px 24px -16px rgba(27, 23, 20, .4);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.08; letter-spacing: .002em; margin: 0; }
p { margin: 0 0 1em; }

:lang(zh) body, [lang="zh"] { font-family: var(--sans); }
[lang="zh"] h1, [lang="zh"] h2, [lang="zh"] h3, [lang="zh"] h4 { font-family: var(--sans); font-weight: 600; letter-spacing: 0; }

.container { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.eyebrow {
  font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--brass-dark); font-weight: 600; margin: 0 0 18px;
}
[lang="zh"] .eyebrow, [lang="ru"] .eyebrow { letter-spacing: .14em; }
.lead { font-size: clamp(18px, 2.2vw, 22px); color: var(--ink-soft); }
.skip-link {
  position: absolute; inset-inline-start: -999px; top: 0; background: var(--ink); color: #fff;
  padding: 10px 16px; z-index: 200;
}
.skip-link:focus { inset-inline-start: 8px; top: 8px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border: 1px solid var(--ink); background: var(--ink); color: #fff;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  border-radius: var(--radius); transition: all .35s var(--ease);
}
.btn:hover { background: var(--brass-dark); border-color: var(--brass-dark); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--light { background: #fff; color: var(--ink); border-color: #fff; }
.btn--light:hover { background: var(--brass); border-color: var(--brass); color: #fff; }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn--outline-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--block { width: 100%; justify-content: center; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gut); transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.is-solid { background: rgba(250, 247, 242, .92); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); padding-block: 14px; }
.brand { font-family: var(--serif); font-size: 24px; letter-spacing: .16em; font-weight: 600; color: #fff; transition: color .4s var(--ease); }
.brand small { display: block; font-family: var(--sans); font-size: 9.5px; letter-spacing: .34em; font-weight: 500; opacity: .8; margin-top: 2px; }
.site-header.is-solid .brand, .site-header.is-light .brand { color: var(--ink); }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { font-size: 13px; letter-spacing: .08em; color: #fff; transition: color .3s; position: relative; padding-bottom: 5px; }
.nav a::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; height: 1.5px; width: 0; background: var(--brass); transition: width .3s var(--ease); }
.nav a:hover::after, .nav a.is-active::after { width: 100%; }
/* legibility of transparent header over hero images */
.site-header:not(.is-solid):not(.is-light) .brand,
.site-header:not(.is-solid):not(.is-light) .nav a,
.site-header:not(.is-solid):not(.is-light) .lang-btn { text-shadow: 0 1px 12px rgba(15, 11, 8, .55); }
.site-header.is-solid .nav a, .site-header.is-light .nav a { color: var(--ink-soft); }
.site-header.is-solid .nav a:hover, .site-header.is-light .nav a:hover,
.site-header.is-solid .nav a.is-active, .site-header.is-light .nav a.is-active { color: var(--brass-dark); }

.header-tools { display: flex; align-items: center; gap: 18px; }
.lang-switch { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0;
  color: #fff; font-size: 13px; letter-spacing: .08em; padding: 6px 4px;
}
.site-header.is-solid .lang-btn, .site-header.is-light .lang-btn { color: var(--ink); }
.lang-btn svg { width: 12px; height: 12px; transition: transform .3s; }
.lang-switch.open .lang-btn svg { transform: rotate(180deg); }
.lang-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 10px); min-width: 150px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all .25s var(--ease);
}
.lang-switch.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu a { display: block; padding: 9px 14px; font-size: 14px; color: var(--ink-soft); border-radius: 3px; }
.lang-menu a:hover { background: var(--paper-2); color: var(--ink); }
.lang-menu a.is-active { color: var(--brass-dark); font-weight: 600; }

.menu-toggle { display: none; background: none; border: 0; width: 30px; height: 22px; position: relative; }
.menu-toggle span { position: absolute; inset-inline-start: 0; width: 100%; height: 1.5px; background: #fff; transition: all .3s; }
.site-header.is-solid .menu-toggle span, .site-header.is-light .menu-toggle span { background: var(--ink); }
.menu-toggle span:nth-child(1){ top: 3px; } .menu-toggle span:nth-child(2){ top: 10px; } .menu-toggle span:nth-child(3){ top: 17px; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-focus, 50% 50%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(20,16,13,.82) 0%, rgba(20,16,13,.30) 45%, rgba(20,16,13,.25) 100%); }
.hero__inner { padding-bottom: clamp(54px, 9vh, 110px); max-width: 860px; }
.hero h1 { font-size: clamp(40px, 7vw, 88px); margin: 0 0 .35em; font-weight: 500; }
.hero__sub { font-size: clamp(16px, 1.5vw, 20px); max-width: 620px; opacity: .92; margin-bottom: 34px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.scroll-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 1px; height: 46px; background: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,0)); animation: drop 2.2s var(--ease) infinite; }
@keyframes drop { 0%{ transform: translateX(-50%) scaleY(.2); opacity:0 } 40%{ opacity:1 } 100%{ transform: translateX(-50%) scaleY(1); opacity:0 } }

/* ---------- Sections ---------- */
.section { padding-block: clamp(64px, 10vw, 130px); }
.section--paper2 { background: var(--paper-2); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--ink .eyebrow { color: var(--brass); }
.section-head { max-width: 720px; margin: 0 auto clamp(40px, 6vw, 72px); text-align: center; }
.section-head h2 { font-size: clamp(30px, 4.5vw, 52px); }
.section-head p { margin-top: 18px; color: var(--ink-soft); font-size: 18px; }
.section--ink .section-head p { color: rgba(250,247,242,.78); }

/* ---------- Pillars ---------- */
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 32px); }
.pillar { position: relative; min-height: 460px; display: flex; align-items: flex-end; overflow: hidden; border-radius: var(--radius); color: #fff; }
.pillar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); z-index: -2; }
.pillar::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(to top, rgba(20,16,13,.85), rgba(20,16,13,.05) 70%); }
.pillar:hover img { transform: scale(1.06); }
.pillar__body { padding: clamp(26px, 4vw, 44px); }
.pillar__body h3 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 10px; }
.pillar__body p { opacity: .9; max-width: 38ch; margin-bottom: 20px; }
.pillar .arrow { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 4px; transition: gap .3s; display: inline-flex; gap: 8px; }
.pillar:hover .arrow { gap: 16px; }

/* ---------- Property grid / cards ---------- */
.prop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: clamp(22px, 3vw, 38px); }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.card:hover .card__media img { transform: scale(1.07); }
/* Beide Plaketten in EINEM Behälter: vorher lagen sie absolut links und rechts,
   ohne voneinander zu wissen - sobald eine laenger wurde (ein Datum ist laenger
   als "Verfuegbar"), schoben sie sich uebereinander. Gemessen auf einem 375-px-
   Handy: die italienische Kategorie verschwand unter dem Datum. */
.card__badges { position: absolute; top: 14px; inset-inline: 14px; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
.card__badge { background: rgba(250,247,242,.95); color: var(--ink); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 7px 12px; border-radius: 2px; font-weight: 600; }
.card__badge--status { background: var(--ink); color: #fff; }
.card__badge--status.is-reserved { background: var(--danger); }
.card__body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.card__loc { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-dark); font-weight: 600; }
.card__title { font-size: 25px; margin: 8px 0 4px; }
/* Höchstens drei Zeilen, dann Auslassungszeichen. Die Kurzbeschreibungen sind
   je nach Objekt und Sprache 46 bis 114 Zeichen lang; ohne Begrenzung wären die
   Karten nebeneinander unterschiedlich hoch.
   Warum drei und nicht zwei: bei zwei Zeilen fiele beim Dübendorfer Objekt genau
   der Teil nach dem Gedankenstrich weg – das Lycée Français International, das
   dort bewusst im Teaser steht. Eine Begrenzung, die das Verkaufsargument
   abschneidet, ist schlechter als ungleich hohe Karten. Drei Zeilen fassen die
   längste heutige Fassung vollständig und decken den Ausreisser trotzdem ab. */
.card__tag { color: var(--ink-soft); font-size: 15px; margin-bottom: 18px; flex: 1;
             display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
             overflow: hidden; }
.card__facts { display: flex; flex-wrap: wrap; gap: 14px 20px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 14px; }
.card__facts span { display: inline-flex; align-items: center; gap: 7px; }
.card__facts svg { width: 16px; height: 16px; stroke: var(--brass-dark); opacity: .9; }
.card__cta { margin-top: 20px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); display: inline-flex; gap: 8px; transition: gap .3s; font-weight: 500; }
.card:hover .card__cta { gap: 15px; color: var(--brass-dark); }

/* ---------- Values / why ---------- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); }
.value { text-align: center; }
.value__icon { width: 56px; height: 56px; margin: 0 auto 22px; border: 1px solid var(--brass); border-radius: 50%; display: grid; place-items: center; color: var(--brass); }
.value__icon svg { width: 26px; height: 26px; }
.value h3 { font-size: 24px; margin-bottom: 10px; }
.value p { color: var(--ink-soft); font-size: 16px; }
.section--ink .value p { color: rgba(250,247,242,.74); }

/* ---------- Property detail ---------- */
.detail-hero { position: relative; height: 78svh; min-height: 480px; display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.detail-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-focus, 50% 50%); z-index: -2; }
.detail-hero::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(to top, rgba(20,16,13,.8), rgba(20,16,13,.1) 60%); }
.detail-hero__inner { padding-bottom: clamp(34px, 6vh, 64px); }
.detail-hero__loc { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: 14px; }
/* Die Breitenfessel gehört an den NAMEN, nicht an das ganze h1: seit die
   Schlagzeile im h1 steht, erbte sie sonst die 18 Zeichen des Namens statt ihre
   eigenen 50 - gemessen 515 statt 662 Pixel, und der Kopfbereich rutschte
   dadurch 73 Pixel nach rechts. */
.detail-hero h1 { font-size: clamp(32px, 5vw, 60px); }
.detail-hero__name { display: block; max-width: 18ch; }
/* Steht seit 23.08.2026 als <span> IM h1 (die Überschrift soll das Suchwort
   tragen, nicht nur den Hausnamen). Alles, was das h1 sonst vererben würde,
   wird hier zurückgeholt — Schriftfamilie, Gewicht, Grösse, Zeilenabstand,
   Laufweite, Breite und der Abstand nach unten, den der frühere Absatz vom
   Browser bekam. Ohne diese sieben Werte sieht die Zeile anders aus als vorher. */
.detail-hero__tag { display: block; font-family: var(--sans); font-weight: 400;
  font-size: clamp(16px, 2vw, 21px); line-height: 1.65; letter-spacing: normal;
  opacity: .92; margin-top: 14px; margin-bottom: 1em; max-width: 50ch; }

.detail-layout { display: grid; grid-template-columns: 1fr 380px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.detail-main h2 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 22px; }
.detail-section { margin-bottom: clamp(48px, 7vw, 80px); }
.detail-section p { color: var(--ink-soft); }

.facts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.fact { background: var(--white); padding: 22px 20px; }
/* Beschriftung: lange deutsche Komposita ("Mindestaufenthalt") sind bei 320 px
   breiter als ihre Kachel. Erst trennen, notfalls hart umbrechen - gemessen
   137 px Wort in 113 px Kachel. */
.fact__label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; hyphens: auto; overflow-wrap: anywhere; }
.fact__value { font-size: 22px; font-family: var(--serif); }

.hl-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.hl-list li { position: relative; padding-inline-start: 34px; color: var(--ink-soft); }
.hl-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 9px; width: 16px; height: 9px; border-left: 2px solid var(--brass); border-bottom: 2px solid var(--brass); transform: rotate(-45deg); }

/* gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gallery-grid button { padding: 0; border: 0; background: none; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius); }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), opacity .3s; }
.gallery-grid button:hover img { transform: scale(1.06); }
.gallery-grid button:nth-child(1) { grid-column: span 2; grid-row: span 2; }

/* booking sidebar */
.booking { position: sticky; top: 82px; max-height: calc(100vh - 94px); overflow-y: auto; overscroll-behavior: contain; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px 22px; }
.booking::-webkit-scrollbar { width: 8px; }
.booking::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.booking h3 { font-size: 26px; margin-bottom: 6px; }
.booking__sub { color: var(--ink-soft); font-size: 14px; margin-bottom: 22px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  font-family: inherit; font-size: 15px; color: var(--ink); background: var(--paper); transition: border-color .25s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brass); }
.field textarea { resize: vertical; min-height: 92px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-note { font-size: 12px; color: var(--muted); margin-top: 12px; line-height: 1.5; }
.form-msg { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius); font-size: 14px; display: none; }
.form-msg.is-ok { display: block; background: #eef5f0; color: var(--success); border: 1px solid #cfe6d8; }
.form-msg.is-err { display: block; background: #fbeeec; color: var(--danger); border: 1px solid #f0d2cc; }

/* availability calendar */
.cal { margin-top: 8px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal__head h4 { font-family: var(--serif); font-size: 20px; }
.cal__nav { display: flex; gap: 8px; }
.cal__nav button { width: 34px; height: 34px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); display: grid; place-items: center; transition: all .25s; }
.cal__nav button:hover:not(:disabled) { border-color: var(--brass); color: var(--brass-dark); }
.cal__nav button:disabled { opacity: .35; cursor: not-allowed; }
.cal__months { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.cal__month { }
.cal__month-name { text-align: center; font-family: var(--serif); font-size: 18px; margin-bottom: 12px; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__dow { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; padding-bottom: 4px; }
.cal__day { aspect-ratio: 1; display: grid; place-items: center; font-size: 13px; border-radius: 3px; color: var(--ink-soft); }
.cal__day.is-empty { visibility: hidden; }
.cal__day.is-past { color: var(--line); }
.cal__day.is-booked { background: var(--sand); color: var(--muted); text-decoration: line-through; }
.cal__day.is-free { background: #fff; }
.cal__legend { display: flex; gap: 20px; margin-top: 18px; font-size: 13px; color: var(--ink-soft); }
.cal__legend span { display: inline-flex; align-items: center; gap: 8px; }
.cal__dot { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
.cal__dot--free { background: #fff; border: 1px solid var(--line); }
.cal__dot--booked { background: var(--sand); }
.cal__status { font-size: 13px; color: var(--muted); margin-top: 12px; }

/* map */
.map-wrap { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.map-wrap { position: relative; }
.map-wrap iframe { width: 100%; height: 360px; border: 0; display: block; filter: grayscale(.2) contrast(1.02); }
/* Auf Touch-Geräten erst nach Antippen bedienbar – sonst bleibt der Finger beim Scrollen hängen */
.map-wrap::after { content: ""; position: absolute; inset: 0; }
.map-wrap.is-active::after { display: none; }
@media (hover: hover) and (pointer: fine) { .map-wrap::after { display: none; } }
.map-link { display: inline-block; margin-top: 14px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-dark); border-bottom: 1px solid var(--brass); padding-bottom: 3px; }

/* back link */
.back-link { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 26px; }
.back-link:hover { color: var(--brass-dark); }

/* inline icon sizing (icons without explicit size) */
.card__cta svg, .arrow svg, .back-link svg, .map-link svg { width: 17px; height: 17px; flex: none; }
.cal__nav button svg { width: 15px; height: 15px; }
.lightbox__nav svg { width: 42px; height: 42px; }

/* ---------- Contact strip ---------- */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 820px; margin: 0 auto; }
.contact-card { text-align: center; padding: 34px 24px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); transition: border-color .3s, transform .3s; }
.contact-card:hover { border-color: var(--brass); transform: translateY(-4px); }
.contact-card svg { width: 28px; height: 28px; stroke: var(--brass); margin-bottom: 14px; }
.contact-card .label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(250,247,242,.6); margin-bottom: 6px; }
.contact-card .value { font-size: 18px; font-family: var(--serif); color: #fff; }

/* ---------- Footer ---------- */
.site-footer { background: #14110d; color: rgba(250,247,242,.72); padding-block: clamp(50px, 7vw, 80px) 30px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand { font-family: var(--serif); font-size: 26px; letter-spacing: .14em; color: #fff; margin-bottom: 16px; }
.footer-col h4 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin-bottom: 18px; font-family: var(--sans); font-weight: 600; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.footer-col a:hover { color: #fff; }
.footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; color: rgba(250,247,242,.5); }
.footer-bottom a:hover { color: #fff; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(15,12,10,.95); display: none; align-items: center; justify-content: center; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: 2px; }
.lightbox__close, .lightbox__nav { position: absolute; background: none; border: 0; color: #fff; opacity: .8; transition: opacity .2s; }
.lightbox__close { top: 24px; inset-inline-end: 28px; font-size: 34px; line-height: 1; }
.lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 46px; padding: 20px; }
.lightbox__nav:hover, .lightbox__close:hover { opacity: 1; }
.lightbox__prev { inset-inline-start: 10px; } .lightbox__next { inset-inline-end: 10px; }
.lightbox__count { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); font-size: 14px; letter-spacing: .1em; }

/* ---------- Mobile nav ---------- */
.mobile-nav { position: fixed; inset: 0; z-index: 99; background: var(--paper);
  transform: translateX(100%); visibility: hidden;
  transition: transform .45s var(--ease), visibility 0s linear .45s;
  display: flex; flex-direction: column; padding: 100px var(--gut) 40px;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.mobile-nav.is-open { transform: translateX(0); visibility: visible; transition: transform .45s var(--ease), visibility 0s; }
.mobile-nav a { font-family: var(--serif); font-size: 30px; color: var(--ink); padding: 12px 0; border-bottom: 1px solid var(--line); }
.mobile-nav a:hover { color: var(--brass-dark); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .scroll-hint { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .detail-layout { grid-template-columns: 1fr; }
  .booking { position: static; max-height: none; overflow: visible; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .nav { display: none; }
  .menu-toggle { display: block; }
  .pillars { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; gap: 36px; }
  .contact-cards { grid-template-columns: 1fr; }
  .cal__months { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid button:nth-child(1) { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 540px) {
  body { font-size: 16px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .field-row { grid-template-columns: 1fr; }
}

/* ============================================================
   Round 2 — refinements
   ============================================================ */

/* language switcher hover */
.lang-btn:hover { color: var(--brass); }
.site-header.is-solid .lang-btn:hover, .site-header.is-light .lang-btn:hover { color: var(--brass-dark); }

/* card price + footer (stacked, harmonious, single-line CTA) */
.card__foot { margin-top: 18px; }
.card__price { font-family: var(--serif); font-size: 22px; color: var(--ink); line-height: 1; white-space: nowrap; margin-bottom: 13px; }
.card__price .from { font-family: var(--sans); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-inline-end: 4px; }
.card__price small { font-family: var(--sans); font-size: 12px; color: var(--muted); margin-inline-start: 2px; }
.card__foot .card__cta { display: flex; align-items: center; justify-content: space-between; white-space: nowrap; margin-top: 0; width: 100%; }
.card__foot .card__cta svg { flex: none; }

/* compact facts */
.facts-grid { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); }
.fact { padding: 13px 15px; }
.fact__label { font-size: 10.5px; margin-bottom: 3px; }
.fact__value { font-size: 18px; }

/* amenities */
.amenities-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 11px 26px; }
.amenities-grid li { position: relative; padding-inline-start: 27px; color: var(--ink-soft); font-size: 15px; }
.amenities-grid li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 7px; width: 12px; height: 7px; border-left: 2px solid var(--brass); border-bottom: 2px solid var(--brass); transform: rotate(-45deg); }
.amenities-more { display: inline-block; margin-top: 22px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-dark); border-bottom: 1px solid var(--brass); padding-bottom: 3px; }
.amenities-more svg { width: 15px; height: 15px; vertical-align: -2px; }

/* compact booking card + price */
.booking__price { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.booking__price-main { font-family: var(--serif); font-size: 26px; color: var(--ink); line-height: 1.12; }
.booking__price-main .from { font-family: var(--sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-inline-end: 4px; }
.booking__price-main small { font-family: var(--sans); font-size: 14px; color: var(--muted); }
.booking__price-sub { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.booking__sub { margin-top: 0; margin-bottom: 16px; }
.booking .field { margin-bottom: 7px; }
.booking .field input, .booking .field textarea { padding: 8px 12px; font-size: 14px; }
.booking textarea[rows="2"] { min-height: 54px; }
.booking .field label { margin-bottom: 3px; font-size: 11px; }
.booking .form-note { margin-top: 10px; font-size: 11px; }
.booking .btn { padding: 13px 30px; }

/* availability calendar (now in main column) — constrain width so cells stay small */
.cal { max-width: 640px; }
.cal__head { align-items: center; }
.cal__day { aspect-ratio: auto; height: 38px; }

/* "check availability" scroll link in the booking card */
.booking__availlink { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--brass-dark); border-bottom: 1px solid var(--brass); padding-bottom: 3px; }
.booking__availlink svg { width: 14px; height: 14px; }
.booking__availlink:hover { color: var(--ink); }

/* relocation */
.reloc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 26px); }
.reloc-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.reloc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.reloc-card h3 { font-size: 25px; margin-bottom: 12px; }
.reloc-card p { color: var(--ink-soft); font-size: 15px; margin: 0; }

/* burger morph + mobile menu-open header */
.menu-toggle span { transition: transform .35s var(--ease), opacity .2s var(--ease), background .3s; }
.menu-toggle.is-x span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.menu-toggle.is-x span:nth-child(2) { opacity: 0; }
.menu-toggle.is-x span:nth-child(3) { top: 10px; transform: rotate(-45deg); }
.site-header.menu-open { background: rgba(250, 247, 242, .96); backdrop-filter: blur(12px); }
.site-header.menu-open .brand, .site-header.menu-open .lang-btn { color: var(--ink); text-shadow: none; }
.site-header.menu-open .menu-toggle span { background: var(--ink); }

@media (max-width: 820px) {
  .reloc-grid { grid-template-columns: 1fr; }
  .facts-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   PHP-Fassung: neue Bausteine, Barrierefreiheit, Feinschliff
   ============================================================ */

/* Sichtbarer Fokus für Tastaturbedienung (überall, nicht nur bei Maus) */
:focus-visible {
  outline: 2px solid var(--brass-dark);
  outline-offset: 3px;
  border-radius: 2px;
}
.site-header:not(.is-solid):not(.is-light):not(.menu-open) :focus-visible,
.hero :focus-visible, .detail-hero :focus-visible, .section--ink :focus-visible {
  outline-color: #fff;
}
/* Fallback für Browser ohne :focus-visible */
@supports not selector(:focus-visible) {
  a:focus, button:focus, input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--brass-dark); outline-offset: 3px;
  }
}

/* Honigtopf gegen Spam – für Menschen unsichtbar, für Screenreader ausgeblendet */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* Container-Varianten */
.container--narrow { max-width: 760px; }
.section--top { padding-top: clamp(120px, 16vw, 180px); }

/* Fliesstext */
.prose { color: var(--ink-soft); font-size: 18px; }
.prose h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 34px 0 12px; }
.prose p { margin-bottom: 1.1em; }
.prose a { color: var(--brass-dark); text-decoration: underline; text-underline-offset: 3px; }
.legal-h1 { font-size: clamp(30px, 4vw, 46px); margin-bottom: 28px; }

/* Hero-Höhenvarianten (statt Inline-Stilen) */
.detail-hero--short { height: 54svh; min-height: 380px; }
.detail-hero--mid   { height: 50svh; min-height: 340px; }
/* Rückfall für Browser ohne svh (ältere Safari/Firefox) */
@supports not (height: 1svh) {
  .hero { min-height: 100vh; }
  .detail-hero { height: 78vh; }
  .detail-hero--short { height: 54vh; }
  .detail-hero--mid { height: 50vh; }
}

/* Zurück-Link */
.back-link-wrap { margin-bottom: 26px; }
.back-link { margin-bottom: 0; }

/* Buchungskarte */
.booking__title { font-size: 26px; margin-bottom: 6px; }
.booking--static { position: static; max-height: none; overflow: visible; }
.booking .enquiry { margin-top: 0; }

/* Kontaktseite */
.detail-layout--contact { grid-template-columns: 1fr 420px; max-width: 1000px; margin-inline: auto; }
.facts-grid--single { grid-template-columns: 1fr; }
.facts-grid--single .fact__value a { color: inherit; }
.facts-grid--single .fact__value a:hover { color: var(--brass-dark); }

/* Kontaktkarten: label/value sind jetzt <span> */
.contact-card .label, .contact-card .value { display: block; }

/* Fusszeile: Überschriften sind jetzt <h2> (Semantik) */
.footer-col h2 {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass); margin: 0 0 18px; font-family: var(--sans); font-weight: 600;
}

/* Galerie-Grossansicht */
.lightbox[hidden] { display: none !important; }

/* Meldung im Formular ist jetzt <p> */
p.form-msg { margin: 14px 0 0; }
p.form-msg:empty { display: none; }

/* Touch-Ziele: mindestens 44x44 px (WCAG) */
.menu-toggle { width: 44px; height: 44px; display: none; }
.menu-toggle span { inset-inline-start: 7px; width: 30px; }
.menu-toggle span:nth-child(1) { top: 14px; }
.menu-toggle span:nth-child(2) { top: 21px; }
.menu-toggle span:nth-child(3) { top: 28px; }
.menu-toggle.is-x span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-toggle.is-x span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
.lang-btn { min-height: 44px; padding-inline: 6px; }
.cal__nav button { width: 40px; height: 40px; }
.lightbox__close { min-width: 44px; min-height: 44px; }

@media (max-width: 820px) {
  .menu-toggle { display: block; }
  .detail-layout--contact { grid-template-columns: 1fr; }
}

/* Sehr schmale Geräte (320 px) */
@media (max-width: 380px) {
  :root { --gut: 16px; }
  .facts-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .card__price { font-size: 20px; white-space: normal; }
  .booking { padding: 16px; }
}

/* Kalender: nie breiter als der Platz, Zellen bleiben klein */
.cal { max-width: 640px; }
.cal__months { min-width: 0; }
.cal__grid { min-width: 0; }
.cal__day { min-width: 0; }

/* Druck */
@media print {
  .site-header, .mobile-nav, .booking, .site-footer, .scroll-hint, .lightbox { display: none !important; }
  .hero, .detail-hero { height: auto; min-height: 0; color: var(--ink); }
  .hero::after, .detail-hero::after { display: none; }
  body { background: #fff; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}

/* Markenschriftzug nie umbrechen; auf schmalen Geräten kleiner */
.brand { white-space: nowrap; }
@media (max-width: 480px) {
  .brand { font-size: 19px; letter-spacing: .12em; }
  .site-header { padding-inline: 16px; }
  .header-tools { gap: 8px; }
  .lang-btn { font-size: 12px; }
}
@media (max-width: 360px) {
  .brand { font-size: 17px; letter-spacing: .08em; }
  .lang-btn span, .lang-btn { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Buchungskarte kompakt halten: passt ohne Scrollbalken auf ein 13-Zoll-Fenster */
.booking .field { margin-bottom: 5px; }
.booking .field label { font-size: 10.5px; letter-spacing: .1em; margin-bottom: 2px; }
.booking .field input, .booking .field textarea { padding: 7px 11px; font-size: 14px; }
.booking textarea[rows="2"] { min-height: 44px; }
.booking .form-note { margin-top: 8px; font-size: 10.5px; line-height: 1.45; }
.booking .btn { padding: 12px 26px; }
.booking__price { padding-bottom: 10px; margin-bottom: 11px; }
.booking__availlink { margin-bottom: 11px; }
/* Auf hohen Bildschirmen darf es wieder luftiger sein */
@media (min-height: 900px) {
  .booking .field { margin-bottom: 9px; }
  .booking .field input, .booking .field textarea { padding: 10px 12px; }
  .booking .form-note { font-size: 11.5px; }
}

/* ============================================================
   Behebungen aus der Qualitätsprüfung
   ============================================================ */

/* Sprungziele nicht unter der festen Kopfzeile (Befund 23) */
:target, #availability, #main { scroll-margin-top: 96px; }
@media (max-width: 820px) { :target, #availability, #main { scroll-margin-top: 76px; } }

/* iOS Safari zoomt bei Feldern unter 16px in die Seite hinein (Befund 16) */
@media (max-width: 820px) {
  .field input, .field select, .field textarea,
  .booking .field input, .booking .field textarea { font-size: 16px; }
}

/* Ohne JavaScript bleibt sonst fast alles unsichtbar (Befund 9) */
.no-js .reveal { opacity: 1 !important; transform: none !important; }

/* Kopfzeile über hellen Bildern: Verlauf oben verstärken (Befund 13) */
.detail-hero::before, .hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 190px; z-index: -1;
  background: linear-gradient(to bottom, rgba(20,16,13,.62), rgba(20,16,13,0));
  pointer-events: none;
}

/* Kalender: vergangene Tage lesbar, belegte Tage kontraststark (Befund 32) */
.cal__day.is-past { color: #a1968a; }
.cal__day.is-booked { background: var(--sand); color: var(--ink-soft); text-decoration: line-through; }

/* Helle Schaltfläche im Überfahren: weisser Text braucht dunkleren Grund (Befund 31) */
.btn--light:hover { background: var(--brass-dark); border-color: var(--brass-dark); color: #fff; }

/* Kontaktseite: gleicher Umbruchpunkt wie das übrige Detail-Layout (Befund 5) */
@media (max-width: 940px) { .detail-layout--contact { grid-template-columns: 1fr; } }

/* Chinesisch: auch Menü und Kalender in serifenloser Schrift (Befund 41) */
[lang="zh"] .mobile-nav a,
[lang="zh"] .cal__month-name,
[lang="zh"] .card__title,
[lang="zh"] .fact__value,
[lang="zh"] .booking__price-main,
[lang="zh"] .footer-brand,
[lang="zh"] .brand { font-family: var(--sans); font-weight: 600; letter-spacing: 0; }

/* Fehlerhafte Felder klar kennzeichnen (Befund 14) */
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--danger); background: #fdf6f4;
}
.field-error { color: var(--danger); font-size: 12px; margin: 3px 0 0; }

/* Rückmeldung nach Formularversand ohne JavaScript */
.page-note { padding: 14px 0; font-size: 15px; margin-top: 84px; }
.page-note.is-ok  { background: #eef5f0; color: var(--success); border-bottom: 1px solid #cfe6d8; }
.page-note.is-err { background: #fbeeec; color: var(--danger);  border-bottom: 1px solid #f0d2cc; }

/* ---------- Anschrift statt Telefonnummer (22.08.2026) ---------- */
/* Kontaktstreifen hat nur noch zwei Karten – 3-Spalten-Raster wäre lückig. */
.contact-cards--two { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
/* Die Adresskarte ist kein Link: kein Zeiger, kein Anheben beim Überfahren. */
.contact-card--static { cursor: default; }
.contact-card--static:hover { border-color: rgba(255,255,255,.16); transform: none; }
.contact-card .value { line-height: 1.5; }

/* Adressblock in der Eckdaten-Kachel: drei Zeilen, darum kleiner als eine Zahl */
.fact__value--address { font-size: 18px; line-height: 1.55; }

/* Fusszeile: Anschrift als Textblock, nicht als Listenlink */
.footer-address { line-height: 1.6; margin-top: 10px; }

@media (max-width: 820px) {
  .contact-cards--two { grid-template-columns: 1fr; }
}


/* ---------- Handy-Feinschliff (JZ-Befunde 22.08.2026) ---------- */

/* KOPFBILDER: Der sichtbare Ausschnitt eines 4:3-Fotos in einem hochkanten Fenster ist
   schmal (Startseite bei 375x812 nur rund 35 % der Bildbreite). Die Startseite loest das
   ueber ein eigenes Hochformat-Motiv (<picture> in home.php).
   `--hero-focus` ist der Haken fuer den anderen Weg: ein Bild, dessen Motiv nicht mittig
   sitzt, bekommt in der Vorlage style="--hero-focus: 18% 50%". Derzeit setzt das NIEMAND -
   der Vorgabewert 50% 50% entspricht dem Verhalten ohne die Variable. Bewusst so belassen,
   weil die Objekt-Kopfbilder denselben Zuschnitt haben und den Haken brauchen koennten. */

/* KNOEPFE IM KOPFBEREICH: vorher entschied die Länge der Beschriftung, ob sie neben-
   oder untereinander stehen - also die Sprache. Gemessen: de/en/it ab 375 px nebeneinander,
   fr erst ab 414, ru erst ab 540, zh immer, und fr/ru sprangen bei 600 px wieder zurück.
   Ein einspaltiges Raster stapelt IMMER, unabhaengig vom Text. */
@media (max-width: 820px) {
  .hero__cta { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .hero__cta .btn {
    width: 100%;
    max-width: 24rem;      /* sonst 738 px breite Knöpfe auf dem Tablet */
    justify-content: center;
  }
}

/* SPRUNGKNOPF ZUM FORMULAR: nur solange das Formular unter dem Inhalt liegt.
   Bei 940 px klappt .detail-layout einspaltig - genau ab da wird der Knopf gebraucht. */
.jump-cta { display: none; }
@media (max-width: 940px) {
  .jump-cta { display: block; margin: 4px 0 34px; }
  .jump-cta .btn { width: 100%; max-width: 24rem; justify-content: center; }
  .detail-section + .jump-cta { margin-top: -14px; }
}

/* Sprungziel nicht unter die Kopfzeile schieben */
#anfrage-formular { scroll-margin-top: 96px; }
@media (max-width: 820px) { #anfrage-formular { scroll-margin-top: 76px; } }


/* ---------- Schriftsysteme ausserhalb des Lateinischen ----------
   Inter und Cormorant Garamond haben keine thailaendischen, arabischen oder
   japanischen Zeichen. Die Zusatzschrift steht bewusst HINTER der lateinischen:
   Noto enthält auch Latein, und stünde es vorn, sähe die ganze Seite anders aus.
   Zeilenhoehe: thailaendische und arabische Schrift haben Ober- und Unterzeichen und
   brauchen mehr Luft als die enge Ueberschriftenhoehe 1.08. */
[lang="th"] {
  --sans: "Inter", "Noto Sans Thai", -apple-system, "Thonburi", sans-serif;
  --serif: "Cormorant Garamond", "Noto Sans Thai", Georgia, serif;
}
[lang="ar"] {
  --sans: "Inter", "Noto Sans Arabic", -apple-system, "Geeza Pro", sans-serif;
  /* Naskh ist die arabische Entsprechung einer Serifenschrift. Ohne sie fielen alle
     arabischen Ueberschriften auf die Groteske zurück und die Seite verlor dort
     ihren Charakter. */
  --serif: "Cormorant Garamond", "Noto Naskh Arabic", Georgia, serif;
}
[lang="ja"] {
  --sans: "Inter", "Noto Sans JP", -apple-system, "Hiragino Sans", "Yu Gothic", sans-serif;
  --serif: "Cormorant Garamond", "Noto Sans JP", Georgia, serif;
}
[lang="th"] h1, [lang="th"] h2, [lang="th"] h3, [lang="th"] h4,
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4 { line-height: 1.34; }
[lang="ja"] h1, [lang="ja"] h2, [lang="ja"] h3, [lang="ja"] h4 { line-height: 1.28; }
[lang="th"] body, [lang="ar"] body { line-height: 1.85; }
/* Gesperrte Schrift zerreisst Schriften, die Zeichen verbinden oder stapeln */
[lang="th"] .eyebrow, [lang="ar"] .eyebrow, [lang="ja"] .eyebrow,
[lang="th"] .brand, [lang="ar"] .brand, [lang="ja"] .brand,
[lang="th"] .detail-hero__loc, [lang="ar"] .detail-hero__loc, [lang="ja"] .detail-hero__loc,
[lang="th"] .card__loc, [lang="ar"] .card__loc, [lang="ja"] .card__loc,
[lang="th"] .fact__label, [lang="ar"] .fact__label, [lang="ja"] .fact__label,
[lang="th"] .btn, [lang="ar"] .btn, [lang="ja"] .btn,
[lang="th"] .card__badge, [lang="ar"] .card__badge, [lang="ja"] .card__badge { letter-spacing: .04em; }

/* ---------- Sprachwähler bei vielen Sprachen ----------
   Mit sechs Eintraegen war die Liste einspaltig noch bequem. Ab sieben wird sie zu
   lang; zwei Spalten halbieren die Hoehe, ohne die Bedienung per Tastatur zu aendern. */
.lang-menu { display: grid; grid-template-columns: repeat(2, minmax(96px, 1fr)); gap: 2px; }
.lang-menu a { white-space: nowrap; }
@media (max-width: 400px) {
  .lang-menu { grid-template-columns: 1fr 1fr; min-width: 0; }
  .lang-menu a { padding-inline: 10px; font-size: 13px; }
}


/* ---------- Rechts nach links (Arabisch) ----------
   Fast alles kippt von selbst: die logischen Eigenschaften oben, Raster und Flexboxen,
   und text-align: start. Hier steht nur, was sich NICHT von selbst dreht. */

/* Waagrecht gerichtete Zeichen (Pfeile, Zurück, Galerie vor/zurück). Der Aufklapp-
   Pfeil des Sprachwaehlers und das Schluesselsymbol sind bewusst NICHT dabei. */
[dir="rtl"] .icon--dir { transform: scaleX(-1); }

/* Das mobile Menü fährt von aussen ein. "Aussen" liegt in RTL auf der anderen Seite. */
[dir="rtl"] .mobile-nav { transform: translateX(-100%); }
[dir="rtl"] .mobile-nav.is-open { transform: translateX(0); }

/* Datumsfelder sind das einzige Element, das Chrome auch unter dir="rtl" auf ltr
   zwingt. Ohne diese Regel sitzt der Kalenderknopf an der Lese-Startkante und die
   Eingabe klebt am falschen Rand. */
[dir="rtl"] input[type="date"] { text-align: right; }
[dir="rtl"] input[type="date"]::-webkit-datetime-edit { text-align: right; }

/* Der Bildausschnitt eines Fotos darf sich NICHT spiegeln - object-position bleibt. */

/* Verfügbar-ab-Zeile in der Buchungsbox: eine Wohnung, die erst in Monaten frei
   wird, darf nicht wie "sofort beziehbar" aussehen. */
.booking__from {
  margin: 12px 0 0; padding: 9px 12px; border-radius: 3px;
  background: var(--paper-2); border: 1px solid var(--line);
  font-size: 14px; color: var(--ink-soft); text-align: center;
}

/* Eine unbrechbare Zeichenkette (E-Mail-Adresse, Strassenname) ist breiter als die
   Spalte und sprengt das Eckdaten-Raster. Gemessen: "info@khunliving.ch" in der
   chinesischen Fettschrift 199 px gegen 150 px Spaltenmindestbreite - die
   Kontaktseite lief unter 360 px um 35 px ueber den Rand. min-width:0 erlaubt dem
   Rasterfeld zu schrumpfen, overflow-wrap dem Wort zu brechen. */
.fact { min-width: 0; }
.fact__value { overflow-wrap: anywhere; }

/* Die 380px-Regel oben setzt das Eckdaten-Raster auf zwei Spalten - auf der
   Kontaktseite mit ihren zwei Kacheln blieben davon je 143 px, zu wenig für
   "info@khunliving.ch". Einspaltig bleibt es lesbar bis hinunter zu rund 340 px. */
@media (max-width: 380px) { .facts-grid--single { grid-template-columns: 1fr; } }

/* Eigener Inhalt der Übersichtsseiten (seit 23.08.2026). Drei Blöcke
   nebeneinander auf dem Schreibtisch, untereinander auf dem Handy - dieselbe
   Rasterlogik wie bei den Objektkarten, damit es sich nicht fremd anfühlt. */
.list-intro { max-width: 62ch; margin: 0 auto 46px; text-align: center; }
.list-info { display: grid; gap: 34px 44px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.list-info__block h2 { font-size: clamp(19px, 1.6vw, 23px); margin-bottom: 12px; }
.list-info__block p { color: var(--ink-soft); }
@media (max-width: 700px) {
  .list-intro { margin-bottom: 32px; text-align: start; }
  .list-info { gap: 28px; }
}

/* Die Umgebung: flache Zeilen, keine Karten. Auf breiten Schirmen steht die
   Bezeichnung links neben dem Text, darunter stapelt sie sich davor. Die
   Haarlinie trennt die Gruppen, ohne einen Rahmen um sie zu ziehen.
   Alles in logischen Eigenschaften (inline-start statt left), damit Arabisch
   nicht gespiegelt werden muss. */
.nb { margin-top: 6px; }
.nb__row {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 6px 32px;
  padding-block: 18px;
  border-block-start: 1px solid var(--line);
}
.nb__row:first-child { border-block-start: 0; padding-block-start: 4px; }
.nb__label {
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.3;
  color: var(--ink);
}
.nb__text { margin: 0; color: var(--ink-soft); line-height: 1.7; }
@media (max-width: 700px) {
  .nb__row { grid-template-columns: 1fr; gap: 6px; padding-block: 16px; }
  .nb__label { font-size: 18px; }
}