/* Entwurf 3 – Holzweg: dunkel, großformatig, die Arbeit im Mittelpunkt. */
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url("/assets/fonts/big-shoulders-display-normal-600-900.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-normal-400-700.woff2") format("woff2");
}

:root {
  --forest: #16241b;
  --moss: #22382a;
  --moss-2: #2b4434;
  --white: #f2eee6;
  --mute: #bfc8bd;
  --oak: #d3a35f;
  --green: #3fae45;
  --line: rgb(242 238 230 / .16);
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "Hanken Grotesk", system-ui, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 4.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font: 400 1.0625rem/1.6 var(--body); color: var(--white); background: var(--forest); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--oak); color: var(--forest); }
a { color: var(--oak); text-underline-offset: .2em; }
a:hover { color: #e6c088; }
:focus-visible { outline: 3px solid var(--oak); outline-offset: 3px; }
h1, h2, h3 { margin: 0; text-wrap: balance; hyphens: manual; overflow-wrap: break-word; }
h2 { font: 800 clamp(2.75rem, 7vw, 5.5rem)/.92 var(--display); text-transform: uppercase; letter-spacing: .005em; }
h3 { font: 700 1.5rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--oak); }
p { margin: 0; text-wrap: pretty; }
.wrap { width: min(1280px, 100% - 2.5rem); margin-inline: auto; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 10; padding: .6rem 1rem; background: var(--oak); color: var(--forest); }
.skip:focus { top: 1rem; }
.skip:hover { color: var(--forest); }
::-webkit-scrollbar { height: 10px; }
::-webkit-scrollbar-thumb { background: var(--moss-2); border-radius: 10px; }
html { scrollbar-color: var(--moss-2) var(--forest); }

/* Buttons */
.btn { display: inline-flex; align-items: center; min-height: 3.25rem; padding: .7rem 1.6rem; font: 800 1.25rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; text-decoration: none; color: var(--forest); background: var(--oak); border: 2px solid var(--oak); transition: background-color .2s ease, color .2s ease; }
.btn:hover { background: #e6c088; border-color: #e6c088; color: var(--forest); }
.btn--line { background: transparent; color: var(--white); border-color: var(--white); }
.btn--line:hover { background: var(--white); color: var(--forest); border-color: var(--white); }

/* Header */
.top { position: sticky; top: 0; z-index: 5; background: rgb(22 36 27 / .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top__in { display: flex; align-items: center; gap: 1.5rem; min-height: 4rem; }
.brand { display: flex; align-items: baseline; gap: .7rem; font: 900 2rem/1 var(--display); text-transform: uppercase; color: var(--white); text-decoration: none; letter-spacing: .02em; }
.brand span { font: 500 .8125rem/1 var(--body); text-transform: none; letter-spacing: 0; color: var(--mute); }
.nav { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.top nav { margin-left: auto; }
.nav a { color: var(--white); text-decoration: none; font: 700 1.125rem/1 var(--display); text-transform: uppercase; letter-spacing: .06em; }
.nav a:hover { color: var(--oak); }
.tel { font: 800 1.25rem/1 var(--display); letter-spacing: .04em; color: var(--forest); background: var(--oak); padding: .55rem .9rem; text-decoration: none; white-space: nowrap; }
.tel:hover { background: #e6c088; color: var(--forest); }
@media (max-width: 54rem) { .top nav { display: none; } .tel { margin-left: auto; } }
@media (max-width: 24rem) { .brand span { display: none; } }

/* Hero */
.hero { border-bottom: 1px solid var(--line); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero__grid > * { min-width: 0; }
@media (min-width: 62rem) { .hero__grid { grid-template-columns: 1.05fr 1fr; min-height: min(86vh, 52rem); } }
.hero__text { display: flex; flex-direction: column; justify-content: center; padding: clamp(2.5rem, 7vw, 5rem) clamp(1.25rem, 5vw, 4.5rem); }
.hero h1 { font: 900 clamp(3rem, 8.6vw, 6rem)/.88 var(--display); text-transform: uppercase; letter-spacing: .005em; max-width: 11ch; }
.lede { margin-top: 1.75rem; max-width: 44ch; color: var(--mute); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); }
.cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.hero__img { margin: 0; position: relative; min-height: 20rem; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.hero__img figcaption { position: absolute; left: 1rem; bottom: 1rem; padding: .35rem .7rem; font-size: .875rem; background: rgb(22 36 27 / .85); color: var(--white); }
@media (max-width: 61.99rem) { .hero__img { aspect-ratio: 4 / 3; min-height: 0; } }

/* Section heads */
.split { display: grid; gap: 1.25rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
@media (min-width: 52rem) { .split { grid-template-columns: 1fr 1fr; } }
.split p { color: var(--mute); max-width: 52ch; }

/* Door catalogue – the memorable row */
.doors { padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem); }
.doorrow {
  list-style: none; margin: 0; padding: 0 max(1.25rem, (100% - 1280px) / 2) 1rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(10.5rem, 1fr); gap: clamp(.75rem, 1.6vw, 1.5rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
}
.doorrow li { scroll-snap-align: start; display: grid; gap: .7rem; }
.doorrow img { width: 100%; aspect-ratio: 1 / 2.05; object-fit: cover; background: var(--white); box-shadow: 0 2px 4px rgb(0 0 0 / .2), 0 24px 40px -24px rgb(0 0 0 / .7); }
.doorrow span { font-size: .875rem; color: var(--mute); }

/* Gallery */
.projects { padding: clamp(4rem, 8vw, 7rem) 0; background: var(--moss); }
.gallery { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem); grid-template-columns: repeat(2, 1fr); }
.gallery li { position: relative; overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.gallery span { position: absolute; left: 0; bottom: 0; padding: .35rem .7rem; font-size: .8125rem; background: rgb(22 36 27 / .88); color: var(--white); }
.gallery .g-a { grid-column: 1 / -1; }
.gallery .g-b img, .gallery .g-c img { aspect-ratio: 3 / 4; }
.gallery .g-c img { object-fit: contain; background: #fff; }
@media (min-width: 52rem) {
  .gallery { grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(9rem, 15vw, 13rem); }
  .gallery img, .gallery .g-b img, .gallery .g-c img { aspect-ratio: auto; }
  .gallery .g-a { grid-column: 1 / 5; grid-row: span 2; }
  .gallery .g-b { grid-column: 5 / 7; grid-row: span 2; }
  .gallery .g-c { grid-column: 1 / 3; grid-row: span 2; }
  .gallery .g-d { grid-column: 3 / 7; grid-row: span 1; }
  .gallery .g-e { grid-column: 3 / 5; }
  .gallery .g-f { grid-column: 5 / 7; }
}

/* Services index */
.index { padding: clamp(4rem, 8vw, 7rem) 0; }
.idx { margin: clamp(2rem, 4vw, 3rem) 0 0; border-top: 1px solid var(--line); }
.idx > div { display: grid; gap: .5rem 2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 52rem) { .idx > div { grid-template-columns: minmax(16rem, 1fr) 1.6fr; align-items: baseline; } }
.idx dt { font: 800 clamp(2rem, 4vw, 3rem)/1 var(--display); text-transform: uppercase; }
.idx dd { margin: 0; color: var(--mute); max-width: 60ch; }

/* About + references */
.about { padding: clamp(4rem, 8vw, 6rem) 0; background: var(--moss); }
.about__grid { display: grid; gap: clamp(2.5rem, 5vw, 5rem); }
@media (min-width: 56rem) { .about__grid { grid-template-columns: 1.2fr 1fr; } }
.about h2 { font-size: clamp(2.5rem, 5.5vw, 4.25rem); margin-bottom: 1.5rem; }
.about p { color: var(--mute); max-width: 56ch; }
.claim { margin-top: 1.5rem; font: 700 clamp(1.625rem, 2.6vw, 2.125rem)/1.15 var(--display); letter-spacing: .01em; color: var(--white) !important; max-width: 26ch; }
.refs { list-style: none; margin: 1rem 0 0; padding: 0; }
.refs li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.refs span { color: var(--mute); font-size: .9375rem; }

/* Contact */
.contact { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.phone { display: inline-block; margin-top: 1rem; font: 900 clamp(3.25rem, 12vw, 9rem)/.9 var(--display); color: var(--oak); text-decoration: none; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.phone:hover { color: #e6c088; }
.contact__grid { display: grid; gap: 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--line); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.contact__grid h3 { margin-bottom: .6rem; }
.contact__grid p { color: var(--mute); }
.contact__grid p + p { margin-top: .6rem; }

/* Footer */
.foot { padding: 3rem 0 3.5rem; font-size: .875rem; color: var(--mute); background: #101a14; }
.imp h2 { font: 800 1.75rem/1 var(--display); color: var(--white); margin-bottom: 1rem; }
.imp dl { display: grid; grid-template-columns: minmax(10rem, max-content) 1fr; gap: .35rem 2rem; margin: 0; }
.imp dt { font-weight: 700; color: var(--white); }
.imp dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 34rem) { .imp dl { grid-template-columns: 1fr; } .imp dd { margin-bottom: .5rem; } }
.foot__note { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); max-width: 75ch; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }