/* MSH Immobilien, Variante B: Ein Fenster geht an. Graphitnacht, kühles Weiß, Fensterlicht, Patina. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --night: #0a1114;
  --slate: #16242b;
  --mist: #e9eef0;
  --glow: #fefcf8;
  --patina: #7fb8a8;
  --dim: #a9b7be;
  --line: rgba(233, 238, 240, 0.18);
  --gutter: 5vw;
  --out: cubic-bezier(0.25, 1, 0.5, 1);
  --inout: cubic-bezier(0.76, 0, 0.24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; background: var(--night); scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
html:has(.legal-page) { scrollbar-width: thin; scrollbar-color: #1f3340 #0a1114; }
html:has(.legal-page)::-webkit-scrollbar { display: block; width: 10px; }
html:has(.legal-page)::-webkit-scrollbar-thumb { background: #1f3340; border-radius: 10px; }
body {
  margin: 0; background: var(--night); color: var(--mist);
  font: 400 1rem/1.5 "Archivo", system-ui, sans-serif; font-stretch: 100%;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--patina); color: var(--night); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--patina); outline-offset: 3px; border-radius: 6px; }
h1, p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Bühne ------------------------------------------------------------- */
.film { position: relative; height: 1420vh; }
.stage { position: fixed; inset: 0; overflow: hidden; background: var(--night); }
.layer { position: absolute; inset: 0; background: center / cover no-repeat; will-change: clip-path; }
.layer canvas { transform-origin: 50% 50%; }
.seq { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.bloom { position: absolute; inset: 0; background: var(--glow); opacity: 0; pointer-events: none; }
.scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(10, 17, 20, var(--scrimL, 0)), rgba(10, 17, 20, 0) 62%),
    linear-gradient(to top, rgba(10, 17, 20, calc(var(--scrim, 0.5) * 1.1)), rgba(10, 17, 20, 0) 48%),
    linear-gradient(to bottom, rgba(10, 17, 20, calc(var(--scrim, 0.5) * 0.9)), rgba(10, 17, 20, 0) 40%);
}

/* Schrift ----------------------------------------------------------- */
.pair { position: absolute; inset: 0; pointer-events: none; margin: 0; font-weight: 400; font-size: 1rem; line-height: 1; }
.w {
  position: absolute; white-space: nowrap; perspective: 900px;
  font-weight: 560; font-stretch: 125%; line-height: 0.92; letter-spacing: -0.02em;
  font-size: clamp(2.6rem, 8.6vw, 9rem); color: var(--mist);
  text-shadow: 0 2px 36px rgba(10, 17, 20, 0.45);
}
.p-hero .w--l { left: var(--gutter); top: 15vh; }
.p-hero .w--r { right: var(--gutter); bottom: 14vh; }
.p-addr .w--l { left: var(--gutter); bottom: 12vh; }
.p-addr .w--r { right: var(--gutter); bottom: 12vh; font-size: clamp(3.4rem, 11vw, 12rem); }
.p-addr .w--l { font-size: clamp(2rem, 5.2vw, 5.6rem); }
.wd { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; transform-origin: 50% 65%; backface-visibility: hidden; will-change: transform, opacity; }

.st {
  position: absolute; margin: 0; max-width: 24ch; text-wrap: balance;
  font-weight: 480; font-stretch: 108%; line-height: 1.3; letter-spacing: -0.005em;
  font-size: clamp(1.35rem, 2.7vw, 2.7rem); color: var(--mist);
  text-shadow: 0 0 26px rgba(10, 17, 20, 0.9), 0 1px 4px rgba(10, 17, 20, 0.55);
}
.st--top { left: 50%; top: 17vh; transform: translateX(-50%); text-align: center; }
.st--finale { left: var(--gutter); bottom: 15vh; top: auto; transform: none; max-width: 15em; font-size: clamp(1.9rem, 4.1vw, 4.4rem); font-weight: 540; font-stretch: 112%; }
.cap {
  position: absolute; left: var(--gutter); bottom: 1.5rem; margin: 0; opacity: 0;
  font-size: 0.9rem; letter-spacing: 0.03em; color: rgba(233, 238, 240, 0.92); text-shadow: 0 0 14px rgba(10, 17, 20, 0.9), 0 1px 3px rgba(10, 17, 20, 0.6);
}
.p-hero, .p-addr { opacity: 1; }
#cap4 { bottom: 3.6rem; }

/* Konstanten -------------------------------------------------------- */
.logo {
  position: absolute; z-index: 5; left: 50%; top: 5.5vh; display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none; color: var(--mist); transform-origin: 0 0; white-space: nowrap;
  text-shadow: 0 1px 18px rgba(10, 17, 20, 0.5);
}
.logo__m { font-weight: 700; font-stretch: 125%; font-size: 1.35rem; letter-spacing: 0.16em; }
.logo i { display: block; width: 1px; height: 1.1rem; background: currentColor; opacity: 0.55; }
.logo__t { font-weight: 400; font-stretch: 100%; font-size: 1.05rem; letter-spacing: 0.04em; }

.hint {
  position: absolute; right: var(--gutter); bottom: 1.6rem; display: flex; align-items: center; gap: 0.8rem;
  font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim);
}
.hint i { display: block; width: 3rem; height: 1px; background: var(--mist); transform-origin: left; animation: hint 2.6s var(--out) infinite; }
@keyframes hint { 0% { transform: scaleX(0); } 55% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }

.cta {
  position: absolute; z-index: 6; overflow: hidden;
  left: var(--cx, 50%); top: var(--cy, 90%); width: var(--cw, 9.5rem); height: var(--ch, 3.2rem); border-radius: var(--cr, 999px);
  background: rgba(10, 17, 20, 0.92); border: 1px solid rgba(233, 238, 240, 0.3); color: var(--mist);
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.7);
}
.cta__label {
  position: absolute; inset: 0; width: 100%; opacity: var(--lab, 1); cursor: pointer;
  background: none; border: 0; color: inherit; font: 600 0.95rem/1 "Archivo", sans-serif; font-stretch: 112%; letter-spacing: 0.03em;
  transition: color 0.4s;
}
.cta__label:hover { color: var(--patina); }
.cta__form { position: absolute; inset: 0; padding: 1.5rem 1.6rem; display: grid; gap: 0.8rem; align-content: start; opacity: var(--frm, 0); pointer-events: none; overflow-y: auto; overscroll-behavior: contain; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.row2 label { min-width: 0; }
@media (max-width: 21rem) { .row2 { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cta.is-open .cta__form { pointer-events: auto; }
.cta.is-open .cta__label { pointer-events: none; }
.cta__form label { display: grid; gap: 0.3rem; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; color: var(--dim); }
.cta__form input, .cta__form select, .cta__form textarea {
  width: 100%; padding: 0.62rem 0.8rem; border-radius: 9px; border: 1px solid rgba(233, 238, 240, 0.26);
  background: rgba(233, 238, 240, 0.07); color: var(--mist); font: 400 0.95rem/1.3 "Archivo", sans-serif; resize: none;
}
.cta__form select option { color: #0a1114; }
.cta__form input:focus, .cta__form select:focus, .cta__form textarea:focus { outline: none; border-color: var(--patina); background: rgba(127, 184, 168, 0.1); }
.send {
  min-height: 2.9rem; border: 0; border-radius: 999px; cursor: pointer; background: var(--patina); color: var(--night);
  font: 600 0.95rem/1 "Archivo", sans-serif; font-stretch: 112%; transition: background-color 0.3s;
}
.send:hover { background: #a3d0c3; }
.form__hint { font-size: 0.78rem; color: var(--dim); line-height: 1.4; }
.form__hint a { text-decoration-color: var(--patina); }
.form__hint.is-error { color: #ffb4a8; }

.legal-links {
  position: absolute; z-index: 7; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 1.3rem; white-space: nowrap;
  font-size: 0.78rem; color: var(--dim); text-shadow: 0 0 12px rgba(10, 17, 20, 0.8);
}
.legal-links a { text-decoration: none; padding: 0.35rem 0; }
.legal-links a:hover { color: var(--mist); }

/* Preloader --------------------------------------------------------- */
.pre {
  position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 1.6rem;
  background: var(--night); will-change: transform;
}
.pre__mark { display: flex; align-items: center; gap: 0.9rem; color: var(--mist); }
.pre__mark span:first-child { font-weight: 700; font-stretch: 125%; font-size: 1.7rem; letter-spacing: 0.16em; }
.pre__mark i { display: block; width: 1px; height: 1.4rem; background: currentColor; opacity: 0.55; }
.pre__mark span:last-child { font-size: 1.25rem; letter-spacing: 0.04em; }
.pre__line { width: min(14rem, 50vw); height: 1px; background: rgba(233, 238, 240, 0.18); }
.pre__line i { display: block; height: 100%; background: var(--mist); transform: scaleX(0); transform-origin: left; }

/* Rechtsseiten ------------------------------------------------------ */
.legal-page { max-width: 46rem; margin: 0 auto; padding: 7rem var(--gutter) 5rem; }
.legal-page h1 { font-weight: 600; font-stretch: 125%; font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1; margin-bottom: 2.4rem; }
.legal-page h2 { font-weight: 600; font-stretch: 112%; font-size: 1.6rem; line-height: 1.2; margin: 2.4rem 0 0.7rem; color: var(--patina); }
.legal-page p { max-width: 66ch; }
.legal-page p + p { margin-top: 0.9rem; }
.legal-top { position: fixed; inset: 0 0 auto 0; padding: 1.6rem var(--gutter); background: linear-gradient(rgba(10,17,20,.9), rgba(10,17,20,0)); }

/* Schmale Bildschirme ----------------------------------------------- */
@media (max-width: 52rem) {
  .w { font-size: clamp(2.2rem, 12vw, 4.6rem); }
  .p-hero .w--l { top: 20vh; }
  .p-addr .w--l { bottom: 24vh; }
  .p-addr .w--r { bottom: 9vh; font-size: clamp(3rem, 20vw, 6rem); }
  .p-addr .w--l { font-size: clamp(1.6rem, 8vw, 3rem); }
  .st--top { top: 16vh; max-width: 18ch; }
  .st--finale { top: 8vh; bottom: auto; transform: none; max-width: 13em; font-size: clamp(1.35rem, 5.8vw, 2rem); line-height: 1.3; }
  .cta__form { padding: 1.1rem 1.3rem; gap: 0.55rem; }
  .cta__form textarea { height: 3.6rem; }
  .logo__m { font-size: 1.1rem; } .logo__t { font-size: 0.92rem; }
  .hint { display: none; }
  .legal-links { gap: 0.9rem; font-size: 0.72rem; }
  .cap { top: 5.1rem; bottom: auto; font-size: 0.8rem; max-width: 62vw; line-height: 1.3; }
  #cap4 { top: auto; bottom: 3.3rem; max-width: 92vw; }
}

/* Ohne Bewegung ----------------------------------------------------- */
.static-page { display: none; }
html.is-static .film, html.is-static .pre { display: none; }
html.is-static .static-page { display: block; }
.static-page section { position: relative; min-height: 80vh; display: grid; align-content: end; padding: 3rem var(--gutter); background: center / cover no-repeat; }
.static-page section::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,17,20,.85), rgba(10,17,20,.1) 60%); }
.static-page section > * { position: relative; }
.static-page h2 { font-weight: 560; font-stretch: 125%; font-size: clamp(2rem, 6vw, 4rem); line-height: 1; }
.static-page p { margin-top: 0.8rem; max-width: 34ch; font-size: 1.15rem; }
@media (prefers-reduced-motion: reduce) { .hint i { animation: none; } }

/* Hauptseite: Verweis oben rechts ------------------------------------ */
.toplink {
  position: absolute; z-index: 5; right: var(--gutter); top: 24px; padding: 0.4rem 0; text-decoration: none; color: var(--mist);
  font-weight: 500; font-stretch: 112%; font-size: 0.95rem; letter-spacing: 0.04em; text-shadow: 0 1px 18px rgba(10, 17, 20, 0.5);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--out);
}
.toplink:hover { background-size: 100% 1px; }

/* Referenzen -------------------------------------------------------- */
.page-ref .stage { background: var(--night); }
.ref { position: absolute; inset: 0; overflow: hidden; background: var(--night); will-change: clip-path; }
.ref__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.ref::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(10, 17, 20, 0.72), rgba(10, 17, 20, 0) 50%),
    linear-gradient(to bottom, rgba(10, 17, 20, 0.72), rgba(10, 17, 20, 0) 46%);
}
.ref .pair, .ref .st, .ref .cap { z-index: 2; }
.ref .st { max-width: 30ch; font-weight: 540; }
.p-ref .w { font-size: calc(clamp(2.2rem, 5.8vw, 6.4rem) * var(--fit, 1)); }
.p-ref .w--l { left: var(--gutter); bottom: 12vh; }
.p-ref .w--r { right: var(--gutter); bottom: 12vh; }
.page-ref #p-hero { z-index: 3; }
.page-ref .logo--fix, .logo--fix { left: var(--gutter); top: 26px; transform: none; }
.pill {
  position: absolute; z-index: 6; left: 50%; bottom: 50px; transform: translateX(-50%); height: 3.2rem; padding: 0 1.6rem;
  display: grid; place-items: center; border-radius: 26px; background: rgba(10, 17, 20, 0.92); border: 1px solid rgba(233, 238, 240, 0.3);
  color: var(--mist); text-decoration: none; font: 600 0.95rem/1 "Archivo", sans-serif; font-stretch: 112%; letter-spacing: 0.03em; white-space: nowrap;
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.7); transition: color 0.4s;
}
.pill:hover { color: var(--patina); }
.fin {
  position: absolute; inset: 0; z-index: 4; display: grid; align-content: end; gap: 1.4rem; padding: 0 var(--gutter) 9rem;
  opacity: var(--fin, 0); pointer-events: none;
  background: linear-gradient(to top, rgba(10, 17, 20, 0.96), rgba(10, 17, 20, 0.8) 60%, rgba(10, 17, 20, 0.6));
}
.fin.is-on { pointer-events: auto; }
.fin__t { max-width: 14em; font-weight: 540; font-stretch: 112%; font-size: clamp(1.9rem, 4.1vw, 4.4rem); line-height: 1.12; text-wrap: balance; }
.fin__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 2.2rem; }
.fin__list a { font: 600 clamp(1.2rem, 2vw, 1.7rem)/1.3 "Archivo", sans-serif; font-stretch: 112%; text-decoration: none; padding-bottom: 0.15em; background: linear-gradient(var(--patina), var(--patina)) 0 100% / 100% 1px no-repeat; font-variant-numeric: tabular-nums; }
.fin__list a:hover { color: var(--patina); }
.fin__legal { display: flex; flex-wrap: wrap; gap: 0.2rem 1.6rem; font-size: 0.85rem; color: var(--dim); }
.fin__legal a { text-decoration: none; padding: 0.45rem 0; }
.fin__legal a:hover { color: var(--mist); }
@media (max-width: 52rem) {
  .p-ref .w { font-size: calc(clamp(1.7rem, 9vw, 3.2rem) * var(--fit, 1)); }
  .p-ref .w--l { bottom: 17vh; }
  .p-ref .w--r { left: var(--gutter); right: auto; bottom: 9.5vh; }
  .page-ref #p-hero .w { font-size: clamp(2rem, 10.5vw, 3.2rem); }
  .page-ref #p-hero .w--l { top: 17vh; }
  .page-ref #p-hero .w--r { bottom: 20vh; }
  .fin { padding-bottom: 8rem; }
  .ref .st { top: 12vh; max-width: 20ch; font-size: clamp(1.15rem, 5vw, 1.6rem); }
  .toplink { top: 20px; }
}

/* Referenzen ohne Bewegung ------------------------------------------ */
.is-static .film { height: auto; }
.is-static .stage { position: relative; overflow: visible; }
.is-static .ref { position: relative; height: 92vh; clip-path: none; }
.is-static .st, .is-static .cap { opacity: 1; }
.is-static #p-hero { position: relative; inset: auto; min-height: 66vh; }
.is-static .fin { position: relative; min-height: 80vh; opacity: 1; pointer-events: auto; }
.is-static .pill, .is-static .logo--fix { position: fixed; }

/* Rechtsseiten: Fußnavigation --------------------------------------- */
.legal-foot { display: flex; flex-wrap: wrap; gap: 0.3rem 1.8rem; margin-top: 3.5rem; padding-top: 1.6rem; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--dim); }
.legal-foot a { text-decoration: none; padding: 0.4rem 0; }
.legal-foot a:hover { color: var(--mist); }
.legal-page ul { padding-left: 1.2rem; max-width: 66ch; }
.legal-page li + li { margin-top: 0.5rem; }
.legal-page a { text-decoration-color: var(--patina); }
.legal-page h3 { font-weight: 600; font-stretch: 105%; font-size: 1.2rem; line-height: 1.3; margin: 1.8rem 0 0.5rem; }

/* Ohne JavaScript ---------------------------------------------------- */
.ns { max-width: 40rem; margin: 0 auto; padding: 4rem var(--gutter) 5rem; color: var(--mist); }
.ns__brand { font-weight: 700; font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; color: var(--patina); margin-bottom: 1rem; }
.ns h1 { font-weight: 600; font-stretch: 125%; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.05; margin-bottom: 1.6rem; }
.ns ul { padding-left: 1.1rem; margin: 0 0 1.6rem; }
.ns li { margin-bottom: 0.9rem; max-width: 60ch; }
.ns p { max-width: 60ch; margin-bottom: 1rem; }
.ns a { text-decoration-color: var(--patina); }