/* =============================================
   HEFTOL — ROOFTOP BERLIN
   Ultra-Premium Cinematic Stylesheet
   ============================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #080808;
  --fg: #f2ede4;
  --gold: #c9a96e;
  --gold-light: #e8d5b0;
  --gold-dim: rgba(201,169,110,0.3);
  --mid: #111111;
  --dark: #050505;
  --border: rgba(242,237,228,0.09);
  --border-gold: rgba(201,169,110,0.2);
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-cormo: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html { scroll-behavior: auto; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.65;
  overflow-x: hidden;
  cursor: none;
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gold); }

/* ---- GRAIN ---- */
.grain-overlay {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 256px 256px; opacity: 0.5; mix-blend-mode: overlay;
  animation: grain 0.4s steps(2) infinite;
}
@keyframes grain {
  0%,100% { background-position: 0 0; }
  20% { background-position: -20% -30%; }
  40% { background-position: 30% 10%; }
  60% { background-position: -10% 20%; }
  80% { background-position: 20% -10%; }
}

/* ---- PARTICLES ---- */
.particles-canvas {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
}

/* ---- CURSOR ---- */
.cursor {
  position: fixed; width: 12px; height: 12px; border-radius: 50%;
  pointer-events: none; z-index: 10000;
  transform: translate(-50%,-50%);
  display: flex; align-items: center; justify-content: center;
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: white;
  transition: transform 0.15s;
}
.cursor-follower {
  position: fixed; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(201,169,110,0.55); pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%); transition: all 0.35s var(--ease);
}
body:has(a:hover) .cursor-follower,
body:has(button:hover) .cursor-follower { transform: translate(-50%,-50%) scale(2); opacity: 0.5; }
body:has(a:hover) .cursor-dot { transform: scale(2.5); }

/* ---- PROGRESS BAR ---- */
.progress-bar {
  position: fixed; top: 0; left: 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-light), var(--gold));
  z-index: 1000; transform-origin: left; transform: scaleX(0);
  transition: transform 0.05s linear;
}

