/* ============================================================
   GOLD Apartments — Brand-CI v1.2 (brand-guideline.md)
   Palette: Blattgold #D4B765 · Tiefgold #B8863B · Anthrazit #23201C
            Kalkleinen #F6F1E9 · Sandstein #E4D9C6 · Warmgrau #5C554B
   Typo: Fraunces (Display) + Inter (Body)
   ============================================================ */
:root {
  --gold: #D4B765;
  --gold-deep: #B8863B;
  --ink: #23201C;
  --ink-soft: #5C554B;
  --linen: #F6F1E9;
  --paper: #FBF8F2;
  --sand: #E4D9C6;
  --line: #DCCFB4;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--linen);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
}
.brand { display: flex; align-items: center; }
.logo-nav { height: 48px; width: auto; display: block; }
.logo-footer { height: 84px; width: auto; display: block; margin: 0 auto 14px; }
.nav-links { display: flex; gap: 26px; }
.nav-links a {
  color: var(--linen); font-size: 14.5px; font-weight: 500; opacity: .85;
  transition: opacity .2s, color .2s;
}
.nav-links a:hover { opacity: 1; color: var(--gold); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 12px 26px; border-radius: 4px;
  font-weight: 600; font-size: 15px; letter-spacing: .03em;
  transition: transform .15s, background .2s, color .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-deep); color: #fff; }
.btn-dark { background: var(--ink); color: var(--linen); }
.btn-dark:hover { background: #3a352e; }
.btn-outline { border: 1.5px solid var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--linen); }

/* ---------- Scroll-Cinematic Sections ---------- */
/* Scrollhoehe = Lesezeit. Je hoeher, desto laenger steht jede Textzeile.
   Zusammen mit FADE in scroll-cinematic.js die Stellschraube fuers Tempo.
   ABER: Je hoeher hier, desto schneller wirken die normalen Abschnitte
   danach im Vergleich. 540vh ist der Kompromiss - Text bleibt gut lesbar,
   der Sprung zum Textbereich bleibt ertraeglich. */
.cinematic { position: relative; height: 540vh; background: var(--ink); }
.cinematic .sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
}
.cinematic canvas { width: 100%; height: 100%; display: block; }
.shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(35,32,28,.55) 0%, transparent 32%),
    radial-gradient(ellipse at center, transparent 55%, rgba(35,32,28,.45) 100%);
}
.overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center; text-align: center;
  pointer-events: none; padding: 0 6vw;
}
.overlay > * { grid-area: 1 / 1; opacity: 0; }
.reveal-line { will-change: opacity, transform; }
.overlay h1, .overlay h2 {
  font-family: "Fraunces", Georgia, serif;
  color: var(--linen);
  font-size: clamp(44px, 7.5vw, 96px);
  font-weight: 700; line-height: 1.05; text-wrap: balance;
  text-shadow: 0 2px 30px rgba(35,32,28,.55);
}
.overlay .sub {
  font-family: "Fraunces", Georgia, serif; font-style: italic;
  color: var(--gold); font-size: clamp(26px, 3.6vw, 44px);
  text-shadow: 0 2px 24px rgba(35,32,28,.6);
}
/* Headline + Ortszeile bilden EINEN Block in der Rasterzelle und stehen darin
   im normalen Fluss untereinander. Frueher lagen beide einzeln in derselben
   Zelle (grid-area: 1/1) und wurden nur per transform auseinandergehalten -
   das hat sich je nach Fenstergroesse ueberlagert. */
.hero-block {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 2.2vw, 26px);
}
.eyebrow-light {
  color: var(--gold); font-size: clamp(11px, 1.5vw, 13px); letter-spacing: .22em;
  text-transform: uppercase; font-weight: 600;
  max-width: 34ch; line-height: 1.5;
}
.scroll-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  color: var(--linen); font-size: 12.5px; letter-spacing: .2em;
  text-transform: uppercase; opacity: .85; transition: opacity .4s;
}

/* ---------- Quickbar (Conversion direkt nach Hero) ---------- */
.quickbar { background: var(--ink); padding: clamp(40px, 6vh, 62px) 6vw clamp(48px, 7vh, 74px); }
.quick-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between;
}
.quick-item { color: var(--linen); }
.quick-item b { display: block; font-family: "Fraunces", Georgia, serif; font-size: 20px; color: var(--gold); }
.quick-item span { font-size: 14px; opacity: .8; }

/* ---------- Sections ---------- */
/* Vertikaler Raum bewusst an die Fensterhoehe gekoppelt (vh statt px).
   Sonst rauschen die Textabschnitte nach den 540vh hohen Cinematics durch,
   weil dieselbe Mausradbewegung hier ein Vielfaches der Strecke zuruecklegt.
   Mehr Hoehe = mehr Scrollweg = ruhigeres Lesetempo, und die reveal-
   Animationen bekommen Zeit zum Ablaufen. */
.section { padding: clamp(104px, 16vh, 190px) 6vw; max-width: 1160px; margin: 0 auto; }
.eyebrow {
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600; color: var(--gold-deep); margin-bottom: 14px;
}
.section h2 {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(32px, 4.5vw, 52px); font-weight: 600;
  line-height: 1.12; text-wrap: balance; margin-bottom: 18px;
}
.section-sub { max-width: 62ch; color: var(--ink-soft); margin-bottom: 44px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 44px; }
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
  padding: 30px 28px;
}
.card h3 { font-family: "Fraunces", Georgia, serif; font-size: 21px; font-weight: 600; margin-bottom: 10px; }
.card h3::after { content: ""; display: block; width: 42px; height: 2px; background: var(--gold); margin-top: 10px; }
.card p { font-size: 15.5px; color: var(--ink-soft); }

