/* ==========================================================================
   Apartments SOBA, Sarajevo – Kern-CSS (DESIGN.md §1–6, verbindlich)
   Aufbau: 0 Tokens · 1 Basis · 2 Typografie · 3 Layout · 4 Buttons · 5 Kopf/Navigation/Sprache ·
           6 Hero · 7 Intro · 8 Kompass + Orte · 9 Apartments · 10 Stimmen · 11 Kapitel · 12 Buchen ·
           13 FAQ · 14 Fuß · 15 Bewegung · 16 Druck
   Spezifität: Elementregeln stehen in :where() (Spezifität 0), Komponenten sind einfache Klassen/BEM.
   Dunkle Flächen (.hero, .section--night, .footer) überschreiben lokal die Farb-Tokens, die Komponenten darin
   brauchen keine Sonderregeln.
   ========================================================================== */

/* ---------- 0 · Tokens ---------------------------------------------------- */
:root {
  color-scheme: light;

  /* Farben (DESIGN §1, Stand 31.10. 09:10: Salbei, rosa Onyx, Eiche – aus den echten Räumen; kein Kupfer mehr) */
  --c-bg: #F6F4EF;
  --c-surface: #FFFFFF;
  --c-ink: #1B1A17;
  --c-muted: #625C53;
  --c-line: rgba(27, 26, 23, .12);
  --c-line-strong: rgba(27, 26, 23, .50);
  --c-sage: #A9B59E;
  --c-sage-soft: #DDE3D6;
  --c-accent: #5B6E55;
  --c-rose: #B4776A;   /* Rosa Onyx, abgedunkelt auf 3,3:1 fuer Kompass-Marker (WCAG 1.4.11) */
  --c-rose-soft: #EFDCD5;
  --c-oak: #B8895A;
  --c-night: #1E2622;
  --c-night-deep: #141A17;
  --c-ok: #4C7A5F;
  --c-on-night: #F6F4EF;
  /* Kompatibilitäts-Aliase für booking.css (FORM) und map.css (MAP) */
  --c-accent-soft: var(--c-sage);
  --c-accent-ink: var(--c-accent);
  /* Rollen (keine neuen Farben): Akzenttext auf Salbei-/Onyx-Flächen bleibt AA, feste Töne für Buttons auf Dunkel */
  --c-accent-strong: color-mix(in srgb, var(--c-accent) 72%, var(--c-ink));
  --c-eyebrow: var(--c-accent);
  --c-sage-lit: #A9B59E;
  --c-on-accent: #1B1A17;
  --c-night-line: rgba(246, 244, 239, .16);
  --btn-primary-bg: var(--c-ink);
  --btn-primary-fg: #FFFFFF;
  --btn-primary-hover: var(--c-accent);
  --cmp-center-bg: var(--c-ink);
  --cmp-center-fg: var(--c-bg);
  --page-ink: var(--c-ink);
  --focus: var(--c-accent);

  /* Typografie (DESIGN §2) */
  --font-display: Newsreader, "Newsreader Fallback", "Iowan Old Style", Georgia, serif;
  --font-text: "Sofia Sans", "Sofia Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-display: clamp(2.75rem, 2rem + 4vw, 6rem);
  --fs-h2: clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
  --fs-h3: clamp(1.35rem, 1.2rem + .6vw, 1.75rem);
  --fs-quote: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem);
  --fs-lead: clamp(1.125rem, 1.05rem + .4vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: .9rem;
  --fs-eyebrow: .78rem;
  --fs-num: clamp(2.5rem, 2rem + 2vw, 4rem);

  /* Raum, Raster, Form (DESIGN §3) */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --section-pad: clamp(4rem, 9vw, 8rem);
  --container: 1200px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: 68ch;
  --r-card: 20px;
  --r-img: 14px;
  --r-pill: 999px;
  --shadow-float: 0 20px 50px -20px rgba(28, 39, 64, .25);

  /* Bewegung */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, .84, .3, 1);

  /* Maße der festen Leisten */
  --topbar-h: 4.25rem;
  --bookbar-h: 4.75rem;

  quotes: "„" "“" "‚" "‘";
  interpolate-size: allow-keywords;
}



@media (min-width: 768px) {
  :root { --bookbar-h: 0px; }
}

/* Dunkle Fläche (nur Fußzeile): Tokens lokal umlenken */
.footer {
  --c-ink: var(--c-on-night);
  --c-muted: rgba(246, 244, 239, .76);
  --c-line: var(--c-night-line);
  --c-line-strong: rgba(246, 244, 239, .5);
  --c-accent-ink: var(--c-sage-lit);
  --c-accent-soft: var(--c-sage-lit);
  --c-eyebrow: var(--c-sage-lit);
  --c-surface: rgba(246, 244, 239, .06);
  --focus: var(--c-sage-lit);
  color: var(--c-on-night);
  font-weight: 380;
}

/* Zitier-Zeichen je Sprache (nur Typografie, kein Text). --qm-top richtet das große Zierzeichen am Textrand aus:
   tiefes „ sitzt auf der Grundlinie, hohes “ an der Oberlinie, « » mittig (gemessen mit Newsreader 6rem). */
:root { --qm-top: -2.95rem; }
:lang(en), :lang(tr), :lang(zh), :lang(ar), :lang(ja), :lang(ko) { quotes: "“" "”" "‘" "’"; --qm-top: .7rem; }
:lang(sv), :lang(fi) { quotes: "”" "”" "’" "’"; --qm-top: .7rem; }
:lang(fr), :lang(es), :lang(it), :lang(ru), :lang(sq), :lang(nb) { quotes: "«" "»" "‹" "›"; --qm-top: -1.8rem; }
:lang(da) { quotes: "»" "«" "›" "‹"; --qm-top: -1.8rem; }
:lang(hu), :lang(pl), :lang(ro), :lang(nl) { quotes: "„" "”" "‚" "’"; }

/* ---------- 1 · Basis ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topbar-h) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-ink);
  font: 400 var(--fs-body) / 1.6 var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

:where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd, address, fieldset) { margin: 0; }
:where(h1, h2, h3, h4) { font-family: var(--font-display); font-weight: 400; }
:where(ul, ol) { padding: 0; list-style: none; }
:where(img, svg, picture, video, canvas) { display: block; max-width: 100%; }
:where(img, video) { height: auto; }
:where(a) { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .2em; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(button) { padding: 0; border: 0; background: none; cursor: pointer; }
:where(summary) { cursor: pointer; }
:where(address) { font-style: normal; }
:where([hidden]) { display: none !important; }
:where(dialog) { color: inherit; }

::selection { background: color-mix(in srgb, var(--c-accent) 30%, transparent); }

:where(:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
main:focus { outline: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: .8rem 1.3rem;
  border-radius: var(--r-pill);
  background: var(--c-night);
  color: var(--c-on-night);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:not(:focus) {
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.icon { display: inline-block; flex: none; vertical-align: middle; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 2 · Typografie ------------------------------------------------- */
.display {
  font: 400 var(--fs-display) / .98 var(--font-display);
  letter-spacing: -.015em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.h2 {
  font: 400 var(--fs-h2) / 1.05 var(--font-display);
  letter-spacing: -.01em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.h3 { font: 500 var(--fs-h3) / 1.15 var(--font-display); }
.lead {
  max-width: var(--measure);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.eyebrow {
  font: 600 var(--fs-eyebrow) / 1.3 var(--font-text);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--c-eyebrow);
}
.num {
  font-family: var(--font-display);
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
}
.prose { max-width: var(--measure); }
.prose > :where(* + *) { margin-top: 1.1em; }
.prose :where(h2) { margin-top: 2em; font-size: var(--fs-h3); font-weight: 500; line-height: 1.15; }
.prose :where(h3) { margin-top: 1.6em; font-size: 1.25rem; font-weight: 500; }
.prose :where(ul, ol) { padding-inline-start: 1.25em; list-style: revert; }
.prose :where(li + li) { margin-top: .4em; }
.prose :where(a) { color: var(--c-accent); text-decoration-color: color-mix(in srgb, var(--c-accent) 50%, transparent); }
.prose :where(a:hover) { text-decoration-color: currentColor; }

/* ---------- 3 · Layout ----------------------------------------------------- */
/* Seitenkopf der Unterseiten: <header class="page-head"> mit .eyebrow, h1, .lead (optional in .container) */
.page-head { padding-block: clamp(2.75rem, 7vw, 5.5rem) clamp(1.75rem, 4vw, 3rem); }
.page-head,
.page-head > .container { display: grid; align-content: start; justify-items: start; gap: .9rem; }
.page-head > *, .page-head > .container > * { min-width: 0; max-width: 100%; }
.page-head :where(h1) {
  max-width: 22ch;
  font: 400 clamp(2.25rem, 1.6rem + 3.2vw, 4.5rem) / 1.02 var(--font-display);
  letter-spacing: -.015em;
  text-wrap: balance;
  overflow-wrap: anywhere;   /* lange deutsche Wörter („Datenschutzerklärung“) dürfen auf 320 px umbrechen */
  hyphens: auto;
}
.page-head :where(.lead) { margin-top: .35rem; }
/* Hinweis-/Regelkasten */
.box {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-surface);
}

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section-pad); }
.section--tight { padding-block: calc(var(--section-pad) * .5); }
.section--surface { background: var(--c-surface); }
.section--night { background: var(--c-sage-soft); }
.section--sage { --c-eyebrow: var(--c-accent-strong); background: var(--c-sage-soft); }   /* Kompass-Sektion */
.section--rose { --c-eyebrow: var(--c-accent-strong); background: var(--c-rose-soft); }   /* Onyx-Fläche hinter den Zitaten */

.section__head {
  display: grid;
  gap: .9rem;
  max-width: 52rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.section__cta { margin-top: clamp(2rem, 5vw, 3rem); }

.grid { display: grid; gap: var(--space-5); }
@media (min-width: 768px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Bilder */
.pic, .pic > img { width: 100%; height: 100%; }
.pic { display: block; }
.pic > img { object-fit: cover; }

/* ---------- 4 · Buttons ---------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink);
  --btn-bd: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 48px;
  padding: .9rem 1.5rem;
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 600 1rem / 1.2 var(--font-text);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn .icon { width: 1.15em; height: 1.15em; }

.btn--primary { --btn-bg: var(--btn-primary-bg); --btn-fg: var(--btn-primary-fg); }
.btn--primary:hover { --btn-bg: var(--btn-primary-hover); }

/* Button auf Dunkel: helles Salbei + schwarze Schrift (in beiden Farbschemata gleich) */
.btn--light { --btn-bg: var(--c-sage-lit); --btn-fg: var(--c-on-accent); }
.btn--light:hover { --btn-bg: color-mix(in srgb, var(--c-sage-lit) 78%, #fff); }

.btn--ghost,
.btn--route { --btn-bd: var(--c-line-strong); }
.btn--ghost:hover,
.btn--route:hover { --btn-bd: var(--c-eyebrow); --btn-bg: color-mix(in srgb, var(--c-eyebrow) 10%, transparent); }

.btn--small {
  min-height: 44px;   /* echte Boxhöhe = Tippfläche (QA misst die Box, kein ::after) */
  padding: .5rem 1.1rem;
  font-size: .9rem;
}

.btn--wa { --btn-bd: var(--c-ok); --btn-fg: var(--c-ok); }
.btn--wa:hover { --btn-bg: color-mix(in srgb, var(--c-ok) 10%, transparent); }

/* ---------- 5 · Kopf, Navigation, Sprachwahl ------------------------------- */
.topbar {
  --tb-fg: var(--c-ink);
  --tb-bg: transparent;
  --tb-bd: transparent;
  --tb-line: var(--c-accent);
  --c-line-strong: color-mix(in srgb, var(--tb-fg) 50%, transparent);
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-h);
  background: var(--tb-bg);
  color: var(--tb-fg);
  border-bottom: 1px solid var(--tb-bd);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  view-transition-name: topbar;
}
.topbar.is-solid {
  --tb-fg: var(--c-ink);
  --tb-bg: color-mix(in srgb, var(--c-bg) 88%, transparent);
  --tb-bd: var(--c-line);
  --tb-line: var(--c-accent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}
.topbar__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
}
.topbar__brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 44px;
  min-width: 44px;
  margin-inline-end: auto;
  line-height: 1;
  text-decoration: none;
}
.topbar__brand-sub { font: 600 11px / 1.25 var(--font-text); letter-spacing: .06em; white-space: nowrap; }

/* Markenzeichen nach dem Flur-Schild: SOBA in dünner Versalschrift, Laufweite .32em, im schmalen quadratischen Rahmen */
.brand-mark {
  --bm: 40px;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--bm);
  height: var(--bm);
  border: 1.5px solid currentColor;
  font: 300 calc(var(--bm) * .235) / 1 var(--font-text);
  letter-spacing: .32em;
  text-indent: .32em;      /* gleicht den nachgestellten Buchstabenabstand aus, der Schriftzug sitzt mittig */
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-mark--lg { --bm: 72px; }
/* Fußzeile: Schild auf Salbei-Fläche, wie an der Flurwand */
.brand-tile {
  display: inline-grid;
  padding: clamp(1rem, 3vw, 1.4rem);
  background: var(--c-sage);
  color: var(--page-ink);
}
.topbar__tools { display: flex; align-items: center; gap: .35rem; }
.topbar__cta { display: none; }
.topbar:not(.is-solid) .topbar__cta { --btn-bg: var(--btn-primary-bg); --btn-fg: var(--btn-primary-fg); }
.topbar.is-solid .topbar__cta { --btn-bg: var(--btn-primary-bg); --btn-fg: var(--btn-primary-fg); }
@media (min-width: 768px) { .topbar__cta { display: inline-flex; margin-inline-start: .5rem; } }

/* Menü-Schalter */
.nav__toggle {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: inherit;
}
.nav__toggle:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.nav__toggle-close { display: none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-open { display: none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-close { display: block; }

/* Navigation: mobil Vollbild-Menü, ab lg inline */
.nav {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: calc(var(--topbar-h) + 1.5rem) var(--gutter) 2rem;
  background: var(--c-night);
  color: var(--c-on-night);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-.75rem);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
  overflow-y: auto;
}
.nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.nav__list { display: grid; gap: .25rem; }
.nav__link {
  display: flex;
  align-items: center;
  min-height: 56px;
  font: 400 clamp(1.75rem, 6vw, 2.5rem) / 1.1 var(--font-display);
  text-decoration: none;
}
.nav__link[aria-current="page"] { color: var(--c-sage-lit); }
.nav__cta { align-self: flex-start; }
html.nav-open { overflow: hidden; }
html.nav-open .topbar {
  --tb-fg: var(--c-on-night);
  --tb-bg: transparent;
  --tb-bd: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (min-width: 1024px) {
  .nav {
    position: static;
    z-index: auto;
    flex: 1;
    flex-direction: row;
    justify-content: center;
    gap: 0;
    padding: 0;
    background: none;
    color: inherit;
    visibility: visible;
    opacity: 1;
    transform: none;
    overflow: visible;
    transition: none;
  }
  .nav__list { display: flex; gap: .25rem; }
  .nav__item--home, .nav__cta { display: none; }
  .nav__link {
    position: relative;
    min-height: 44px;
    padding-inline: .9rem;
    font: 600 .95rem / 1 var(--font-text);
  }
  .nav__link::after {
    content: "";
    position: absolute;
    inset: auto .9rem .5rem;
    height: 2px;
    border-radius: 2px;
    background: var(--tb-line);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ease);
  }
  .nav__link:hover::after,
  .nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .nav__link[aria-current="page"] { color: inherit; }
  .nav__toggle { display: none; }
  .topbar__inner { gap: 1.5rem; }
  .topbar__brand { margin-inline-end: 0; }
}

/* ohne JS: Navigation bleibt sichtbar und umbricht */
.no-js .topbar { position: static; height: auto; padding-block: .6rem; --tb-fg: var(--c-ink); --tb-bg: var(--c-bg); }
.no-js .topbar__inner { flex-wrap: wrap; height: auto; }
.no-js .nav { position: static; z-index: auto; visibility: visible; opacity: 1; transform: none; flex-direction: row; padding: 0; background: none; color: inherit; width: 100%; order: 5; overflow: visible; }
.no-js .nav__list { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.no-js .nav__link { min-height: 44px; font: 600 1rem / 1 var(--font-text); }
.no-js .nav__toggle, .no-js .lang-switch, .no-js .nav__cta { display: none; }
.no-js .hero { margin-top: 0; padding-top: 0; }

/* Sprachwahl */
.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0 .7rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  color: inherit;
  font: 600 .85rem / 1 var(--font-text);
  letter-spacing: .06em;
}
.lang-switch__btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.lang-switch__code { display: none; }
@media (min-width: 480px) { .lang-switch__code { display: inline; } }

.lang-dialog {
  width: min(36rem, calc(100% - 2rem));
  max-height: min(38rem, 88svh);
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: var(--shadow-float);
  overflow: auto;
}
.lang-dialog::backdrop {
  background: color-mix(in srgb, var(--c-night-deep) 64%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.lang-dialog[open] { animation: dialog-in .28s var(--ease); }
.lang-dialog__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem .9rem .5rem 1.5rem;
  background: var(--c-surface);
}
.lang-dialog__title { font: 500 var(--fs-h3) / 1.15 var(--font-display); }
.lang-dialog__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.lang-dialog__close:hover { background: color-mix(in srgb, var(--c-ink) 8%, transparent); }
.lang-dialog__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: .25rem;
  padding: .5rem 1rem 1.25rem;
}
.lang-dialog__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 48px;
  padding: .5rem .9rem;
  border-radius: 12px;
  font-weight: 500;
  text-decoration: none;
}
.lang-dialog__link:hover { background: color-mix(in srgb, var(--c-ink) 7%, transparent); }
.lang-dialog__link[aria-current] { color: var(--c-accent-ink); font-weight: 600; }

/* ---------- 6 · Hero ------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: 34rem;
  min-height: clamp(34rem, 92svh, 62rem);
  margin-top: calc(var(--topbar-h) * -1);
  padding-top: var(--topbar-h);
  background: var(--c-sage-soft);
  overflow: hidden;
  overflow: clip;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { object-position: 60% 45%; transform-origin: 50% 40%; animation: hero-zoom 18s var(--ease-out) both; }
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Heller Verlauf von unten in der Wandfarbe: Text bleibt lesbar, das Foto leuchtet oben unangetastet. Keine dunklen Flächen über den Zimmern. */
  --scrim-at: 30%; --scrim-end: 72%;
  background: linear-gradient(to top, color-mix(in srgb, var(--c-bg) 97%, transparent) 0, color-mix(in srgb, var(--c-bg) 84%, transparent) var(--scrim-at), color-mix(in srgb, var(--c-bg) 40%, transparent) 55%, transparent var(--scrim-end));
}
@media (min-width: 768px) { .hero__scrim { --scrim-at: 26%; --scrim-end: 66%; } }
.hero--plain .hero__scrim { background: none; }
.hero__content {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
  padding-block: clamp(3rem, 8vw, 6rem) calc(clamp(2.5rem, 6vw, 5rem) + var(--bookbar-h));
}
.hero__eyebrow { margin-bottom: -.25rem; color: var(--c-ink); }
.hero__claim { max-width: 12ch; }
.hero__sub {
  max-width: 30ch;
  font: italic 400 var(--fs-lead) / 1.4 var(--font-display);
  color: var(--c-ink);
}
.hero__trust {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1.1rem .55rem .9rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: .95rem;
  line-height: 1.2;
}
.hero__trust .icon { color: var(--c-accent); }
.hero__trust .num { margin-inline-end: .1em; font-size: 1.55rem; line-height: 1; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
@media (max-width: 479px) {
  .hero__actions { display: grid; width: 100%; }
}

.hero__eyebrow, .hero__claim, .hero__sub, .hero__trust, .hero__actions {
  animation: fade-up .75s var(--ease) both;
  animation-delay: calc(var(--n, 0) * 80ms + 120ms);
}
.hero__claim { --n: 1; }
.hero__sub { --n: 2; }
.hero__trust { --n: 4; }
.hero__actions { --n: 5; }

/* ---------- 7 · Intro ------------------------------------------------------ */
.intro { display: grid; gap: 1.5rem 4rem; }
.intro__head { display: grid; gap: .9rem; align-content: start; }
@media (min-width: 768px) {
  .intro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .intro__photos { grid-column: 1 / -1; }
}
/* Flur mit SOBA-Schild und Gemeinschaftsküche (data/apartments.json → house.photos) */
.intro__photos { display: grid; gap: clamp(.75rem, 2vw, 1.25rem); margin-top: clamp(1rem, 3vw, 2rem); }
.intro__photo { margin: 0; overflow: hidden; border-radius: var(--r-img); background: var(--c-sage-soft); }
.intro__photo--sign { aspect-ratio: 3 / 2; }
.intro__photo--kitchen { aspect-ratio: 4 / 5; }
@media (min-width: 768px) {
  .intro__photos { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); height: clamp(22rem, 38vw, 34rem); }
  .intro__photo--sign, .intro__photo--kitchen { aspect-ratio: auto; height: 100%; }
}

/* ---------- 8 · Kompass + Orte --------------------------------------------- */
.compass-section {
  display: grid;
  gap: 2.5rem 4rem;
  grid-template-areas: "text" "figure" "list";
}
.compass-section__text { grid-area: text; display: grid; gap: 1.1rem; align-content: start; justify-items: start; }
.compass-section__figure { grid-area: figure; min-width: 0; }
.compass-section__list { grid-area: list; min-width: 0; }
@media (min-width: 1024px) {
  .compass-section {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "text figure" "list list";
    align-items: center;
  }
}

.compass { display: grid; gap: 1rem; max-width: 44rem; margin-inline: auto; }
.compass__stage {
  position: relative;
  container: compass / inline-size;
  overflow: hidden;
  overflow: clip;
}
/* schmal: Kreis füllt die Breite (Seitenränder der viewBox ragen unsichtbar heraus), breit: komplette viewBox */
.compass__svg {
  width: calc(100% * var(--vb-w) / var(--core-w));
  max-width: none;
  height: auto;
  margin-inline: calc((100% - 100% * var(--vb-w) / var(--core-w)) / 2);
  overflow: visible;
}
@container compass (min-width: 480px) {
  .compass__svg { width: 100%; margin-inline: 0; }
}

.compass__disc { fill: var(--c-bg); }
.compass__ring {
  fill: none;
  stroke: var(--c-accent);
  stroke-opacity: .6;
  stroke-width: 1.5;
}
.compass__axis {
  stroke: var(--c-accent);
  stroke-width: 1.5;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
}
.compass__ringlabel {
  font: 500 12px / 1 var(--font-display);
  fill: var(--c-muted);
  paint-order: stroke;
  stroke: var(--c-bg);
  stroke-width: 3px;
  font-variant-numeric: lining-nums;
}
.compass__card {
  font: 600 13px / 1 var(--font-text);
  fill: var(--c-muted);
  letter-spacing: .08em;
}
.compass__center circle { fill: var(--cmp-center-bg); }
.compass__center use { color: var(--cmp-center-fg); }

.compass__poi {
  cursor: pointer;
  outline: none;
  transform-box: fill-box;
  transform-origin: center;
  -webkit-tap-highlight-color: transparent;
}
/* Tippfläche: Kreis mit 22,5 px Radius auf dem Bildschirm (Maßstab = Containerbreite / Kernbreite der viewBox, über atan2 als Zahl),
   höchstens der halbe Abstand zum nächsten Marker (--hm, in viewBox-Einheiten, vom Build berechnet): Kreise überlappen nie,
   im Zweifel gewinnt der nähere Punkt. !important, damit feste r-Werte aus Seiten-CSS (Kompass-Teaser auf Unterseiten) nicht
   zu überlappenden Flächen führen. Ohne atan2() greifen die festen Werte davor bzw. die der Seite. */
.compass__hit {
  fill: transparent;
  r: 30px;
  r: max(calc(12px / tan(atan2(100cqw, calc(var(--core-w) * 1px)))), min(calc(22.5px / tan(atan2(100cqw, calc(var(--core-w) * 1px)))), calc(var(--hm, 999) * 1px))) !important;
}
.compass__halo { fill: none; stroke: var(--c-accent); stroke-width: 1.5; opacity: 0; transition: opacity .2s var(--ease); }
.compass__dot {
  fill: var(--c-rose);
  stroke: #FFFFFF;
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .2s var(--ease);
}
.compass__leader {
  display: none;
  stroke: var(--c-line-strong);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.compass__label {
  display: none;
  font: 600 15.5px / 1 var(--font-text);
  fill: var(--c-ink);
  paint-order: stroke;
  stroke: var(--c-bg);
  stroke-width: 5px;
  stroke-linejoin: round;
  transition: fill .2s var(--ease);
}
.compass__num {
  display: block;
  font: 500 17px / 1 var(--font-display);
  fill: var(--c-ink);
  paint-order: stroke;
  stroke: var(--c-bg);
  stroke-width: 4px;
  stroke-linejoin: round;
}
@container compass (min-width: 480px) {
  .compass__leader { display: inline; }
  .compass__label { display: block; }
  .compass__num { display: none; }
  .compass__hit {
    r: 22px;
    r: max(calc(12px / tan(atan2(100cqw, calc(var(--vb-w) * 1px)))), min(calc(22.5px / tan(atan2(100cqw, calc(var(--vb-w) * 1px)))), calc(var(--hm, 999) * 1px))) !important;
  }
}
@container compass (min-width: 600px) {
  .compass__label { font-size: 13.5px; }
}
/* Schmale Kompasse: SVG-Texte bleiben auf dem Bildschirm mindestens 11 px gross (gleiche Umrechnung wie .compass__hit). */
@container compass (max-width: 599px) {
  .compass__num, .compass__ringlabel, .compass__card, .compass__label { font-size: max(11px, calc(11px / tan(atan2(100cqw, calc(var(--vb-w) * 1px))))); }
}
.compass__poi:hover .compass__halo,
.compass__poi.is-active .compass__halo,
.compass__poi:focus-visible .compass__halo { opacity: 1; }
.compass__poi:hover .compass__dot,
.compass__poi.is-active .compass__dot,
.compass__poi:focus-visible .compass__dot { transform: scale(1.35); }
.compass__poi:hover .compass__label,
.compass__poi.is-active .compass__label,
.compass__poi:focus-visible .compass__label { fill: var(--c-eyebrow); }
.compass__poi:focus-visible .compass__halo { stroke-width: 2.5; }

.compass__caption { display: grid; gap: .6rem; justify-items: center; text-align: center; }
.compass__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.5rem; font-size: var(--fs-small); color: var(--c-muted); }
.compass__legend-item { display: inline-flex; align-items: center; gap: .55rem; }
.compass__key { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.compass__key--house { background: var(--cmp-center-bg); color: var(--cmp-center-fg); }
.compass__key--ring { border: 1.5px solid var(--c-accent); }
.compass__note { max-width: 36ch; font-size: var(--fs-small); color: var(--c-muted); }
/* kleine Variante (Seite „Lage“): nur Punkte, Tooltip bei Hover/Tipp/Fokus, ohne Ziffern */
.compass--small { max-width: 20rem; gap: .6rem; }
.compass--small .compass__num { display: none; }
.compass--small .compass__legend { gap: .3rem 1rem; font-size: .8rem; }
.compass--small .compass__note { font-size: .8rem; }

/* Tooltip (site.js baut ihn aus den data-Attributen der Marker) */
.compass__tip {
  position: absolute;
  z-index: 5;
  width: max-content;
  max-width: min(17rem, 92%);
  padding: .9rem 1rem 1rem;
  border: 1px solid var(--c-night-line);
  border-radius: 14px;
  background: var(--c-night);
  color: var(--c-on-night);
  box-shadow: var(--shadow-float);
  font-size: .9rem;
  line-height: 1.3;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, calc(-100% - 14px));
  transition: opacity .15s var(--ease), visibility 0s linear .15s;
}
.compass__tip.is-below { transform: translate(-50%, 14px); }
.compass__tip.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.compass__tip-name { font: 500 1.15rem / 1.2 var(--font-display); }
.compass__tip-min { margin-top: .15rem; color: var(--c-sage-lit); }
.compass__tip-min .num { font-size: 1.25em; }
.compass__tip .btn { margin-top: .7rem; }

/* Orte: Begleitliste + allgemeine Ortsliste */
.compass__list,
.poi-list { display: grid; border-top: 1px solid var(--c-line); }
@media (min-width: 768px) {
  .compass__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
}
.poi {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .25rem 1rem;
  align-items: start;
  padding: 1.15rem .5rem 1.15rem 0;
  border-bottom: 1px solid var(--c-line);
  transition: background-color .25s var(--ease);
}
.poi--num { grid-template-columns: auto minmax(0, 1fr); }
.poi.is-active { background: color-mix(in srgb, var(--c-accent) 9%, transparent); }
.poi__num {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-top: .1rem;
  border: 1.5px solid var(--c-accent);
  border-radius: 50%;
  color: var(--c-eyebrow);
  font-size: 1.05rem;
  line-height: 1;
}
.poi__body { min-width: 0; }
.poi__name { font: 500 1.25rem / 1.2 var(--font-display); }
.poi__meta { display: flex; flex-wrap: wrap; gap: 0 .6rem; margin-top: .2rem; font-size: var(--fs-small); color: var(--c-muted); }
.poi__time .num { color: var(--c-ink); font-size: 1.2em; }
.poi__cat::before { content: "·"; margin-inline-end: .6rem; }
.poi__blurb { margin-top: .5rem; max-width: var(--measure); color: var(--c-muted); }
.poi__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; grid-column: 1 / -1; }
@media (min-width: 768px) { .poi--num .poi__actions { grid-column: 2; } }
.poi[hidden] { display: none; }

.poi-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.chip {
  min-height: 44px;
  padding: .5rem 1.1rem;
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  font: 600 .9rem / 1.1 var(--font-text);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.chip:hover { border-color: var(--c-accent); }
.chip.is-active { border-color: var(--c-accent); background: var(--c-sage); color: var(--c-ink); }

/* ---------- 9 · Apartments ------------------------------------------------- */
.apt-grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 768px) {
  .apt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.apt {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-surface);
  overflow: hidden;
  transition: border-color .25s var(--ease);
}
.apt:hover { border-color: color-mix(in srgb, var(--c-accent) 50%, var(--c-line)); }
.apt__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--c-sage-soft); }
.apt__body { display: flex; flex: 1; flex-direction: column; gap: 1rem; padding: clamp(1.25rem, 3vw, 1.75rem); }
.apt__name { font: 500 var(--fs-h3) / 1.15 var(--font-display); }
.apt__tease { color: var(--c-muted); }
.apt__facts { display: flex; flex-wrap: wrap; gap: .55rem 1.35rem; }
.apt__fact { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-small); }
.apt__fact .icon { color: var(--c-accent); }
.apt__foot { display: grid; gap: 1rem; margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--c-line); }
.apt__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }
.apt__unit { font-size: var(--fs-small); color: var(--c-muted); }
.apt__cta { display: flex; flex-wrap: wrap; gap: .6rem; }
.apt-note { margin-top: 1.5rem; max-width: var(--measure); font-size: var(--fs-small); color: var(--c-muted); }

.price { font-family: var(--font-display); }
.price__pre { font: 400 var(--fs-small) var(--font-text); color: var(--c-muted); }
.price__num { font-size: 2rem; line-height: 1; }

/* ---------- 10 · Gästestimmen ---------------------------------------------- */
.quotes-section { display: grid; gap: 2.5rem 4rem; }
@media (min-width: 1024px) {
  .quotes-section { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
}
.quotes-section__head { display: grid; gap: 1.1rem; align-content: start; }
.quotes-section__text { max-width: 46ch; color: var(--c-muted); }
.quotes-section__slider { min-width: 0; }
.score { display: flex; align-items: center; gap: 1.1rem; }
.score__num { font-size: clamp(4.5rem, 3rem + 5vw, 7rem); line-height: .85; color: var(--c-accent); }
.score__meta { display: grid; gap: .15rem; font-size: var(--fs-small); color: var(--c-muted); }
.score__of { color: var(--c-ink); font-weight: 600; }

.quotes { position: relative; }
.quotes__track {
  display: flex;
  gap: clamp(1rem, 3vw, 2rem);
  padding-block: .25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.quotes__track::-webkit-scrollbar { display: none; }
.quote { flex: 0 0 88%; scroll-snap-align: start; scroll-snap-stop: always; }
@media (min-width: 768px) { .quote { flex-basis: min(100%, 38rem); } }
.quote__fig { position: relative; display: grid; align-content: start; gap: .9rem; padding-top: 3.4rem; }
.quote__mark {
  position: absolute;
  top: var(--qm-top);
  inset-inline-start: -.02em;
  font: 400 6rem / 1 var(--font-display);
  color: var(--c-rose);
  pointer-events: none;
}
.quote__mark::before { content: open-quote; }
.quote__mark::after { content: no-close-quote; } /* hält die Verschachtelungstiefe bei 1, sonst wird ab dem 2. Zitat „‚“ gesetzt */
.quote__text { font: italic 400 var(--fs-quote) / 1.25 var(--font-display); }
.quote--long .quote__text { font-size: calc(var(--fs-quote) * .82); }
.quote__by { font: 600 var(--fs-small) / 1.3 var(--font-text); letter-spacing: .02em; color: var(--c-muted); }
.quotes__nav { display: flex; align-items: center; gap: .75rem; margin-top: 1.75rem; }
.quotes__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--c-line-strong);
  border-radius: 50%;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), opacity .2s;
}
.quotes__btn:hover:not([disabled]) { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 8%, transparent); }
.quotes__btn[disabled] { opacity: .35; cursor: default; }
.quotes__btn .icon--prev { transform: rotate(90deg); }
.quotes__btn .icon--next { transform: rotate(-90deg); }
[dir="rtl"] .quotes__btn .icon--prev { transform: rotate(-90deg); }
[dir="rtl"] .quotes__btn .icon--next { transform: rotate(90deg); }
.quotes__pos { min-width: 3.5rem; font-size: 1.15rem; text-align: center; color: var(--c-muted); }
html:not(.js) .quotes__nav { display: none; }

/* ---------- 11 · Sarajevo in sechs Kapiteln -------------------------------- */
.chapters { --pad: clamp(1.25rem, 3vw, 1.75rem); display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 768px) { .chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chapter {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: var(--pad);
  border: 1px solid var(--c-night-line);
  border-radius: var(--r-card);
  background: rgba(246, 244, 239, .045);
  overflow: hidden;
}
.chapter__media {
  aspect-ratio: 3 / 2;
  margin: calc(var(--pad) * -1) calc(var(--pad) * -1) .5rem;
  overflow: hidden;
  background: var(--c-night-deep);
}
.chapter__year { color: var(--c-oak); }
.chapter__title { font: 500 var(--fs-h3) / 1.15 var(--font-display); }
.chapter__text { color: var(--c-muted); }
.chapter__route { display: grid; justify-items: start; gap: .7rem; margin-top: auto; padding-top: .9rem; }
.chapter__where { font-size: var(--fs-small); color: var(--c-muted); }
.chapter__place { color: var(--c-ink); font-weight: 600; }

/* ---------- 12 · Buchen ---------------------------------------------------- */
.book__ways { display: grid; gap: 1.25rem; }
@media (min-width: 768px) {
  .book__ways { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}
.way {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-surface);
}
.way__title { font: 500 var(--fs-h3) / 1.15 var(--font-display); }
.way__text { color: var(--c-muted); }
.way__action { margin-top: auto; padding-top: .6rem; }
.way__action > .btn { width: 100%; }

.book__more { display: grid; gap: 2.5rem; margin-top: clamp(2.5rem, 6vw, 4rem); }
@media (min-width: 1024px) {
  .book__more:has(.book__form) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}
.perks { display: grid; gap: 1.1rem; align-content: start; }
.perks__title { font: 500 var(--fs-h3) / 1.15 var(--font-display); }
.perks__list { display: grid; gap: .9rem; max-width: 46ch; }
.perk { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; }
.perk .icon { margin-top: .2rem; color: var(--c-ok); }
.book__form { min-width: 0; }
.book__form > .booking-form { box-shadow: var(--shadow-float); }
/* Formular- und Widget-Styles (.booking-form, .booking-widget, .field*, .form__status) liefert assets/css/booking.css (FORM). */

/* Mobile Buchungsleiste */
.bookbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem var(--gutter) calc(.65rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--c-line);
  background: color-mix(in srgb, var(--c-surface) 92%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: transform .35s var(--ease);
}
.bookbar.is-hidden { transform: translateY(110%); }
.bookbar__price { display: grid; padding: .4rem .95rem; border-radius: 18px; background: var(--c-rose-soft); line-height: 1.15; }
.bookbar__price .price__pre { font-size: .8rem; }
.bookbar__price .price__num { font-size: 1.6rem; }
.bookbar__unit { font-size: .8rem; color: var(--c-muted); }
@media (min-width: 768px) { .bookbar { display: none; } }

/* ---------- 13 · FAQ -------------------------------------------------------- */
.faq-section { display: grid; gap: 2rem 4rem; }
.faq-section__head { display: grid; gap: .9rem; align-content: start; }
@media (min-width: 1024px) {
  .faq-section { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .faq-section__head { position: sticky; top: calc(var(--topbar-h) + 2rem); }
}
.faq { border-top: 1px solid var(--c-line); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
  padding: 1rem 0;
  font: 500 1.25rem / 1.25 var(--font-display);
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--c-accent-ink); }
.faq__chev { color: var(--c-accent); transition: transform .3s var(--ease); }
.faq__item[open] .faq__chev { transform: rotate(180deg); }
.faq__a { max-width: var(--measure); padding-bottom: 1.4rem; color: var(--c-muted); }
@supports selector(::details-content) {
  .faq__item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size .35s var(--ease), content-visibility .35s allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; }
}

/* 404 */
.notfound__inner { display: grid; justify-items: start; align-content: center; gap: 1.25rem; min-height: 50vh; }

/* ---------- 14 · Fuß -------------------------------------------------------- */
.footer {
  --c-surface: transparent;
  padding-block: clamp(3rem, 7vw, 5rem) calc(2rem + var(--bookbar-h));
  background: var(--c-night-deep);
}
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.5rem; }
.footer__brand, .footer__addr, .footer__langs { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .footer__cols { gap: 2.5rem 2rem; }
  .footer__brand, .footer__addr { grid-column: auto; }
}
@media (min-width: 1024px) {
  .footer__cols { grid-template-columns: 1.5fr 1.1fr .8fr .9fr .9fr; }
  .footer__langs { grid-column: auto; }
}
.footer__logo { line-height: 0; }
.footer__sub { margin-top: .9rem; font-size: .85rem; letter-spacing: .04em; color: var(--c-muted); }
.footer__booking { max-width: 30ch; margin-top: 1.25rem; color: var(--c-muted); }
.footer__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.footer__title {
  margin-bottom: .9rem;
  font: 600 var(--fs-eyebrow) / 1.3 var(--font-text);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--c-sage-lit);
}
.footer__address { color: var(--c-muted); line-height: 1.7; margin-bottom: .5rem; }
.footer__list { display: grid; }
.footer__list--langs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
.footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--c-on-night);
  text-decoration: none;
}
.footer__link:hover { color: var(--c-sage-lit); text-decoration: underline; text-underline-offset: .25em; }
.footer__link[aria-current] { color: var(--c-sage-lit); }
.footer__rights {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-small);
  color: var(--c-muted);
}

/* ---------- 15 · Bewegung -------------------------------------------------- */
@keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* Reveal: nur mit JS versteckt (ohne JS bleibt alles sichtbar) */
.reveal { transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal:not(.is-in) { opacity: 0; transform: translateY(14px); }

/* Kompass zeichnet sich einmal beim ersten Sichtkontakt */
.js .compass:not(.is-in) .compass__ring { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .compass:not(.is-in) .compass__axis { opacity: 0; transform: scaleX(0); }
.js .compass:not(.is-in) .compass__center { opacity: 0; }
.js .compass:not(.is-in) .compass__poi { opacity: 0; transform: scale(.6); }
.js .compass.is-in .compass__ring {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.js .compass.is-in .compass__axis { transition: opacity .8s var(--ease) .5s, transform 1.1s var(--ease-out) .5s; }
.js .compass.is-in .compass__center { transition: opacity .6s var(--ease) .2s; }
.js .compass.is-in .compass__poi {
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(900ms + var(--i, 0) * 40ms);
}
.compass__poi:hover, .compass__poi:focus-visible { transition-delay: 0s !important; }

/* Seitenwechsel (progressiv) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .js .reveal:not(.is-in) { opacity: 1; transform: none; }
  .hero__media img { animation: none; }
  .js .compass:not(.is-in) .compass__ring { stroke-dasharray: none; stroke-dashoffset: 0; }
  .js .compass:not(.is-in) .compass__axis,
  .js .compass:not(.is-in) .compass__center,
  .js .compass:not(.is-in) .compass__poi { opacity: 1; transform: none; }
  @view-transition { navigation: none; }
}

/* ---------- 16 · Druck ----------------------------------------------------- */
@media print {
  :root { --c-bg: #fff; --c-surface: #fff; --c-ink: #000; --c-muted: #333; --c-line: #bbb; --bookbar-h: 0px; }
  .topbar, .bookbar, .nav, .lang-switch, .skip-link, .quotes__nav, .compass__tip, .poi__actions, .hero__scrim,
  .btn, .apt__cta, .chapter__route .btn, .book__form, .way__action, .footer__langs { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero { min-height: 0; margin: 0; padding: 0 0 1rem; background: none; color: #000; --c-ink: #000; --c-muted: #333; }
  .hero__media { position: static; max-height: 16rem; }
  .section { padding-block: 1.5rem; }
  .section--night, .footer { background: none; color: #000; --c-ink: #000; --c-muted: #333; --c-line: #bbb; --c-accent-ink: #000; --c-accent-soft: #000; --c-eyebrow: #000; --c-sage: #fff; }
  .js .reveal:not(.is-in) { opacity: 1; transform: none; }
  .quotes__track { display: block; overflow: visible; }
  .quote { margin-bottom: 1rem; }
  .apt, .chapter, .way, .poi, .quote, .faq__item { break-inside: avoid; }
  a[href^="http"]:not(.btn)::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; }
}

/* ---------- Phase 3 · Schriftstapel je Sprache (tools/fonts_extra.py liefert Noto Sans Arabic/Hebrew und Literata) ----------
   Arabisch/Hebräisch: eine Familie für Titel und Text (Noto Sans), Kyrillisch/Griechisch: Literata als Serife für Titel und Zitate
   (Newsreader hat kein Kyrillisch/Griechisch), Sofia Sans deckt den Fließtext ab. CJK: Systemschriften, keine eigenen Dateien. */
:lang(ar) { --font-display: "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif; --font-text: "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif; letter-spacing: 0; }
:lang(he) { --font-display: "Noto Sans Hebrew", "Segoe UI", Arial, sans-serif; --font-text: "Noto Sans Hebrew", "Segoe UI", Arial, sans-serif; letter-spacing: 0; }
:lang(ru), :lang(uk), :lang(bg), :lang(mk), :lang(el) { --font-display: Literata, "Newsreader Fallback", Georgia, "Times New Roman", serif; }
:lang(zh), :lang(zh-Hans) { --font-display: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif; --font-text: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif; }
:lang(ja) { --font-display: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP", "Yu Gothic", Meiryo, sans-serif; --font-text: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP", "Yu Gothic", Meiryo, sans-serif; }
:lang(ko) { --font-display: "Apple SD Gothic Neo", "Noto Sans CJK KR", "Malgun Gothic", sans-serif; --font-text: "Apple SD Gothic Neo", "Noto Sans CJK KR", "Malgun Gothic", sans-serif; }
:lang(ar) .display, :lang(he) .display, :lang(zh) .display, :lang(ja) .display, :lang(ko) .display { letter-spacing: 0; line-height: 1.15; }
:lang(ar) .brand-mark, :lang(he) .brand-mark { letter-spacing: .32em; }   /* Wortmarke bleibt lateinisch „SOBA“ */

/* Kompass auf Handys: Marker sind Anzeige, die nummerierte Begleitliste ist das Bedienelement (gleichwertiges Ziel, WCAG 2.5.8).
   So bleibt kein Tippziel unter 24 px; ab 768 px sind die Marker wieder anklickbar (Hover/Tooltip/Route). */
@media (max-width: 767px) {
  .compass__poi { pointer-events: none; }
}

/* ---------- Review 31.10. (REVIEW-2026-10-31.md) ---------- */
html { scroll-padding-bottom: calc(var(--bookbar-h) + 1rem); }                 /* P2-5: Fokus nicht unter der Buchen-Leiste */
.chapter__year { color: var(--c-accent-strong); }                                /* P2-6: Jahreszahlen 5,9:1 statt Eiche */
.section--night .eyebrow, .section--night .chapter__year { color: var(--c-accent-strong); }
/* P1-3: Auf Handys kein Vollbild-Zuschnitt mehr. Das Foto steht ungeschnitten und scharf als Karte oben, der Text darunter. */
@media (max-width: 767px) {
  .hero { display: block; min-height: 0; background: var(--c-bg); }
  .hero__media { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 3; margin: .5rem var(--gutter) 0; border-radius: var(--r-img); overflow: hidden; background: var(--c-sage-soft); }
  .hero__media picture, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero__media img { object-fit: cover; object-position: 55% 60%; animation: none; transform: none; }
  .hero__scrim { display: none; }
  .hero__content { padding-block: 1.5rem calc(2rem + var(--bookbar-h)); }
}

/* Kleiner Kompass (Lage-Kopf, Sarajevo-Abschluss): reine Anzeige, Marker nicht anklickbar; Bedienung über Liste bzw. Link „Alle Orte und Wege“. */
.compass--small .compass__poi { pointer-events: none; }

/* ==========================================================================
   I18N-Block (Agent I18N, 31.10.2026): Sprachdialog für alle Sprachen, Schreibrichtung (RTL) und Satz je Schrift.
   Alles, was Mehrsprachigkeit betrifft, steht hier; Regeln und Prüfwege: ../../../I18N.md. Spätere Regeln gewinnen bei gleicher Spezifität.
   ========================================================================== */

/* ---------- I18N 1 · Sprachdialog (alle gebauten Sprachen; ab md drei Spalten, mobil eine scrollbare Liste) ---------- */
.lang-dialog {
  width: min(calc(100% - 2rem), 36rem);
  max-height: min(54rem, 92svh);
  overscroll-behavior: contain;
}
.lang-dialog__head { padding: .9rem; padding-inline-start: 1.5rem; }
.lang-dialog__list { display: block; padding: .5rem 1rem 1.25rem; }
.lang-dialog__item { break-inside: avoid; }
.lang-dialog__item + .lang-dialog__item { margin-top: .125rem; }
.lang-dialog__item--start { margin-top: .875rem; }   /* Gruppenwechsel (Balkan · de/en · weitere): nur Abstand; am Spaltenanfang schneidet der Browser ihn ab */
.lang-dialog__link {
  min-height: 44px;
  font-family: var(--font-text);          /* :lang()-Schriftstapel des Eintrags (Arabisch, Hebräisch, CJK …), nicht der der Seite */
  scroll-margin: 5rem 0 1rem;             /* Fokus/Scrollen lässt den festen Kopf des Dialogs frei */
}
.lang-dialog__link[aria-current] { background: color-mix(in srgb, var(--c-accent) 10%, transparent); }
@media (min-width: 768px) {
  .lang-dialog { width: min(calc(100% - 4rem), 52rem); }
  .lang-dialog__list { column-count: 3; column-gap: .5rem; }
}
/* Fußzeile: die Sprachliste ist lang (bis 46 Einträge) und läuft deshalb über die volle Breite in Spalten */
.footer__langs { grid-column: 1 / -1; }
.footer__list--langs { display: block; column-width: 9.5rem; column-gap: 1.5rem; }
.footer__list--langs li { break-inside: avoid; }
.footer__list--langs .footer__link { font-family: var(--font-text); }   /* Schriftstapel des Eintrags (lang-Attribut), nicht der der Seite */
@media (min-width: 1024px) {
  .footer__cols { grid-template-columns: 1.5fr 1.1fr .8fr .9fr; }
}

/* ---------- I18N 2 · Schreibrichtung (RTL: ar, he, ur, fa; Test ohne Übersetzung: qa/rtl-overlay.json) ---------- */
/* Der Kompass bleibt geographisch (Norden oben, Osten rechts): SVG-Text hängt mit text-anchor start/end an direction und darf nicht spiegeln. */
.compass__svg { direction: ltr; }
/* Die Wortmarke SOBA ist lateinisch; text-indent gleicht den Buchstabenabstand links aus und muss links bleiben. */
.brand-mark { direction: ltr; }
[dir="rtl"] .skip-link { left: auto; right: 1rem; }
[dir="rtl"] .nav__link::after { transform-origin: right; }
[dir="rtl"] .poi { padding: 1.15rem 0 1.15rem .5rem; }
[dir="rtl"] .hero__trust { padding: .55rem .9rem .55rem 1.1rem; }
/* Richtungspfeile spiegeln (Route ↗, Pfeil →, extern ↗); Kompass, Haus-Symbol und Chevron (hoch/runter) bleiben. */
[dir="rtl"] :is(.icon--route-arrow, .icon--arrow-right, .icon--external),
[dir="rtl"] .compass__tip .btn .icon,
[dir="rtl"] .map-popup .btn svg { transform: scaleX(-1); }
/* Karte: Chips-Leiste läuft in RTL nach links aus, Popups lesen in Seitenrichtung, Schließen-Knopf wandert mit */
@media (max-width: 767.98px) {
  [dir="rtl"] .map__filters {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
  }
}
[dir="rtl"] .map .maplibregl-popup-content { direction: rtl; }
[dir="rtl"] .map .maplibregl-popup-close-button { right: auto; left: 0; border-radius: var(--r-img, 14px) 0 var(--r-img, 14px) 0; }

/* ---------- I18N 3 · Schriften und Satz je Schrift ---------- */
/* Arabische Schrift (ar, ur, fa) und Hebräisch: Noto Sans; lateinische Buchstaben und Ziffern darin in Sofia Sans statt Systemschrift. */
:lang(ar), :lang(ur), :lang(fa) { --font-display: "Noto Sans Arabic", "Sofia Sans", "Segoe UI", Tahoma, Arial, sans-serif; --font-text: "Noto Sans Arabic", "Sofia Sans", "Segoe UI", Tahoma, Arial, sans-serif; }
:lang(he) { --font-display: "Noto Sans Hebrew", "Sofia Sans", "Segoe UI", Arial, sans-serif; --font-text: "Noto Sans Hebrew", "Sofia Sans", "Segoe UI", Arial, sans-serif; }
/* Sofia Sans Griechisch (Google Fonts, OFL, 15,6 KB): fehlt im Basispaket (fonts.css), sonst fiele der griechische Fließtext auf Arial.
   Lädt nur, wenn griechische Zeichen auf der Seite stehen (unicode-range). */
@font-face { font-family: "Sofia Sans"; font-style: normal; font-weight: 1 1000; font-display: swap; src: url("../fonts/sofia-sans-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
/* Kyrillisch und Griechisch: Überschriften in Literata (Newsreader hat diese Schriften nicht), Fließtext in Sofia Sans. */
:lang(ru), :lang(uk), :lang(bg), :lang(mk), :lang(el), :lang(kk) { --font-display: Literata, "Newsreader Fallback", Georgia, "Times New Roman", serif; }
/* Chinesisch traditionell, Thai, Devanagari: Systemschriften der Plattform (keine eigenen Dateien). */
:lang(zh-Hant), :lang(zh-TW), :lang(zh-HK) { --font-display: "PingFang TC", "Hiragino Sans CNS", "Noto Sans CJK TC", "Source Han Sans TC", "Microsoft JhengHei", sans-serif; --font-text: "PingFang TC", "Hiragino Sans CNS", "Noto Sans CJK TC", "Source Han Sans TC", "Microsoft JhengHei", sans-serif; }
:lang(th) { --font-display: "Leelawadee UI", "Thonburi", "Noto Sans Thai", Tahoma, sans-serif; --font-text: "Leelawadee UI", "Thonburi", "Noto Sans Thai", Tahoma, sans-serif; }
:lang(hi) { --font-display: "Nirmala UI", "Kohinoor Devanagari", "Devanagari Sangam MN", "Noto Sans Devanagari", Mangal, sans-serif; --font-text: "Nirmala UI", "Kohinoor Devanagari", "Devanagari Sangam MN", "Noto Sans Devanagari", Mangal, sans-serif; }
/* Schriften ohne Versalien und ohne Kursiv: keine Spationierung (zerreißt arabische Verbindungen), keine künstliche Schrägstellung. */
:is(:lang(ar), :lang(he), :lang(ur), :lang(fa), :lang(zh), :lang(ja), :lang(ko), :lang(th), :lang(hi)) :where(*:not(.brand-mark)) { letter-spacing: 0 !important; font-style: normal !important; }
/* Hohe Zeichen (Arabisch mit Punkten/Vokalzeichen, Thai, Devanagari mit Kopfstrich) brauchen mehr Zeilenhöhe als die Latein-Werte. */
:is(:lang(ar), :lang(ur), :lang(fa), :lang(th), :lang(hi)) :is(h1, h2, h3, h4, .display, .h2, .h3, .quote__text, .hero__sub, .faq__q, [class*="__title"], [class*="__name"]) { line-height: 1.35 !important; }
:is(:lang(he), :lang(zh), :lang(ja), :lang(ko)) :is(h1, h2, h3, h4, .display, .h2, .h3, .quote__text, .hero__sub, [class*="__title"], [class*="__name"]) { line-height: 1.22 !important; }