/* ---- NAV ---- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 48px;
  transition: background 0.5s, padding 0.4s, border-color 0.5s, color 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(8,8,8,0.92);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  padding: 16px 48px;
  border-bottom-color: var(--border);
}
/* Light background phase — keep logo legible on white hero sky */
.nav.light-bg:not(.scrolled) { background: rgba(248,244,236,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav.light-bg:not(.scrolled) .logo-text { color: #1a1410; }
.nav.light-bg:not(.scrolled) .logo-text em { color: #8b6914; }
.nav.light-bg:not(.scrolled) .logo-sub { color: rgba(26,20,16,0.45); }
.nav.light-bg:not(.scrolled) .nav-link { color: rgba(26,20,16,0.55); }
.nav.light-bg:not(.scrolled) .nav-link:hover { color: #1a1410; }
.nav.light-bg:not(.scrolled) .nav-menu-btn span { background: #1a1410; }
.nav-logo { display: flex; flex-direction: column; }
.logo-text { font-family: var(--font-serif); font-size: 22px; line-height: 1; font-weight: 300; transition: color 0.4s; }
.logo-text em { color: var(--gold); font-style: normal; transition: color 0.4s; }
.logo-sub { font-size: 8px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(242,237,228,0.35); margin-top: 4px; transition: color 0.4s; }
.nav-center-links { display: flex; gap: 40px; }
.nav-link {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
  color: rgba(242,237,228,0.5); transition: color 0.3s; position: relative;
}
.nav-link::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav-link:hover { color: var(--fg); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-right { display: flex; align-items: center; gap: 28px; }
.nav-cta-btn {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
  color: var(--bg); background: var(--gold); padding: 10px 22px;
  transition: background 0.3s, color 0.3s;
}
.nav-cta-btn:hover { background: var(--gold-light); }
.nav-menu-btn {
  display: flex; flex-direction: column; gap: 7px;
  cursor: none; padding: 8px; z-index: 600;
}
.nav-menu-btn span {
  display: block; width: 28px; height: 1px;
  background: var(--fg); transition: all 0.4s var(--ease);
}
.nav-menu-btn.open span:first-child { transform: rotate(45deg) translate(5px,5px); }
.nav-menu-btn.open span:last-child { transform: rotate(-45deg) translate(5px,-5px); }

/* ---- FULLSCREEN MENU ---- */
.fullscreen-menu {
  position: fixed; inset: 0; z-index: 400;
  display: flex; flex-direction: column;
  justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
.fullscreen-menu.open { opacity: 1; pointer-events: all; }
.menu-bg-video { position: absolute; inset: 0; overflow: hidden; }
.menu-bg-video video { width: 100%; height: 100%; object-fit: cover; }
.menu-video-overlay { position: absolute; inset: 0; background: rgba(5,5,5,0.87); }
.menu-inner {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 80px;
}
.menu-nav { flex: 1; padding: 0 60px; }
.menu-link {
  display: block; font-family: var(--font-cormo); font-size: clamp(44px, 5.5vw, 72px);
  font-weight: 300; color: var(--fg); text-decoration: none;
  line-height: 1.05; padding: 8px 0; position: relative; overflow: hidden;
  transition: color 0.3s;
}
.menu-link::before {
  content: attr(data-num);
  position: absolute; left: -50px; font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.2em; color: var(--gold);
  top: 50%; transform: translateY(-50%); opacity: 0;
  transition: opacity 0.3s, left 0.4s var(--ease);
}
.menu-link:hover { color: var(--gold); }
.menu-link:hover::before { opacity: 1; left: -40px; }
.menu-side-info {
  display: flex; flex-direction: column; gap: 32px; padding-bottom: 12px;
}
.menu-stat { display: flex; flex-direction: column; align-items: flex-end; }
.menu-stat-num { font-family: var(--font-serif); font-size: 40px; font-weight: 300; color: var(--gold); line-height: 1; }
.menu-stat-label { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(242,237,228,0.4); margin-top: 4px; }
/* Menu logo block */
.menu-logo-block {
  display: flex; flex-direction: column;
  margin-bottom: 40px;
}
.menu-logo-main {
  font-family: var(--font-cormo); font-size: clamp(28px, 3vw, 44px);
  font-weight: 300; color: var(--fg); line-height: 1;
  letter-spacing: 0.01em;
}
.menu-logo-main em { color: var(--gold); font-style: italic; }
.menu-logo-sub {
  font-family: var(--font-sans); font-size: 9px;
  letter-spacing: 0.4em; text-transform: uppercase;
  color: rgba(242,237,228,0.3); margin-top: 6px;
}
.menu-footer {
  position: absolute; bottom: 40px; left: 80px; right: 80px; z-index: 1;
  display: flex; justify-content: space-between;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(242,237,228,0.3);
  border-top: 1px solid var(--border); padding-top: 20px;
}

/* ---- CONTAINER ---- */
.container { max-width: 1320px; margin: 0 auto; padding: 0 60px; }

/* ---- SECTIONS ---- */
.section { position: relative; padding: 140px 0; overflow: hidden; }
.section-tag {
  font-size: 9px; letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 52px;
}
.tag--light { color: var(--gold-light); }
.section-title {
  font-family: var(--font-cormo); font-size: clamp(52px, 6.5vw, 96px);
  font-weight: 300; line-height: 1.0; margin-bottom: 44px;
}
.section-title em { color: var(--gold); font-style: italic; }
.section-title.light { color: var(--fg); }
.section-title.centered { text-align: center; }

/* ---- PARALLAX ---- */
.parallax-img { overflow: hidden; }
.parallax-img .parallax-inner { transform: scale(1.18); will-change: transform; }
img { width: 100%; height: 100%; object-fit: cover; display: block; }




/* ---- REVEAL ---- */
.reveal {
  opacity: 0; transform: translateY(48px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ==================== HERO ==================== */
.hero-scroll-zone { height: 400vh; position: relative; }
.hero-sticky {
  position: sticky; top: 0;
  width: 100%; height: 100vh; overflow: hidden;
}
.drone-layer { position: absolute; inset: 0; will-change: transform, opacity, filter; }
.drone-layer img { width: 100%; height: 100%; object-fit: cover; will-change: transform, filter; }
.drone-sky { z-index: 0; }
.sky-gradient { position: absolute; inset: 0; background: #06060a; }
.sky-gradient.phase-1 { background: #0e1018; }
.sky-gradient.phase-2 { background: linear-gradient(180deg, #141824 0%, #080808 100%); }
.sky-gradient.phase-3 { background: linear-gradient(180deg, #222838 0%, #141420 100%); }
.sky-gradient.phase-4 { background: linear-gradient(180deg, rgba(201,169,110,0.25) 0%, rgba(232,201,128,0.08) 30%, rgba(245,240,224,0.04) 100%); }
.sky-gradient.phase-5 { background: linear-gradient(180deg, #f0e8d8 0%, #faf5eb 50%, #fff9ee 100%); }
.drone-street { z-index: 1; opacity: 1; }
.drone-street img { filter: grayscale(1) brightness(0.3) contrast(1.4); transform-origin: bottom center; }
.street-fog {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,8,8,0.95) 0%, rgba(8,8,8,0.5) 40%, transparent 70%);
  z-index: 1;
}
.drone-facade { z-index: 2; opacity: 0; }
.drone-facade img { filter: grayscale(0.9) brightness(0.4) contrast(1.25); transform-origin: center center; }
.facade-vignette {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(8,8,8,0.7) 100%);
}
.drone-rooftop { z-index: 3; opacity: 0; }
.drone-rooftop img { filter: grayscale(0.5) brightness(0.6) contrast(1.1); transform-origin: bottom center; }
.drone-penthouse { z-index: 4; opacity: 0; }
.drone-penthouse img { filter: brightness(0.9) saturate(1.3) contrast(1.05); transform-origin: center center; }
.penthouse-glow {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at 60% 30%, rgba(255,220,120,0) 0%, transparent 100%);
  mix-blend-mode: screen; pointer-events: none;
}
.drone-flash { position: absolute; inset: 0; z-index: 20; background: radial-gradient(ellipse at center, #fff9e0, white); opacity: 0; pointer-events: none; }
.light-rays { position: absolute; inset: 0; z-index: 5; opacity: 0; overflow: hidden; pointer-events: none; }
.ray {
  position: absolute; top: -20%; left: 50%;
  width: 3px; height: 160%;
  background: linear-gradient(to bottom, rgba(255,215,100,0.2), transparent);
  transform-origin: top center; filter: blur(10px);
}
.r1 { transform: rotate(-25deg) translateX(-200px); width: 70px; }
.r2 { transform: rotate(-10deg) translateX(-80px); opacity: 0.6; }
.r3 { transform: rotate(8deg) translateX(60px); width: 45px; opacity: 0.7; }
.r4 { transform: rotate(22deg) translateX(180px); width: 90px; opacity: 0.5; }

/* LOGO REVEAL */
.drone-logo-reveal {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  padding: 0 80px; opacity: 0; pointer-events: none; will-change: opacity;
}
.dlr-eyebrow {
  font-size: 9px; letter-spacing: 0.7em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 32px; opacity: 0; transform: translateY(20px);
}
.dlr-wordmark {
  display: flex; align-items: center; gap: 36px;
  margin-bottom: 36px; overflow: hidden;
}
.dlr-word {
  display: block; font-family: var(--font-cormo);
  font-size: clamp(80px, 12vw, 180px);
  font-weight: 300; line-height: 0.88; color: var(--fg);
  opacity: 0; will-change: transform, opacity;
}
.dlr-word--1 { transform: translateX(-100px); }
.dlr-word--2 { transform: translateX(100px); }
.dlr-word em { color: var(--gold); font-style: italic; }
.dlr-divider {
  display: block; width: 1px; height: clamp(70px, 10vw, 140px);
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  opacity: 0; flex-shrink: 0;
}
.dlr-sub {
  font-size: 15px; color: rgba(242,237,228,0.55);
  max-width: 480px; line-height: 1.75; margin-bottom: 44px;
  opacity: 0; transform: translateY(20px);
}
.dlr-stats {
  display: flex; align-items: center; gap: 0; margin-bottom: 40px;
  opacity: 0; transform: translateY(16px);
}
.dlr-stat { display: flex; flex-direction: column; padding: 0 32px; }
.dlr-stat:first-child { padding-left: 0; }
.dlr-stat-num { font-family: var(--font-cormo); font-size: 36px; font-weight: 300; color: var(--gold); line-height: 1; }
.dlr-stat-label { font-size: 8px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(242,237,228,0.35); margin-top: 4px; }
.dlr-stat-div { width: 1px; height: 40px; background: var(--border-gold); flex-shrink: 0; }
.dlr-cta {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--fg); text-decoration: none;
  border-bottom: 1px solid rgba(201,169,110,0.35); padding-bottom: 10px;
  opacity: 0; transition: color 0.3s, border-color 0.3s;
}
.dlr-cta svg { width: 16px; height: 16px; transition: transform 0.3s; }
.dlr-cta:hover { color: var(--gold); border-color: var(--gold); }
.dlr-cta:hover svg { transform: translateY(5px); }

/* HUD */
.drone-hud {
  position: absolute; left: 36px; top: 50%; transform: translateY(-50%);
  z-index: 15; display: flex; flex-direction: column; align-items: center;
  gap: 8px; opacity: 0.7;
}
.hud-top, .hud-floor { font-size: 7px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); }
.hud-bar-wrap { flex: 1; }
.hud-bar { width: 2px; height: 140px; background: rgba(242,237,228,0.08); position: relative; }
.hud-fill { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, var(--gold), rgba(201,169,110,0.3)); height: 0%; }
.hud-drone-icon { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; font-size: 8px; color: var(--gold); }
.hud-altitude { font-size: 8px; letter-spacing: 0.2em; color: var(--gold); writing-mode: vertical-rl; margin-top: 4px; }
.drone-data {
  position: absolute; top: 36px; right: 48px;
  z-index: 15; display: flex; gap: 36px;
  font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0;
}
.dd-item { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.dd-label { color: rgba(242,237,228,0.3); font-size: 7px; }
.dd-val { color: var(--gold); font-family: 'Courier New', monospace; font-size: 13px; }
.hero-scroll-hint {
  position: absolute; bottom: 44px; left: 50%;
  transform: translateX(-50%); z-index: 20;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-label { font-size: 8px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(242,237,228,0.3); }
.scroll-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: bounce 2.2s infinite; }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(12px); } }

/* Lens flash compat */
.lens-flash { position: absolute; inset: 0; z-index: 10; background: white; opacity: 0; pointer-events: none; }
.interior-content { position: absolute; bottom: 80px; left: 80px; z-index: 25; opacity:0; pointer-events:none; }
.hero-content { position: absolute; bottom: 80px; left: 80px; z-index: 20; opacity: 0; }

/* ==================== STATEMENT STRIP ==================== */
.statement-strip {
  position: relative; min-height: 80vh;
  display: grid; grid-template-columns: 1fr 1fr;
  overflow: hidden; background: var(--dark);
}
.statement-inner {
  display: flex; flex-direction: column; justify-content: center;
  padding: 120px 80px; position: relative; z-index: 2;
}
.statement-tag {
  font-size: 9px; letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 32px;
}
.statement-title {
  font-family: var(--font-cormo); font-size: clamp(40px, 4.5vw, 68px);
  font-weight: 300; line-height: 1.1; color: var(--fg);
}
.statement-title em { color: var(--gold); font-style: italic; }
.statement-line {
  width: 60px; height: 1px; background: var(--gold); margin-top: 48px;
  opacity: 0.5;
}
.statement-body {
  font-size: 15px; color: rgba(242,237,228,0.5); line-height: 1.85;
  margin-top: 24px; max-width: 380px;
}
.statement-photo { position: relative; overflow: hidden; min-height: 80vh; }
.statement-photo .parallax-inner { transform: scale(1.15); }
.statement-photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(5,5,5,0.6) 0%, transparent 50%);
  z-index: 1;
}

/* ==================== VISION ==================== */
.vision { background: var(--bg); }
.vision-bg-text {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-family: var(--font-cormo); font-size: clamp(120px, 20vw, 300px);
  font-weight: 700; color: rgba(242,237,228,0.018);
  white-space: nowrap; pointer-events: none; z-index: 0; letter-spacing: 0.05em;
}
/* === VISION FULL-BLEED GRID === */
.vision-fullbleed-grid {
  display: grid;
  grid-template-columns: 58% 42%;
  min-height: 88vh;
  position: relative; z-index: 1;
}
.vision-img-col {
  position: relative;
  overflow: hidden;
}
.vision-img-col .vision-img-wrap {
  height: 100%;
  min-height: 88vh;
}
.vision-text-col {
  display: flex; flex-direction: column;
  justify-content: center;
  padding: 100px 72px 100px 80px;
  position: relative; z-index: 2;
}
/* Legacy grid — keep for mobile fallback */
.vision-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 100px; align-items: start; position: relative; z-index: 1;
}
.vision-text { font-size: 16px; color: rgba(242,237,228,0.65); margin-bottom: 24px; line-height: 1.85; }
.vision-specs { margin-top: 48px; display: flex; flex-direction: column; gap: 0; }
.vision-spec {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid var(--border);
}
.vspec-label { font-size: 8px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); }
.vspec-val { font-family: var(--font-cormo); font-size: 22px; font-weight: 300; color: var(--fg); }
.vision-img-wrap { height: 520px; position: relative; overflow: hidden; }

/* ---- VISION CROSSFADE SLIDESHOW ---- */
.vision-crossfade-wrap { border-radius: 0; }
.vcf-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.vcf-slide img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  object-position: center 20%;
  transform: scale(1.06);
  transition: transform 8s ease;
}
.vcf-slide--1 { z-index: 1; }
.vcf-slide--2 {
  z-index: 2;
  opacity: 0;
  /* 4s Zyklus: ultra-schnell wie Video-Transition */
  animation: vcfFade 4s ease-in-out 0.5s infinite;
}
@keyframes vcfFade {
  0%   { opacity: 0; }   /* Tag                                */
  15%  { opacity: 1; }   /* 0→15% = 0.6s → schneller Cut       */
  50%  { opacity: 1; }   /* 15→50% = 1.4s → Nacht halten       */
  65%  { opacity: 0; }   /* 50→65% = 0.6s → schneller Cut      */
  100% { opacity: 0; }   /* 65→100% = 1.4s → Tag halten        */
}
.vision-quote {
  margin-top: 48px; padding: 24px 24px 24px 28px;
  border-left: 1px solid var(--gold);
  background: rgba(201,169,110,0.03);
}
.vision-quote blockquote {
  font-family: var(--font-cormo); font-size: 18px; font-style: italic;
  color: rgba(242,237,228,0.7); line-height: 1.6;
}
.vision-quote cite {
  display: block; margin-top: 12px; font-size: 9px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold); font-style: normal;
}

/* ==================== EDITORIAL STRIP ==================== */
.editorial-strip { padding: 80px 0 120px; background: var(--mid); overflow: hidden; }
.editorial-label {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 0 60px; margin-bottom: 60px;
  font-size: 9px; letter-spacing: 0.5em; text-transform: uppercase; color: rgba(242,237,228,0.3);
}
.editorial-label-em { font-family: var(--font-cormo); font-size: 56px; font-weight: 300; letter-spacing: 0.02em; color: var(--fg); line-height: 1; text-transform: none; margin-top: 4px; }
.editorial-photos {
  display: flex; align-items: stretch; gap: 4px;
  height: 70vh; min-height: 500px;
}
.editorial-photo {
  position: relative; overflow: hidden; flex: 1;
  transition: flex 0.6s var(--ease);
  cursor: none;
}
.editorial-photo:hover { flex: 1.6; }
.ep--tall { align-self: stretch; }
.ep--short { align-self: stretch; height: auto; }
.editorial-photo .parallax-inner { transition: transform 0.6s var(--ease); }
.editorial-photo:hover .parallax-inner { transform: scale(1.06); }
.ep-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 60%);
  z-index: 1;
}
.ep-caption {
  position: absolute; bottom: 20px; left: 20px; z-index: 2;
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; transform: translateY(8px);
  transition: all 0.4s var(--ease);
}
.editorial-photo:hover .ep-caption { opacity: 1; transform: translateY(0); }
.ep-number { font-size: 9px; letter-spacing: 0.3em; color: var(--gold); }
.ep-text { font-family: var(--font-cormo); font-size: 28px; font-weight: 300; color: var(--fg); }
.editorial-middle-text {
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: flex-start; text-align: left;
  padding: 0 40px 32px; align-self: stretch; min-width: 240px;
}
.editorial-mid-title {
  font-family: var(--font-cormo); font-size: clamp(36px, 3.5vw, 52px);
  font-weight: 300; line-height: 1.1; color: var(--fg); margin-bottom: 16px;
}
.editorial-mid-title em { color: var(--gold); font-style: italic; }
.editorial-mid-sub { font-size: 13px; color: rgba(242,237,228,0.6); line-height: 1.7; max-width: 280px; }
.editorial-mid-line { width: 40px; height: 1px; background: var(--gold); margin-top: 24px; opacity: 0.5; }

/* ==================== TRANSFORMATION ==================== */
.transformation { padding: 0; min-height: 100vh; display: flex; align-items: center; }
.transformation-video-wrap { position: absolute; inset: 0; }
.transformation-overlay { position: absolute; inset: 0; background: rgba(8,8,8,0.78); }
.section-video { width: 100%; height: 100%; object-fit: cover; }
.transformation-content { position: relative; z-index: 2; padding: 140px 60px; }
.transformation-steps {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 48px; margin-top: 80px;
}
.step { border-top: 1px solid rgba(201,169,110,0.2); padding-top: 28px; }
.step-num { display: block; font-family: var(--font-cormo); font-size: 44px; font-weight: 300; color: var(--gold); margin-bottom: 16px; line-height: 1; }
.step h3 { font-family: var(--font-cormo); font-weight: 400; font-size: 20px; margin-bottom: 14px; color: var(--fg); }
.step p { font-size: 14px; color: rgba(242,237,228,0.55); line-height: 1.75; }

/* ==================== EDITORIAL FULLSCREEN ==================== */
.editorial-fullscreen { position: relative; height: 90vh; overflow: hidden; }
.editorial-fs-bg { position: absolute; inset: 0; height: 100%; }
.editorial-fs-bg .parallax-inner { height: 120%; transform: scale(1.1); }
.editorial-fs-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(8,8,8,0.75) 0%, rgba(8,8,8,0.3) 50%, transparent 100%);
  z-index: 1;
}
.editorial-fs-content {
  position: absolute; bottom: 80px; left: 80px; z-index: 2;
}
.efs-tag { font-size: 9px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; }
.efs-title {
  font-family: var(--font-cormo); font-size: clamp(60px, 7vw, 110px);
  font-weight: 300; line-height: 1.0; color: var(--fg); margin-bottom: 28px;
}
.efs-title em { color: var(--gold); font-style: italic; }
.efs-divider { width: 60px; height: 1px; background: var(--gold); margin-bottom: 20px; }
.efs-sub { font-size: 13px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(242,237,228,0.5); }
.editorial-fs-number {
  position: absolute; bottom: 60px; right: 60px; z-index: 2;
  font-family: var(--font-cormo); font-size: 120px; font-weight: 300;
  color: rgba(242,237,228,0.04); line-height: 1; letter-spacing: -0.02em;
}

/* ==================== RÄUME ==================== */
.raeume { background: var(--mid); }
.gallery-strip {
  display: flex; gap: 3px; margin: 80px 0;
  height: 65vh; min-height: 420px;
}
.gallery-item {
  position: relative; overflow: hidden;
  transition: flex 0.6s var(--ease);
  cursor: none; flex: 1;
}
.gi--large { flex: 2; }
.gi--medium { flex: 1.5; }
.gi--small { flex: 1.5; }
.gallery-item:hover { flex: 2.5; }
.gallery-item-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 40%);
  opacity: 0; transition: opacity 0.4s;
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-item:hover .parallax-inner { transform: scale(1.06); }
.gallery-item .parallax-inner { transition: transform 0.7s var(--ease); }
.gallery-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 24px 20px 18px;
  background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
  font-size: 9px; letter-spacing: 0.35em; text-transform: uppercase;
  color: rgba(242,237,228,0.75); z-index: 2;
  opacity: 0; transform: translateY(10px);
  transition: all 0.4s;
}
.gallery-item:hover .gallery-caption { opacity: 1; transform: translateY(0); }
.features-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 52px; margin-top: 60px;
}
.feature { border-top: 1px solid var(--border); padding-top: 28px; }
.feature-icon { font-size: 18px; color: var(--gold); margin-bottom: 14px; }
.feature h3 { font-family: var(--font-cormo); font-size: 22px; font-weight: 400; margin-bottom: 12px; }
.feature p { font-size: 14px; color: rgba(242,237,228,0.55); line-height: 1.75; }

/* ==================== VIDEO INTERLUDE ==================== */
.video-interlude {
  padding: 0; height: 80vh; display: flex;
  align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.interlude-video-wrap { position: absolute; inset: 0; }
.interlude-overlay { position: absolute; inset: 0; background: rgba(8,8,8,0.65); }
.interlude-text { position: relative; z-index: 2; text-align: center; }
.pull-quote {
  font-family: var(--font-cormo); font-size: clamp(44px, 6.5vw, 90px);
  font-weight: 300; line-height: 1.12; color: rgba(242,237,228,0.9);
}
.pull-quote em { color: var(--gold); font-style: italic; }
.pull-quote-sub { margin-top: 20px; font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(242,237,228,0.3); }

/* ==================== DIPTYCH ==================== */
.editorial-diptych {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 80vh; overflow: hidden;
}
.diptych-left { position: relative; overflow: hidden; }
.diptych-photo { height: 100%; }
.diptych-photo .parallax-inner { height: 120%; transform: scale(1.12); }
.diptych-vignette {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, transparent 60%, rgba(8,8,8,0.7) 100%);
}
.diptych-right {
  background: var(--dark); display: flex; flex-direction: column;
  justify-content: center; position: relative; padding: 80px;
  border-left: 1px solid var(--border);
}
.diptych-text-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.diptych-tag { font-size: 9px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold); margin-bottom: 28px; }
.diptych-title {
  font-family: var(--font-cormo); font-size: clamp(40px, 4vw, 60px);
  font-weight: 300; line-height: 1.1; color: var(--fg); margin-bottom: 28px;
}
.diptych-title em { color: var(--gold); font-style: italic; }
.diptych-sub { font-size: 15px; color: rgba(242,237,228,0.6); line-height: 1.8; max-width: 440px; margin-bottom: 48px; }
.diptych-stats { display: flex; gap: 40px; }
.diptych-stat { display: flex; flex-direction: column; }
.ds-num { font-family: var(--font-cormo); font-size: 44px; font-weight: 300; color: var(--gold); line-height: 1; }
.ds-label { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(242,237,228,0.35); margin-top: 6px; }
.diptych-gold-line { width: 60px; height: 1px; background: var(--gold); margin-top: 40px; opacity: 0.4; }

/* ==================== MARQUEE ==================== */
.marquee-wrap { overflow: hidden; background: var(--dark); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 20px 0; }
.marquee-track {
  display: flex; gap: 48px; white-space: nowrap;
  animation: marquee 30s linear infinite;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(242,237,228,0.25);
}
.marquee-track em { color: var(--gold); font-style: normal; }
.marquee-track span { flex-shrink: 0; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==================== LAGE — ANIMATED ==================== */
.lage { background: var(--bg); padding: 0; overflow: hidden; }
.lage-bg-anim {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0.7;
}
.lage-grid-svg { width: 100%; height: 100%; }
.grid-line { stroke: rgba(201,169,110,0.06); stroke-width: 1; }
.grid-accent { stroke: rgba(201,169,110,0.1); stroke-width: 1; }
.grid-label { fill: rgba(201,169,110,0.3); font-family: 'Inter', sans-serif; letter-spacing: 0.2em; text-transform: uppercase; }
.pulse-ring {
  fill: none; stroke: var(--gold); stroke-width: 1;
  opacity: 0;
  animation: pulseRing 3s ease-out infinite;
}
.pulse-ring.delay-1 { animation-delay: 1.5s; }
.pulse-dot { fill: var(--gold); }
@keyframes pulseRing {
  0% { r: 30; opacity: 0.5; }
  100% { r: 120; opacity: 0; }
}

.lage-content { position: relative; z-index: 2; padding: 140px 60px 80px; }
.lage-intro { font-size: 16px; color: rgba(242,237,228,0.6); max-width: 600px; line-height: 1.85; margin-top: -20px; }

/* Location Cards Grid */
.locations-grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border-gold);
  border-left: 1px solid var(--border-gold);
  margin-top: 0;
}
.loc-card {
  position: relative; overflow: hidden;
  padding: 48px 40px;
  border-right: 1px solid var(--border-gold);
  border-bottom: 1px solid var(--border-gold);
  transition: background 0.4s var(--ease);
  cursor: none;
  opacity: 0; transform: translateY(40px);
}
.loc-card.in-view {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), background 0.4s var(--ease);
}
.loc-card:hover { background: rgba(201,169,110,0.04); }

.loc-line-h {
  position: absolute; bottom: 0; left: 0; right: 100%;
  height: 1px; background: var(--gold);
  transition: right 0.6s var(--ease);
}
.loc-line-v {
  position: absolute; right: 0; top: 0; bottom: 100%;
  width: 1px; background: var(--gold);
  transition: bottom 0.6s var(--ease) 0.1s;
}
.loc-card:hover .loc-line-h { right: 0; }
.loc-card:hover .loc-line-v { bottom: 0; }
.loc-dot {
  position: absolute; top: 20px; right: 20px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); opacity: 0;
  transition: opacity 0.3s 0.5s;
  box-shadow: 0 0 12px rgba(201,169,110,0.6);
}
.loc-card:hover .loc-dot { opacity: 1; }
.loc-district { font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.loc-street { font-family: var(--font-cormo); font-size: 22px; font-weight: 300; color: var(--fg); line-height: 1.3; margin-bottom: 20px; }
.loc-status { font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; padding: 5px 12px; display: inline-block; }
.loc-status--avail { background: rgba(201,169,110,0.1); color: var(--gold); border: 1px solid rgba(201,169,110,0.25); }
.loc-status--soon { background: rgba(242,237,228,0.04); color: rgba(242,237,228,0.4); border: 1px solid rgba(242,237,228,0.08); }
.loc-status--sold { background: transparent; color: rgba(242,237,228,0.2); border: 1px solid rgba(242,237,228,0.05); }
.loc-num {
  position: absolute; bottom: 24px; right: 28px;
  font-family: var(--font-cormo); font-size: 52px; font-weight: 300;
  color: rgba(242,237,228,0.04); line-height: 1; letter-spacing: -0.02em;
  transition: color 0.4s;
}
.loc-card:hover .loc-num { color: rgba(201,169,110,0.08); }

.lage-bottom {
  position: relative; z-index: 2;
  display: flex; justify-content: center; gap: 0;
  border-top: 1px solid var(--border-gold);
  padding: 60px 0;
}
.lage-bottom-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 80px;
  border-right: 1px solid var(--border-gold);
}
.lage-bottom-stat:last-child { border-right: none; }
.lbs-num { font-family: var(--font-cormo); font-size: 64px; font-weight: 300; color: var(--gold); line-height: 1; }
.lbs-label { font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(242,237,228,0.35); margin-top: 8px; }

/* ==================== ZAHLEN ==================== */
.zahlen { background: var(--mid); position: relative; overflow: hidden; }
.zahlen-bg-text {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-family: var(--font-cormo); font-size: clamp(130px, 22vw, 340px);
  font-weight: 700; color: rgba(242,237,228,0.018);
  white-space: nowrap; pointer-events: none; z-index: 0; letter-spacing: 0.1em;
}
.zahlen-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 0; margin-top: 80px; position: relative; z-index: 1;
  border-top: 1px solid var(--border); border-left: 1px solid var(--border);
}
.zahlen-item {
  padding: 48px 40px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
  transition: background 0.4s;
}
.zahlen-item:hover { background: rgba(201,169,110,0.03); }
.zahlen-num {
  display: block; font-family: var(--font-cormo);
  font-size: clamp(64px, 8vw, 110px);
  font-weight: 300; line-height: 1; color: var(--gold);
  margin-bottom: 12px;
}
.zahlen-label { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(242,237,228,0.4); }

/* ==================== BRAND SECTION ==================== */
.brand-section { position: relative; height: 70vh; overflow: hidden; display: flex; align-items: center; }
.brand-bg { position: absolute; inset: 0; height: 100%; }
.brand-bg .parallax-inner { height: 130%; transform: scale(1.1); }
.brand-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(8,8,8,0.85) 0%, rgba(8,8,8,0.5) 60%, rgba(8,8,8,0.2) 100%);
}
.brand-content { position: relative; z-index: 2; max-width: 680px; padding: 0 80px; }
.brand-eyebrow { font-size: 9px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; }
.brand-title {
  font-family: var(--font-cormo); font-size: clamp(44px, 5vw, 72px);
  font-weight: 300; line-height: 1.1; color: var(--fg); margin-bottom: 28px;
}
.brand-title em { color: var(--gold); font-style: italic; }
.brand-text { font-size: 15px; color: rgba(242,237,228,0.6); line-height: 1.8; max-width: 500px; margin-bottom: 40px; }
.brand-cta {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--bg); background: var(--gold); text-decoration: none;
  padding: 14px 28px; transition: background 0.3s;
}
.brand-cta svg { width: 16px; height: 16px; transition: transform 0.3s; }
.brand-cta:hover { background: var(--gold-light); }
.brand-cta:hover svg { transform: translateX(4px); }

/* ==================== KONTAKT ==================== */
/* Kontakt background image */
.kontakt-bg-img {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.kontakt-bg-inner {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 30%;
  opacity: 0.18;
  filter: grayscale(0.3) brightness(0.7);
  transform: scale(1.06);
  will-change: transform;
}
.kontakt-bg-cover {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8,8,8,0.6) 0%,
    rgba(8,8,8,0.4) 50%,
    rgba(8,8,8,0.7) 100%
  );
}
.kontakt { background: var(--dark); position: relative; overflow: hidden; }
.kontakt-bg-text {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-family: var(--font-cormo); font-size: clamp(100px, 16vw, 240px);
  font-weight: 700; color: rgba(242,237,228,0.018);
  white-space: nowrap; pointer-events: none; z-index: 0; letter-spacing: 0.1em;
}
.kontakt-grid {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 100px; align-items: start; position: relative; z-index: 1;
}
.kontakt-sub { font-size: 16px; color: rgba(242,237,228,0.55); line-height: 1.85; max-width: 380px; margin-bottom: 44px; }
.kontakt-info { display: flex; flex-direction: column; gap: 0; }
.kontakt-info-item { padding: 16px 0; border-bottom: 1px solid var(--border); }
.kii-label { display: block; font-size: 8px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.kii-val { font-size: 14px; color: rgba(242,237,228,0.7); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.form-field { position: relative; margin-bottom: 32px; }
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%; padding: 16px 0; background: transparent;
  border: none; border-bottom: 1px solid var(--border);
  color: var(--fg); font-family: var(--font-sans); font-size: 14px; font-weight: 300;
  outline: none; transition: border-color 0.3s;
  -webkit-appearance: none; appearance: none;
}
.form-field select { cursor: pointer; color: rgba(242,237,228,0.35); }
.form-field select option { background: var(--mid); color: var(--fg); }
.form-field label {
  position: absolute; top: 16px; left: 0;
  font-size: 13px; font-weight: 300; color: rgba(242,237,228,0.35);
  pointer-events: none; transition: all 0.3s var(--ease);
}
.form-field input:focus ~ label,
.form-field input:not(:placeholder-shown) ~ label,
.form-field textarea:focus ~ label,
.form-field textarea:not(:placeholder-shown) ~ label {
  top: -10px; font-size: 9px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold);
}
.field-line {
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.form-field:focus-within .field-line { transform: scaleX(1); }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus { border-bottom-color: transparent; }
.submit-btn {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.4em;
  text-transform: uppercase; color: var(--bg); background: var(--gold);
  border: none; padding: 18px 36px; cursor: none;
  position: relative; overflow: hidden;
  transition: background 0.3s, transform 0.2s;
}
.submit-btn svg { width: 16px; height: 16px; transition: transform 0.3s; }
.submit-btn:hover { background: var(--gold-light); }
.submit-btn:hover svg { transform: translateX(4px); }
.btn-magnetic-bg {
  position: absolute; inset: 0; background: var(--gold-light); opacity: 0;
  transition: opacity 0.3s; border-radius: 50% 50% 0 0;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.4s var(--ease), opacity 0.4s;
}
.submit-btn:hover .btn-magnetic-bg { transform: scaleY(1); opacity: 0.3; }

/* ===================== CINEMATIC KONTAKT EXTRAS ===================== */
/* More visible background */
.kontakt-bg-inner { opacity: 0.28 !important; }

/* Floating horizontal + vertical accent lines */
.kontakt-line {
  position: absolute; background: var(--gold); opacity: 0;
  pointer-events: none; will-change: transform, opacity;
}
.kontakt-line--h1 { top: 18%; left: 0; height: 1px; width: 30%; }
.kontakt-line--h2 { bottom: 22%; right: 0; height: 1px; width: 22%; }
.kontakt-line--v1 { top: 0; left: 22%; width: 1px; height: 35%; opacity: 0; }
.kontakt-line--v2 { bottom: 0; right: 18%; width: 1px; height: 28%; opacity: 0; }

/* Gold glow orb */
.kontakt-orb {
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,169,110,0.14) 0%, transparent 70%);
  top: 50%; right: 5%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
  will-change: transform;
}

/* Corner brackets */
.kontakt-corner {
  position: absolute; width: 40px; height: 40px;
  border-color: var(--gold); border-style: solid; opacity: 0.35;
  pointer-events: none; z-index: 2;
}
.kontakt-corner--tl { top: 40px; left: 60px; border-width: 1px 0 0 1px; }
.kontakt-corner--br { bottom: 40px; right: 60px; border-width: 0 1px 1px 0; }

/* Rotated side text decoration */
.kontakt-side-deco {
  position: absolute; right: 32px; top: 50%;
  transform: translateY(-50%) rotate(90deg);
  display: flex; align-items: center; gap: 16px;
  z-index: 2; pointer-events: none;
}
.ksd-line { width: 40px; height: 1px; background: var(--gold); opacity: 0.4; }
.ksd-text {
  font-size: 8px; letter-spacing: 0.4em; text-transform: uppercase;
  color: rgba(242,237,228,0.3); white-space: nowrap;
}

/* Stat pills */
.kontakt-stat-pills {
  display: flex; gap: 20px; margin-top: 44px; flex-wrap: wrap;
}
.ksp-pill {
  background: rgba(201,169,110,0.08);
  border: 1px solid rgba(201,169,110,0.2);
  padding: 14px 22px;
  display: flex; flex-direction: column; align-items: center;
  min-width: 80px;
  position: relative; overflow: hidden;
  transition: background 0.4s, border-color 0.4s;
}
.ksp-pill::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(201,169,110,0.1), transparent);
  opacity: 0; transition: opacity 0.4s;
}
.ksp-pill:hover { background: rgba(201,169,110,0.14); border-color: var(--gold); }
.ksp-pill:hover::before { opacity: 1; }
.ksp-num {
  font-family: var(--font-cormo); font-size: 28px; font-weight: 300;
  color: var(--gold); line-height: 1;
}
.ksp-label {
  font-size: 8px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(242,237,228,0.4); margin-top: 4px;
}

/* ==================== FOOTER ==================== */
.footer { background: var(--dark); padding: 60px 0 40px; border-top: 1px solid var(--border); }
.footer-inner {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 40px;
}
.footer-logo {
  font-family: var(--font-cormo); font-size: 28px; font-weight: 300; line-height: 1.2;
}
.footer-logo em { color: var(--gold); font-style: normal; }
.footer-logo span { display: block; font-family: var(--font-sans); font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(242,237,228,0.25); margin-top: 6px; }
.footer-links { display: flex; gap: 32px; }
.footer-links a {
  font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase;
  text-decoration: none; color: rgba(242,237,228,0.35); transition: color 0.3s;
}
.footer-links a:hover { color: var(--gold); }
.footer-legal { text-align: right; }
.footer-legal p { font-size: 10px; color: rgba(242,237,228,0.2); margin-bottom: 4px; letter-spacing: 0.1em; }
.footer-bar { height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); margin-top: 40px; opacity: 0.2; }

/* ==================== MOBILE STICKY CTA BAR ==================== */
.mobile-cta-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
  background: rgba(8,8,8,0.96);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(201,169,110,0.2);
  padding: 14px 20px;
  flex-direction: row; align-items: center; justify-content: space-between;
  gap: 12px;
}
.mobile-cta-text { display: flex; flex-direction: column; gap: 2px; }
.mobile-cta-title {
  font-family: var(--font-serif); font-size: 15px; font-weight: 300;
  color: var(--fg); line-height: 1;
}
.mobile-cta-title em { color: var(--gold); font-style: normal; }
.mobile-cta-sub {
  font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(242,237,228,0.4);
}
.mobile-cta-btn {
  flex-shrink: 0;
  font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--bg); background: var(--gold); text-decoration: none;
  padding: 11px 18px; white-space: nowrap;
  transition: background 0.3s;
}
.mobile-cta-btn:hover, .mobile-cta-btn:active { background: var(--gold-light); }

/* zahlen 3-wide override */
.zahlen-grid--3 { grid-template-columns: repeat(3,1fr); }
.zahlen-grid--3 .zahlen-num { font-size: clamp(80px, 12vw, 160px); }

/* ==================== RESPONSIVE — TABLET ==================== */
@media (max-width: 1024px) {
  .nav-center-links { display: none; }
  .vision-grid, .lage-grid, .kontakt-grid { grid-template-columns: 1fr; gap: 60px; }
  .vision-fullbleed-grid { grid-template-columns: 1fr; }
  .vision-img-col .vision-img-wrap { min-height: 55vh; }
  .vision-text-col { padding: 60px 40px; }
  .transformation-steps { grid-template-columns: 1fr 1fr; }
  .features-grid { grid-template-columns: 1fr 1fr; }
  .editorial-diptych { grid-template-columns: 1fr; }
  .diptych-left { height: 60vh; }
  .locations-grid { grid-template-columns: repeat(2,1fr); }
  .statement-strip { grid-template-columns: 1fr; }
  .statement-photo { min-height: 50vh; }
  .menu-inner { flex-direction: column; gap: 48px; }
  .menu-side-info { flex-direction: row; gap: 40px; align-items: flex-start; }
  .container { padding: 0 40px; }
  .lage-list { grid-template-columns: repeat(2, 1fr); }
}

/* ==================== RESPONSIVE — MOBILE ==================== */
@media (max-width: 768px) {

  /* --- GLOBAL MOBILE RESETS --- */
  body { cursor: auto; }
  .cursor, .cursor-follower { display: none !important; }
  .section { padding: 80px 0; }
  .container { padding: 0 24px; }
  .section-title { font-size: clamp(36px, 9vw, 56px); margin-bottom: 28px; }
  .section-tag { margin-bottom: 32px; }
  /* Prevent word-clip animations from cutting text on mobile */
  .word-wrap { overflow: visible; }

  /* --- NAV --- */
  .nav { padding: 16px 20px; }
  .nav.scrolled { padding: 12px 20px; }
  .nav-cta-btn { display: none; }
  .logo-text { font-size: 19px; }

  /* --- HERO / FLIP --- */
  .drone-logo-reveal { padding: 0 28px; }
  .dlr-wordmark { flex-direction: column; gap: 8px; }
  .dlr-divider { display: none; }
  .flip-text { padding: 0 28px; }
  .flip-word--2 { padding-left: 20px; }
  .flip-label { left: 24px; bottom: 100px; }
  .flip-scroll-hint { bottom: 100px; }
  .flr-char { font-size: clamp(44px, 13vw, 80px); }

  /* --- STATEMENT STRIP --- */
  .statement-strip { grid-template-columns: 1fr; min-height: auto; }
  .statement-inner { padding: 60px 24px; }
  .statement-title { font-size: clamp(28px, 7.5vw, 44px); word-wrap: break-word; overflow-wrap: break-word; }
  .statement-body { font-size: 14px; max-width: 100%; }
  .statement-photo { min-height: 50vh; }

  /* --- VISION --- */
  .vision-fullbleed-grid { grid-template-columns: 1fr; }
  .vision-img-col .vision-img-wrap { min-height: 50vh; }
  .vision-text-col { padding: 48px 24px; }
  .vision-text { font-size: 15px; }
  .vision-specs { margin-top: 32px; }
  .vision-spec { flex-direction: column; gap: 4px; align-items: flex-start; }
  .vspec-val { font-size: 18px; }
  .vision-quote { padding: 20px 20px 20px 24px; margin-top: 48px; }
  .vision-quote blockquote { font-size: 16px; }

  /* --- EDITORIAL STRIP --- */
  .editorial-strip { padding: 60px 0 80px; }
  .editorial-label { padding: 0 24px; margin-bottom: 40px; }
  .editorial-label-em { font-size: 36px; }
  .editorial-photos { flex-direction: column; height: auto; gap: 4px; }
  .editorial-photo { height: 300px; flex: none; }
  .editorial-photo img { object-position: top; }
  .editorial-middle-text {
    padding: 32px 24px;
    min-width: auto;
    order: -1;
    text-align: left;
    align-items: flex-start;
  }
  .editorial-mid-title { font-size: clamp(32px, 7vw, 42px); }
  .editorial-mid-sub { max-width: 100%; text-align: left; }

  /* --- TRANSFORMATION --- */
  .transformation-content { padding: 80px 24px; }
  .transformation-steps { grid-template-columns: 1fr; gap: 32px; }
  .step h3 { font-size: 18px; }
  .step p { font-size: 13px; }

  /* --- EDITORIAL FULLSCREEN --- */
  .editorial-fullscreen { height: 70vh; }
  .editorial-fs-content { bottom: 40px; left: 24px; right: 24px; }
  .efs-title { font-size: clamp(40px, 10vw, 64px); }
  .efs-sub { font-size: 11px; letter-spacing: 0.15em; }
  .editorial-fs-number { font-size: 60px; right: 24px; bottom: 40px; }

  /* --- SPACES/RÄUME --- */
  .raeume .container { padding: 0 24px; }
  .gallery-strip { flex-direction: column; height: auto; gap: 4px; }
  .gallery-item { height: 280px; flex: none; }
  .features-grid { grid-template-columns: 1fr; gap: 36px; }
  .feature h3 { font-size: 20px; }
  .feature p { font-size: 13px; }

  /* --- VIDEO INTERLUDE --- */
  .video-interlude { height: 60vh; }
  .pull-quote { font-size: clamp(28px, 7vw, 44px); padding: 0 24px; }

  /* --- DIPTYCH --- */
  .editorial-diptych { grid-template-columns: 1fr; }
  .diptych-left { height: 50vh; }
  .diptych-right { padding: 48px 24px; }
  .diptych-title { font-size: clamp(32px, 8vw, 48px); }
  .diptych-sub { font-size: 14px; margin-bottom: 32px; }
  .diptych-stats { gap: 24px; flex-wrap: wrap; }
  .ds-num { font-size: 36px; }

  /* --- MARQUEE --- */
  .marquee-track { font-size: 10px; gap: 28px; }

  /* --- LAGE / MAP --- */
  .lage { padding: 80px 0 60px; }
  .lage-header { padding: 0 24px; margin-bottom: 40px; }
  .lage .lage-header .section-tag { margin-bottom: 28px; }
  .lage-intro { font-size: 14px; max-width: 100%; }
  .berlin-map-wrap {
    padding: 0;
    overflow: hidden;
    margin: 0 -24px;
  }
  .berlin-map-svg {
    transform: scale(2.8);
    transform-origin: 48% 48%;
  }
  /* Make dots extra large & glowing on mobile */
  .loc-core { r: 18 !important; fill: #c9a96e !important; }
  .loc-inner { r: 7 !important; }
  .loc-pulse-ring { r: 42 !important; }
  /* Strong mobile pulse glow */
  .map-loc .loc-pulse-ring {
    stroke-width: 2 !important;
    stroke: rgba(201,169,110,0.7) !important;
  }
  .map-loc .loc-core {
    animation: mobileDotGlow 1.5s ease-in-out infinite alternate !important;
  }
  @keyframes mobileDotGlow {
    0%   { filter: drop-shadow(0 0 6px rgba(201,169,110,0.5)) drop-shadow(0 0 12px rgba(201,169,110,0.3)); }
    100% { filter: drop-shadow(0 0 14px rgba(201,169,110,1)) drop-shadow(0 0 28px rgba(201,169,110,0.6)); }
  }
  .loc-map-label { font-size: 12px !important; font-weight: 600 !important; opacity: 1 !important; }
  .loc-map-num { font-size: 11px !important; opacity: 0.7 !important; }
  .map-loc { cursor: pointer; }
  .lage-list {
    grid-template-columns: 1fr;
    padding: 0 24px;
    margin-top: 24px;
    gap: 0;
  }
  .lage-list-item {
    border-right: none;
    padding: 20px 0;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 12px;
    align-items: center;
  }
  .lage-list-item:nth-child(4n) { border-right: none; }
  .lli-district { font-size: 18px; }
  .lli-street { font-size: 11px; }
  .lli-badge { font-size: 8px; padding: 4px 10px; }
  .lage-bottom { flex-direction: column; align-items: center; gap: 24px; }
  .lage-bottom-stat { border-right: none; border-bottom: 1px solid var(--border-gold); padding: 24px 0; width: 100%; text-align: center; }
  .lage-hint { font-size: 8px; }

  /* --- BRAND SECTION --- */
  .brand-section { height: auto; min-height: 60vh; }
  .brand-content { padding: 60px 24px; max-width: 100%; }
  .brand-title { font-size: clamp(32px, 8vw, 48px); }
  .brand-text { font-size: 14px; max-width: 100%; }
  .brand-cta { font-size: 9px; padding: 12px 20px; }

  /* --- ZAHLEN --- */
  .zahlen-grid--3 { grid-template-columns: 1fr; }
  .zahlen-grid--3 .zahlen-num { font-size: clamp(60px, 15vw, 100px); }
  .zahlen-grid { grid-template-columns: 1fr; }
  .zahlen-item { padding: 32px 24px; }
  .zahlen-label { font-size: 10px; }

  /* --- KONTAKT --- */
  .kontakt-grid { grid-template-columns: 1fr; gap: 48px; }
  .kontakt-sub { font-size: 14px; max-width: 100%; }
  .kontakt-bg-text { font-size: clamp(60px, 12vw, 100px); }
  .kontakt-corner { display: none; }
  .kontakt-side-deco { display: none; }
  .kontakt-line { display: none; }
  .kontakt-stat-pills { display: none; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-field input,
  .form-field textarea,
  .form-field select { font-size: 16px; }

  /* --- FOOTER --- */
  .footer-inner { flex-direction: column; gap: 32px; }
  .footer-links { flex-wrap: wrap; gap: 16px; }
  .footer-legal { text-align: left; }
  .footer-logo { font-size: 24px; }
  .footer { padding-bottom: 90px; } /* space for mobile CTA bar */

  /* --- MOBILE CTA BAR --- */
  .mobile-cta-bar { display: flex; }

  /* --- FULLSCREEN MENU --- */
  .menu-inner { padding: 0 24px; }
  .menu-nav { padding: 0 16px; }
  .menu-link { font-size: clamp(32px, 7vw, 48px); }
  .menu-side-info { flex-direction: row; gap: 20px; flex-wrap: wrap; }
  .menu-stat-num { font-size: 28px; }
  .menu-footer { left: 24px; right: 24px; bottom: 24px; flex-direction: column; gap: 8px; }
  .menu-logo-main { font-size: clamp(22px, 5vw, 32px); }

  /* Modal is already full-screen by default — no mobile overrides needed */

  /* === MOBILE PERFORMANCE === */
  /* Kill grain animation — constant repaints destroy mobile FPS */
  .grain-overlay { animation: none !important; opacity: 0.25 !important; }
  /* Kill particles canvas on mobile — saves GPU cycles */
  .particles-canvas { display: none !important; }
  /* Kill custom cursor — not needed on touch devices */
  .cursor, .cursor-follower { display: none !important; }
  /* GPU-promote scroll-heavy sections to avoid jank */
  .parallax-img, .parallax-inner,
  .section, .editorial-photo,
  .gallery-item, .gallery-strip,
  .editorial-fullscreen, .editorial-diptych,
  .vcf-slide img,
  .brand-bg, .kontakt-bg {
    will-change: auto;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  /* Reduce parallax overshoot to minimize paint area */
  .parallax-img .parallax-inner { transform: scale(1.06) translateZ(0) !important; }
  .editorial-fs-bg .parallax-inner { transform: scale(1.04) translateZ(0) !important; height: 108% !important; }
  .diptych-photo .parallax-inner { transform: scale(1.04) translateZ(0) !important; height: 108% !important; }
  .brand-bg .parallax-inner { transform: scale(1.04) translateZ(0) !important; height: 110% !important; }

  /* ═══════════════════════════════════════════════
     MOBILE SCROLL ANIMATION — INITIAL STATES
     Everything starts hidden, GSAP reveals on scroll
     ═══════════════════════════════════════════════ */

  /* Sections & large blocks — start faded */
  .statement-inner,
  .statement-photo,
  .editorial-fs-content,
  .editorial-fs-number,
  .diptych-left,
  .diptych-text-wrap,
  .brand-content,
  .berlin-map-svg {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Images — start hidden + slightly scaled */
  .statement-photo img,
  .editorial-photo img,
  .editorial-fs-bg img,
  .gallery-item img,
  .diptych-photo img,
  .brand-bg img,
  .kontakt-bg-inner {
    opacity: 0;
    will-change: opacity, transform;
  }
  .vision-crossfade-wrap {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Editorial photos container */
  .editorial-photo {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Gallery items */
  .gallery-item {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Text elements — start hidden */
  .vision-text,
  .statement-body,
  .editorial-mid-sub,
  .efs-sub,
  .diptych-sub,
  .lage-intro,
  .brand-text,
  .kontakt-sub,
  .pull-quote-sub,
  .pull-quote {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Tags — start hidden */
  .section-tag,
  .tag--light,
  .statement-tag,
  .diptych-tag,
  .efs-tag,
  .brand-eyebrow,
  .editorial-label {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Features */
  .feature {
    opacity: 0;
    will-change: opacity, transform;
  }
  .feature-icon {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Steps */
  .step {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Dividers — start collapsed */
  .statement-line,
  .editorial-mid-line,
  .efs-divider,
  .diptych-gold-line {
    transform: scaleX(0);
    transform-origin: left;
    will-change: transform;
  }

  /* Zahlen */
  .zahlen-item {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Footer */
  .footer-logo,
  .footer-links a,
  .footer-legal {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Kontakt form elements */
  .kontakt .form-field,
  .kontakt .form-row,
  .kontakt .submit-btn,
  .kontakt-info-item {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Stats */
  .diptych-stat,
  .lage-bottom-stat {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Editorial middle text */
  .editorial-mid-title,
  .editorial-mid-sub {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Lage header elements */
  .lage-header .section-tag,
  .lage-header .section-title,
  .lage-hint {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Transformation video */
  .transformation-video-wrap {
    opacity: 0.6;
    will-change: opacity, transform;
  }

  /* Marquee */
  .marquee-wrap {
    opacity: 0;
    will-change: opacity;
  }

  /* Vision specs & quote */
  .vision-spec {
    opacity: 0;
    will-change: opacity, transform;
  }
  .vision-quote {
    opacity: 0;
    will-change: opacity, transform;
  }
}


/* ==================== SCROLL VIDEO — PENTHOUSE TIMELAPSE ==================== */
.scroll-video-zone { height: 500vh; position: relative; }
.sv-sticky {
  position: sticky; top: 0;
  width: 100%; height: 100vh;
  overflow: hidden; background: #000;
  display: flex; align-items: center; justify-content: center;
}
.sv-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.sv-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.1) 40%,
    rgba(0,0,0,0.1) 60%,
    rgba(0,0,0,0.65) 100%
  );
}
.sv-scanlines {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 3px,
    rgba(0,0,0,0.06) 3px, rgba(0,0,0,0.06) 4px
  );
  opacity: 0.4;
}
/* HUD top bar */
.sv-hud-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 28px 48px;
  border-bottom: 1px solid rgba(201,169,110,0.12);
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent);
}
.sv-hud-left { display: flex; flex-direction: column; gap: 4px; }
.sv-hud-tag {
  font-size: 9px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold);
}
.sv-hud-sub {
  font-size: 8px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(242,237,228,0.3);
}
.sv-hud-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sv-hud-label {
  font-size: 7px; letter-spacing: 0.5em; text-transform: uppercase; color: rgba(242,237,228,0.3);
}
.sv-hud-pct {
  font-family: var(--font-cormo); font-size: 36px; font-weight: 300; color: var(--gold); line-height: 1;
}
/* Center content */
.sv-content {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  padding: 0 80px; pointer-events: none;
}
.sv-phase {
  font-size: 9px; letter-spacing: 0.6em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 20px;
  transition: opacity 0.4s;
}
.sv-title {
  font-family: var(--font-cormo); font-size: clamp(64px, 9vw, 130px);
  font-weight: 300; line-height: 1.0; color: var(--fg);
}
.sv-title em { color: var(--gold); font-style: italic; }
/* Progress bar */
.sv-progress-wrap {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 10;
  padding: 0 48px 36px;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}
.sv-progress-track {
  width: 100%; height: 1px; background: rgba(242,237,228,0.1); margin-bottom: 16px; position: relative;
}
.sv-progress-fill {
  height: 1px; background: linear-gradient(to right, var(--gold), var(--gold-light));
  width: 0%; transition: width 0.05s linear;
  box-shadow: 0 0 12px rgba(201,169,110,0.5);
}
.sv-progress-fill::after {
  content: ''; position: absolute; right: 0; top: 50%; transform: translate(50%,-50%);
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 14px rgba(201,169,110,0.8);
}
.sv-chapters {
  display: flex; justify-content: space-between;
}
.sv-chapter {
  font-size: 7px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(242,237,228,0.25); transition: color 0.3s;
}
.sv-chapter.active { color: var(--gold); }
/* Corner decorators */
.sv-corner {
  position: absolute; width: 24px; height: 24px; z-index: 15; pointer-events: none;
}
.sv-corner--tl { top: 20px; left: 20px; border-top: 1px solid rgba(201,169,110,0.4); border-left: 1px solid rgba(201,169,110,0.4); }
.sv-corner--tr { top: 20px; right: 20px; border-top: 1px solid rgba(201,169,110,0.4); border-right: 1px solid rgba(201,169,110,0.4); }
.sv-corner--bl { bottom: 20px; left: 20px; border-bottom: 1px solid rgba(201,169,110,0.4); border-left: 1px solid rgba(201,169,110,0.4); }
.sv-corner--br { bottom: 20px; right: 20px; border-bottom: 1px solid rgba(201,169,110,0.4); border-right: 1px solid rgba(201,169,110,0.4); }

/* ==================== CURSOR SPARKLE TRAIL ==================== */
.sparkle {
  position: fixed; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold-light), transparent);
  pointer-events: none; z-index: 9998;
  mix-blend-mode: screen;
}

/* ==================== CLIP-PATH SECTION REVEALS ==================== */
.clip-reveal {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.clip-reveal.in-view { clip-path: inset(0 0 0% 0); }

/* ==================== HORIZONTAL DRIFT TITLES ==================== */
.drift-left { transform: translateX(-60px); opacity: 0; transition: all 1.4s cubic-bezier(0.19,1,0.22,1); }
.drift-right { transform: translateX(60px); opacity: 0; transition: all 1.4s cubic-bezier(0.19,1,0.22,1); }
.drift-left.in-view, .drift-right.in-view { transform: translateX(0); opacity: 1; }

/* ==================== SECTION BACKGROUND COLOR FLOW ==================== */
body { background: var(--bg); }

/* ==================== MAGNETIC HOVER ITEMS ==================== */
.magnetic { transition: transform 0.4s cubic-bezier(0.19,1,0.22,1); }

/* ==================== ENHANCED PARALLAX DEPTH ==================== */
.parallax-deep .parallax-inner { transform: scale(1.35); }
.vision-img-wrap .parallax-inner { transform: scale(1.35); }

/* ==================== IMAGE HOVER DISTORT ==================== */
.gallery-item img, .editorial-photo img {
  transition: transform 0.8s cubic-bezier(0.19,1,0.22,1), filter 0.6s, clip-path 0.6s;
}
.gallery-item:hover img {
  clip-path: inset(2% 2% 2% 2% round 2px);
}

/* ==================== BERLIN MAP ==================== */
.lage { padding: 120px 0 80px; position: relative; overflow: hidden; }
.lage-header { margin-bottom: 60px; }
.lage-hint {
  display: flex; align-items: center; gap: 8px; margin-top: 20px;
  font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase;
  color: rgba(201,169,110,0.5);
}

.berlin-map-wrap {
  width: 100%; max-width: 1400px; margin: 0 auto;
  padding: 0 40px; position: relative;
}
.berlin-map-svg {
  width: 100%; height: auto;
  background: #050505;
  border: 1px solid rgba(201,169,110,0.08);
}
/* Berlin border polygon */
.berlin-border {
  fill: rgba(201,169,110,0.03);
  stroke: rgba(201,169,110,0.15);
  stroke-width: 0.8;
}
/* S-Bahn ring */
.sbahn-ring {
  fill: none;
  stroke: rgba(201,169,110,0.08);
  stroke-width: 0.8;
  stroke-dasharray: 6,4;
}
/* Spree river */
.spree-river {
  fill: none;
  stroke: rgba(80,120,160,0.25);
  stroke-width: 3;
  stroke-linecap: round;
}
/* District text labels */
.map-district-label {
  font-family: 'Inter', sans-serif; font-size: 8px;
  fill: rgba(242,237,228,0.1); letter-spacing: 0.1em; text-transform: uppercase;
  pointer-events: none;
}
.map-mitte-label {
  font-family: 'Inter', sans-serif; font-size: 7px;
  fill: rgba(201,169,110,0.35); letter-spacing: 0.2em; text-transform: uppercase;
  pointer-events: none;
}
.mitte-cross { stroke: rgba(201,169,110,0.2); stroke-width: 0.8; }

/* Location dots */
.map-loc { opacity: 0; } /* starts hidden — JS animates in */
.map-loc .loc-pulse-ring {
  fill: none; stroke: rgba(201,169,110,0.4); stroke-width: 0.8;
  transform-origin: 0 0;
  animation: svgPulse 2.5s ease-out infinite;
}
.map-loc .loc-pulse-ring.r2 { animation-delay: 1.25s; }
.map-loc .loc-pulse-ring.ring-sold { stroke: rgba(120,100,80,0.3); }
.map-loc .loc-core { filter: url(#dotGlow); transition: r 0.3s; }
.map-loc .loc-inner { pointer-events: none; }
.map-loc:hover .loc-core { r: 10; }
.map-loc .loc-map-label {
  font-family: 'Inter', sans-serif; font-size: 9px;
  fill: rgba(242,237,228,0.6); letter-spacing: 0.08em;
  opacity: 0; transition: opacity 0.3s;
  pointer-events: none;
}
.map-loc .loc-map-num {
  font-family: 'Cormorant Garamond', serif; font-size: 11px;
  fill: rgba(201,169,110,0.5);
  opacity: 0; transition: opacity 0.3s;
  pointer-events: none;
}
.map-loc:hover .loc-map-label,
.map-loc:hover .loc-map-num { opacity: 1; }
.map-loc.active .loc-map-label,
.map-loc.active .loc-map-num { opacity: 1; }

@keyframes svgPulse {
  0%   { r: 10; opacity: 0.6; }
  70%  { r: 28; opacity: 0; }
  100% { r: 28; opacity: 0; }
}

/* Location list below map */
.lage-list {
  max-width: 1400px; margin: 40px auto 0; padding: 0 40px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0;
  border-top: 1px solid rgba(201,169,110,0.1);
}
.lage-list-item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 24px 20px; cursor: pointer;
  border-right: 1px solid rgba(201,169,110,0.08);
  border-bottom: 1px solid rgba(201,169,110,0.08);
  transition: background 0.3s;
  opacity: 0; transform: translateY(20px); /* animated in by JS */
}
.lage-list-item:hover { background: rgba(201,169,110,0.04); }
.lage-list-item:nth-child(4n) { border-right: none; }
.lli-num { font-size: 8px; color: var(--gold); letter-spacing: 0.3em; }
.lli-district { font-family: var(--font-cormo); font-size: 18px; color: var(--fg); font-weight: 300; }
.lli-street { font-size: 10px; color: rgba(242,237,228,0.4); letter-spacing: 0.05em; }
.lli-badge {
  font-size: 7px; letter-spacing: 0.3em; text-transform: uppercase;
  display: inline-block; padding: 3px 8px; margin-top: 4px; width: fit-content;
}
.lli-badge.avail { background: rgba(201,169,110,0.12); color: var(--gold); }
.lli-badge.soon  { background: rgba(120,100,70,0.12);  color: #8b7355; }
.lli-badge.sold  { background: rgba(80,60,40,0.12);    color: rgba(201,169,110,0.4); }

/* ==================== LISTING MODAL (Airbnb-style) ==================== */
.loc-modal {
  position: fixed; inset: 0; z-index: 9000;
  pointer-events: none;
}
.loc-modal.open { pointer-events: all; }
.loc-modal-bg {
  position: absolute; inset: 0;
  background: rgba(3,3,3,0.95);
  opacity: 0; transition: opacity 0.5s;
  backdrop-filter: blur(16px);
}
.loc-modal.open .loc-modal-bg { opacity: 1; }

/* Panel — fullscreen on mobile, centered card on desktop */
.loc-modal-panel {
  position: fixed; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  background: var(--bg);
  transform: translateY(100%); opacity: 0;
  transition: transform 0.55s cubic-bezier(0.19,1,0.22,1), opacity 0.35s;
}
.loc-modal.open .loc-modal-panel {
  transform: translateY(0); opacity: 1;
}

/* --- Top Bar --- */
.lm-topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: rgba(8,8,8,0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(201,169,110,0.08);
  min-height: 52px;
}
.lm-back {
  width: 36px; height: 36px;
  border: 1px solid rgba(201,169,110,0.2); border-radius: 50%;
  background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s;
  flex-shrink: 0;
}
.lm-back:hover { border-color: var(--gold); background: rgba(201,169,110,0.06); }
.lm-back svg { width: 18px; height: 18px; color: var(--fg); }
.lm-topbar-title {
  flex: 1;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(242,237,228,0.5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lm-photo-counter {
  font-size: 10px; letter-spacing: 0.15em;
  color: rgba(242,237,228,0.4);
  padding: 4px 10px;
  border: 1px solid rgba(201,169,110,0.1);
  border-radius: 12px;
}

/* --- Scroll Container --- */
.lm-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* --- Gallery --- */
.lm-gallery { position: relative; }
.lm-hero-wrap {
  position: relative;
  width: 100%; height: 55vh; min-height: 280px; max-height: 480px;
  overflow: hidden;
}
.lm-hero-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  transition: transform 0.8s cubic-bezier(0.19,1,0.22,1);
}
.lm-hero-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--bg) 0%, transparent 40%);
}
.lm-hero-num {
  position: absolute; bottom: 16px; left: 20px;
  font-family: var(--font-cormo); font-size: 72px; font-weight: 300;
  color: rgba(201,169,110,0.12); line-height: 1;
}
.lm-thumbs {
  display: flex; gap: 3px; padding: 3px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: rgba(8,8,8,0.95);
}
.lm-thumb {
  flex: 0 0 80px; height: 56px;
  overflow: hidden; cursor: pointer;
  border: 1.5px solid transparent;
  transition: border-color 0.3s, opacity 0.3s;
  opacity: 0.6;
}
.lm-thumb.active { border-color: var(--gold); opacity: 1; }
.lm-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* --- Content Area --- */
.lm-content { padding: 28px 20px 0; }

/* Header */
.lm-header { margin-bottom: 0; }
.lm-tag {
  font-size: 8px; letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.lm-title {
  font-family: var(--font-cormo); font-size: 36px; font-weight: 300;
  color: var(--fg); line-height: 1.1; margin-bottom: 6px;
}
.lm-street {
  font-size: 12px; color: rgba(242,237,228,0.45);
  letter-spacing: 0.03em; margin-bottom: 12px;
}
.lm-badge {
  display: inline-block;
  font-size: 7px; letter-spacing: 0.4em; text-transform: uppercase;
  padding: 5px 12px;
  background: rgba(201,169,110,0.12); color: var(--gold);
}

/* Dividers */
.lm-divider {
  height: 1px; background: rgba(201,169,110,0.08); margin: 24px 0;
}

/* Specs Grid */
.lm-specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.lm-spec { display: flex; flex-direction: column; gap: 3px; }
.lm-spec-val {
  font-family: var(--font-cormo); font-size: 24px; color: var(--fg); font-weight: 300;
}
.lm-spec-label {
  font-size: 7px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(242,237,228,0.3);
}

/* Section Labels */
.lm-section { margin-bottom: 0; }
.lm-section-label {
  font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 18px;
  display: flex; align-items: center; gap: 12px;
}
.lm-section-label::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, rgba(201,169,110,0.15), transparent);
}

/* USP Highlights */
.lm-usps { display: flex; flex-direction: column; gap: 14px; }
.lm-usp {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px;
  background: rgba(201,169,110,0.03);
  border: 1px solid rgba(201,169,110,0.06);
  border-radius: 4px;
  transition: border-color 0.3s, background 0.3s;
}
.lm-usp:hover {
  border-color: rgba(201,169,110,0.15);
  background: rgba(201,169,110,0.05);
}
.lm-usp-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; border-radius: 50%;
  background: rgba(201,169,110,0.08);
}
.lm-usp-text { flex: 1; }
.lm-usp-title {
  font-size: 12px; font-weight: 500; color: var(--fg);
  letter-spacing: 0.02em; margin-bottom: 2px;
}
.lm-usp-sub {
  font-size: 11px; color: rgba(242,237,228,0.4); line-height: 1.5;
}

/* Description */
.lm-desc {
  font-size: 14px; line-height: 1.85; color: rgba(242,237,228,0.55);
  font-weight: 300;
}

/* Investment Bars */
.lm-invest-bars { display: flex; flex-direction: column; gap: 18px; margin-bottom: 18px; }
.lm-invest-row { display: flex; flex-direction: column; gap: 6px; }
.lm-invest-row-head {
  display: flex; justify-content: space-between; align-items: baseline;
}
.lm-invest-row-label {
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(242,237,228,0.5);
}
.lm-invest-row-val {
  font-family: var(--font-cormo); font-size: 18px; color: var(--gold); font-weight: 400;
}
.lm-invest-bar {
  height: 4px; background: rgba(201,169,110,0.08); border-radius: 2px;
  overflow: hidden;
}
.lm-invest-bar-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  width: 0; transition: width 1.2s cubic-bezier(0.19,1,0.22,1);
}
.lm-invest-text {
  font-size: 12px; line-height: 1.7; color: rgba(242,237,228,0.4); font-style: italic;
}

/* POI Distance List */
.lm-pois { display: flex; flex-direction: column; gap: 0; }
.lm-poi {
  display: grid; grid-template-columns: 32px 1fr auto;
  align-items: center; gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(201,169,110,0.04);
  transition: background 0.3s;
}
.lm-poi:last-child { border-bottom: none; }
.lm-poi-icon {
  font-size: 16px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(201,169,110,0.06);
  border-radius: 6px;
}
.lm-poi-name {
  font-size: 12px; color: rgba(242,237,228,0.65);
  letter-spacing: 0.02em;
}
.lm-poi-dist {
  font-family: var(--font-cormo); font-size: 16px; color: var(--gold);
  font-weight: 400; white-space: nowrap;
}

/* Google Map */
.lm-gmap-wrap {
  position: relative; width: 100%;
  padding-bottom: 70%; /* 10:7 aspect */
  border-radius: 4px; overflow: hidden;
  border: 1px solid rgba(201,169,110,0.08);
}
.lm-gmap {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  filter: invert(0.92) hue-rotate(180deg) saturate(0.3) brightness(0.7) contrast(1.1);
}

/* Sticky CTA */
.lm-sticky-cta {
  position: sticky; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: rgba(8,8,8,0.95);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(201,169,110,0.1);
  z-index: 40;
}
.lm-price-label {
  font-family: var(--font-cormo); font-size: 18px; color: var(--fg);
  font-weight: 300;
}
.lm-cta-btn {
  display: inline-flex; align-items: center; text-decoration: none;
  font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--bg); background: var(--gold);
  padding: 13px 24px; border-radius: 2px;
  transition: background 0.3s, transform 0.3s;
}
.lm-cta-btn:hover { background: var(--gold-light); transform: translateY(-1px); }

/* Desktop overrides for modal */
@media (min-width: 769px) {
  .loc-modal-panel {
    position: relative;
    inset: auto;
    width: 90vw; max-width: 560px;
    height: 92vh; max-height: 800px;
    margin: auto;
    border-radius: 8px;
    border: 1px solid rgba(201,169,110,0.1);
    overflow: hidden;
  }
  .loc-modal {
    display: flex; align-items: center; justify-content: center;
  }
  .lm-content { padding: 32px 28px 0; }
  .lm-title { font-size: 42px; }
}

/* =============================================
   CINEMATIC WORD-CLIP REVEAL SYSTEM
   Used by JS splitAndReveal() — wraps each word
   in overflow:hidden so it slides up from below
   ============================================= */
.word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.06em; /* prevent descender clip */
  margin-right: 0.22em;
}
.word-inner {
  display: inline-block;
  will-change: transform, opacity;
}

/* Perspective on titles for rotateX to render */
.section-title, .statement-title {
  transform-style: preserve-3d;
  perspective: 1200px;
}

/* ==================== FLIP-UP HERO ==================== */
.flip-hero {
  position: relative;
  height: 250vh;
  background: var(--bg);
}

/* Sticky wrapper — stays in viewport while scrolling */
.flip-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

/* Text revealed underneath the panel */
.flip-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 80px;
  z-index: 1;
  pointer-events: none;
}

.flip-eyebrow {
  font-size: 9px;
  letter-spacing: 0.7em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s var(--ease) 0.6s, transform 1s var(--ease) 0.6s;
}
.flip-hero-text-ready .flip-eyebrow { opacity: 1; transform: translateY(0); }

.flip-title {
  font-family: var(--font-cormo);
  font-size: clamp(80px, 14vw, 200px);
  font-weight: 300;
  line-height: 0.9;
  color: var(--fg);
  letter-spacing: -0.02em;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
}

.flip-word {
  display: block;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.flip-word--1 { transition-delay: 0.7s; }
.flip-word--2 { transition-delay: 0.9s; padding-left: 60px; }
.flip-word em { color: var(--gold); font-style: italic; }
.flip-hero-text-ready .flip-word { opacity: 1; transform: translateY(0); }

.flip-sub {
  font-size: 14px;
  color: rgba(242,237,228,0.5);
  letter-spacing: 0.1em;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s var(--ease) 1.1s, transform 1s var(--ease) 1.1s;
}
.flip-hero-text-ready .flip-sub { opacity: 1; transform: translateY(0); }

/* The flip panel — full cover, flips upward via rotateX */
.flip-panel {
  position: absolute;
  inset: 0;
  z-index: 10;
  will-change: opacity, transform;
}

/* No 3D perspective needed — flat panel with fade-out exit */
.flip-sticky {
  overflow: hidden;
}

.flip-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
  pointer-events: none;
}
/* Hide native browser play button & controls */
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0 !important;
}

/* Light initial overlay — GSAP scroll will darken to 80% via flip-dark-veil */
.flip-panel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15) 0%,
    transparent 35%,
    transparent 65%,
    rgba(0,0,0,0.45) 100%
  );
  z-index: 2;
}

/* Dark veil — scroll darkens further, keeps motif visible at ~80% */
.flip-dark-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(5,5,8,0.92);
  opacity: 0;
  pointer-events: none;
}

/* ---- LOGO REVEAL ON SCROLL ---- */
.flip-logo-reveal {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  pointer-events: none;
  /* hidden — GSAP scroll reveals it */
  opacity: 0;
}

.flr-line {
  width: 0px; /* grows via JS */
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201,169,110,0.9), transparent);
  transition: none; /* controlled by GSAP */
  will-change: width;
}

.flr-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  will-change: transform, opacity;
}

.flr-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 9px;
  letter-spacing: 0.72em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transform: translateY(12px);
  will-change: opacity, transform;
}
.flr-eyebrow-text { flex-shrink: 0; }
.flr-eyebrow-line {
  height: 1px;
  width: 0;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  will-change: width;
}

.flr-wordmark {
  display: flex;
  gap: 0.22em;
  align-items: baseline;
  overflow: visible;
}

/* Each word clips its chars from below */
.flr-word {
  display: inline-flex;
  overflow: hidden;       /* clips the chars sliding up */
  padding-bottom: 0.05em; /* prevent clipping descenders */
}
.flr-word--italic { font-style: italic; }

.flr-char {
  font-family: var(--font-serif);
  font-size: clamp(60px, 10vw, 148px);
  font-weight: 300;
  line-height: 0.92;
  display: inline-block;
  transform: translateY(110%);  /* GSAP slides up to 0 */
  will-change: transform;
}
/* "Berlin" = WHITE */
#flr-berlin .flr-char  { color: rgba(255,255,255,0.95); text-shadow: 0 2px 40px rgba(0,0,0,0.7); }
/* "Rooftop" = GOLD — italic matches nav em style */
#flr-rooftop .flr-char { color: var(--gold); text-shadow: 0 0 60px rgba(0,0,0,0.8); font-style: normal; }

.flr-sub {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 9px;
  letter-spacing: 0.58em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  opacity: 0;
  transform: translateY(10px);
  will-change: opacity, transform;
}
.flr-sub-line {
  height: 1px;
  width: 0;
  background: rgba(255,255,255,0.2);
  will-change: width;
}

/* flr-char mobile size handled in main responsive section */

/* Label bottom-left on image */
.flip-label {
  position: absolute;
  bottom: 44px;
  left: 56px;
  z-index: 2;
}
.flip-label-tag {
  font-size: 9px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(242,237,228,0.55);
}

/* Scroll hint */
.flip-scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s var(--ease) 1.4s;
}
.flip-hero-ready .flip-scroll-hint { opacity: 1; }

.flip-scroll-hint span {
  writing-mode: vertical-lr;
  font-size: 8px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(242,237,228,0.4);
}
.flip-scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(242,237,228,0.6), transparent);
  animation: flipScrollLine 1.8s ease-in-out infinite;
}
@keyframes flipScrollLine {
  0%, 100% { transform: scaleY(1); opacity: 0.6; }
  50%  { transform: scaleY(0.4); opacity: 0.2; }
}

/* Short spacer — drives 2-3s video scroll */
.flip-scroll-zone {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 150vh;
  pointer-events: none;
}

/* flip hero mobile rules consolidated in main responsive section */