/* Entwurf 3 – „Ziegel, Blech oder flach“. System: design/3.md */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-normal-400-800.woff2") format("woff2");
}

:root {
  --c-white: #ffffff;
  --c-ink: #1e1f21;
  --c-sky: #2a9fd8;
  --c-sky-ink: #135f86;
  --c-mist: #eaf4fa;
  --c-sun: #ffd23f;

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

  --fs--1: .885rem;
  --fs-0: 1.0625rem;
  --fs-1: 1.275rem;
  --fs-2: 1.53rem;
  --fs-3: 1.836rem;
  --fs-4: 2.203rem;
  --fs-5: clamp(1.836rem, 4vw, 2.644rem);
  --fs-6: clamp(2.203rem, 5.4vw, 4.569rem);
  --track-display: -.025em;

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

  --gutter: 1.5rem;
  --edge: 1.25rem;
  --radius-s: .5rem;
  --radius-pill: 999px;
  --top-h: 4.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--top-h); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-white); color: var(--c-ink); font: 400 var(--fs-0)/1.6 var(--f); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--c-sun); /* qa-allow: focus halo */ }

.wrap { width: min(80rem, 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-sun); color: var(--c-ink); }
.skip:focus { top: var(--space-4); }

/* Pillen-Button und Textlink */
.pill {
  display: inline-block; padding: var(--space-3) var(--space-5);
  background: var(--c-sky); color: var(--c-ink);
  font: 700 var(--fs-0)/1.4 var(--f); text-decoration: none;
  border-radius: var(--radius-pill);
}
.pill:hover { background: var(--c-ink); color: var(--c-white); }
.pill--big { padding: var(--space-3) var(--space-6); font-size: var(--fs-1); }
.textlink { color: var(--c-sky-ink); font-weight: 700; text-underline-offset: .2em; }

/* Kopf */
.top { position: sticky; top: 0; z-index: 10; background: var(--c-white); }
.top__in { display: flex; align-items: center; gap: var(--space-5); min-height: var(--top-h); }
.logo { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.logo__emblem { width: 2.25rem; height: 2.25rem; }
.logo__hammer { fill: var(--c-sky); }
.logo__word { font: italic 800 var(--fs-2)/1 var(--f); letter-spacing: var(--track-display); }
.top__nav { display: none; gap: var(--space-5); margin-inline: auto; }
.top__nav a { font-weight: 600; text-decoration: none; padding-block: var(--space-3); }
.top__nav a:hover { color: var(--c-sky-ink); text-decoration: underline; text-underline-offset: .3em; }
.top .pill { margin-left: auto; white-space: nowrap; padding-inline: var(--space-4); }
.logo__word { display: none; }
@media (min-width: 30rem) { .logo__word { display: inline; } }

/* Der Satz mit Bildern */
.say { hyphens: manual; overflow-wrap: break-word; font: 600 var(--fs-6)/1.12 var(--f); letter-spacing: var(--track-display); max-width: 22ch; text-wrap: pretty; }
.say--s { font-size: var(--fs-5); max-width: 28ch; }
.pic {
  display: inline-block; vertical-align: -.1em;
  width: 1.1em; height: 1.1em; object-fit: cover;
  border-radius: var(--radius-pill);
}
.pic--portrait { object-position: top; }
.nw { white-space: nowrap; }
.row .pic { width: 2.4em; height: 1.2em; vertical-align: -.2em; margin-left: var(--space-2); border-radius: var(--radius-s); }

/* Hero */
.hero { padding-block: var(--space-7) var(--space-8); }
.hero__foot { display: grid; gap: var(--space-5); margin-top: var(--space-7); max-width: 40rem; font-size: var(--fs-1); line-height: 1.5; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }

/* Auszeichnung */
.award { padding-block: var(--space-8); background: var(--c-mist); }
.award__pics { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-7); }
.award__pics img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-s); }
.award__note { margin-top: var(--space-4); }

