/* Entwurf 2 – „Musterdach“. System: design/2.md */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/fonts/archivo-normal-400-900.woff2") format("woff2");
}

:root {
  --c-ink: #202327;
  --c-stone: #e2e5e7;
  --c-white: #ffffff;
  --c-sky: #2a9fd8;
  --c-sky-deep: #155f86;
  --c-signal: #f2c230;

  --f: "Archivo", system-ui, sans-serif;

  --fs--1: .75rem;
  --fs-0: 1rem;
  --fs-1: 1.333rem;
  --fs-2: 1.777rem;
  --fs-3: 2.369rem;
  --fs-4: clamp(1.777rem, 4.4vw, 3.157rem);
  --fs-5: clamp(2.369rem, 5.4vw, 4.209rem);
  --fs-mark: clamp(4.209rem, 24vw, 13.3rem);
  --track-mark: -.04em;
  --track-label: .02em;
  --track-display: -.01em;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --gutter: 1rem;
  --edge: 1.5rem;
  --radius: 2px;
  --bar-h: 4rem;
  --mark-rule: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--bar-h); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-stone); color: var(--c-ink); font: 400 var(--fs-0)/1.55 var(--f); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; line-height: 1.05; text-wrap: balance; }
p, figure { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--c-signal); outline-offset: 3px; }

.wrap { width: min(90rem, 100% - var(--edge) * 2); margin-inline: auto; }
.skip { position: absolute; left: var(--space-4); top: calc(var(--space-9) * -1); z-index: 20; padding: var(--space-2) var(--space-4); background: var(--c-signal); color: var(--c-ink); }
.skip:focus { top: var(--space-4); }

.btn {
  display: inline-block; padding: var(--space-3) var(--space-5);
  background: var(--c-sky); color: var(--c-ink);
  font: 700 var(--fs-0)/1.2 var(--f); text-decoration: none;
  border-radius: var(--radius);
}
.btn:hover { background: var(--c-white); }
.btn--big { padding: var(--space-4) var(--space-6); font-size: var(--fs-1); }
.link { color: var(--c-sky-deep); font-weight: 600; text-underline-offset: .2em; }

/* Kopfleiste */
.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--space-5);
  min-height: var(--bar-h); padding-inline: var(--edge);
  background: var(--c-ink); color: var(--c-white);
}
.bar__mark { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; font-weight: 600; font-size: var(--fs--1); letter-spacing: var(--track-label); }
.bar__mark span { display: none; }
.emblem { width: 2rem; height: 2rem; flex: none; }
.emblem__hammer { fill: var(--c-sky); }
.bar__nav { display: none; gap: var(--space-5); margin-left: auto; }
.bar__nav a { font-weight: 600; text-decoration: none; padding-block: var(--space-3); border-bottom: var(--mark-rule) solid transparent; }
.bar__nav a:hover { border-bottom-color: var(--c-signal); }
.bar .btn { margin-left: auto; padding: var(--space-3) var(--space-4); }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--c-ink); }
.hero__photo { position: relative; min-height: 34rem; display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-6) var(--edge) var(--space-5); color: var(--c-white); isolation: isolate; }
.hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero__photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c-ink) 72%, transparent) 0%, color-mix(in srgb, var(--c-ink) 15%, transparent) 40%, color-mix(in srgb, var(--c-ink) 20%, transparent) 55%, color-mix(in srgb, var(--c-ink) 85%, transparent) 100%);
}
.hero__say { max-width: 26ch; font: 500 var(--fs-1)/1.3 var(--f); }
.hero__brand h1 { display: grid; gap: var(--space-2); }
.hero__mark { font: 900 var(--fs-mark)/.9 var(--f); letter-spacing: var(--track-mark); margin-left: calc(var(--space-2) * -1); }
.hero__sub { order: -1; font: 600 var(--fs-0)/1.3 var(--f); letter-spacing: var(--track-label); }

.panel { background: var(--c-stone); padding: var(--space-6) var(--edge); display: grid; gap: var(--space-5); align-content: start; }
.panel__head h2 { font-size: var(--fs-3); font-weight: 800; }
.panel__head p { margin-top: var(--space-2); max-width: 34ch; }
.swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.swatch { display: block; text-decoration: none; border-bottom: var(--mark-rule) solid transparent; padding-bottom: var(--space-1); }
.swatch img { aspect-ratio: 1; width: 100%; object-fit: cover; border-radius: var(--radius); }
.swatch span { display: block; margin-top: var(--space-1); font: 600 var(--fs--1)/1.25 var(--f); letter-spacing: var(--track-label); }
.swatch:hover, .swatch:focus-visible { border-bottom-color: var(--c-signal); }
.panel__cta .btn { background: var(--c-ink); color: var(--c-white); }
.panel__cta .btn:hover { background: var(--c-sky-deep); }

/* Beratung */
.advice { padding-block: var(--space-9); }
.advice__grid { display: grid; gap: var(--space-6) var(--gutter); grid-template-columns: minmax(0, 1fr); }
.advice__q { font: 700 var(--fs-4)/1.08 var(--f); letter-spacing: var(--track-display); max-width: 24ch; }
.advice__a { display: grid; gap: var(--space-4); max-width: 46ch; font-size: var(--fs-1); line-height: 1.45; align-content: end; }

/* Katalog */
.catalogue { background: var(--c-white); padding-block: var(--space-9); }
.catalogue__title { font: 800 var(--fs-5)/1 var(--f); }
.catalogue__intro { margin-top: var(--space-3); margin-bottom: var(--space-7); font-size: var(--fs-1); }
.item {
  display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-4) var(--gutter);
  padding-block: var(--space-6); border-top: 1px solid var(--c-ink);
  scroll-margin-top: var(--bar-h);
}
.item:target { border-top: var(--mark-rule) solid var(--c-signal); }
.item__swatch { aspect-ratio: 1; width: 100%; max-width: 12rem; object-fit: cover; border-radius: var(--radius); }
.item__kind { font: 600 var(--fs--1)/1.2 var(--f); letter-spacing: var(--track-label); color: var(--c-sky-deep); margin-bottom: var(--space-2); }
.item h3 { font: 800 var(--fs-2)/1 var(--f); margin-bottom: var(--space-3); }
.item__text p:last-child { max-width: 36ch; }
.item__ref { grid-column: 1 / -1; }
.item__ref img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; border-radius: var(--radius); }

.brands { margin-top: var(--space-8); padding-top: var(--space-5); border-top: var(--mark-rule) solid var(--c-ink); }
.brands h3 { font: 800 var(--fs-2)/1 var(--f); margin-bottom: var(--space-4); }
.brands ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; font: 600 var(--fs-1)/1.3 var(--f); }
.more { margin-top: var(--space-6); max-width: 60ch; }

/* Auszeichnung */
.award { background: var(--c-ink); color: var(--c-white); padding-block: var(--space-9); }
.award__grid { display: grid; gap: var(--space-6) var(--gutter); grid-template-columns: minmax(0, 1fr); align-items: end; }
.award__roof { width: 100%; max-width: 55rem; border-radius: var(--radius); }
.award__text { display: grid; gap: var(--space-4); align-content: end; }
.award__text h2 { font: 800 var(--fs-4)/1.02 var(--f); }
.award__text p { max-width: 36ch; }
.award__trophy { width: 9rem; border-radius: var(--radius); }

/* Betrieb */
.firm { padding-block: var(--space-9); }
.firm__title { font: 800 var(--fs-5)/1 var(--f); max-width: 14ch; margin-bottom: var(--space-7); }
.firm__grid { display: grid; gap: var(--space-7) var(--gutter); grid-template-columns: minmax(0, 1fr); }
.gens { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.gens li { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--c-ink); }
.gens b { font: 800 var(--fs-1)/1.1 var(--f); }
.team__lead { font-size: var(--fs-1); line-height: 1.4; max-width: 34ch; margin-bottom: var(--space-5); }
.people { hyphens: auto; overflow-wrap: break-word; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); margin: 0; padding: 0; list-style: none; font-size: var(--fs--1); line-height: 1.35; }
.people img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; object-position: top; border-radius: var(--radius); margin-bottom: var(--space-2); }
.people b { display: block; font-size: var(--fs-0); }
.small { margin-top: var(--space-5); font-size: var(--fs--1); }

/* Kontakt */
.contact { background: var(--c-ink); color: var(--c-white); padding-block: var(--space-9); }
.contact .link { color: var(--c-sky); }
.contact__grid { display: grid; gap: var(--space-7) var(--gutter); grid-template-columns: minmax(0, 1fr); }
.contact__title { font: 800 var(--fs-5)/1 var(--f); max-width: 14ch; }
.contact__lead { margin-top: var(--space-4); font-size: var(--fs-1); line-height: 1.4; max-width: 34ch; }
.contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-6); }
.facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1) var(--space-5); margin: 0; align-content: start; }
.facts dt { font-weight: 700; color: var(--c-signal); }
.facts dd { margin: 0 0 var(--space-4); overflow-wrap: anywhere; }

/* Impressum */
.foot { padding-block: var(--space-8); font-size: var(--fs--1); }
.foot h2 { font: 800 var(--fs-2)/1 var(--f); margin-bottom: var(--space-5); }
.imp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1) var(--space-5); margin: 0; }
.imp dt { font-weight: 700; margin-top: var(--space-2); }
.imp dd { margin: 0; }
.foot__note { margin-top: var(--space-6); max-width: 70ch; }

@media (min-width: 40rem) {
  .bar__mark span { display: inline; }
  .bar__nav { display: flex; }
  .bar .btn { margin-left: 0; }
  .item { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .item h3 { font-size: var(--fs-3); }
  .facts { grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); row-gap: var(--space-4); }
  .facts dd { margin: 0; }
  .imp { grid-template-columns: minmax(12rem, max-content) minmax(0, 1fr); }
  .imp dt { margin-top: 0; }
}
@media (min-width: 64rem) {
  .hero { grid-template-columns: 7fr 5fr; min-height: calc(100svh - var(--bar-h)); }
  .hero__photo { min-height: 0; padding: var(--space-6) var(--space-6) var(--space-6); }
  .panel { padding: var(--space-6); }
  .advice__grid { grid-template-columns: 7fr 5fr; }
  .item { grid-template-columns: 2fr 4fr 6fr; align-items: start; }
  .item__ref { grid-column: auto; }
  .item__swatch { max-width: 14rem; }
  .award__grid { grid-template-columns: 7fr 5fr; }
  .firm__grid { grid-template-columns: 5fr 7fr; }
  .contact__grid { grid-template-columns: 7fr 5fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }