/* Shared look for both RTH Immobilien sites (rth-immobilien.de and titasguesthouse.com). Each brand only swaps the accent colors.
   Fonts are served from /assets/fonts (nothing loads from Google, so no cookie banner). */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/assets/fonts/figtree-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("/assets/fonts/figtree-latin-wght-italic.woff2") format("woff2"); }

:root {
  /* Shared neutrals (Nov 3, 2026): linen paper, navy-black ink, navy footer on both sites.
     The footer navy is the RTH dark blue (#1A173B from the brand color scheme), which is the
     family tie between the sites. Each brand swaps only its accent colors below. */
  --ink: #1b1b30;
  --muted: #5f6072;
  --paper: #f6f5f1;
  --card: #ffffff;
  --line: #dfe0ea;
  --tint: #e9e7f3;      /* the Blue House facade: pale lavender */
  --accent: #130a8f;        /* Tita's Guesthouse: RTH indigo, same as the RTH brand (Ruben, Nov 3, 2026) */
  --accent-dark: #0c0666;
  --accent-ink: #ffffff;
  --deep: #1a173b;          /* footer and dark panels: RTH navy */
  --on-deep: #f1f0f7;       /* text on --deep */
  --shade: 16, 24, 40;      /* hero photo overlay (rgb parts) */
  --tick: #e2b35a;          /* check marks on dark panels: brass, from the wood and lamps in the photos */
  --radius: 14px;
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;   /* one family for everything, like immohauf.com (Manrope there), chosen Nov 3, 2026 */
  --display: "Figtree", system-ui, sans-serif;
  --top: rgba(246,245,241,.92);
  --field: #ffffff;
  --field-line: #c5ccd4;
  --cal-free: #dcefe3; --cal-free-ink: #1f5a39;
  --cal-maybe: #fbe7c3; --cal-maybe-ink: #7a4f0a;
  --cal-booked: #f3d4cf; --cal-booked-ink: #8a2a1e;
  --cal-past: #80859a;
  --show-light: block; --show-dark: none;
  color-scheme: light;
}
/* Dark theme: follows the device setting, or the button in the header (stored in the browser). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #ebe9f2; --muted: #a9a8c0; --paper: #13132a; --card: #1c1c38; --line: #2f2f4d; --tint: #181836;
    --accent: #24a0ed; --accent-dark: #7cc6f5; --accent-ink: #0f0d33; --tick: #e8c27a; --top: rgba(19,19,42,.92); --deep: #0c0c22;
    --field: #202040; --field-line: #46466c;
    --cal-free: #1f4a33; --cal-free-ink: #bfe6cc; --cal-maybe: #5a3f0e; --cal-maybe-ink: #f6d99a; --cal-booked: #5a241c; --cal-booked-ink: #f3c0b6; --cal-past: #8c8ca3;
    --show-light: none; --show-dark: block; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #ebe9f2; --muted: #a9a8c0; --paper: #13132a; --card: #1c1c38; --line: #2f2f4d; --tint: #181836;
  --accent: #24a0ed; --accent-dark: #7cc6f5; --accent-ink: #0f0d33; --tick: #e8c27a; --top: rgba(19,19,42,.92); --deep: #0c0c22;
  --field: #202040; --field-line: #46466c;
  --cal-free: #1f4a33; --cal-free-ink: #bfe6cc; --cal-maybe: #5a3f0e; --cal-maybe-ink: #f6d99a; --cal-booked: #5a241c; --cal-booked-ink: #f3c0b6; --cal-past: #8c8ca3;
  --show-light: none; --show-dark: block; color-scheme: dark;
}
.only-light { display: var(--show-light); }
.only-dark { display: var(--show-dark); }

/* RTH Immobilien: brand indigo #130A8F from the logo, amber #FAAF01 as the small highlight.
   Dark mode (Nov 9, 2026, Ruben did not like the lavender): buttons are white with indigo text like the hero buttons,
   links and check marks are the brass of the amber highlight. No lavender anywhere. */
.brand-rth { --accent: #130a8f; --accent-dark: #0c0666; --tint: #eeedf6; --line: #dfe0ea; --tick: #faaf01; --shade: 14, 12, 60; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-rth { --accent: #f3f2fa; --accent-dark: #e8c27a; --accent-ink: #130a8f; --btn-hover: #dcdaee; --tint: #181836; --line: #2f2f4d; }
}
:root[data-theme="dark"] .brand-rth { --accent: #f3f2fa; --accent-dark: #e8c27a; --accent-ink: #130a8f; --btn-hover: #dcdaee; --tint: #181836; --line: #2f2f4d; }
.brand-rth .btn.light { color: #130a8f; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 17px/1.6 var(--font); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
a { color: var(--accent-dark); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 62ch; }
.eyebrow, .kicker { font-family: var(--display); font-style: italic; font-size: 1.1rem; color: var(--accent-dark); margin-bottom: 8px; }
.muted { color: var(--muted); }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; background: var(--card); padding: 8px; z-index: 10; }

/* Header */
.top { position: sticky; top: 0; z-index: 5; background: var(--top); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top-row { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; padding-top: 8px; padding-bottom: 8px; }
.top-tools { order: 3; }
#mainnav { order: 2; }
@media (max-width: 900px) { #mainnav { order: 3; } .top-tools { order: 2; } }
.logo { font-family: var(--display); font-weight: 600; font-size: 1.35rem; color: var(--ink); text-decoration: none; }
.logo img { height: 92px; width: auto; }
.foot-logo { height: 120px; width: auto; margin-bottom: 12px; }
.logo small { display: block; font-family: var(--font); font-weight: 500; font-size: .72rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
#mainnav { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
#mainnav a { color: var(--ink); text-decoration: none; font-weight: 500; padding: 6px 0; border-bottom: 2px solid transparent; }
#mainnav a[aria-current="page"], #mainnav a:hover { border-color: var(--accent); }
#mainnav a.btn { border: 0; padding: 9px 16px; color: var(--accent-ink); }   /* the id selector outranks .btn, so the Contact button keeps its light text */

.menu-btn { display: none; font: inherit; font-weight: 600; background: none; border: 1.5px solid var(--ink); border-radius: 999px; padding: 8px 16px 8px 12px; cursor: pointer; color: var(--ink); align-items: center; gap: 8px; }
.theme-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; display: inline-grid; place-items: center; padding: 0; }
.theme-btn:hover { border-color: var(--ink); }
.theme-btn svg { width: 20px; height: 20px; }
.theme-btn .sun { display: var(--show-dark); }
.theme-btn .moon { display: var(--show-light); }
.top-tools { display: flex; align-items: center; gap: 10px; }
.menu-btn span { width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; display: inline-block; }
.social { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.social li:first-child { flex-basis: 100%; }
.social a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 500; }
.social svg { width: 20px; height: 20px; }
.toc ol { columns: 2; column-gap: 32px; padding-left: 1.3em; font-size: .95rem; }
.toc li { break-inside: avoid; margin-bottom: 4px; }
.stats { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); list-style: none; padding: 0; margin: 32px 0 0; }
.stats li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.stats b { display: block; font-family: var(--display); font-size: 1.7rem; line-height: 1.1; color: var(--accent-dark); }
.stats span { font-size: .9rem; color: var(--muted); }

/* Buttons */
.btn { display: inline-block; background: var(--accent); color: var(--accent-ink); padding: 13px 22px; border-radius: 999px; text-decoration: none; font-weight: 600; border: 0; font: inherit; font-weight: 600; cursor: pointer; transition: background .15s; }
.btn:hover { background: var(--btn-hover, var(--accent-dark)); }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn.light { background: #fff; color: #1b1b30; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }

/* Sections */
main { padding-bottom: 0; }
.section { padding: 64px 0; }
.section.tint { background: var(--tint); }
.section.deep { background: var(--deep); color: var(--on-deep); }
.section.deep h2 { color: var(--on-deep); }
.section.deep .eyebrow { color: var(--tick); }
.section.deep a:not(.btn) { color: #fff; }
.section.deep .btn.light { color: #1b1b30; }
.section-head { max-width: 62ch; margin-bottom: 28px; }
.page { padding-top: 48px; padding-bottom: 64px; }   /* top and bottom only, so .wrap keeps its 20px side margin on phones (fixed Nov 6, 2026) */
.page .prose { max-width: 64ch; }   /* about 85 characters per line in Figtree (72ch ran to 100, Nov 9, 2026) */
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }

/* Hero */
.hero { position: relative; min-height: 78vh; display: grid; align-items: end; color: #fff; isolation: isolate; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; animation: hero-drift 50s ease-in-out infinite alternate; will-change: transform; }
@keyframes hero-drift { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.06) translate3d(-2.5%, -1.5%, 0); } }
@media (prefers-reduced-motion: reduce) { .hero img { animation: none; transform: none; } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(var(--shade),.88) 0%, rgba(var(--shade),.5) 50%, rgba(var(--shade),.1) 100%); }
.hero .wrap { padding-top: 120px; padding-bottom: 56px; }
.hero h1 { max-width: 16ch; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.hero .lead { color: #eef2f6; max-width: 52ch; font-size: 1.15rem; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.hero .eyebrow { color: var(--tick); }
.trust { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; padding: 0; margin: 26px 0 0; font-size: .95rem; color: #e6edf4; }
.trust li::before { content: "✓ "; color: var(--tick); }

/* Cards */
.cards { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); margin: 28px 0 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(31,42,36,.10); }
.card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.card-body { padding: 20px 22px 24px; display: grid; gap: 6px; }
.card h3 { margin: 0; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card .meta { color: var(--muted); font-size: .95rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.chips li { background: var(--tint); border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; font-size: .85rem; font-weight: 500; }

/* Steps and features */
.steps { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: step; margin: 0; padding: 0; list-style: none; }
.steps li { counter-increment: step; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; margin-bottom: 12px; }
.steps h3 { font-size: 1.15rem; margin-bottom: 6px; }
.split { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: center; }
.split img { border-radius: var(--radius); }
.people { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.people figure { margin: 0; }
.people img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }
.people figcaption { font-size: .9rem; color: var(--muted); margin-top: 8px; line-height: 1.35; }
.people figcaption strong { display: block; color: var(--ink); font-weight: 600; }

/* Reviews */
.quotes { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 28px; }
blockquote { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; font-family: var(--display); font-size: 1.1rem; line-height: 1.5; }
blockquote p { margin: 0 0 12px; }
blockquote footer { font-family: var(--font); font-size: .9rem; color: var(--muted); }
blockquote footer .src { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--tint); font-size: .78rem; font-weight: 600; color: var(--ink); }
.note { background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; color: var(--muted); font-size: .95rem; }

/* Apartment page */
.gallery { display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; margin: 20px 0 32px; }
.gallery a { display: block; overflow: hidden; border-radius: 10px; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.gallery a:hover img { transform: scale(1.04); }
.gallery a:first-child { grid-column: span 2; grid-row: span 2; }
.gallery .more { display: grid; place-items: center; background: var(--tint); color: var(--ink); font-weight: 600; text-decoration: none; }
.gallery-all { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: 20px 0 0; }
.gallery-all figure { margin: 0; }
.gallery-all img { width: 100%; border-radius: 10px; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery-all figcaption { font-size: .85rem; color: var(--muted); margin-top: 4px; }
.facts { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.facts li { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.facts b { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 2px; }
.features { columns: 2; column-gap: 32px; padding-left: 1.2em; }
.features li { break-inside: avoid; margin-bottom: 6px; }
.apt-layout { display: grid; gap: 40px; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); align-items: start; }
.aside { position: sticky; top: 90px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.aside h2 { font-size: 1.4rem; }

/* Availability calendar */
.avail { font-size: .9rem; font-weight: 600; margin: 0; }
.avail::before { content: "●"; margin-right: 6px; }
.avail.free::before { color: #2f8f5b; }
.avail.maybe::before { color: #d9962b; }
.avail.booked::before { color: #c0392b; }
.cal { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin: 16px 0; }
.cal-month h3 { font-family: var(--font); font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-wd { text-align: center; font-size: .76rem; color: var(--muted); font-weight: 600; }
.cal-day { display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px; font-size: .85rem; font-weight: 500; }
.cal-day.free { background: var(--cal-free); color: var(--cal-free-ink); }
.cal-day.maybe { background: var(--cal-maybe); color: var(--cal-maybe-ink); }
.cal-day.booked { background: var(--cal-booked); color: var(--cal-booked-ink); text-decoration: line-through; }
.cal-day.past { color: var(--cal-past); }
.cal-legend { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .9rem; }
.cal-legend .cal-day { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; aspect-ratio: auto; }

/* Forms */
form { display: grid; gap: 14px; }
.two { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
label { display: grid; gap: 5px; font-weight: 500; font-size: .95rem; }
input, select, textarea { font: inherit; padding: 11px 12px; border: 1px solid var(--field-line); border-radius: 10px; background: var(--field); color: var(--ink); width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.form-note { font-size: .85rem; color: var(--muted); }

/* Contact block */
.contact-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.contact-grid .tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.contact-grid .tile b { display: block; margin-bottom: 4px; }

/* Footer */
.foot { background: var(--deep); color: var(--on-deep); font-size: .95rem; }
.foot p { opacity: .85; }

/* Audience router on the RTH homepage (Nov 9, 2026, after the designer review): two RTH Immobilien doors
   side by side (owners, tenants), then the sister business as its own wide band on the tint. The heading
   says who the door is for, the one link per door is the button, stretched over the whole card. */
.doors { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; margin: 28px 0 0; }
.door { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s; }
.door:hover, .door:focus-within { border-color: var(--accent); }
.door:hover .btn:not(.ghost) { background: var(--btn-hover, var(--accent-dark)); }
.door:hover .btn.ghost { background: var(--ink); color: var(--paper); }
.door > img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.door .card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1; }
.door h3 { margin: 0; font-size: 1.4rem; }
.door p { margin: 0; color: var(--muted); }
.door .btn { margin-top: auto; }
.door .btn::after { content: ""; position: absolute; inset: 0; }
.door-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); background: var(--tint); }
.door-wide > img { aspect-ratio: auto; height: 100%; }
.door-wide .card-body { padding: 28px 32px 30px; }
.door-wide .sister-logo { height: 56px; width: auto; margin-bottom: 4px; }
@media (max-width: 760px) {
  .doors { grid-template-columns: 1fr; }
  .door-wide { grid-template-columns: 1fr; }
  .door-wide > img { aspect-ratio: 3 / 2; height: auto; }
  .door-wide .card-body { padding: 22px 24px 26px; }
}
.brand-logo { height: 64px; width: auto; margin-bottom: 14px; }
.foot a { color: #fff; }
.foot-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: 48px 0 32px; }
.foot h3 { color: #fff; font-size: 1.05rem; font-family: var(--font); font-weight: 600; margin-bottom: 10px; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.foot ul a, .contact-grid .tile a:not(.btn) { display: inline-block; padding: 5px 0; }
::placeholder { color: var(--muted); opacity: 1; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 18px 0 24px; border-top: 1px solid rgba(255,255,255,.12); font-size: .88rem; }
.foot-row a { margin-right: 14px; }

@media (max-width: 900px) {
  .top { position: static; }
  .top-row { padding-top: 10px; padding-bottom: 10px; }
  .logo img { height: 72px; }
  .menu-btn { display: inline-flex; }
  #mainnav { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px 0 10px; }
  #mainnav.open { display: flex; }
  #mainnav a { padding: 8px 0; font-size: 1.05rem; }
  #mainnav a.btn { margin-top: 6px; }
  .toc ol { columns: 1; }
  #mainnav { gap: 2px 14px; font-size: .95rem; }
  #mainnav a.btn { padding: 7px 14px; }
  .hero { min-height: 70vh; }
  .hero .wrap { padding-top: 80px; padding-bottom: 36px; }
  .section { padding: 44px 0; }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
  .gallery a:nth-child(n+5) { display: none; }
  .gallery .more { display: grid; }
  .features { columns: 1; }
  .apt-layout { grid-template-columns: 1fr; }
  .aside { position: static; }
  .two { grid-template-columns: 1fr; }
}

/* Anchor targets stop below the sticky header */
[id] { scroll-margin-top: 120px; }

/* Language flags */
.flags { display: inline-flex; gap: 8px; align-items: center; vertical-align: middle; }
.flags svg { width: 24px; height: 17px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
/* Language switch in the nav shows the flag of the other language (Nov 9, 2026). */
.lang { display: inline-flex; align-items: center; padding: 10px 6px; }
.lang svg { width: 28px; height: 20px; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); display: block; }

/* Homepage calendar */
.home-cal { margin: 28px 0 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 14px; }
.cal-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 12px; }
.cal-head h3 { font-family: var(--font); font-size: 1.05rem; font-weight: 600; margin: 0; min-width: 11ch; text-align: center; }
.cal-nav { font: inherit; font-size: 1.4rem; line-height: 1; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--ink); background: none; color: var(--ink); cursor: pointer; }
.cal-nav:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-row { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.cal-row h4 { font-family: var(--font); font-size: .95rem; font-weight: 600; margin: 0 0 6px; }
.home-cal .cal-grid { grid-template-rows: auto repeat(6, 1fr); }
.cal-legend.home { margin: 14px 0 0; font-size: .85rem; }

/* How it works: text above, steps below */
.steps { margin-top: 28px; }

/* Long reviews */
blockquote.long p { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
blockquote.long.open p { display: block; }
blockquote .more { font: inherit; font-family: var(--font); font-size: .95rem; font-weight: 600; color: var(--accent-dark); background: none; border: 0; padding: 10px 0; margin: 0 0 6px; cursor: pointer; text-decoration: underline; }

/* Home calendar block (back to one block on Nov 10, 2026, after the designer review): one month, the three
   apartments side by side; on phones a switch shows one apartment at a time. */
.home-avail { margin: 32px 0 0; }
.home-avail > h3 { font-size: 1.5rem; margin-bottom: 6px; }
.home-avail > .muted { margin-bottom: 14px; }
.home-avail .home-cal { margin-top: 0; }
/* Dates first (Nov 10, 2026): one calendar for all apartments, then the apartments free on the picked dates. */
.cal-all { max-width: 480px; margin: 0 auto; }
.cal-all .cal-day { font-size: .95rem; }
.cal-all .cal-wd { font-size: .8rem; }
.pick-list[hidden] { display: none; }
.pick-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pick-list li[data-state="maybe"] { order: 2; }
.pick-list a { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; text-decoration: none; color: var(--ink); transition: border-color .15s; }
.pick-list a:hover, .pick-list a:focus-visible { border-color: var(--accent); }
.pick-list img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; }
.pick-list b { display: block; font-size: 1.05rem; }
.pick-list .pick-text > span { display: block; font-size: .9rem; color: var(--muted); }
.pick-list em { display: block; font-style: normal; font-weight: 600; font-size: .9rem; color: var(--cal-free-ink); margin-top: 4px; }
.pick-list li[data-state="maybe"] em { color: var(--cal-maybe-ink); }
.pick-none { margin: 16px 0 0; padding: 14px 18px; border-radius: 10px; background: var(--cal-booked); color: var(--cal-booked-ink); font-weight: 600; }
.pick-none a { color: inherit; }
.family-photo { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }

@media (max-width: 760px) {
  [id] { scroll-margin-top: 16px; }
  .cal-row { grid-template-columns: 1fr; }
}

/* Homepage card photo slider */
.slides { position: relative; }
.slide-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(250,247,242,.9); color: #1f2a24; font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 3px; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.slide-btn:hover { background: #fff; }
.slide-btn.prev { left: 10px; }
.slide-btn.next { right: 10px; }
.slide-count { position: absolute; right: 10px; bottom: 10px; z-index: 2; background: rgba(20,28,24,.7); color: #fff; font-size: .75rem; font-weight: 600; padding: 4px 9px; border-radius: 999px; }

/* Boris PCS app page */
.boris-banner { display: block; border-radius: var(--radius); overflow: hidden; background: #f3f2ee; border: 1px solid var(--line); }
.boris-banner img { display: block; width: 100%; height: auto; }
.features.one { columns: 1; }
.store-btn { display: inline-grid; line-height: 1.1; background: #111; color: #fff; border: 1.5px solid #555; border-radius: 10px; padding: 8px 18px 9px 16px; text-decoration: none; font-weight: 600; font-size: 1.15rem; }
.store-btn small { font-size: .75rem; font-weight: 500; opacity: .85; }
.store-btn:hover { background: #000; border-color: #888; }
.boris-block .boris-banner { border: 0; }
.boris-block a:not(.store-btn) { color: #fff; }

/* brand pass, Nov 3 2026 */
blockquote.feature { background: none; border: 0; padding: 0; max-width: 30ch; font-size: clamp(1.5rem, 3.2vw, 2.2rem); line-height: 1.3; }
blockquote.feature p { margin-bottom: 14px; }
blockquote.feature footer { font-size: 1rem; }
.signature { height: 64px; width: auto; margin: 18px 0 14px; }
.signature.only-light { display: var(--show-light); }
.signature.only-dark { display: var(--show-dark); }
.boris-block { border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.btn.wa, .section.deep .btn.wa { background: #25d366; color: #0b2e1a; }
.btn.wa:hover, .section.deep .btn.wa:hover { background: #1ebe5a; color: #0b2e1a; }
.tile .btn.wa { display: inline-block; margin: 0 0 10px; }
.tile .btn.wa + .muted { display: block; }
.tile .social { flex-direction: column; gap: 10px; }
.tile .social li:first-child { flex-basis: auto; }
.send-row { margin-top: 6px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sent.ok { color: #1f5a39; font-weight: 600; }
.sent.fail, .sent.invalid { color: #8a2a1e; }
.avail-note { margin: -6px 0 10px; padding: 10px 14px; border-radius: 10px; font-size: .95rem; }
.avail-note.free { background: var(--cal-free); color: var(--cal-free-ink); }
.avail-note.maybe { background: var(--cal-maybe); color: var(--cal-maybe-ink); }
.avail-note.conflict { background: var(--cal-booked); color: var(--cal-booked-ink); font-weight: 600; }
.cal-day[data-date]:not(.booked) { cursor: pointer; }
.cal-day[data-date]:not(.booked):hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-day.sel-start, .cal-day.sel-end { background: var(--accent) !important; color: var(--accent-ink) !important; text-decoration: none; }
.cal-day.in-range { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-hint { font-size: .85rem; color: var(--muted); margin: 8px 0 0; }
/* Boris card on the Boris page, rebuilt as text in Cristian's fonts (Plus Jakarta Sans 700 headline, Inter text, both OFL,
   loaded only here) so it scales like the page text. Always the banner's off-white, as tall as the text column. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); }
@media (min-width: 761px) { .boris-hero { grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: stretch; } .boris-card { height: 100%; } }
.boris-card { display: flex; align-items: center; justify-content: center; padding: 16px; background: #f7f6f4; border-radius: var(--radius); }
.boris-svg { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; aspect-ratio: 1; }
@media (min-width: 761px) { .boris-svg { height: 100%; } }
.boris-svg-h { font-family: "Plus Jakarta Sans", "Figtree", sans-serif; font-weight: 700; font-size: 58px; letter-spacing: -1px; fill: #1f1f1f; }
.boris-svg-p { font-family: "Inter", system-ui, sans-serif; font-weight: 500; font-size: 29px; fill: #4a4a4a; }
.faq-table { width: 100%; border-collapse: collapse; margin: 18px 0 8px; font-size: .95rem; }
.faq-table th, .faq-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.faq-table thead th { font-weight: 600; }
.faq-table tbody th { font-weight: 600; width: 34%; }
@media (max-width: 700px) { .faq-table thead { display: none; } .faq-table tr { display: block; padding: 8px 0; } .faq-table th, .faq-table td, .faq-table tbody th { display: block; border: 0; padding: 4px 0; width: auto; } .faq-table td::before { font-weight: 600; } .faq-table td:nth-child(2)::before { content: "You: "; } .faq-table td:nth-child(3)::before { content: "Family 12 and over: "; } .faq-table td:nth-child(4)::before { content: "Under 12: "; } .faq-table tr { border-bottom: 1px solid var(--line); } }
.area-map { margin: 28px 0 0; }
.area-map img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); display: block; }
.area-map figcaption { font-size: .9rem; color: var(--muted); margin-top: 10px; }

/* RTH split hero (Nov 6, 2026): text on a solid RTH indigo panel, house photo beside it.
   Gives rthgruppe.com its own first screen next to Tita's full-bleed photo hero, while font,
   buttons, header and footer stay shared. Solid panel also keeps the amber line readable. */
.hero-split { display: grid; grid-template-columns: 1.1fr 1fr; background: #130a8f; color: #fff; }
.hero-split .hero-text { align-self: center; padding: 72px 48px 64px max(20px, calc(50vw - 540px)); }
.hero-split h1 { color: #fff; max-width: 15ch; }
.hero-split .eyebrow { color: #faaf01; }
.hero-split .lead { color: #e4e2f7; max-width: 50ch; font-size: 1.15rem; }
.hero-split .trust { color: #ecebfa; }
.hero-split .trust li::before { color: #faaf01; }
.hero-split .trust a { color: inherit; text-underline-offset: 3px; }
.hero-split .btn.ghost { color: #fff; border-color: rgba(255,255,255,.75); }
.hero-split .btn.ghost:hover { background: #fff; color: #130a8f; }
.hero-split .hero-photo { position: relative; min-height: 520px; }
.hero-split .hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-split .hero-text { padding: 40px 20px 36px; }
  .hero-split .hero-photo { min-height: 0; aspect-ratio: 3 / 2; }
}

/* RTH owner pages: contact person card and real owner quotes (§5b UWG note below them). */
.person-card { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 24px 0; }
.person-card img { width: 120px; height: 150px; object-fit: cover; object-position: top; border-radius: 10px; }
.person-card p { margin: 0 0 6px; }
.person-card strong { display: block; font-size: 1.1rem; }
.owner-quotes { display: grid; gap: 16px; margin: 24px 0; }
.owner-quotes .note { font-size: .9rem; color: var(--muted); margin: 0; }

/* Tables in text pages (RTH Qualifikation): plain rows on desktop, stacked blocks on phones so nothing overflows (Nov 7, 2026). */
.prose table { width: 100%; border-collapse: collapse; margin: 18px 0; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prose thead th { font-weight: 600; }
@media (max-width: 700px) {
  .prose table, .prose tbody, .prose tr, .prose td { display: block; width: 100%; }
  .prose thead { display: none; }
  .prose td { border: 0; padding: 3px 0; }
  .prose td:empty { display: none; }
  .prose td:first-child { font-weight: 600; padding-top: 10px; }
  .prose tr { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
}

/* Browser surfaces follow the brand (Nov 7, 2026): selection, focus ring, link underline offset. */
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.prose a, .section a:not(.btn) { text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Typography and dark mode details from the Nov 9, 2026 review: balanced headings, no single-word last lines,
   and the deep contact band keeps a visible edge in dark mode, where it is almost the page color. */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .section.deep { border-top: 1px solid var(--line); } }
:root[data-theme="dark"] .section.deep { border-top: 1px solid var(--line); }

/* Guesthouse review, Nov 9, 2026: on phones the request form follows the calendar instead of the photo list,
   the contact page puts WhatsApp, email and phone above the form, the two send buttons share one width.
   On desktop the apartment aside spans both content rows so it stays sticky beside the photos. */
@media (min-width: 901px) {
  .apt-page .aside { grid-column: 2; grid-row: 1 / span 2; }
  .apt-page .apt-more { grid-column: 1; }
  .apt-page .gallery-all figure:first-child { display: none; }   /* photo 5 is already in the top gallery on desktop */
}
@media (max-width: 900px) {
  .apt-layout > .contact-grid { order: -1; }
  .send-row { flex-direction: column; }
  .send-row .btn { width: 100%; text-align: center; }
}