/* ---------- Apartments ---------- */
.apt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.apt {
  border-radius: 6px; overflow: hidden; background: var(--paper);
  border: 1px solid var(--line); transition: transform .2s, box-shadow .2s;
}
.apt:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(35,32,28,.14); }
.apt img { height: 250px; width: 100%; object-fit: cover; }
.apt-info { padding: 16px 18px; }
.apt-info b { font-family: "Fraunces", Georgia, serif; font-size: 18px; display: block; }
.apt-info span { font-size: 13.5px; color: var(--ink-soft); }
.apt-note { margin-top: 26px; color: var(--ink-soft); font-size: 15px; }
.apt-more {
  display: grid; place-items: center; min-height: 320px;
  background: var(--ink); border: 1px solid var(--ink); text-align: center;
}
.apt-more-inner { padding: 24px; color: var(--linen); }
.apt-more-num {
  display: block; font-family: "Fraunces", Georgia, serif;
  font-size: 56px; font-weight: 700; color: var(--gold); line-height: 1;
}
.apt-more-inner b { font-family: "Fraunces", Georgia, serif; font-size: 21px; display: block; margin: 6px 0 8px; }
.apt-more-inner span:last-child { font-size: 14px; opacity: .75; }
.apt-more:hover { background: #2e2a24; }

/* ---------- Stats ---------- */
.stats {
  background: var(--sand);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 7vw;
  padding: clamp(72px, 11vh, 130px) 6vw;
}
.stat { text-align: center; }
.stat-num {
  display: block; font-family: "Fraunces", Georgia, serif;
  font-size: clamp(38px, 5vw, 56px); font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-text {
  display: block; font-family: "Fraunces", Georgia, serif;
  font-size: clamp(30px, 3.8vw, 44px); font-weight: 700; color: var(--ink);
  line-height: 1.18;
}
.stat-label { font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- B2B (dunkel) ---------- */
.section-dark {
  background: var(--ink); color: var(--linen);
  max-width: none; padding: clamp(104px, 16vh, 190px) 6vw;
}
.section-dark > * { max-width: 1160px; margin-left: auto; margin-right: auto; }
.section-dark h2 { color: var(--linen); }
.section-dark .section-sub { color: color-mix(in srgb, var(--linen) 75%, transparent); }
.eyebrow-gold { color: var(--gold); }
.b2b-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 26px; margin: 44px auto;
}
.b2b-item b { font-family: "Fraunces", Georgia, serif; font-size: 19px; color: var(--gold); display: block; margin-bottom: 8px; }
.b2b-item p { font-size: 15px; color: color-mix(in srgb, var(--linen) 78%, transparent); }
.section-dark .btn { display: inline-block; margin-top: 8px; }

/* ---------- Gastgeber ---------- */
.host { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 54px; align-items: center; }
.host-img { border-radius: 6px; border: 1px solid var(--line); }
.host-text h2 { margin-bottom: 16px; }
.host-text p { color: var(--ink-soft); max-width: 54ch; }
.host-text blockquote {
  font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 20px;
  color: var(--ink); border-left: 2px solid var(--gold);
  padding-left: 18px; margin: 22px 0 26px;
}
@media (max-width: 860px) { .host { grid-template-columns: 1fr; } }

/* ---------- Häufige Fragen ---------- */
.faq { max-width: 820px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  font-family: "Fraunces", Georgia, serif; font-size: clamp(17px, 2.1vw, 20px);
  font-weight: 600; color: var(--ink);
  padding: 22px 44px 22px 0; cursor: pointer; position: relative;
  list-style: none; transition: color .2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gold-deep); }
/* Plus-Zeichen, das sich beim Aufklappen zum Minus dreht */
.faq-item summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 14px; height: 2px; background: var(--gold-deep);
  transform: translateY(-50%);
}
.faq-item summary::before {
  content: ""; position: absolute; right: 14px; top: 50%;
  width: 2px; height: 14px; background: var(--gold-deep);
  transform: translateY(-50%); transition: transform .25s, opacity .25s;
}
.faq-item[open] summary::before { transform: translateY(-50%) rotate(90deg); opacity: 0; }
.faq-item[open] summary { color: var(--gold-deep); }
.faq-item p {
  font-size: 15.5px; color: var(--ink-soft);
  padding: 0 44px 24px 0; max-width: 68ch;
}
.faq-item a { color: var(--gold-deep); text-decoration: underline; }

/* ---------- Kontakt ---------- */
.section-sand { background: var(--sand); max-width: none; }
.section-sand > * { max-width: 1160px; margin-left: auto; margin-right: auto; }
.contact-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px auto 20px; }
.contact-note { font-size: 14px; color: var(--ink-soft); }

/* ---------- Footer ---------- */
.footer {
  background: var(--ink); color: var(--linen);
  text-align: center; padding: 64px 6vw 48px; font-size: 14.5px;
}
.footer-brand {
  font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 26px;
  color: var(--gold); margin-bottom: 10px;
}
.footer-brand span { color: var(--linen); font-weight: 400; font-size: 19px; letter-spacing: .12em; }
.footer p { opacity: .8; margin-bottom: 8px; }
.footer-meta { font-size: 13px; opacity: .55; line-height: 1.8; }
.footer a { text-decoration: underline; }

/* ---------- Reveals ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .nav-links { display: none; }
  .section { padding: clamp(80px, 12vh, 130px) 6vw; }
  .cinematic { height: 440vh; }
  .quick-inner { gap: 18px; }
}