/* =========================================================================
   GRUNDSTEIN Immobilien — Demo
   Rasterlogik: Fibonacci (8 · 13 · 21 · 34 · 55 · 89 · 144 · 233), wie in
   den anderen Arbeitsproben (RoyalSchnitt, ZUNDER). Typoskala im
   Verhältnis 1,618.
   ========================================================================= */

:root {
  /* Farbe */
  --ink:       #14201a;
  --ink-2:     #1b2b22;
  --paper:     #f6f3ea;
  --paper-dim: #9a9384;
  --forest:    #1f3d2e;
  --forest-2:  #2c5842;
  --sage:      #7fa088;
  --brass:     #b08d4f;
  --brass-lite:#dcc48f;
  --brick:     #a2503a;

  /* Abstände — Fibonacci */
  --s1: 8px;  --s2: 13px; --s3: 21px; --s4: 34px;
  --s5: 55px; --s6: 89px; --s7: 144px; --s8: 233px;

  /* Typoskala */
  --t-xs: clamp(11px, .22vw + 10px, 13px);
  --t-s:  clamp(14px, .35vw + 12px, 17px);
  --t-m:  clamp(17px, .55vw + 14px, 21px);
  --t-l:  clamp(28px, 3.1vw + 12px, 55px);
  --t-xl: clamp(36px, 6.4vw + 8px, 100px);

  --d1: 89ms; --d2: 144ms; --d3: 233ms; --d4: 377ms;
  --ease: cubic-bezier(.22, .61, .36, 1);

  --serif: 'Petrona', 'Iowan Old Style', Georgia, serif;
  --sans:  'Karla', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --edge: clamp(var(--s3), 5.5vw, var(--s6));
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--paper); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0; overflow-x: hidden;
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-weight: 400;
  font-size: var(--t-s); line-height: 1.618;
  -webkit-font-smoothing: antialiased;
}

img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 1px; }

.skiplink {
  position: fixed; top: var(--s2); left: var(--s2); z-index: 200;
  padding: var(--s2) var(--s3);
  background: var(--brass-lite); color: var(--ink);
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
  transform: translateY(calc(-100% - var(--s4)));
  transition: transform var(--d3) var(--ease);
}
.skiplink:focus-visible { transform: none; }

/* -------------------------------------------------------------- Bausteine */

.eyebrow {
  font-size: var(--t-xs); letter-spacing: .28em; text-transform: uppercase;
  color: var(--brass); margin-bottom: var(--s3); display: inline-flex; align-items: center;
}
.eyebrow::before {
  content: ''; display: inline-block; width: var(--s4); height: 1px;
  margin-right: var(--s2); background: linear-gradient(90deg, transparent, var(--brass));
}

h1, h2, h3 { font-family: var(--serif); font-weight: 400; }
h2 { font-size: var(--t-l); line-height: 1.02; letter-spacing: -.01em; margin-bottom: var(--s4); color: var(--forest); }
h2 em { font-style: italic; color: var(--brass); }
h3 { font-size: var(--t-m); margin-bottom: var(--s2); color: var(--forest); }

.lede { font-size: var(--t-m); line-height: 1.618; color: rgba(20,32,26,.72); max-width: 42ch; margin-bottom: var(--s4); }

.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s4); font-size: var(--t-xs);
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid transparent; border-radius: 2px;
  transition: transform var(--d2) var(--ease), box-shadow var(--d3) var(--ease),
              background-color var(--d3) var(--ease), border-color var(--d3) var(--ease), color var(--d3) var(--ease);
}
.btn--brass { background: linear-gradient(180deg, var(--brass-lite), var(--brass)); color: #241b0a; font-weight: 600; }
.btn--brass:hover { transform: translateY(-1px); box-shadow: 0 var(--s1) var(--s4) rgba(176,141,79,.32); }
.btn--forest { background: var(--forest); color: var(--paper); font-weight: 600; }
.btn--forest:hover { transform: translateY(-1px); box-shadow: 0 var(--s1) var(--s4) rgba(31,61,46,.32); }
.btn--ghost { border-color: rgba(31,61,46,.28); color: var(--forest); }
.btn--ghost:hover { border-color: var(--forest); background: rgba(31,61,46,.06); }
.btn:active { transform: translateY(0); }
.btnrow { display: flex; flex-wrap: wrap; gap: var(--s2); }

.wrap { max-width: 1180px; margin: 0 auto; padding-left: var(--edge); padding-right: var(--edge); }
section { padding: var(--s7) 0; }
.section-head { max-width: 46rem; margin-bottom: var(--s6); }

/* ------------------------------------------------------------------ Loader */

.loader {
  position: fixed; inset: 0; z-index: 150; display: grid; place-items: center;
  background: var(--forest);
  transition: opacity var(--d4) var(--ease), visibility var(--d4);
}
.loader[data-done] { opacity: 0; visibility: hidden; }
.loader__inner { display: grid; justify-items: center; gap: var(--s5); }
.loader__mark { font-family: var(--serif); font-size: var(--t-l); color: var(--paper); letter-spacing: .04em; }
.loader__track { width: var(--s8); max-width: 55vw; height: 1px; background: rgba(246,243,234,.2); overflow: hidden; }
.loader__fill {
  display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--brass), var(--brass-lite));
  transition: transform var(--d3) linear;
}

/* ------------------------------------------------------------------ Topbar */

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s2) var(--edge);
  background: linear-gradient(180deg, rgba(20,32,26,.94), rgba(20,32,26,0));
  backdrop-filter: blur(8px);
  transform: translateY(-100%); opacity: 0;
  transition: transform var(--d4) var(--ease), opacity var(--d3) var(--ease);
}
.topbar[data-visible] { transform: none; opacity: 1; }
.topbar__brand { display: flex; align-items: baseline; gap: var(--s1); }
.topbar__brand span { font-family: var(--serif); font-size: var(--t-m); letter-spacing: .1em; text-transform: uppercase; color: var(--paper); }
.topbar__brand i { font-style: normal; color: var(--brass-lite); }
.topbar__cta {
  padding: var(--s1) var(--s3); border: 1px solid rgba(220,196,143,.4); color: var(--brass-lite);
  font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase;
  transition: background-color var(--d3) var(--ease), border-color var(--d3) var(--ease);
}
.topbar__cta:hover { background: rgba(176,141,79,.16); border-color: var(--brass-lite); }

/* --------------------------------------------------------- Scroll-Scrub */

.hero { position: relative; height: 610vh; }
.hero__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--forest); }
.hero__canvas { display: none; width: 100%; height: 100%; }
.js .hero__canvas { display: block; }
.hero__poster { width: 100%; height: 100%; object-fit: cover; }
.js .hero__poster { display: none; }
.hero__scrim, .hero__vignette { position: absolute; inset: 0; pointer-events: none; }
.hero__scrim {
  background:
    linear-gradient(90deg, rgba(20,32,26,.88) 0%, rgba(20,32,26,.55) 34%, rgba(20,32,26,.08) 61%, rgba(20,32,26,.5) 100%),
    linear-gradient(180deg, rgba(20,32,26,.68) 0%, rgba(20,32,26,0) 21%, rgba(20,32,26,0) 55%, rgba(20,32,26,.86) 100%);
}
.hero__vignette { background: radial-gradient(118% 88% at 50% 46%, rgba(0,0,0,0) 42%, rgba(0,0,0,.55) 100%); }

.chapters { position: absolute; inset: 0; }
.chapter {
  position: absolute; inset: 0; display: grid; align-content: center; justify-items: start;
  padding: var(--s7) var(--edge) var(--s6); opacity: 0; pointer-events: none;
  will-change: opacity, transform;
}
.chapter > * { max-width: 34rem; }
.chapter[data-active] { pointer-events: auto; }
.chapter--intro { align-content: end; padding-bottom: var(--s7); }

.wordmark { color: var(--paper); font-size: var(--t-xl); line-height: .96; margin-bottom: var(--s3); letter-spacing: var(--track, .04em); }
.wordmark i { font-style: italic; color: var(--brass-lite); }
.hero .claim { color: var(--brass-lite); font-size: var(--t-m); margin-bottom: var(--s2); }
.hero .kicker { color: rgba(246,243,234,.7); font-size: var(--t-s); letter-spacing: .1em; text-transform: uppercase; }
.chapter--text h2, .chapter--text .eyebrow, .chapter--text .lede { color: var(--paper); }
.chapter--text .lede { color: rgba(246,243,234,.78); }
.chapter--text h2 { color: var(--paper); }
.chapter--text h2 em { color: var(--brass-lite); }

.scrollhint {
  position: absolute; left: 50%; bottom: var(--s5); transform: translateX(-50%);
  color: rgba(246,243,234,.7); font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  transition: opacity var(--d3) var(--ease);
}
.scrollhint[data-hidden] { opacity: 0; }
.scrollhint::after {
  content: ''; width: 1px; height: var(--s4); background: linear-gradient(180deg, var(--brass-lite), transparent);
  animation: hint 1.6s var(--ease) infinite;
}
@keyframes hint { 0%,100% { transform: scaleY(.4); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

.progressbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 95; background: rgba(20,32,26,.12); }
.progressbar::after {
  content: ''; display: block; height: 100%; width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, var(--brass), var(--brass-lite));
}

/* ------------------------------------------------------------- Listings */

.filterbar {
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end;
  padding: var(--s4); background: var(--ink-2); border-radius: 4px; margin-bottom: var(--s5);
}
.filterbar label { display: grid; gap: var(--s1); font-size: var(--t-xs); letter-spacing: .06em; color: var(--brass-lite); text-transform: uppercase; }
.filterbar select, .filterbar input {
  font: inherit; padding: var(--s2) var(--s3); border-radius: 2px; border: 1px solid rgba(246,243,234,.2);
  background: rgba(246,243,234,.06); color: var(--paper); min-width: 11ch;
}
.filterbar select option { color: var(--ink); }
.filterbar .count { margin-left: auto; color: var(--paper-dim); font-size: var(--t-xs); align-self: center; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s5); }

.card {
  background: #fff; border: 1px solid rgba(31,61,46,.1); border-radius: 4px; overflow: hidden;
  display: flex; flex-direction: column; cursor: pointer;
  transition: transform var(--d3) var(--ease), box-shadow var(--d3) var(--ease);
}
.card:hover, .card:focus-visible { transform: translateY(-3px); box-shadow: 0 var(--s3) var(--s5) rgba(20,32,26,.14); }
.card__media {
  aspect-ratio: 4/3; position: relative; display: grid; place-items: center;
  color: rgba(246,243,234,.85); font-family: var(--serif); font-size: var(--t-m); text-align: center; padding: var(--s3);
}
.card__media svg { width: var(--s6); height: var(--s6); opacity: .55; }
.card__tag {
  position: absolute; top: var(--s2); left: var(--s2); background: rgba(20,32,26,.72); color: var(--brass-lite);
  font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; padding: var(--s1) var(--s2); border-radius: 2px;
}
.card__body { padding: var(--s4); display: grid; gap: var(--s2); flex: 1; }
.card__ort { color: var(--paper-dim); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; }
.card__preis { font-family: var(--serif); font-size: var(--t-m); color: var(--forest); }
.card__meta { display: flex; gap: var(--s3); color: rgba(20,32,26,.62); font-size: var(--t-xs); flex-wrap: wrap; }
.card__cta { margin-top: auto; font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }

/* --------------------------------------------------------------- Detail */

.overlay {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: var(--s4);
  background: rgba(20,32,26,.55); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity var(--d3) var(--ease);
}
.overlay[data-open] { opacity: 1; pointer-events: auto; }
.overlay__panel {
  background: var(--paper); max-width: 760px; width: 100%; max-height: 88vh; overflow-y: auto;
  border-radius: 6px; position: relative; transform: translateY(var(--s4)); transition: transform var(--d3) var(--ease);
}
.overlay[data-open] .overlay__panel { transform: none; }
.overlay__close {
  position: absolute; top: var(--s3); right: var(--s3); z-index: 2; width: var(--s5); height: var(--s5);
  border-radius: 50%; background: rgba(20,32,26,.8); color: var(--paper); display: grid; place-items: center; font-size: var(--t-m);
}
.overlay__media {
  aspect-ratio: 16/9; display: grid; place-items: center; color: rgba(246,243,234,.85); font-family: var(--serif);
}
.overlay__media svg { width: var(--s7); height: var(--s7); opacity: .5; }
.overlay__body { padding: var(--s5) var(--s5) var(--s6); }
.overlay__tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0 var(--s4); }
.overlay__tags span { background: rgba(31,61,46,.08); color: var(--forest); font-size: var(--t-xs); padding: var(--s1) var(--s2); border-radius: 2px; }
.factgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s3); margin: var(--s4) 0 var(--s5); padding: var(--s4) 0; border-top: 1px solid rgba(31,61,46,.12); border-bottom: 1px solid rgba(31,61,46,.12); }
.factgrid dt { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--paper-dim); }
.factgrid dd { font-size: var(--t-m); font-family: var(--serif); color: var(--forest); }
.energie-badge { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s3); border-radius: 2px; font-weight: 700; color: #fff; }

/* ------------------------------------------------------------ Sonstiges */

.profil { display: grid; grid-template-columns: 220px 1fr; gap: var(--s6); align-items: start; }
.profil__foto { aspect-ratio: 3/4; background: linear-gradient(160deg, var(--forest), var(--ink-2)); border-radius: 4px; display: grid; place-items: center; color: rgba(246,243,234,.5); }
.profil ul { display: grid; gap: var(--s2); margin-top: var(--s4); }
.profil li { font-size: var(--t-s); padding-left: var(--s4); position: relative; }
.profil li::before { content: '—'; position: absolute; left: 0; color: var(--brass); }

.ablauf { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s5); }
.ablauf li { counter-increment: step; position: relative; padding-top: var(--s6); }
.ablauf li::before {
  content: counter(step); position: absolute; top: 0; left: 0; font-family: var(--serif); font-size: var(--t-l);
  color: var(--brass-lite); -webkit-text-stroke: 1.5px var(--brass);
}

.bewertung { background: var(--forest); color: var(--paper); border-radius: 6px; padding: var(--s6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: center; }
.bewertung h2, .bewertung .lede { color: var(--paper); }
.bewertung .lede { color: rgba(246,243,234,.78); }

.form { display: grid; gap: var(--s3); }
.form label { display: grid; gap: var(--s1); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; }
.form input, .form select, .form textarea {
  font: inherit; padding: var(--s2) var(--s3); border-radius: 2px; border: 1px solid rgba(246,243,234,.28);
  background: rgba(246,243,234,.08); color: inherit;
}
.form--light input, .form--light select, .form--light textarea { border-color: rgba(31,61,46,.22); background: #fff; color: var(--ink); }
.form textarea { resize: vertical; min-height: 6em; }
.form .hp { position: absolute; left: -9999px; }
.form__status { font-size: var(--t-s); min-height: 1.4em; }
.form__status[data-state="ok"] { color: var(--forest-2); }
.form__status[data-state="error"] { color: var(--brick); }

.referenzen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s5); }
.referenzen li { background: #fff; border: 1px solid rgba(31,61,46,.1); border-radius: 4px; padding: var(--s5); }
.referenzen p { font-family: var(--serif); font-size: var(--t-m); color: var(--forest); margin-bottom: var(--s4); }
.referenzen cite { font-style: normal; font-size: var(--t-xs); color: var(--paper-dim); text-transform: uppercase; letter-spacing: .06em; }

.kontakt { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); }
.kontakt dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); margin-bottom: var(--s5); }
.kontakt dt { color: var(--paper-dim); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; }
.kontakt dt[data-today], .kontakt dd[data-today] { color: var(--brass); font-weight: 600; }
dd.closed { color: var(--paper-dim); }

footer { background: var(--ink); color: rgba(246,243,234,.7); padding: var(--s6) 0; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4); align-items: center; }
footer nav { display: flex; gap: var(--s4); flex-wrap: wrap; }
footer a:hover { color: var(--brass-lite); }
.footer-note { color: rgba(246,243,234,.4); font-size: var(--t-xs); width: 100%; margin-top: var(--s4); }

@media (max-width: 860px) {
  .profil, .bewertung, .kontakt { grid-template-columns: 1fr; }
  .hero { height: 460vh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { height: auto; }
  .hero__stage { position: relative; height: 72svh; }
  .chapter { position: static; opacity: 1 !important; transform: none !important; pointer-events: auto; }
  .chapters { position: static; display: grid; }
}