/* Leistungen */
.services { padding-block: var(--space-8); }
.rows { margin: var(--space-7) 0 0; padding: 0; list-style: none; }
.row { display: grid; gap: var(--space-2) var(--gutter); grid-template-columns: minmax(0, 1fr); padding-block: var(--space-5); border-top: 1px solid var(--c-ink); }
.row h3 { font: 700 var(--fs-3)/1.15 var(--f); letter-spacing: var(--track-display); }
.row p { max-width: 52ch; }

/* Alt / Neu */
.pairs { padding-block: var(--space-8); background: var(--c-mist); }
.pairs__intro { margin-top: var(--space-4); margin-bottom: var(--space-7); font-size: var(--fs-1); }
.pair + .pair { margin-top: var(--space-7); }
.pair__pics { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 30rem) { .pair__pics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pair__pic { position: relative; }
.pair__pic img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; border-radius: var(--radius-s); }
.tag {
  position: absolute; left: var(--space-2); top: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--c-white); color: var(--c-ink);
  font: 700 var(--fs--1)/1.2 var(--f); border-radius: var(--radius-pill);
}
.tag--new { background: var(--c-sun); }
.pair figcaption { margin-top: var(--space-3); font-weight: 600; }

/* Ablauf */
.steps { padding-block: var(--space-8); }
.h2 { font: 700 var(--fs-4)/1.1 var(--f); letter-spacing: var(--track-display); margin-bottom: var(--space-6); }
.steps__list { display: grid; gap: var(--space-5) var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps__list li { counter-increment: step; border-top: 2px solid var(--c-sky); padding-top: var(--space-3); }
.steps__list b { display: block; font-size: var(--fs-1); }
.steps__list b::before { content: counter(step) ". "; color: var(--c-sky-ink); }

/* Betrieb */
.firm { padding-block: var(--space-8); }
.firm__grid { display: grid; gap: var(--space-7) var(--gutter); grid-template-columns: minmax(0, 1fr); margin-top: var(--space-7); }
.gens { margin: 0; padding: 0; list-style: none; }
.gens li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-3); border-top: 1px solid var(--c-ink); }
.gens b { color: var(--c-sky-ink); }
.firm__lead { font-size: var(--fs-1); line-height: 1.5; margin-bottom: var(--space-5); max-width: 40ch; }
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); margin: 0 0 var(--space-4); padding: 0; list-style: none; font-size: var(--fs--1); line-height: 1.4; hyphens: auto; overflow-wrap: break-word; }
.people img { aspect-ratio: 1; width: 100%; object-fit: cover; object-position: top; border-radius: var(--radius-pill); margin-bottom: var(--space-2); }
.people b { display: block; font-size: var(--fs-0); }
.small { font-size: var(--fs--1); margin-top: var(--space-2); }
.brands { margin-top: var(--space-8); }
.brands h3 { font: 700 var(--fs-1)/1.2 var(--f); margin-bottom: var(--space-2); }
.brands p { max-width: 70ch; }

/* Kontakt */
.contact { padding-block: var(--space-8); background: var(--c-mist); }
.contact__grid { display: grid; gap: var(--space-7) var(--gutter); grid-template-columns: minmax(0, 1fr); }
.contact__lead { margin-block: var(--space-4) var(--space-6); font-size: var(--fs-1); }
.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; }
.facts dd { margin: 0 0 var(--space-4); overflow-wrap: anywhere; }

/* Impressum */
.foot { padding-block: var(--space-8); font-size: var(--fs--1); }
.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) {
  :root { --edge: 2.5rem; }
  .pic { width: 1.6em; height: .8em; vertical-align: .02em; }
  .pic--portrait { width: .8em; }
  .pair__pics { gap: var(--space-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) {
  .top__nav { display: flex; }
  .top .pill { margin-left: 0; }
  .award__pics { grid-template-columns: 885fr 600fr; }
  .row { grid-template-columns: 5fr 7fr; align-items: baseline; }
  .firm__grid { grid-template-columns: 5fr 7fr; }
  .contact__grid { grid-template-columns: 7fr 5fr; align-items: start; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }