/* Entwurf 3 – Gebaut in Waldhausen. System: design/3.md */
:root {
  --c-birch: #EFE6D6;
  --c-walnut: #2A2118;
  --c-bark: #5C5045;
  --c-red: #B50F1D;
  --c-oak: #D9B98A;
  --c-white: #FFFFFF;
  --c-shade: rgb(from var(--c-walnut) r g b / .8);
  --c-shade-0: rgb(from var(--c-walnut) r g b / 0);
  --c-line: rgb(from var(--c-walnut) r g b / .22);
  --c-line-dark: rgb(from var(--c-oak) r g b / .35);
  color-scheme: light;

  --font-head: "Saira Condensed", "Arial Narrow", sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;

  --fs-small: .875rem;
  --fs-body: 1.0625rem;
  --fs-lead: 1.417rem;
  --fs-h3: 1.889rem;
  --fs-h2: clamp(2.2rem, 4.5vw, 3.36rem);
  --fs-word: clamp(3.6rem, 15vw, 12rem);
  --fs-display: clamp(2.8rem, 8.4vw, 7.5rem);
  --track-word: -.01em;
  --lh-word: .85;
  --lh-display: 1.04;
  --track-caps: .04em;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 9rem;
  --side: 1.25rem;
  --section: var(--space-6);
  --section-lg: var(--space-7);
  --gutter: 1.25rem;

  --radius: 0;
  --radius-btn: .25rem;
  --max: 1360px;
}
@media (min-width: 1080px) { :root { --side: 3rem; --gutter: 2rem; --section: var(--space-7); --section-lg: var(--space-8); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--c-birch); color: var(--c-walnut); font: 400 var(--fs-body)/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--c-red); text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--c-red); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-head); margin: 0; line-height: 1; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
figure { margin: 0; }
.lead { font-size: var(--fs-lead); line-height: 1.4; }
.small { display: block; margin-top: var(--space-2); font-size: var(--fs-small); color: var(--c-bark); }

.skip { position: absolute; left: var(--space-3); top: calc(var(--space-8) * -1); padding: var(--space-2) var(--space-3); background: var(--c-walnut); color: var(--c-white); z-index: 10; }
.skip:focus { top: var(--space-3); }
.wrap { width: min(var(--max), 100% - var(--side) * 2); margin-inline: auto; }

/* Buttons */
.btn { display: inline-flex; align-items: center; min-height: 3rem; padding: var(--space-2) var(--space-4); border: 2px solid var(--c-red); border-radius: var(--radius-btn); background: var(--c-red); color: var(--c-white); font: 600 var(--fs-body)/1.2 var(--font-body); text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
.btn:hover { background: var(--c-walnut); border-color: var(--c-walnut); }
.btn--line { background: transparent; border-color: var(--c-white); }
.btn--line:hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-walnut); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }

/* Header on the photo */
.top { position: absolute; inset: 0 0 auto; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--side); }
.brand img { width: 6.5rem; }
.top ul { display: none; list-style: none; margin: 0; padding: 0; gap: var(--space-4); }
.top nav a { color: var(--c-white); font-weight: 600; text-decoration: none; }
.top nav a:hover { text-decoration: underline; }
.top :focus-visible, .hero :focus-visible, .foot :focus-visible { outline-color: var(--c-white); }
@media (min-width: 700px) { .top ul { display: flex; } }

/* Hero */
.hero { position: relative; min-height: min(56rem, 100svh); display: grid; align-items: end; color: var(--c-white); background: var(--c-walnut); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--c-shade) 0%, var(--c-shade-0) 65%); }
.hero__text { position: relative; z-index: 1; width: min(var(--max), 100% - var(--side) * 2); margin: 0 auto; padding-block: var(--space-8) var(--space-6); }
.hero h1 { font-size: var(--fs-display); font-weight: 800; text-transform: uppercase; line-height: var(--lh-display); letter-spacing: var(--track-word); max-width: 11ch; }
.hero p { margin-top: var(--space-4); font-size: var(--fs-lead); line-height: 1.4; max-width: 34ch; }
@media (max-width: 1079px) {
  .hero { align-items: start; }
  .hero__img { object-position: 24% 70%; }
  .hero::after { background: linear-gradient(to bottom, var(--c-shade) 0%, var(--c-shade) 30%, var(--c-shade-0) 70%); }
  .hero__text { padding-block: var(--space-7) var(--space-8); }
}
@media (min-width: 1080px) {
  .hero::after { background: linear-gradient(to left, var(--c-shade) 0%, var(--c-shade-0) 60%); }
  .hero__text { padding-left: 50%; }
}

/* Facts strip */
.facts { list-style: none; padding: 0; margin-block: 0 var(--section); display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--c-line); }
.facts li { padding: var(--space-4) var(--space-3) var(--space-4) 0; color: var(--c-bark); font-size: var(--fs-small); border-top: 1px solid var(--c-line); }
.facts strong { display: block; color: var(--c-walnut); font: 600 var(--fs-lead)/1.2 var(--font-head); text-transform: uppercase; letter-spacing: var(--track-caps); }
@media (min-width: 1080px) {
  .facts { grid-template-columns: repeat(4, 1fr); }
  .facts li { padding-left: var(--space-4); border-left: 1px solid var(--c-line); }
  .facts li:first-child { border-left: 0; padding-left: 0; }
}

/* Chapters */
.chapter { margin-bottom: var(--section); }
.word { font-size: var(--fs-word); font-weight: 800; text-transform: uppercase; line-height: var(--lh-word); letter-spacing: var(--track-word); margin-bottom: var(--space-4); }
.chapter--right .word { text-align: right; }
.chapter__body { display: grid; gap: var(--space-5); }
.chapter__text { display: grid; gap: var(--space-3); align-content: start; max-width: 36rem; }
.chapter__text p:not(.lead) { color: var(--c-bark); }
.chapter__photo { border-radius: var(--radius); overflow: hidden; background: var(--c-oak); }
.chapter__photo img { width: 100%; height: 100%; object-fit: cover; }
.chapter__photo--square { aspect-ratio: 1; }
.chapter__photo--tall { aspect-ratio: 2 / 3; }
.chapter__product { width: min(22rem, 78%); margin-inline: auto; }
.chapter__product img { width: 100%; }
@media (min-width: 1080px) {
  .chapter__body { grid-template-columns: 5fr 7fr; gap: var(--gutter); align-items: center; }
  .chapter__product { grid-column: 1; width: min(24rem, 80%); }
  .chapter__text { padding-inline: var(--space-5); }
  .chapter--right .chapter__body { grid-template-columns: 5fr 7fr; }
  .chapter--right .chapter__photo { order: 2; }
  .chapter--right .chapter__photo--square { justify-self: end; width: 80%; }
  .chapter__body--duo { grid-template-columns: 4fr 8fr; align-items: start; }
  .chapter__body--duo .chapter__text { padding-top: var(--space-6); }
}
.chapter__body--duo .chapter__text .chapter__photo { margin-top: var(--space-4); aspect-ratio: 3 / 2; }

.chapter--wide .chapter__band { height: clamp(14rem, 38vw, 34rem); overflow: hidden; }
.chapter__band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.chapter__cols { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.chapter__cols p:not(.lead) { color: var(--c-bark); max-width: 36rem; }
@media (min-width: 1080px) { .chapter__cols { grid-template-columns: 1fr 1fr; gap: var(--gutter); } }

/* Services */
.heading { font-size: var(--fs-h2); font-weight: 800; text-transform: uppercase; letter-spacing: var(--track-word); }
.services { margin-bottom: var(--section-lg); }
.services .heading { margin-bottom: var(--space-4); }
.rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--c-walnut); }
.rows li { display: grid; gap: var(--space-2); padding-block: var(--space-4); border-bottom: 1px solid var(--c-line); }
.rows h3 { font-size: var(--fs-h3); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-caps); }
.rows p { max-width: 44rem; }
@media (min-width: 1080px) { .rows li { grid-template-columns: 4fr 8fr; gap: var(--gutter); align-items: baseline; } }

/* Story */
.story { display: grid; gap: var(--space-5); margin-bottom: var(--section-lg); align-items: center; }
.story__photo { max-width: 26rem; aspect-ratio: 4 / 5; overflow: hidden; }
.story__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.story__text { display: grid; gap: var(--space-4); max-width: 40rem; }
.story__text p:not(.lead) { color: var(--c-bark); }
@media (min-width: 1080px) { .story { grid-template-columns: 5fr 7fr; gap: var(--gutter); } }

/* Walnut footer */
.foot { background: var(--c-walnut); color: var(--c-birch); padding-block: var(--section) var(--space-5); }
.foot a { color: var(--c-white); }
.foot__title { font-size: var(--fs-word); font-weight: 800; text-transform: uppercase; line-height: .85; color: var(--c-oak); margin-bottom: var(--space-6); }
.foot__grid { display: grid; gap: var(--space-5); }
.foot h3 { font-size: var(--fs-lead); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--c-oak); margin-bottom: var(--space-3); }
.foot__grid p + p { margin-top: var(--space-3); }
@media (min-width: 1080px) { .foot__grid { grid-template-columns: 5fr 3fr 4fr; gap: var(--gutter); } }
.impressum { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--c-line-dark); font-size: var(--fs-small); }
.impressum p { max-width: 70rem; }
.foot__end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-5); font-size: var(--fs-small); }
.foot__end img { width: 6rem; }

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