/* ============================================================
   KEYE Hamburg — Relaunch
   Design system, parallax, scroll animations
   ============================================================ */

:root{
  --ink:        #14110f;
  --ink-soft:   #2a2521;
  --cream:      #f6f2ec;
  --cream-2:    #ece4d8;
  --sand:       #e3d8c7;
  --accent:     #b0875a;   /* warm bronze */
  --accent-dk:  #8a673f;
  --muted:      #6f665b;
  --line:       rgba(20,17,15,.14);
  --white:      #ffffff;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
::selection{ background:var(--accent); color:#fff; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(72px,11vw,160px); }

/* ---------- typography ---------- */
h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.05; letter-spacing:-.01em; }
h2{ font-size:clamp(2rem,5.2vw,4.1rem); }
h3{ font-size:clamp(1.35rem,2.4vw,1.9rem); }
em{ font-style:italic; }

.kicker{
  font-size:.78rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent-dk); font-weight:600; margin-bottom:1.1rem;
}
.eyebrow{
  font-size:.8rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:500; color:rgba(255,255,255,.82);
}
.section__head{ max-width:760px; margin-bottom:clamp(40px,6vw,72px); }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ink); --fg:var(--cream);
  display:inline-flex; align-items:center; gap:.6em;
  background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:.92rem; font-weight:500; letter-spacing:.02em;
  padding:.95em 1.8em; border-radius:999px; border:1px solid var(--bg);
  cursor:pointer; position:relative; overflow:hidden; isolation:isolate;
  transition:color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--accent); transform:translateY(101%);
  transition:transform .45s var(--ease);
}
.btn:hover{ color:#fff; border-color:var(--accent); transform:translateY(-2px); }
.btn:hover::after{ transform:translateY(0); }
.btn--ghost{ --bg:transparent; --fg:#fff; border-color:rgba(255,255,255,.45); }
.btn--small{ padding:.6em 1.2em; font-size:.82rem; }

/* ---------- overlays ---------- */
.grain{
  position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:9999; background:transparent; }
.progress__bar{ display:block; height:100%; width:0; background:var(--accent); }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease);
  padding-block:22px;
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:baseline; gap:.45em; color:#fff; transition:color .5s var(--ease); }
.brand__mark{ font-family:var(--serif); font-size:1.5rem; font-weight:500; letter-spacing:.12em; }
.brand__sub{ font-size:.7rem; letter-spacing:.32em; text-transform:uppercase; opacity:.7; }
.nav__links{ display:flex; align-items:center; gap:clamp(18px,2.4vw,38px); }
.nav__links > a{
  color:#fff; font-size:.92rem; font-weight:400; position:relative; transition:color .4s var(--ease);
}
.nav__links > a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:currentColor;
  transition:width .4s var(--ease);
}
.nav__links > a:not(.btn):hover::after{ width:100%; }
.nav__cta{ color:#fff; }

/* scrolled state */
.nav.is-scrolled{ background:rgba(246,242,236,.92); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--line); padding-block:14px; }
.nav.is-scrolled .brand,
.nav.is-scrolled .nav__links > a{ color:var(--ink); }
.nav.is-scrolled .nav__cta{ color:var(--cream); }

