/* ============================================================
   Lategan International Real Estate - Shared Stylesheet
   Phase 3 (Room 1 build + nav restructure per Master Brief v1.1)
   ============================================================
   Structure:
     1. Theme tokens (CSS variables) - ONE place to change values
     2. Reset and base
     3. Bilingual toggle rule
     4. Header (inner pages)
     5. Nav (inner pages) - two-line tabs, metaphor primary + subtitle
     6. Main content (inner pages)
     7. Whisper line (inner pages)
     8. Footer (inner pages)
     9. Welcome Hall
    10. Islamic Moorish door
    11. Two-moment reveal animation
    12. Room 1 - Der Innenhof (Über mich)
    13. Room 2 - Das Wohnzimmer (Meine Arbeit)
    14. Room 3 - Das Esszimmer (Für dich)
    15. Room 4 - Die Aussicht (Märkte)
    16. Room 5 - Der Garten (Suchen)
    17. Welcome Hall invitation + shared room-end leads
    18. Legal pages (Datenschutz, later Impressum and AGB)
    19. Shared room heading (every room: name, subtitle, opening, divider)
    20. Room 6 - Die Terrasse (Ablauf)
    21. Room 7 - Die Bibliothek (Verkaufen)
    22. Room 8 - Das Familienzimmer (Das bin ich)
    23. Room 9 - Die Garderobe (Häufige Fragen)
    24. Room 10 - Das Gästebuch (Kontakt)
    25. The tour: door glow, tour dots, lead strip, menu marks
    26. The ten answer pages (Das Esszimmer)
    27. Welcome Hall legal line
    28. The name centred, the house beneath it
   ============================================================ */


/* ============================================================
   1. THEME TOKENS
   ============================================================
   Locked brand palette (deep navy blue and gold, from the LI logo).
   ============================================================ */
:root {

  /* --- Brand colours (LOCKED) --- */
  --color-navy:           #0E1F36;   /* primary background, matches logo canvas exactly */
  --color-gold:           #BF955E;   /* primary brand gold */
  --color-gold-highlight: #DAAF6B;   /* gold gradient highlight */
  --color-gold-shadow:    #A67B50;   /* gold shadow */
  --color-linen:          #F5EEE1;   /* main text, warm off-white */
  --color-whisper:        #F5EEE1;   /* whisper line, low opacity via rule */
  --color-linen-muted:    rgba(245, 238, 225, 0.65);

  /* --- Font families --- */
  /* Cormorant Garamond and Inter are the intended fonts (both free, self-host later).
     Phase 3 falls back to Georgia and system-ui until fonts are self-hosted. */
  --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* --- Spacing scale --- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  32px;
  --space-xl:  64px;
  --space-2xl: 128px;

  /* --- Border radii --- */
  --radius-sm: 4px;
  --radius-md: 12px;

  /* --- Type sizes --- */
  --font-size-body:        16px;
  --font-size-nav-primary: 15px;
  --font-size-nav-sub:     11px;
  --font-size-sub:         12px;
  --font-size-hero:        48px;
  --font-size-rule:        18px;
  --font-size-attrib:      12px;
  --font-size-lintel:      13px;

  /* --- Font weights --- */
  --weight-fine:   300;
  --weight-normal: 400;
  --weight-medium: 500;

  /* --- Timings for the two-moment reveal --- */
  --reveal-pause:    1500ms;
  --reveal-fade:     1500ms;
}


/* ============================================================
   2. RESET AND BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-navy);
  color: var(--color-linen);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--weight-normal);
  line-height: 1.6;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}


/* ============================================================
   3. BILINGUAL TOGGLE RULE
   ============================================================ */
html[lang="de"] [lang="en"] { display: none; }
html[lang="en"] [lang="de"] { display: none; }


/* ============================================================
   4. HEADER (inner pages)
   ============================================================ */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-linen-muted);
}

.site-header__logo {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
}

.site-header__lang {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 14px;
}

.lang-link {
  opacity: 0.7;
}

.lang-link--active {
  opacity: 1;
  font-weight: var(--weight-medium);
}

.lang-sep {
  opacity: 0.5;
}


/* ============================================================
   5. NAV (inner pages) - two-line tabs
   ============================================================
   Per Master Brief v1.1 Section 2:
     Line 1 (primary):  the Rundgang metaphor  (larger, gold)
     Line 2 (subtitle): the functional name    (smaller, muted)
   ============================================================ */
.site-nav {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-linen-muted);
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: var(--space-sm) var(--space-lg);
  justify-content: center;
}

/* Ten rooms in two even rows of five, lined up as a 5 by 2 grid */
@media (min-width: 800px) {
  .site-nav__list {
    grid-template-columns: repeat(5, max-content);
  }
}

.site-nav__item {
  text-align: center;
}

.site-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-sm) 0;
  transition: opacity 200ms ease-out;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  opacity: 0.85;
}

.site-nav__primary {
  font-family: var(--font-heading);
  font-size: var(--font-size-nav-primary);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  color: var(--color-gold);
}

.site-nav__subtitle {
  font-size: var(--font-size-nav-sub);
  font-weight: var(--weight-normal);
  color: var(--color-linen);
  opacity: 0.65;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* ============================================================
   6. MAIN (inner pages)
   ============================================================ */
.site-main {
  padding: var(--space-2xl) var(--space-lg);
}


/* ============================================================
   7. WHISPER LINE (inner pages, above footer)
   ============================================================
   Fine white letters, quiet, understated.
   Must never be enlarged, coloured, or styled to draw attention.
   ============================================================ */
.site-whisper {
  text-align: center;
  padding: var(--space-lg) var(--space-lg) var(--space-md);
}

.site-whisper__line {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: var(--weight-fine);
  font-style: italic;
  color: var(--color-whisper);
  opacity: 0.55;
  letter-spacing: 0.03em;
}


/* ============================================================
   8. FOOTER (inner pages)
   ============================================================ */
.site-footer {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  border-top: 1px solid var(--color-linen-muted);
  text-align: center;
  font-size: 13px;
}

.site-footer__links {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.site-footer__link {
  opacity: 0.75;
}

.site-footer__sep {
  opacity: 0.4;
}

.site-footer__copy {
  margin: 0;
  opacity: 0.55;
  font-size: 12px;
}


/* ============================================================
   9. WELCOME HALL (home page, /)
   ============================================================
   The Schwelle. The visitor pauses at the door before entering.
   Only three things live here: the logo, the Rule, the door.
   No header, no nav, no footer, no whisper line.
   Applied via body.welcome-hall class.
   ============================================================ */
body.welcome-hall {
  min-height: 100vh;
  padding: 0;
}

body.welcome-hall .site-main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  padding: var(--space-xl) var(--space-lg);
  box-sizing: border-box;
}

.welcome__logo {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
}

/* ---- Mother's Rule on the Welcome Hall ---- */
.welcome__rule {
  max-width: 640px;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-fine);
  font-size: var(--font-size-rule);
  color: var(--color-linen);
  opacity: 0.88;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

.welcome__rule-line {
  margin: 0;
}

.welcome__rule-line + .welcome__rule-line {
  margin-top: var(--space-sm);
}

.welcome__rule-attribution {
  display: block;
  margin-top: var(--space-lg);
  font-size: var(--font-size-attrib);
  font-style: italic;
  font-weight: var(--weight-fine);
  color: var(--color-linen);
  opacity: 0.55;
  letter-spacing: 0.08em;
}


/* ============================================================
   10. ISLAMIC MOORISH DOOR (Welcome Hall only)
   ============================================================ */
.welcome__door-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.welcome__lintel {
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-fine);
  color: var(--color-linen);
  opacity: 0.62;
  font-size: var(--font-size-lintel);
  letter-spacing: 0.18em;
  line-height: 1.8;
  text-transform: none;
}

.welcome__lintel-line {
  margin: 0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.welcome__door {
  display: inline-block;
  line-height: 0;
  transition: transform 400ms ease-out;
}

.welcome__door:hover,
.welcome__door:focus-visible {
  transform: translateY(-4px);
}

.welcome__door:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 12px;
  border-radius: 4px;
}

.welcome__door-image {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
  max-height: 78vh;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5));
}


/* ============================================================
   11. TWO-MOMENT REVEAL ANIMATION (Welcome Hall)
   ============================================================ */
.welcome__rule,
.welcome__door-wrap {
  opacity: 0;
  animation-name: welcomeReveal;
  animation-duration: var(--reveal-fade);
  animation-delay: var(--reveal-pause);
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

@keyframes welcomeReveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .welcome__rule,
  .welcome__door-wrap {
    opacity: 1;
    animation: none;
    transform: none;
  }
}


/* ============================================================
   12. ROOM 1 - DER INNENHOF (ÜBER MICH)
   ============================================================
   First room after the Welcome Hall door.
   The Mother's Rule sits at Position A as the anchor.
   Everything else is the Rule made concrete for a buyer.
   ============================================================ */

.room1 .site-main {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-xl);
}

/* ---- Position A: Mother's Rule at the top of Room 1 ---- */
.room1__rule {
  max-width: 640px;
  margin: 0 auto var(--space-2xl);
  padding: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-fine);
  font-size: var(--font-size-rule);
  color: var(--color-linen);
  opacity: 0.88;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

.room1__rule-line {
  margin: 0;
}

.room1__rule-attribution {
  display: block;
  margin-top: var(--space-md);
  font-size: var(--font-size-attrib);
  font-style: italic;
  font-weight: var(--weight-fine);
  color: var(--color-linen);
  opacity: 0.55;
  letter-spacing: 0.04em;
}

/* ---- Name line: now the shared opening line (Section 19) ---- */

/* ---- Portrait image ---- */
.room1__portrait {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto var(--space-xl);
  border-radius: var(--radius-md);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}

/* ---- Body paragraphs ---- */
.room1__body p {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-body);
  font-weight: var(--weight-normal);
  font-size: 17px;
  color: var(--color-linen);
  line-height: 1.75;
}

.room1__body p:last-child {
  margin-bottom: 0;
}


/* ============================================================
   13. ROOM 2 - DAS WOHNZIMMER (MEINE ARBEIT)
   ============================================================
   Second room after the Welcome Hall door.
   Three sub-sections mirror the Room 1 rhythm but hold no Rule
   and no portrait. All values pulled from existing tokens; no
   new tokens introduced.
   ============================================================ */

.room2 .site-main {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-xl);
}

/* ---- Room heading, subtitle and opening line: Section 19 ---- */

/* ---- Each numbered sub-section ---- */
.room2__section {
  margin: 0 0 var(--space-2xl);
}

.room2__section:last-of-type {
  margin-bottom: 0;
}

/* ---- Sub-section heading ---- */
.room2__section-heading {
  margin: 0 0 var(--space-md);
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: 22px;
  color: var(--color-gold);
  letter-spacing: 0.02em;
  text-align: left;
}

/* ---- Sub-section body paragraphs ---- */
.room2__section p {
  margin: 0 0 var(--space-md);
  font-family: var(--font-body);
  font-weight: var(--weight-normal);
  font-size: 17px;
  color: var(--color-linen);
  line-height: 1.75;
}

.room2__section p:last-child {
  margin-bottom: 0;
}

/* ---- Short opening sentence in each sub-section ---- */
.room2__lede {
  font-weight: var(--weight-medium);
  color: var(--color-linen);
  opacity: 0.95;
}

/* ---- Short closing sentence in each sub-section ---- */
.room2__close {
  font-style: italic;
  color: var(--color-linen);
  opacity: 0.85;
}


/* ============================================================
   14. ROOM 3 - DAS ESSZIMMER (FÜR DICH)
   ============================================================
   Third room after the Welcome Hall door.
   Menu of ten questions (v1: titles only, answers come later).
   Reading column centered; heading and opening line centered;
   everything else left-aligned for readability.
   All values pulled from existing tokens; no new tokens introduced.
   ============================================================ */

.room3 .site-main {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-xl);
}

/* ---- Room heading, subtitle and opening line: Section 19 ---- */

/* ---- Intro paragraphs (left-aligned) ---- */
.room3__intro {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-body);
  font-weight: var(--weight-normal);
  font-size: 17px;
  color: var(--color-linen);
  line-height: 1.75;
  text-align: left;
}

/* ---- Menu opener line ("Here are the ten...") ---- */
.room3__menu-opener {
  margin: var(--space-xl) 0 var(--space-lg);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 17px;
  color: var(--color-linen);
  line-height: 1.75;
  text-align: left;
}

/* ---- Numbered list of question titles ---- */
.room3__list {
  list-style: none;
  counter-reset: room3-item;
  margin: 0 0 var(--space-xl);
  padding: 0;
}

.room3__list li {
  counter-increment: room3-item;
  position: relative;
  margin: 0 0 var(--space-md);
  padding-left: 2.75em;
  font-family: var(--font-body);
  font-weight: var(--weight-normal);
  font-size: 17px;
  color: var(--color-linen);
  line-height: 1.75;
  text-align: left;
}

.room3__list li::before {
  content: "(" counter(room3-item) ")";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  color: var(--color-gold);
  opacity: 0.85;
}

/* ---- Closing line (left-aligned, subtle italic) ---- */
.room3__close {
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: var(--weight-normal);
  font-size: 17px;
  color: var(--color-linen);
  opacity: 0.9;
  line-height: 1.75;
  text-align: left;
}


/* ============================================================
   15. ROOM 4 - DIE AUSSICHT (MÄRKTE)
   ============================================================
   Fourth room after the Welcome Hall door.
   The opening line is the Sawubona declaration, recast from
   Room 2's three sub-section headings into one unified line.
   Three sub-sections (i, ii, iii) share the Room 2 rhythm.
   Reading column centered; heading and opening line centered;
   section headings and body paragraphs left-aligned.
   All values pulled from existing tokens; no new tokens.
   ============================================================ */

.room4 .site-main {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-xl);
}

/* ---- Room heading, subtitle and opening line: Section 19 ---- */

/* ---- Each numbered sub-section ---- */
.room4__section {
  margin: 0 0 var(--space-2xl);
}

.room4__section:last-of-type {
  margin-bottom: 0;
}

/* ---- Sub-section heading ---- */
.room4__section-heading {
  margin: 0 0 var(--space-md);
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: 22px;
  color: var(--color-gold);
  letter-spacing: 0.02em;
  text-align: left;
}

/* ---- Sub-section body paragraphs ---- */
.room4__section p {
  margin: 0 0 var(--space-md);
  font-family: var(--font-body);
  font-weight: var(--weight-normal);
  font-size: 17px;
  color: var(--color-linen);
  line-height: 1.75;
  text-align: left;
}

.room4__section p:last-child {
  margin-bottom: 0;
}


/* ============================================================
   16. ROOM 5 - DER GARTEN (SUCHEN)
   ============================================================
   Fifth room after the Welcome Hall door.
   A walk in the garden: the buyer's search profile, never a form
   in feeling. Nine patches flow down one reading column with
   generous white space; no steps, no counter, no progress bar.
   Choices are soft pills, chosen ones glow gold. Gentle messages
   in muted gold, never red. Mobile first.
   Colour values come from the existing tokens; the few rgba()
   tints below are the existing navy, linen and gold at low alpha.
   ============================================================ */

.room5 .site-main {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-xl);
}

/* ---- Heading, sub-heading, opening line: Section 19 ---- */

/* ---- The form as a whole ---- */
.room5__form {
  color-scheme: dark;
}

.room5__honey {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Each patch: a calm group with breathing room ---- */
.room5__patch {
  margin: 0;
  padding: var(--space-xl) 0 0;
  border-top: 1px solid rgba(245, 238, 225, 0.18);
}

.room5__patch + .room5__patch {
  margin-top: var(--space-xl);
}

.room5__patch-heading {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: 22px;
  color: var(--color-gold);
  letter-spacing: 0.02em;
  text-align: left;
}

/* ---- One field ---- */
.room5__field {
  margin: 0 0 var(--space-lg);
  padding: 0;
  border: 0;
  min-width: 0;
}

.room5__field:last-child {
  margin-bottom: 0;
}

.room5__label {
  display: block;
  margin: 0 0 var(--space-sm);
  padding: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 17px;
  color: var(--color-linen);
  line-height: 1.5;
}

.room5__help {
  margin: var(--space-sm) 0 0;
  font-size: 14px;
  color: var(--color-linen-muted);
  line-height: 1.5;
}

/* ---- Text boxes, number blanks, dropdowns ---- */
.room5__input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-linen);
  background-color: rgba(245, 238, 225, 0.04);
  border: 1px solid var(--color-linen-muted);
  border-radius: var(--radius-sm);
  line-height: 1.4;
  transition: border-color 200ms ease-out;
}

.room5__input:hover {
  border-color: var(--color-linen);
}

.room5__input:focus {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
  border-color: var(--color-gold);
}

.room5__textarea {
  min-height: 7.5em;
  resize: vertical;
}

.room5__select {
  max-width: 160px;
}

.room5__select option {
  color: var(--color-linen);
  background-color: var(--color-navy);
}

/* ---- Sentence with a blank: "Ich brauche [___] Zimmer" ---- */
.room5__sentence-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) 10px;
  font-size: 17px;
  line-height: 1.5;
}

.room5__sentence-line .room5__input {
  display: inline-block;
}

.room5__input--short { width: 6.5em; }
.room5__input--money { width: 10em; }
.room5__input--wide  { width: 15em; max-width: 100%; }

/* ---- Bedrooms and bathrooms side by side on wide screens ---- */
.room5__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin: 0 0 var(--space-lg);
}

.room5__pair .room5__field {
  margin: 0;
}

/* ---- Pills for choices ---- */
.room5__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.room5__chip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.room5__chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.room5__chip-text {
  display: inline-block;
  padding: 10px 16px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--color-linen);
  border: 1px solid var(--color-linen-muted);
  border-radius: 999px;
  transition: border-color 200ms ease-out, background-color 200ms ease-out;
}

.room5__chip:hover .room5__chip-text {
  border-color: var(--color-linen);
}

.room5__chip input:checked + .room5__chip-text {
  border-color: var(--color-gold);
  background-color: rgba(191, 149, 94, 0.2);
  color: var(--color-linen);
}

.room5__chip input:focus-visible + .room5__chip-text {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.room5__chip--whole .room5__chip-text {
  font-style: italic;
}

/* ---- Region drop-downs (Berlin, Brandenburg, other Länder) ---- */
.room5__drop {
  margin: 0 0 var(--space-sm);
  border: 1px solid rgba(245, 238, 225, 0.18);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-md);
}

.room5__drop[open] {
  padding-bottom: var(--space-md);
}

.room5__drop-title {
  cursor: pointer;
  padding: 12px 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: 18px;
  color: var(--color-gold);
  letter-spacing: 0.02em;
}

.room5__drop-title:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.room5__drop--inner {
  margin: var(--space-sm) 0 0;
}

.room5__drop--inner .room5__drop-title {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-linen);
}

.room5__count {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-linen-muted);
  font-weight: var(--weight-normal);
}

.room5__drop-sub {
  margin: var(--space-md) 0 var(--space-sm);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-linen-muted);
}

.room5__drop-sub:first-of-type {
  margin-top: var(--space-xs);
}

/* ---- Single tick boxes (financing advisor, consent) ---- */
.room5__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-linen);
}

.room5__check input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--color-gold);
}

.room5__link {
  color: var(--color-gold-highlight);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Gentle messages, never red, never shouting ---- */
.room5__error {
  margin: var(--space-sm) 0 0;
  font-size: 14px;
  font-style: italic;
  color: var(--color-gold-highlight);
  line-height: 1.5;
}

.room5__error:empty {
  display: none;
}

.room5__field--error .room5__input,
.room5__field--error .room5__chip-text,
.room5__field--error .room5__drop {
  border-color: var(--color-gold-shadow);
}

/* ---- Privacy line, consent and send ---- */
.room5__privacy {
  margin: 0 0 var(--space-lg);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-linen);
  opacity: 0.85;
}

.room5__send {
  display: block;
  width: 100%;
  margin: var(--space-lg) 0 0;
  padding: 16px 24px;
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--color-navy);
  background-color: var(--color-gold);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 200ms ease-out;
}

.room5__send:hover {
  background-color: var(--color-gold-highlight);
}

.room5__send:focus-visible {
  outline: 2px solid var(--color-linen);
  outline-offset: 3px;
}

.room5__send:disabled {
  opacity: 0.6;
  cursor: default;
}

.room5__send-note {
  margin: var(--space-md) 0 0;
  font-size: 15px;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-gold-highlight);
  text-align: center;
}

.room5__send-note:empty {
  display: none;
}

/* ---- After sending: the thank-you replaces the form ---- */
.room5__thanks {
  margin: var(--space-xl) 0 0;
  padding: var(--space-xl) 0;
  border-top: 1px solid rgba(245, 238, 225, 0.18);
  border-bottom: 1px solid rgba(245, 238, 225, 0.18);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 22px;
  line-height: 1.7;
  color: var(--color-linen);
  text-align: center;
}

.room5__thanks:focus {
  outline: none;
}

.room5__thanks p {
  margin: 0;
}

/* ---- Room-end lead: the host leads on to Die Terrasse ---- */
.room5__lead {
  margin: var(--space-2xl) 0 0;
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 20px;
  letter-spacing: 0.01em;
}

.room5__lead a {
  color: var(--color-gold);
  border-bottom: 1px solid rgba(191, 149, 94, 0.4);
  padding-bottom: 2px;
  transition: border-color 200ms ease-out;
}

.room5__lead a:hover,
.room5__lead a:focus-visible {
  border-bottom-color: var(--color-gold);
}

/* ---- Phones: everything stacks, nothing cramped ---- */
@media (max-width: 560px) {
  .room5 .site-main {
    padding: var(--space-lg) var(--space-md) var(--space-xl);
  }

  .room5__pair {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .room5__select {
    max-width: none;
  }

  .room5__chip-text {
    font-size: 15px;
    padding: 10px 14px;
  }
}


/* ============================================================
   17. WELCOME HALL INVITATION + SHARED ROOM-END LEADS
   ============================================================
   The Guided Tour: Sedick, as host, walks his guest from room
   to room. Hospitality, not navigation.

   Welcome Hall invitation: plain text under the door, inside
   .welcome__door-wrap, so it fades in with the Rule and the door
   (Moment 2) through the existing reveal animation. Same quiet
   voice as the Rule, a touch smaller, never gold, never a link.

   .room-lead: one shared style for every room-end lead, the same
   look as the Room 5 lead (.room5__lead). The whole line is the
   link. Room 5 keeps its own class, unchanged.
   ============================================================ */

.welcome__invitation {
  max-width: 600px;
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-fine);
  font-size: 16px;
  color: var(--color-linen);
  opacity: 0.8;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

.welcome__invitation-line {
  margin: 0;
}

.room-lead {
  margin: var(--space-2xl) 0 0;
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 20px;
  letter-spacing: 0.01em;
}

.room-lead a {
  color: var(--color-gold);
  border-bottom: 1px solid rgba(191, 149, 94, 0.4);
  padding-bottom: 2px;
  transition: border-color 200ms ease-out;
}

.room-lead a:hover,
.room-lead a:focus-visible {
  border-bottom-color: var(--color-gold);
}


/* ============================================================
   18. LEGAL PAGES (DATENSCHUTZ, LATER IMPRESSUM AND AGB)
   ============================================================
   Quiet legal pages, not rooms. One calm reading column,
   headings in gold, body in linen, generous line height.
   Shared by every legal page through body.legal.
   All values from existing tokens; no new tokens.
   ============================================================ */

.legal .site-main {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-xl);
}

.legal__heading {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: 32px;
  color: var(--color-gold);
  letter-spacing: 0.02em;
}

.legal .site-main .legal__note {
  margin: 0 0 var(--space-lg);
  font-size: 14px;
  font-style: italic;
  color: var(--color-linen-muted);
  line-height: 1.6;
}

.legal__section {
  margin: var(--space-xl) 0 0;
}

.legal__section-heading {
  margin: 0 0 var(--space-md);
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: 22px;
  color: var(--color-gold);
  letter-spacing: 0.02em;
}

.legal .site-main p {
  margin: 0 0 var(--space-md);
  font-size: 16px;
  color: var(--color-linen);
  line-height: 1.75;
}

.legal .site-main p:last-child {
  margin-bottom: 0;
}

.legal .site-main strong {
  font-weight: var(--weight-medium);
}

.legal__list {
  margin: 0 0 var(--space-md);
  padding-left: 1.25em;
  font-size: 16px;
  color: var(--color-linen);
  line-height: 1.75;
}

.legal__list li {
  margin: 0 0 var(--space-sm);
}

.legal__link {
  color: var(--color-gold-highlight);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.legal .site-main .legal__date {
  margin: var(--space-xl) 0 0;
  font-size: 14px;
  font-style: italic;
  color: var(--color-linen-muted);
}

@media (max-width: 560px) {
  .legal .site-main {
    padding: var(--space-lg) var(--space-md) var(--space-xl);
  }
}


/* ============================================================
   19. SHARED ROOM HEADING (every room)
   ============================================================
   The standing heading rule: every room greets the guest the
   same way, exactly like Der Garten.
     1. Room name    (gold, centred)          .room-heading
     2. Subtitle     (small capitals, muted)  .room-subtitle
        the same word as the subtitle in the menu tab
     3. Opening line (italic, centred)        .room-opening
     4. Thin divider, then the room content   .room-divider
   The Garten keeps its own class names in its markup; they share
   these rules, so it looks exactly as before. Its divider is the
   top line of its first patch.
   ============================================================ */

.room-heading,
.room5__heading {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: 32px;
  color: var(--color-gold);
  letter-spacing: 0.02em;
  text-align: center;
}

.room-subtitle,
.room5__subheading {
  margin: 0 0 var(--space-md);
  font-family: var(--font-body);
  font-weight: var(--weight-normal);
  font-size: 15px;
  color: var(--color-linen);
  opacity: 0.7;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.room-opening,
.room5__opening {
  margin: 0 0 var(--space-xl);
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-fine);
  font-size: var(--font-size-rule);
  color: var(--color-linen);
  opacity: 0.88;
  line-height: 1.7;
  letter-spacing: 0.01em;
  text-align: center;
}

.room-divider {
  height: 0;
  margin: 0 0 var(--space-xl);
  border: 0;
  border-top: 1px solid rgba(245, 238, 225, 0.18);
}

.room-subtitle + .room-divider {
  margin-top: var(--space-lg);
}


/* ============================================================
   20. ROOM 6 - DIE TERRASSE (ABLAUF)
   ============================================================
   Sixth room, first of the second menu row.
   The road ahead in six quiet steps: a numbered h2 and one
   paragraph each. No cards, no timeline, no icons, no imagery.
   Heading block and room-end lead use the shared classes
   (Sections 19 and 17). Same rhythm as Rooms 2 and 4.
   Existing tokens only; no new tokens.
   ============================================================ */

.room6 .site-main {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-xl);
}

/* ---- Each step ---- */
.room6__step {
  margin: 0 0 var(--space-2xl);
}

.room6__step:last-of-type {
  margin-bottom: 0;
}

/* ---- Step heading, with its number ---- */
.room6__step-heading {
  margin: 0 0 var(--space-md);
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: 22px;
  color: var(--color-gold);
  letter-spacing: 0.02em;
  text-align: left;
}

/* ---- Step paragraph ---- */
.room6__step p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-normal);
  font-size: 17px;
  color: var(--color-linen);
  line-height: 1.75;
  text-align: left;
}


/* ============================================================
   21. ROOM 7 - DIE BIBLIOTHEK (VERKAUFEN)
   ============================================================
   Seventh room, second of the second menu row.
   Three parts, separated only by thin dividers:
     1. The oath (four parts, i to iv)
     2. The tool paragraph, with the valuation tool (#bewertung,
        Brief B: fields, pills and messages are the Garten's own)
     3. The seller's road (seven steps)
   Oath and road copy the Room 6 step rhythm. Heading block and
   room-end lead use the shared classes (Sections 19 and 17).
   Existing tokens and the existing rgba linen tint only.
   ============================================================ */

.room7 .site-main {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-xl);
}

/* ---- Oath parts and road steps: same rhythm as Room 6 ---- */
.room7__oath,
.room7__step {
  margin: 0;
}

.room7__oath + .room7__oath,
.room7__step + .room7__step {
  margin-top: var(--space-2xl);
}

/* ---- A divider after a part gets the same space above as below ---- */
.room7__oath + .room-divider,
.room7__text + .room-divider {
  margin-top: var(--space-xl);
}

/* ---- Oath and step headings, with their numbers ---- */
.room7__heading {
  margin: 0 0 var(--space-md);
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: 22px;
  color: var(--color-gold);
  letter-spacing: 0.02em;
  text-align: left;
}

/* ---- Body paragraphs (oath, tool paragraph, road) ---- */
.room7__oath p,
.room7__step p,
.room7__text p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-normal);
  font-size: 17px;
  color: var(--color-linen);
  line-height: 1.75;
  text-align: left;
}

.room7__text p + p {
  margin-top: var(--space-md);
}

/* ---- Valuation tool (Brief B) ----
   Labels, fields, pills, drop-downs, tick box, send button,
   gentle messages and thank-you use the Garten's classes
   (Section 16). Only the progress bar, the step buttons and the
   result screen are styled here. */
.room7__tool {
  margin: var(--space-lg) 0;
}

.room7__form {
  color-scheme: dark;
}

/* Small, quiet progress bar: one step per question group, then the result */
.room7__progress {
  height: 2px;
  margin: 0 0 var(--space-lg);
  background-color: rgba(245, 238, 225, 0.18);
  border-radius: 1px;
  overflow: hidden;
}

.room7__progress-bar {
  display: block;
  width: 0;
  height: 100%;
  background-color: var(--color-gold);
  transition: width 300ms ease-out;
}

.room7__form .room5__select {
  width: 100%;
  max-width: 24em;
}

.room7__panel-heading:focus {
  outline: none;
}

/* Back / Next */
.room7__nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-lg) 0 0;
}

.room7__nav .room5__send {
  width: auto;
  margin: 0 0 0 auto;
  padding: 12px 32px;
}

.room7__back {
  margin: 0;
  padding: var(--space-sm) 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-linen-muted);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: color 200ms ease-out, border-color 200ms ease-out;
}

.room7__back:hover,
.room7__back:focus-visible {
  color: var(--color-linen);
  border-bottom-color: var(--color-linen-muted);
}

/* The result: three prices, Realistic in the middle, in gold */
.room7__prices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin: 0 0 var(--space-xl);
}

.room7__price {
  padding: var(--space-lg) var(--space-md);
  border: 1px solid rgba(245, 238, 225, 0.18);
  border-radius: var(--radius-sm);
  text-align: center;
}

.room7__price--real {
  border-color: var(--color-gold);
}

.room7__tool .room7__price-name {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-linen-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.room7__tool .room7__price-value {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: 28px;
  color: var(--color-linen);
  line-height: 1.3;
}

.room7__tool .room7__price--real .room7__price-value {
  font-size: 32px;
  color: var(--color-gold);
}

.room7__tool .room7__price-line {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 16px;
  color: var(--color-linen);
  opacity: 0.85;
  line-height: 1.4;
}

/* Official figures, the fold-out, the notes */
.room7__result p,
.room7__adj li {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-linen);
  line-height: 1.7;
}

.room7__small-heading {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: 19px;
  color: var(--color-gold);
}

.room7__official {
  margin: 0 0 var(--space-lg);
}

.room7__official p {
  margin: 0 0 var(--space-sm);
}

.room7__tool .room7__source {
  font-size: 13px;
  color: var(--color-linen-muted);
}

.room7__how {
  margin: 0 0 var(--space-lg);
  border-top: 1px solid rgba(245, 238, 225, 0.18);
  border-bottom: 1px solid rgba(245, 238, 225, 0.18);
}

.room7__how summary {
  padding: var(--space-md) 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: 19px;
  color: var(--color-gold);
  cursor: pointer;
}

.room7__how-body {
  padding: 0 0 var(--space-md);
}

.room7__how-body p {
  margin: 0 0 var(--space-sm);
}

.room7__adj {
  margin: 0 0 var(--space-sm);
  padding: 0 0 0 var(--space-lg);
}

.room7__adj-pct {
  white-space: nowrap;
  color: var(--color-gold);
}

.room7__tool .room7__note {
  margin: 0 0 var(--space-md);
  font-style: italic;
  color: var(--color-linen-muted);
}

.room7__tool .room7__closing,
.room7__tool .room7__none {
  margin: var(--space-xl) 0 var(--space-lg);
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-fine);
  font-size: 20px;
  line-height: 1.6;
  text-align: center;
}

/* The send part, right under the result */
.room7__send-part {
  margin: var(--space-xl) 0 0;
  padding: var(--space-xl) 0 0;
  border-top: 1px solid rgba(245, 238, 225, 0.18);
}

.room7__tool .room7__send-intro {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 18px;
}

@media (max-width: 560px) {
  .room7__prices {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   22. ROOM 8 - DAS FAMILIENZIMMER (DAS BIN ICH)
   ============================================================
   Eighth room, third of the second menu row.
   Sedick the person, in five sections (i to v), with the
   Room 7 rhythm. Special elements: pull quote (ii), Mother's
   Rule (iii), Afrikaans words (iii), closing line, Arabic
   line with translation, thanks and signature (v).
   Heading block and room-end lead use the shared classes
   (Sections 19 and 17). Existing tokens only; the Arabic line
   uses fonts already on the visitor's system.
   No photo for now.
   ============================================================ */

.room8 .site-main {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-xl);
}

/* ---- Sections: same rhythm as Room 7 ---- */
.room8__section {
  margin: 0;
}

.room8__section + .room8__section {
  margin-top: var(--space-2xl);
}

.room8__heading {
  margin: 0 0 var(--space-md);
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: 22px;
  color: var(--color-gold);
  letter-spacing: 0.02em;
  text-align: left;
}

.room8__section p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-normal);
  font-size: 17px;
  color: var(--color-linen);
  line-height: 1.75;
  text-align: left;
}

.room8__section p + p {
  margin-top: var(--space-md);
}

/* ---- Pull quote (section ii) ---- */
.room8__quote {
  margin: var(--space-xl) 0;
  padding: 0 0 0 var(--space-lg);
  border-left: 2px solid var(--color-gold);
}

.room8__section .room8__quote p {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 20px;
  line-height: 1.6;
}

.room8__quote-name {
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-style: normal;
  font-size: 13px;
  color: var(--color-linen-muted);
  letter-spacing: 0.04em;
}

.room8__quote + p {
  margin-top: 0;
}

/* ---- Mother's Rule (section iii): the Welcome Hall's quiet style ---- */
.room8__rule {
  max-width: 640px;
  margin: var(--space-lg) auto;
}

.room8__section .room8__rule p {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-fine);
  font-size: var(--font-size-rule);
  color: var(--color-linen);
  opacity: 0.88;
  line-height: 1.7;
  letter-spacing: 0.01em;
  text-align: center;
}

.room8__rule + p {
  margin-top: 0;
}

/* ---- Afrikaans words (section iii) ---- */
.room8__afrikaans {
  font-style: italic;
}

/* ---- Closing line (section v): same style as the opening line ---- */
.room8__section .room8__closing {
  margin: var(--space-xl) 0 var(--space-lg);
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-fine);
  font-size: var(--font-size-rule);
  line-height: 1.7;
  text-align: center;
}

/* ---- Arabic line, translation and source (section v) ---- */
.room8__hadith {
  margin: 0 0 var(--space-xl);
  text-align: center;
}

.room8__section .room8__arabic {
  font-family: 'Noto Naskh Arabic', 'Amiri', 'Traditional Arabic', 'Arabic Typesetting', 'Geeza Pro', 'Segoe UI', Tahoma, serif;
  font-size: 26px;
  line-height: 1.8;
  text-align: center;
}

.room8__section .room8__hadith-text {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--font-size-rule);
  text-align: center;
}

.room8__section .room8__hadith-source {
  margin-top: var(--space-sm);
  font-size: 13px;
  color: var(--color-linen-muted);
  letter-spacing: 0.04em;
  text-align: center;
}

/* ---- Thanks and signature (section v) ---- */
.room8__section .room8__thanks {
  text-align: center;
}

.room8__section .room8__signature {
  margin-top: var(--space-lg);
  font-family: var(--font-heading);
  font-size: 22px;
  color: var(--color-linen);
  text-align: center;
}


/* ============================================================
   23. ROOM 9 - DIE GARDEROBE (HÄUFIGE FRAGEN)
   ============================================================
   Ninth room, fourth of the second menu row.
   Twelve questions in three groups. Each question is a native
   details/summary: it opens and closes on tap, works with the
   keyboard and screen readers, and needs no script. All closed
   when the page loads.
   Group titles use the Room 8 section heading style. Heading
   block and room-end lead use the shared classes (Sections 19
   and 17). Existing tokens and the existing rgba linen tint only.
   ============================================================ */

.room9 .site-main {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-xl);
}

/* ---- Groups: same rhythm as Room 8 sections ---- */
.room9__group {
  margin: 0;
}

.room9__group + .room9__group {
  margin-top: var(--space-2xl);
}

.room9__heading {
  margin: 0 0 var(--space-md);
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: 22px;
  color: var(--color-gold);
  letter-spacing: 0.02em;
  text-align: left;
}

/* ---- One question: a thin, quiet line between questions ---- */
.room9__item {
  border-bottom: 1px solid rgba(245, 238, 225, 0.18);
}

.room9__heading + .room9__item {
  border-top: 1px solid rgba(245, 238, 225, 0.18);
}

.room9__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  font-family: var(--font-body);
  font-weight: var(--weight-normal);
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-linen);
  text-align: left;
  list-style: none;
  cursor: pointer;
}

.room9__question::-webkit-details-marker {
  display: none;
}

.room9__question:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 4px;
}

/* ---- The small gold plus that turns into a minus ---- */
.room9__marker {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.room9__marker::before,
.room9__marker::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 2px;
  margin-top: -1px;
  background-color: var(--color-gold);
  transition: transform 200ms ease-out;
}

.room9__marker::after {
  transform: rotate(90deg);
}

.room9__item[open] .room9__marker::after {
  transform: rotate(0deg);
}

/* ---- The answer ---- */
.room9__answer {
  padding: 0 0 var(--space-lg);
}

.room9__answer p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-normal);
  font-size: 17px;
  color: var(--color-linen);
  line-height: 1.75;
  text-align: left;
}

.room9__link {
  color: var(--color-gold);
  border-bottom: 1px solid rgba(191, 149, 94, 0.4);
  transition: border-color 200ms ease-out;
}

.room9__link:hover,
.room9__link:focus-visible {
  border-bottom-color: var(--color-gold);
}

@media (prefers-reduced-motion: reduce) {
  .room9__marker::before,
  .room9__marker::after {
    transition: none;
  }
}


/* ============================================================
   24. ROOM 10 - DAS GÄSTEBUCH (KONTAKT)
   ============================================================
   The last room. How to reach Sedick (three short lines), then
   the guest book form, which uses the Garten's classes
   (Section 16): fields, pills, tick box, send button, gentle
   messages and thank-you. Heading block and closing line use the
   shared classes (Sections 19 and 17). Only the contact block
   and the size of the text box have their own rules here.
   Existing tokens only.
   ============================================================ */

.room10 .site-main {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-xl);
}

/* ---- How to reach Sedick ---- */
.room10__reach {
  margin: 0;
}

.room10__line {
  margin: 0 0 var(--space-md);
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-linen);
  line-height: 1.6;
  text-align: left;
}

.room10__line:last-child {
  margin-bottom: 0;
}

/* The divider after the contact block gets the same space above as below */
.room10__reach + .room-divider {
  margin-top: var(--space-xl);
}

.room10__label {
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: 20px;
  color: var(--color-gold);
  letter-spacing: 0.02em;
}

.room10__value {
  color: var(--color-linen);
  overflow-wrap: anywhere;
}

a.room10__value {
  border-bottom: 1px solid var(--color-linen-muted);
  transition: border-color 200ms ease-out;
}

a.room10__value:hover,
a.room10__value:focus-visible {
  border-bottom-color: var(--color-gold);
}

/* ---- The guest book form ---- */
.room10__form {
  color-scheme: dark;
}

.room10__words {
  min-height: 13em;
}


/* ============================================================
   25. THE TOUR: DOOR GLOW, TOUR DOTS, LEAD STRIP, MENU MARKS
   ============================================================
   The tour made visible, quietly. Hospitality, not navigation.
   - Welcome Hall: the door breathes a soft gold glow once it has
     fully appeared, and "Klopf an und tritt ein." sits under it.
   - Ten tour dots under every room's subtitle (Rooms 1 to 10):
     the path walked, the room you are in, the rooms ahead.
   - The host's lead line in a slim strip at the bottom of the
     screen (built by /assets/rundgang.js from the room's own lead).
   - The menu: phone columns filled downwards; the current room
     marked with a thin gold line.
   - The Welcome Hall's quiet DE | EN switch in the top right corner.
   Nothing here stores anything in the browser.
   Existing tokens and the existing rgba gold and linen tints.
   ============================================================ */

/* ---- The door breathes (after the two-moment reveal) ---- */
.welcome__door-image {
  animation:
    doorGlowIn 1500ms ease-out calc(var(--reveal-pause) + var(--reveal-fade)) forwards,
    doorBreathe 4000ms ease-in-out calc(var(--reveal-pause) + var(--reveal-fade) + 1500ms) infinite;
}

@keyframes doorGlowIn {
  from { filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 0 rgba(191, 149, 94, 0)); }
  to   { filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 12px rgba(191, 149, 94, 0.3)); }
}

@keyframes doorBreathe {
  0%, 100% { filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 12px rgba(191, 149, 94, 0.3)); }
  50%      { filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 26px rgba(191, 149, 94, 0.55)); }
}

/* ---- The knock line above the door: a clear, gentle invitation ---- */
.welcome__knock {
  display: inline-block;
  padding: 12px 28px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--color-gold);
  text-align: center;
  border: 1px solid rgba(191, 149, 94, 0.6);
  border-radius: 999px;
  transition: background-color 200ms ease-out, border-color 200ms ease-out;
  animation: knockGlow 4000ms ease-in-out calc(var(--reveal-pause) + var(--reveal-fade) + 1500ms) infinite;
}

.welcome__knock::after {
  content: "\00A0\2192";
  font-style: normal;
}

.welcome__knock:hover,
.welcome__knock:focus-visible {
  background-color: rgba(191, 149, 94, 0.15);
  border-color: var(--color-gold);
}

.welcome__knock:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 4px;
}

@media (max-width: 400px) {
  .welcome__knock {
    font-size: 20px;
    padding: 10px 22px;
  }
}

@keyframes knockGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(191, 149, 94, 0); }
  50%      { box-shadow: 0 0 18px rgba(191, 149, 94, 0.45); }
}

/* ---- Order inside the door wrap: sign, invitation to knock, door, words, legal line ---- */
.welcome__lintel     { order: 1; }
.welcome__knock      { order: 2; }
.welcome__door       { order: 3; }
.welcome__invitation { order: 4; }
.welcome__legal      { order: 5; }

@media (prefers-reduced-motion: reduce) {
  .welcome__door-image {
    animation: none;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 12px rgba(191, 149, 94, 0.3));
  }

  .welcome__knock {
    animation: none;
  }
}

/* ---- Ten tour dots ---- */
.tour-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--space-md);
}

.tour-dot {
  display: block;
  box-sizing: border-box;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.tour-dot--past {
  background-color: rgba(245, 238, 225, 0.35);
}

.tour-dot--now {
  width: 9px;
  height: 9px;
  background-color: var(--color-gold);
}

.tour-dot--ahead {
  border: 1px solid rgba(245, 238, 225, 0.35);
}

/* ---- The host's lead in a strip at the bottom of the screen ---- */
.tour-strip {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 52px;
  padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
  background-color: var(--color-navy);
  border-top: 1px solid rgba(245, 238, 225, 0.18);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 19px;
  letter-spacing: 0.01em;
  color: var(--color-gold);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease-out, visibility 0s linear 300ms;
}

.tour-strip--on {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms ease-out, visibility 0s linear 0s;
}

.tour-strip:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: -4px;
}

.tour-strip__text {
  max-width: 640px;
  line-height: 1.35;
}

.tour-strip__arrow {
  font-style: normal;
  opacity: 0.8;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .tour-strip {
    font-size: 17px;
  }
}

body.tour-strip-shown {
  padding-bottom: 52px;
}

@media (prefers-reduced-motion: reduce) {
  .tour-strip,
  .tour-strip--on {
    transition: none;
  }
}

/* ---- The menu: phones read down each column ---- */
.site-nav__list {
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
}

@media (min-width: 800px) {
  .site-nav__list {
    grid-auto-flow: row;
    grid-template-rows: none;
  }
}

/* ---- The menu: the room you are in ---- */
.site-nav__link[aria-current="page"] {
  box-shadow: inset 0 -1px 0 var(--color-gold);
}

.site-nav__link[aria-current="page"] .site-nav__subtitle {
  opacity: 1;
}

/* ---- The Welcome Hall's DE | EN switch: quiet, in the top right corner,
   the same links and look as on the room pages, never part of the reveal ---- */
.welcome__lang {
  position: absolute;
  top: var(--space-md);
  right: var(--space-lg);
  z-index: 1;
}


/* ============================================================
   26. THE TEN ANSWER PAGES (DAS ESSZIMMER)
   ============================================================
   Room 3 now opens ten answer pages under /fragen/. The ten
   questions in Room 3 are gold links; each answer page belongs
   to Das Esszimmer (marked in the menu), with no tour dots and
   no lead strip.
   One calm reading column, headings in gold, body in linen,
   the same rhythm as Rooms 6 to 8. Numbered points use the
   Room 3 "(1)" style; sub-points use "(a)". Question 7 has two
   paths (h2) with smaller headings inside (h3), and a quiet
   divider between them. Back and Next at the end use the
   shared .room-lead look (Section 17).
   Existing tokens and the existing rgba gold and linen tints.
   ============================================================ */

/* ---- Room 3: the ten questions are links ---- */
.room3__link {
  color: var(--color-gold);
  border-bottom: 1px solid rgba(191, 149, 94, 0.4);
  transition: border-color 200ms ease-out;
}

.room3__link:hover,
.room3__link:focus-visible {
  border-bottom-color: var(--color-gold);
}

/* ---- Room 3: the second closing line ---- */
.room3 .room3__close--more {
  margin-top: var(--space-md);
}

/* ---- The answer page column ---- */
.fragen .site-main {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-xl);
}

.fragen__article {
  overflow-wrap: break-word;
}

/* ---- Page heading (the question) ---- */
.fragen__heading {
  margin: 0 0 var(--space-xl);
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: 32px;
  line-height: 1.3;
  color: var(--color-gold);
  letter-spacing: 0.02em;
  text-align: center;
}

/* ---- Section headings (h2) and the smaller headings in Question 7 (h3) ---- */
.fragen__section-heading {
  margin: var(--space-2xl) 0 var(--space-md);
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: 22px;
  line-height: 1.4;
  color: var(--color-gold);
  letter-spacing: 0.02em;
  text-align: left;
}

.fragen__subheading {
  margin: var(--space-xl) 0 var(--space-md);
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: 19px;
  line-height: 1.4;
  color: var(--color-gold);
  letter-spacing: 0.02em;
  text-align: left;
}

.room-divider + .fragen__section-heading,
.fragen__section-heading + .fragen__subheading {
  margin-top: 0;
}

.fragen__note + .fragen__section-heading {
  margin-top: var(--space-xl);
}

/* ---- Quiet divider (between the two paths in Question 7) ---- */
.fragen__divider {
  margin-top: var(--space-xl);
}

/* ---- Body text ---- */
.fragen__article p {
  margin: 0 0 var(--space-md);
  font-family: var(--font-body);
  font-weight: var(--weight-normal);
  font-size: 17px;
  color: var(--color-linen);
  line-height: 1.75;
  text-align: left;
}

.fragen__article strong {
  font-weight: var(--weight-medium);
}

/* ---- Small label before a group of questions (Question 6) ---- */
.fragen__article .fragen__label {
  margin: var(--space-lg) 0 var(--space-sm);
}

/* ---- Numbered points: the Room 3 "(1)" style ---- */
.fragen__list {
  list-style: none;
  counter-reset: fragen-item;
  margin: 0 0 var(--space-lg);
  padding: 0;
}

.fragen__list > li {
  counter-increment: fragen-item;
  position: relative;
  margin: 0 0 var(--space-md);
  padding-left: 2.75em;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-linen);
  line-height: 1.75;
}

.fragen__list > li::before {
  content: "(" counter(fragen-item) ")";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: var(--weight-medium);
  color: var(--color-gold);
  opacity: 0.85;
}

.fragen__article .fragen__list > li > p {
  margin: 0;
}

.fragen__article .fragen__list > li > p + p,
.fragen__article .fragen__sub + p {
  margin-top: var(--space-sm);
}

/* ---- Sub-points: (a), (b), (c) ---- */
.fragen__sub {
  list-style: none;
  counter-reset: fragen-sub;
  margin: var(--space-sm) 0 0;
  padding: 0;
}

.fragen__sub > li {
  counter-increment: fragen-sub;
  position: relative;
  margin: 0 0 var(--space-xs);
  padding-left: 2em;
}

.fragen__sub > li::before {
  content: "(" counter(fragen-sub, lower-alpha) ")";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-gold);
  opacity: 0.85;
}

/* ---- Quiet small note (who the page is for, "not advice") ---- */
.fragen__article .fragen__note {
  margin: var(--space-lg) 0;
  font-size: 15px;
  font-style: italic;
  color: var(--color-linen-muted);
  line-height: 1.6;
}

/* ---- Links to other questions ---- */
.fragen__link {
  color: var(--color-gold);
  border-bottom: 1px solid rgba(191, 149, 94, 0.4);
  transition: border-color 200ms ease-out;
}

.fragen__link:hover,
.fragen__link:focus-visible {
  border-bottom-color: var(--color-gold);
}

/* ---- Back to the ten questions, and Next question ---- */
.fragen__leads .room-lead + .room-lead {
  margin-top: var(--space-md);
}

/* ---- Phones ---- */
@media (max-width: 560px) {
  .fragen .site-main {
    padding: var(--space-lg) var(--space-md) var(--space-xl);
  }

  .fragen__heading {
    font-size: 28px;
  }

  .fragen__list > li {
    padding-left: 2.25em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .room3__link,
  .fragen__link {
    transition: none;
  }
}


/* ============================================================
   27. WELCOME HALL LEGAL LINE
   ============================================================
   One quiet line at the bottom of the Welcome Hall, inside the
   door wrap, so it fades in with the door. The same quiet voice
   as the whisper line: small, linen, low opacity, never gold.
   It makes the Impressum reachable from the first page.
   Existing tokens only.
   ============================================================ */

.welcome__legal {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-linen);
}

.welcome__legal-link {
  opacity: 0.55;
  transition: opacity 200ms ease-out;
}

.welcome__legal-link:hover,
.welcome__legal-link:focus-visible {
  opacity: 0.85;
}

.welcome__legal-sep {
  opacity: 0.35;
}

@media (prefers-reduced-motion: reduce) {
  .welcome__legal-link {
    transition: none;
  }
}


/* ============================================================
   28. THE NAME CENTRED, THE HOUSE BENEATH IT
   ============================================================
   The top of every room, answer page and legal page:
   - the name, bigger and centred;
   - beneath it, centred, a small drawn house (roof overhanging
     the walls, a little door) in a gold circle with a soft glow.
     The whole block leads home, as before (href="/");
   - DE | EN small in the top-right corner.
   The house is drawn as an SVG inside the CSS, so it looks the
   same on every phone, in both languages. CSS only.
   The Welcome Hall has no header and is not affected.
   ============================================================ */

.site-header {
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-lg) var(--space-lg) var(--space-md);
}

.site-header__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 28px;
  text-align: center;
}

.site-header__logo::after {
  content: "";
  display: block;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--color-gold);
  border-radius: 50%;
  background-color: rgba(191, 149, 94, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BF955E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 11.5 12 3.5l9.5 8'/%3E%3Cpath d='M5.5 9.3V20.5h13V9.3'/%3E%3Cpath d='M10 20.5v-5h4v5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
  box-shadow: 0 0 14px rgba(191, 149, 94, 0.35);
  transition: background-color 200ms ease-out, box-shadow 200ms ease-out;
}

.site-header__logo:hover::after,
.site-header__logo:focus-visible::after {
  background-color: rgba(191, 149, 94, 0.22);
  box-shadow: 0 0 20px rgba(191, 149, 94, 0.5);
}

.site-header__logo:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 6px;
  border-radius: var(--radius-sm);
}

.site-header .site-header__lang {
  position: absolute;
  top: var(--space-md);
  right: var(--space-lg);
}

@media (max-width: 560px) {
  .site-header {
    padding: 44px var(--space-md) var(--space-md);
  }

  .site-header__logo {
    font-size: 24px;
  }

  .site-header .site-header__lang {
    top: 12px;
    right: var(--space-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__logo::after {
    transition: none;
  }
}