/* ============================================================
   SCHIESS INNENAUSBAU AG — Rheintal Atelier · Quiet-Luxury Navy
   ============================================================ */

:root{
  --navy:        #1C2A33;   /* deep slate-navy canvas */
  --navy-panel:  #243743;   /* lifted navy panel */
  --navy-sticky: rgba(20,31,38,.86); /* real navy, translucent — scrolled header */
  --paper:       #F4F1EA;   /* warm paper white */
  --brass:       #B08D57;   /* antique gold — hairlines, section line */
  --brass-lt:    #C9A86A;   /* lighter brass — hover/sheen */
  --brass-ink:   #8A6D3B;   /* darker brass — brass text on paper (AA) */
  --grey:        #8A9499;   /* muted blue-grey — captions/eyebrows on dark */
  --grey-ink:    #69757B;   /* darker grey — small text on paper (AA) */
  --sand:        #D7D2C7;   /* soft sand hairline on light */
  --ink:         #0F171C;   /* ink shadow / vignette */

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --margin: clamp(20px, 8vw, 140px);
  --pad-y:  clamp(96px, 14vw, 200px);
  --maxw:   1440px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ overflow-x:clip; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--navy);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
::selection{ background:var(--brass); color:var(--navy); }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--brass); color:var(--navy); padding:12px 18px;
  font-weight:600; letter-spacing:.04em;
}
.skip-link:focus{ left:12px; top:12px; }

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

/* ---------- typographic helpers ---------- */
.eyebrow{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.20em;
  font-size:.72rem;
  font-weight:600;
  color:var(--grey-ink);
}
.eyebrow--light{ color:var(--brass-lt); }
.brass{ color:var(--brass-ink); font-style:italic; }
.muted{ color:var(--grey); }

/* drawn brass architectural section-line */
.section-line{
  display:block;
  height:1px;
  width:min(180px, 40vw);
  background:var(--brass);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 1.1s var(--ease);
  margin:30px 0;
}
.section-line--light{ background:linear-gradient(90deg, var(--brass-lt), rgba(201,168,106,.15)); }
.is-in .section-line,
.section-line.is-in{ transform:scaleX(1); }

/* reveal animation */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:0s;
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.10s; }
.reveal[data-delay="2"]{ transition-delay:.20s; }
.reveal[data-delay="3"]{ transition-delay:.30s; }

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.74rem;
  padding:16px 30px;
  border:1px solid var(--brass);
  color:var(--brass-lt);
  background:transparent;
  transition:color .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  position:relative;
}
.btn--hero{ color:var(--brass-lt); }
.btn:hover{ background:var(--brass); color:var(--navy); border-color:var(--brass); }
.btn--block{ width:100%; text-align:center; cursor:pointer; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:90;
  transition:background .5s var(--ease);
}
.nav__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:22px var(--margin);
  display:flex; align-items:center; justify-content:space-between;
}
.wordmark{ display:inline-flex; flex-direction:column; gap:6px; }
.wordmark__text{
  font-family:var(--sans);
  font-weight:600;
  letter-spacing:.34em;
  font-size:1rem;
  color:var(--paper);
}
.wordmark__text--lg{ font-size:1.6rem; letter-spacing:.30em; }
.wordmark__rule{ display:block; height:1px; width:100%; background:var(--brass); }

.nav__links{ display:flex; gap:clamp(20px,3vw,46px); }
.nav__links a{
  font-size:.82rem; letter-spacing:.10em; color:var(--paper);
  position:relative; padding:4px 0; font-weight:500;
  opacity:.9; transition:opacity .3s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--brass); transition:width .4s var(--ease);
}
.nav__links a:hover{ opacity:1; }
.nav__links a:hover::after{ width:100%; }

.nav__hairline{
  position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--brass); transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease);
}
.nav.is-scrolled{ background:var(--navy-sticky); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.nav.is-scrolled .nav__hairline{ transform:scaleX(1); }

.nav__burger{ display:none; flex-direction:column; gap:5px; padding:12px 10px; }
.nav__burger span{ display:block; width:24px; height:2px; background:var(--paper); transition:transform .3s,opacity .3s; }

/* drawer */
.drawer{
  position:fixed; top:0; right:0; z-index:95;
  width:min(82vw,340px); height:100dvh;
  background:var(--navy); padding:96px 32px 40px;
  transform:translateX(100%);
  transition:transform .5s var(--ease);
  display:flex; flex-direction:column; justify-content:space-between;
}
.drawer.is-open{ transform:none; }
.drawer__nav{ display:flex; flex-direction:column; gap:8px; }
.drawer__nav a{
  font-family:var(--serif); font-size:1.9rem; color:var(--paper);
  padding:10px 0; border-bottom:1px solid rgba(176,141,87,.25);
  font-weight:400;
}
.drawer__meta{ color:var(--grey); font-size:.85rem; }
.drawer__meta a{ color:var(--brass-lt); display:inline-block; margin-top:6px; }
.drawer__scrim{
  position:fixed; inset:0; z-index:94; background:rgba(15,23,28,.6);
  opacity:0; transition:opacity .4s; pointer-events:none;
}
.drawer__scrim.is-open{ opacity:1; pointer-events:auto; }

/* ============================================================
   HERO — Room Reveal
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  background:var(--navy);
  display:flex; align-items:flex-end;
  padding:0 var(--margin) clamp(70px,12vh,130px);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__photo{ position:absolute; inset:0; overflow:hidden; }
.hero__photo img{
  width:100%; height:100%; object-fit:cover; object-position:center 62%;
  transform:scale(1.08);
  filter:brightness(.62) contrast(1.06) saturate(.9);
  animation:kenburns 22s ease-out forwards;
}
/* navy multiply grade — pulls the bright room into the brand world */
.hero__grade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--navy);
  mix-blend-mode:multiply; opacity:.55;
}
@keyframes kenburns{ from{transform:scale(1.14);} to{transform:scale(1.0) translate(-1.5%,-2%);} }

/* widening vertical-slice reveal mask (navy curtains parting) */
.hero__mask{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:var(--navy);
  clip-path: inset(0 0 0 0);
  animation:reveal-slice 1.7s var(--ease) .15s forwards;
}
@keyframes reveal-slice{
  0%   { clip-path: inset(0 50% 0 50%); background:var(--navy); }
  100% { clip-path: inset(0 100% 0 0); background:transparent; }
}
/* warm light-sweep across hero photo on load */
.hero__sweep{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(105deg, transparent 32%, rgba(247,231,200,.5) 50%, transparent 66%);
  transform:translateX(-120%);
  animation:sweep 2.8s var(--ease) .7s forwards;
  mix-blend-mode:screen;
}
@keyframes sweep{ to{ transform:translateX(120%); } }
.hero__vignette{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(15,23,28,.55) 0%, rgba(28,42,51,.10) 34%, rgba(28,42,51,.42) 66%, rgba(15,23,28,.92) 100%),
    radial-gradient(120% 95% at 70% 40%, transparent 26%, rgba(15,23,28,.74) 100%);
}
.hero__content{ position:relative; z-index:5; max-width:760px; }
.hero__title{
  font-family:var(--serif);
  font-weight:400;
  color:var(--paper);
  font-size:clamp(2.7rem, 8vw, 6.2rem);
  line-height:1.02;
  letter-spacing:-.01em;
  margin:18px 0 22px;
}
.hero__title em{ font-style:italic; color:var(--brass-lt); font-weight:400; }
.hero__sub{
  color:var(--paper); opacity:.86;
  max-width:52ch; font-size:clamp(1rem,1.4vw,1.15rem);
  margin-bottom:34px;
}
.hero__line{ position:absolute; left:var(--margin); bottom:clamp(50px,9vh,100px); width:min(300px,46vw); z-index:5; margin:0; }
.is-loaded .hero__line{ transform:scaleX(1); }

.scroll-cue{
  position:absolute; right:var(--margin); bottom:clamp(50px,9vh,100px); z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  color:var(--grey); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
}
.scroll-cue__bar{ width:1px; height:54px; background:linear-gradient(var(--brass),transparent); animation:cue 2.2s ease-in-out infinite; transform-origin:top; }
@keyframes cue{ 0%,100%{transform:scaleY(.4);opacity:.5;} 50%{transform:scaleY(1);opacity:1;} }

/* ============================================================
   MANIFEST / ABOUT — light
   ============================================================ */
.manifest{ background:var(--paper); padding:var(--pad-y) var(--margin); }
.manifest__inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px,7vw,110px);
  align-items:start;
}
.manifest__quote{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.9rem,4vw,3.4rem); line-height:1.16;
  letter-spacing:-.005em; margin:22px 0 0; max-width:18ch;
}
.manifest__body{ max-width:52ch; margin-top:22px; color:#33424c; }
.manifest__body strong{ font-weight:600; color:var(--navy); }
.manifest__body em{ font-style:italic; color:var(--brass-ink); }
.manifest__figure{ margin-top:8px; }

/* brass hairline frame */
.frame{
  position:relative; padding:10px; background:var(--paper);
  border:1px solid transparent;
  outline:1px solid transparent;
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease);
}
/* single confident brass inlay — museum-plate, no fussy double box */
.frame::after{
  content:""; position:absolute; inset:5px; border:1px solid var(--brass);
  pointer-events:none; opacity:.7; transition:opacity .5s, inset .5s;
}
.frame img{ width:100%; aspect-ratio:auto; }
.frame:hover::after{ opacity:1; inset:7px; }
.frame--plain{ padding:8px; }
.plate{
  display:inline-flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin-top:14px; color:var(--grey-ink);
  font-size:.74rem; letter-spacing:.10em; text-transform:uppercase; font-weight:500;
}
.plate__swatch{
  color:var(--brass-ink); font-variant:small-caps; letter-spacing:.04em;
  text-transform:lowercase; font-size:.8rem; font-weight:500;
  padding-left:10px; border-left:1px solid var(--sand);
}

/* ============================================================
   WORK — Acht Disziplinen (dark rooms)
   ============================================================ */
.work{ background:var(--navy); color:var(--paper); }
.work__intro{
  max-width:var(--maxw); margin:0 auto;
  padding:var(--pad-y) var(--margin) clamp(40px,6vw,80px);
}
.work__heading{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.2rem,5.5vw,4.4rem); line-height:1.05;
  margin-top:14px; color:var(--paper); letter-spacing:-.01em;
}

.room{
  position:relative;
  display:grid; align-items:center;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,90px);
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(40px,6vw,80px) var(--margin);
}
.room--right{ direction:rtl; }
.room--right > *{ direction:ltr; }
.room__photo{
  position:relative; overflow:hidden;
  border:1px solid rgba(176,141,87,.4);
  padding:8px; background:var(--navy-panel);
}
.room__photo::after{
  content:""; position:absolute; inset:13px; border:1px solid rgba(176,141,87,.5);
  pointer-events:none; transition:inset .6s var(--ease), border-color .6s;
}
.room__photo img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  transform:scale(1.04); transition:transform 1.1s var(--ease);
  filter:saturate(.96);
}
.room:hover .room__photo img{ transform:scale(1.0); }
.room:hover .room__photo::after{ inset:11px; border-color:var(--brass-lt); }
.room__ref{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass-lt); margin-bottom:14px;
}
.room__name{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.6rem,6.5vw,5.4rem); line-height:.98;
  letter-spacing:-.015em; color:var(--paper);
  margin-bottom:18px; hyphens:auto;
}
.room__desc{ max-width:44ch; color:var(--paper); opacity:.78; }

/* feature room — wider photo column, larger name, breaks the 1:1 rhythm */
.room--feature{ grid-template-columns:1.5fr 1fr; gap:clamp(36px,6vw,110px); }
.room--feature .room__photo img{ aspect-ratio:16/10; }
.room--feature .room__name{ font-size:clamp(3rem,8vw,6.4rem); }
.room--feature .room__desc{ max-width:40ch; }
/* portrait room — taller plate for vertical subjects */
.room--portrait .room__photo img{ aspect-ratio:3/4; }

/* light gallery interstitial — the museum 'light room' between dark rooms */
.interstitial{ background:var(--paper); color:var(--navy); }
.interstitial__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:var(--pad-y) var(--margin);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,100px);
  align-items:center;
}
.interstitial__text .eyebrow{ color:var(--grey-ink); }
.interstitial__heading{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2rem,4.6vw,3.6rem); line-height:1.08;
  margin-top:14px; letter-spacing:-.01em; color:var(--navy);
}
.interstitial__body{ margin-top:20px; max-width:46ch; color:#33424c; }
@media (max-width:760px){
  .interstitial__inner{ grid-template-columns:1fr; gap:30px; }
  .interstitial__figure{ order:-1; }
}

/* ============================================================
   GALLERY WALL — light
   ============================================================ */
.gallery{ background:var(--paper); padding:var(--pad-y) var(--margin); }
.gallery__head{ max-width:var(--maxw); margin:0 auto clamp(40px,5vw,70px); }
.gallery__heading{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.2rem,5.5vw,4.4rem); margin-top:12px; letter-spacing:-.01em;
}
.wall{
  max-width:var(--maxw); margin:0 auto;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(18px,2.4vw,40px);
  align-items:start;
}
/* salon hang — varied spans + deliberate vertical stagger */
.wall__item{ grid-column:span 4; }
.wall__item--tall{ grid-column:span 4; margin-top:clamp(28px,6vw,90px); }
.wall__item--wide{ grid-column:span 8; }
.wall__item--hero{ grid-column:span 7; }
.wall__item--narrow{ grid-column:span 5; margin-top:clamp(20px,4vw,56px); }
.wall__item--drop{ margin-top:clamp(36px,7vw,120px); }
.frame--btn{ display:block; width:100%; padding:8px; cursor:pointer; }
.frame--btn img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform 1.1s var(--ease); }
.wall__item--tall .frame--btn img{ aspect-ratio:3/4; }
.wall__item--hero .frame--btn img{ aspect-ratio:16/10; }
.frame--btn:hover img{ transform:scale(1.03); }
/* clearer brass-corner reveal on hover */
.frame--btn::before{
  content:""; position:absolute; inset:8px; z-index:2; pointer-events:none;
  border:1px solid var(--brass-lt);
  opacity:0; transform:scale(1.02); transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.frame--btn:hover::before,
.frame--btn:focus-visible::before{ opacity:.9; transform:scale(1); }

/* ============================================================
   UMBAUTEN — dark hero room
   ============================================================ */
.umbau{ position:relative; background:var(--navy); color:var(--paper); overflow:hidden; }
.umbau__photo{ position:absolute; inset:0; z-index:0; }
.umbau__photo img{ width:100%; height:100%; object-fit:cover; }
.umbau__photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(15,23,28,.92) 0%, rgba(28,42,51,.82) 42%, rgba(28,42,51,.25) 100%);
}
.umbau__inner{
  position:relative; z-index:2; max-width:var(--maxw); margin:0 auto;
  padding:clamp(120px,20vw,260px) var(--margin);
  display:flex;
}
.umbau__text{ max-width:560px; }
.umbau__heading{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,4.6vw,3.8rem); line-height:1.08;
  margin-top:14px; letter-spacing:-.01em; color:var(--paper);
}
.umbau__body{ margin-top:20px; max-width:52ch; opacity:.84; }
.umbau__refs{
  margin-top:26px; font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brass-lt);
}

/* ============================================================
   LOHNARBEITEN + HOLZTROCKNUNG — quiet dark band
   ============================================================ */
.lohn{ background:var(--navy-panel); color:var(--paper); padding:var(--pad-y) var(--margin); }
.lohn__inner{ max-width:var(--maxw); margin:0 auto; }
.lohn__head{ margin-bottom:clamp(36px,5vw,64px); max-width:620px; }
.lohn__heading{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,5vw,4rem); margin-top:12px; letter-spacing:-.01em; color:var(--paper);
}
.lohn__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); }
.frame--dark{ background:var(--navy); border-color:rgba(176,141,87,.4); }
.frame--dark::after{ border-color:rgba(176,141,87,.55); }
.frame--dark img{ aspect-ratio:16/10; object-fit:cover; }
.lohn__cap h3{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,2.6vw,2rem);
  margin-top:22px; color:var(--paper);
}
.lohn__cap p{ margin-top:10px; max-width:46ch; opacity:.8; }

/* ============================================================
   ATELIER / TEAM — light
   ============================================================ */
.atelier{ background:var(--paper); padding:var(--pad-y) var(--margin); }
.atelier__head{ max-width:var(--maxw); margin:0 auto clamp(44px,5vw,72px); }
.atelier__heading{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.2rem,5.5vw,4.4rem); margin-top:12px; letter-spacing:-.01em;
}
.atelier__intro{ max-width:52ch; margin-top:18px; color:#33424c; }
.roster{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(22px,3vw,46px);
}
.frame--portrait{ padding:8px; }
.frame--portrait img{ width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top center; filter:grayscale(.15) saturate(.95); transition:filter .6s; }
.roster__item:hover .frame--portrait img{ filter:grayscale(0) saturate(1); }
.roster__item figcaption{ margin-top:16px; display:flex; flex-direction:column; gap:3px; }
.roster__name{ font-family:var(--serif); font-size:1.35rem; font-weight:500; }
.roster__role{ font-size:.74rem; letter-spacing:.10em; text-transform:uppercase; color:var(--grey-ink); }

/* 'Auch im Team' — text-only members presented deliberately */
.roster__also{
  max-width:var(--maxw); margin:clamp(40px,5vw,68px) auto 0;
  display:flex; align-items:baseline; gap:clamp(20px,4vw,56px); flex-wrap:wrap;
  border-top:1px solid var(--sand); padding-top:clamp(24px,3vw,36px);
}
.roster__also-label{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--grey-ink); font-weight:600; flex:0 0 auto;
}
.roster__also-list{
  list-style:none; display:flex; gap:clamp(28px,5vw,72px); flex-wrap:wrap;
}
.roster__also-list li{ display:flex; flex-direction:column; gap:3px; }

/* ============================================================
   KONTAKT — dark closing room
   ============================================================ */
.kontakt{ position:relative; background:var(--navy); color:var(--paper); padding:var(--pad-y) var(--margin); }
.kontakt__line{ position:absolute; top:0; left:var(--margin); margin:0; width:min(300px,46vw); }
.kontakt__inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,120px);
  align-items:start; padding-top:clamp(20px,4vw,50px);
}
.kontakt__heading{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.4rem,5.4vw,4.6rem); line-height:1.04;
  margin-top:14px; letter-spacing:-.015em; color:var(--paper);
}
.kontakt__lead{ margin-top:22px; max-width:46ch; opacity:.84; }
.kontakt__facts{ list-style:none; margin-top:40px; display:flex; flex-direction:column; gap:22px; }
.kontakt__facts li{ display:grid; grid-template-columns:130px 1fr; gap:16px; align-items:baseline; }
.kontakt__label{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-lt);
}
.kontakt__facts a{ color:var(--paper); border-bottom:1px solid rgba(176,141,87,.4); transition:border-color .3s; }
.kontakt__facts a:hover{ border-color:var(--brass); }
.kontakt__facts .muted{ font-size:.85rem; }

/* form — brass hairline underlines, no boxes */
.kontakt__form{ display:flex; flex-direction:column; gap:30px; }
.field{ position:relative; }
.field input,.field textarea{
  width:100%; background:transparent; border:none;
  color:var(--paper); font-family:var(--sans); font-size:1rem;
  padding:10px 0 8px; resize:vertical;
}
.field input:focus,.field textarea:focus{ outline:none; }
.field label{
  position:absolute; left:0; top:10px; color:var(--grey);
  pointer-events:none; transition:transform .3s var(--ease), color .3s, font-size .3s;
  transform-origin:left;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-22px) scale(.78); color:var(--brass-lt);
}
.field__line{ display:block; height:1px; background:rgba(176,141,87,.35); position:relative; }
.field__line::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--brass); transition:width .4s var(--ease);
}
.field input:focus ~ .field__line::after,
.field textarea:focus ~ .field__line::after{ width:100%; }
.form__note{ font-size:.74rem; color:var(--grey); margin-top:-8px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ position:relative; background:var(--navy); color:var(--paper); padding:clamp(60px,8vw,100px) var(--margin) 40px; }
.footer__line{ position:absolute; top:0; left:var(--margin); margin:0; width:min(300px,46vw); }
.footer__inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr auto; gap:clamp(30px,5vw,70px);
  align-items:start; padding-top:clamp(30px,4vw,50px);
}
.footer__tag{ color:var(--grey); font-size:.85rem; margin-top:12px; max-width:30ch; }
.footer__col p{ font-size:.9rem; opacity:.85; margin-bottom:6px; }
.footer__col a{ color:var(--brass-lt); transition:color .3s; }
.footer__col a:hover{ color:var(--brass); }
.footer__col--links{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.footer__fine{
  max-width:var(--maxw); margin:clamp(50px,7vw,80px) auto 0;
  font-size:.74rem; color:var(--grey); letter-spacing:.03em;
  border-top:1px solid rgba(176,141,87,.18); padding-top:24px;
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:120;
  background:rgba(15,23,28,.94);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(20px,5vw,70px);
  opacity:0; transition:opacity .35s var(--ease);
}
.lightbox.is-open{ opacity:1; }
.lightbox[hidden]{ display:none; }
.lightbox__figure{
  max-width:min(1100px,92vw); max-height:88vh;
  padding:10px; border:1px solid var(--brass); background:var(--navy);
}
.lightbox__figure img{ max-width:100%; max-height:74vh; object-fit:contain; }
.lightbox__cap{
  margin-top:14px; text-align:center; color:var(--grey);
  font-size:.76rem; letter-spacing:.10em; text-transform:uppercase;
}
.lightbox__close{
  position:absolute; top:clamp(16px,3vw,34px); right:clamp(16px,3vw,40px);
  font-size:2.4rem; line-height:1; color:var(--paper); width:48px; height:48px;
  transition:color .3s, transform .3s;
}
.lightbox__close:hover{ color:var(--brass); transform:rotate(90deg); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .manifest__inner{ grid-template-columns:1fr; gap:42px; }
  .manifest__figure{ order:-1; }
  .lohn__grid{ grid-template-columns:1fr; gap:40px; }
  .roster{ grid-template-columns:repeat(3,1fr); }
  .kontakt__inner{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width:760px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav.is-open .nav__burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav.is-open .nav__burger span:nth-child(2){ opacity:0; }
  .nav.is-open .nav__burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .room{ grid-template-columns:1fr; gap:24px; padding-top:clamp(34px,8vw,60px); padding-bottom:clamp(34px,8vw,60px); }
  .room--right{ direction:ltr; }
  .room__text{ order:2; }
  .room__photo{ order:1; }
  .room__name{ font-size:clamp(2.4rem,12vw,3.4rem); }

  .wall{ grid-template-columns:repeat(2,1fr); }
  .wall__item,.wall__item--tall,.wall__item--wide,
  .wall__item--hero,.wall__item--narrow,.wall__item--drop{ grid-column:span 1; margin-top:0; }
  .wall__item--wide,.wall__item--hero{ grid-column:span 2; }

  .kontakt__facts li{ grid-template-columns:1fr; gap:4px; }
  .footer__inner{ grid-template-columns:1fr; gap:30px; }

  /* comfortable thumb targets on phones */
  .kontakt__facts a{ display:inline-block; padding:8px 0; }
  .footer__col a,.footer__col--links a{ display:inline-block; padding:7px 0; }
}

@media (max-width:430px){
  .roster{ grid-template-columns:repeat(2,1fr); }
  .wall{ grid-template-columns:1fr; }
  .wall__item--wide,.wall__item--hero{ grid-column:span 1; }
  .hero__line{ width:60vw; }
  .scroll-cue{ display:none; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .section-line{ transform:scaleX(1) !important; }
  .hero__mask{ display:none; }
  .hero__photo img{ transform:none; }
}
.no-anim *,.no-anim *::before,.no-anim *::after{ animation:none !important; transition:none !important; }
.no-anim .reveal{ opacity:1 !important; transform:none !important; }
.no-anim .section-line{ transform:scaleX(1) !important; }
.no-anim .hero__mask{ display:none; }
.no-anim .hero__photo img{ transform:none; }
.no-anim .hero__sweep{ display:none; }