.burger{ display:none; width:42px; height:42px; background:none; border:0; cursor:pointer; position:relative; }
.burger span{ position:absolute; left:9px; right:9px; height:2px; background:#fff; transition:transform .4s var(--ease), opacity .3s var(--ease), background .5s var(--ease); }
.burger span:nth-child(1){ top:14px; } .burger span:nth-child(2){ top:20px; } .burger span:nth-child(3){ top:26px; }
.nav.is-scrolled .burger span{ background:var(--ink); }

/* ---------- HERO ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; color:#fff; }
.hero__bg{ position:absolute; inset:-12% 0; z-index:0; will-change:transform; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; }
.hero__veil{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,17,15,.55) 0%, rgba(20,17,15,.15) 35%, rgba(20,17,15,.78) 100%);
}
.hero__content{ position:relative; z-index:2; padding-bottom:clamp(70px,12vh,140px); padding-top:140px; }
.hero__title{
  font-size:clamp(2.9rem,9vw,7.4rem); line-height:.98; margin:1.1rem 0 1.6rem; letter-spacing:-.02em;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{ display:block; transform:translateY(110%); transition:transform 1.05s var(--ease); }
.hero__title .line > span em{ color:var(--sand); }
.hero.is-in .hero__title .line:nth-child(1) > span{ transform:translateY(0); transition-delay:.15s; }
.hero.is-in .hero__title .line:nth-child(2) > span{ transform:translateY(0); transition-delay:.30s; }
.hero__lead{ max-width:560px; font-size:clamp(1.05rem,1.7vw,1.3rem); color:rgba(255,255,255,.88); font-weight:300; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2.2rem; }
.hero__scroll{
  position:absolute; left:var(--pad); bottom:34px; z-index:2; display:flex; align-items:center; gap:14px;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.8);
}
.hero__scroll-line{ width:48px; height:1px; background:rgba(255,255,255,.6); position:relative; overflow:hidden; }
.hero__scroll-line::after{ content:""; position:absolute; inset:0; background:#fff; transform:translateX(-100%); animation:scrollLine 2.4s var(--ease) infinite; }
@keyframes scrollLine{ 0%{transform:translateX(-100%)} 50%{transform:translateX(0)} 100%{transform:translateX(100%)} }
@media(min-width:760px){ .hero__scroll{ right:var(--pad); left:auto; } }

/* ---------- reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__title .line > span{ transform:none; }
}

/* ---------- MARQUEE ---------- */
.marquee{ background:var(--ink); color:var(--cream); overflow:hidden; padding-block:20px; border-block:1px solid rgba(255,255,255,.08); }
.marquee__track{ display:flex; align-items:center; gap:30px; white-space:nowrap; width:max-content; animation:marquee 32s linear infinite; }
.marquee span{ font-family:var(--serif); font-size:clamp(1.2rem,2.4vw,1.9rem); font-style:italic; opacity:.92; }
.marquee .dot{ color:var(--accent); font-style:normal; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- INTRO ---------- */
.intro__grid{ display:grid; grid-template-columns:1fr; gap:clamp(28px,5vw,72px); }
@media(min-width:900px){ .intro__grid{ grid-template-columns:1fr 1fr; align-items:end; } }
.intro__head h2{ font-size:clamp(1.9rem,3.6vw,3rem); }
.intro__head .num{ color:var(--accent-dk); font-style:italic; }
.intro__body p{ color:var(--ink-soft); font-size:1.05rem; margin-bottom:1.2rem; max-width:52ch; }
.intro__stats{ display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,56px); margin-top:2.4rem; padding-top:2rem; border-top:1px solid var(--line); }
.intro__stats li{ display:flex; flex-direction:column; }
.intro__stats .num{ font-family:var(--serif); font-size:clamp(2.2rem,4vw,3rem); line-height:1; }
.intro__stats small{ font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:.5rem; }

/* ---------- SERVICES ---------- */
.services{ background:var(--cream-2); }
.services__grid{ display:grid; grid-template-columns:1fr; gap:clamp(28px,3vw,40px); }
@media(min-width:760px){ .services__grid{ grid-template-columns:repeat(3,1fr); } }
.card__media{ position:relative; overflow:hidden; border-radius:6px; aspect-ratio:4/5; margin-bottom:1.4rem; }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), filter .6s var(--ease); }
.card:hover .card__media img{ transform:scale(1.07); }
.card__index{
  position:absolute; top:14px; left:16px; font-family:var(--serif); font-style:italic;
  color:#fff; font-size:1.1rem; mix-blend-mode:difference;
}
.card h3{ margin-bottom:.6rem; }
.card p{ color:var(--ink-soft); font-size:1rem; max-width:40ch; }

/* ---------- STATEMENT (parallax) ---------- */
.statement{ position:relative; min-height:78vh; display:flex; align-items:center; overflow:hidden; color:#fff; }
.statement__bg{ position:absolute; inset:-14% 0; z-index:0; will-change:transform; }
.statement__bg img{ width:100%; height:100%; object-fit:cover; }
.statement__veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(20,17,15,.82) 0%, rgba(20,17,15,.45) 60%, rgba(20,17,15,.3) 100%); }
.statement__content{ position:relative; z-index:2; max-width:900px; }
.statement__quote{ font-family:var(--serif); font-size:clamp(1.7rem,4.4vw,3.4rem); line-height:1.12; letter-spacing:-.01em; }
.statement__by{ margin-top:1.6rem; font-size:1.05rem; color:rgba(255,255,255,.78); font-weight:300; }

/* ---------- LIVING / WOHNFORMEN ---------- */
.living__grid{ display:grid; grid-template-columns:1fr; gap:clamp(18px,2.2vw,28px); }
@media(min-width:760px){ .living__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:minmax(280px,auto); } }
@media(min-width:1040px){ .living__grid{ grid-template-columns:repeat(3,1fr); } }
.tile{ position:relative; overflow:hidden; border-radius:6px; min-height:320px; display:flex; align-items:flex-end; isolation:isolate; }
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.2s var(--ease); }
.tile::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(20,17,15,0) 30%, rgba(20,17,15,.86) 100%); }
.tile:hover img{ transform:scale(1.06); }
.tile__body{ padding:clamp(22px,3vw,34px); color:#fff; }
.tile__tag{ display:inline-block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; padding:.4em .9em; border:1px solid rgba(255,255,255,.5); border-radius:999px; margin-bottom:1rem; }
.tile__body h3{ margin-bottom:.55rem; }
.tile__body p{ color:rgba(255,255,255,.85); font-size:.97rem; max-width:42ch; font-weight:300; }
@media(min-width:760px){
  .tile--tall{ grid-row:span 2; }
  .tile--wide{ grid-column:span 2; }
}
@media(min-width:1040px){
  .tile--tall{ grid-row:span 2; }
  .tile--wide{ grid-column:span 2; }
}

/* ---------- PROJECTS ---------- */
.projects{ background:var(--ink); color:var(--cream); }
.projects .kicker{ color:var(--accent); }
.projects .section__head h2{ color:var(--cream); }
.project{ display:grid; grid-template-columns:1fr; align-items:center; gap:clamp(24px,4vw,60px); margin-top:clamp(40px,7vw,90px); }
@media(min-width:900px){
  .project{ grid-template-columns:1.15fr .85fr; }
  .project--reverse .project__media{ order:2; }
}
.project__media{ overflow:hidden; border-radius:6px; aspect-ratio:16/11; }
.project__media img{ width:100%; height:120%; object-fit:cover; will-change:transform; }
.project__text{ padding-inline:var(--pad); }
@media(min-width:900px){ .project__text{ padding-inline:0; padding-right:var(--pad); } .project--reverse .project__text{ padding-left:var(--pad); padding-right:0; } }
.project__year{ font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.project__text h3{ margin:.7rem 0 1rem; color:var(--cream); font-size:clamp(1.6rem,3vw,2.4rem); }
.project__text p{ color:rgba(246,242,236,.74); max-width:46ch; font-weight:300; }
.project__facts{ display:flex; gap:clamp(28px,4vw,52px); margin-top:1.8rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.14); }
.project__facts li{ display:flex; flex-direction:column; }
.project__facts li > span{ font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.4rem); line-height:1; color:var(--cream); }
.project__facts small{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:.45rem; }

/* ---------- NUMBERS BAND (parallax) ---------- */
.numbers{ position:relative; overflow:hidden; color:#fff; }
.numbers__bg{ position:absolute; inset:-16% 0; z-index:0; will-change:transform; }
.numbers__bg img{ width:100%; height:100%; object-fit:cover; }
.numbers__veil{ position:absolute; inset:0; z-index:1; background:rgba(20,17,15,.72); }
.numbers__grid{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(32px,5vw,48px); padding-block:clamp(72px,11vw,140px); }
@media(min-width:860px){ .numbers__grid{ grid-template-columns:repeat(4,1fr); } }
.numbers__item{ text-align:center; }
.numbers__item .num{ font-family:var(--serif); font-size:clamp(2.6rem,6vw,4.4rem); line-height:1; display:block; }
.numbers__item small{ display:block; margin-top:.7rem; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.7); }

/* ---------- CONTACT ---------- */
.contact__grid{ display:grid; grid-template-columns:1fr; gap:clamp(36px,5vw,72px); }
@media(min-width:880px){ .contact__grid{ grid-template-columns:1.1fr .9fr; align-items:start; } }
.contact__intro h2{ margin:0 0 1.2rem; }
.contact__intro p{ color:var(--ink-soft); max-width:46ch; margin-bottom:2rem; }
.contact__card{ background:var(--ink); color:var(--cream); border-radius:10px; padding:clamp(28px,4vw,46px); }
.contact__card dl{ display:grid; gap:1.7rem; }
.contact__card dt{ font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:.4rem; }
.contact__card dd{ font-size:1.1rem; font-weight:300; line-height:1.5; }
.contact__card a{ border-bottom:1px solid rgba(255,255,255,.25); transition:border-color .3s var(--ease); }
.contact__card a:hover{ border-color:var(--accent); }

/* ---------- FOOTER ---------- */
.footer{ background:var(--ink); color:var(--cream); padding-top:clamp(54px,7vw,86px); }
.footer__grid{ display:grid; grid-template-columns:1fr; gap:34px; padding-bottom:clamp(36px,5vw,56px); border-bottom:1px solid rgba(255,255,255,.12); }
@media(min-width:760px){ .footer__grid{ grid-template-columns:2fr 1fr 1fr; } }
.footer__brand .brand__mark{ color:var(--cream); }
.footer__brand p{ margin-top:.8rem; color:rgba(246,242,236,.6); max-width:34ch; font-weight:300; }
.footer__nav, .footer__legal{ display:flex; flex-direction:column; gap:.8rem; }
.footer__nav a, .footer__legal a{ color:rgba(246,242,236,.78); transition:color .3s var(--ease); width:fit-content; }
.footer__nav a:hover, .footer__legal a:hover{ color:var(--accent); }
.footer__base{ display:flex; justify-content:space-between; align-items:center; padding-block:24px; font-size:.85rem; color:rgba(246,242,236,.55); flex-wrap:wrap; gap:12px; }
.footer__top:hover{ color:var(--accent); }

/* ---------- mobile nav ---------- */
@media(max-width:880px){
  /* Kein backdrop-filter auf Mobile: es macht den Header zum Containing-Block
     und laesst das fixe Menue-Overlay beim Scrollen zusammenfallen. */
  .nav.is-scrolled{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--cream); }
  .burger{ display:block; z-index:1001; }
  .nav__links{
    position:fixed; inset:0; background:var(--ink); flex-direction:column; justify-content:center;
    gap:1.6rem; transform:translateY(-100%); visibility:hidden;
    transition:transform .6s var(--ease), visibility 0s linear .6s;
  }
  .nav__links > a{ color:#fff; font-size:1.4rem; font-family:var(--serif); }
  .nav.is-open .nav__links{ transform:translateY(0); visibility:visible; transition:transform .6s var(--ease), visibility 0s; }
  .nav.is-open .burger span{ background:#fff; }
  .nav.is-open .burger span:nth-child(1){ top:20px; transform:rotate(45deg); }
  .nav.is-open .burger span:nth-child(2){ opacity:0; }
  .nav.is-open .burger span:nth-child(3){ top:20px; transform:rotate(-45deg); }
  .nav__cta{ background:var(--accent); border-color:var(--accent); }
}

/* ---------- legal pages ---------- */
.legal{ padding-top:clamp(120px,16vw,180px); padding-bottom:clamp(60px,9vw,120px); }
.legal h1{ font-size:clamp(2.2rem,6vw,3.6rem); margin-bottom:2rem; }
.legal h2{ font-size:clamp(1.3rem,2.6vw,1.8rem); margin:2.4rem 0 .8rem; }
.legal p, .legal address{ color:var(--ink-soft); max-width:62ch; margin-bottom:1rem; font-style:normal; }
.legal a{ color:var(--accent-dk); border-bottom:1px solid var(--line); }
.legal .placeholder{ background:var(--sand); padding:.15em .5em; border-radius:4px; font-size:.92em; }
.legal-nav{ position:fixed; }
.back-home{ display:inline-block; margin-bottom:2rem; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-dk); }

/* ---------- FAQ ---------- */
.faq{ background:var(--cream-2); }
.faq__list{ max-width:860px; }
.faq__item{ border-top:1px solid var(--line); }
.faq__item:last-child{ border-bottom:1px solid var(--line); }
.faq__q{ cursor:pointer; list-style:none; padding:1.5rem 2.5rem 1.5rem 0; position:relative; font-family:var(--serif); font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.3; color:var(--ink); transition:color .3s var(--ease); }
.faq__q::-webkit-details-marker{ display:none; }
.faq__q:hover{ color:var(--accent-dk); }
.faq__q::after{ content:"+"; position:absolute; right:4px; top:1.45rem; font-family:var(--sans); font-weight:300; font-size:1.6rem; line-height:1; color:var(--accent-dk); }
.faq__item[open] .faq__q::after{ content:"\2013"; }
.faq__a{ padding:0 2.5rem 1.7rem 0; color:var(--ink-soft); max-width:66ch; }
.faq__a p{ margin-bottom:.8rem; }
.faq__a p:last-child{ margin-bottom:0; }
.faq__a a{ color:var(--accent-dk); border-bottom:1px solid var(--line); }