/* Walter Klement GmbH – Sondermaschinenbau, Lang
   One stylesheet. Serif for headings and values, sans for text, mono for labels. */

/* --- tokens ---------------------------------------------------------------- */
:root {
  --navy: #1c3a5e;           /* stands in for the blue of the sign on their building */
  --navy-ink: #0f2238;
  --navy-line: #24405f;
  --navy-pale: #b7c6d6;

  --paper: #f4f1e7;
  --paper-warm: #e5dec9;
  --rule: #c6c1ae;
  --mute: #5a5244;

  --text: #17201a;
  --on-dark: #f4f1e7;

  --f-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --f-sans: -apple-system, "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, system-ui, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "SF Mono", "Cascadia Code", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;

  /* scale 1.333 on 17px / 18px */
  --t-label: 0.875rem;
  --t-1: 1rem;
  --t-2: 1.333rem;
  --t-3: 1.777rem;
  --t-5: 3.157rem;

  /* 4px grid */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-80: 80px;

  --gutter: 20px;
  --section: var(--sp-48);
  --abb: 82vw;
}

@media (min-width: 600px)  { :root { --abb: 42vw; } }
@media (min-width: 768px)  { :root { --gutter: 32px; --section: var(--sp-80); } }
@media (min-width: 1024px) { :root { --abb: 28vw; } }
@media (min-width: 1120px) { :root { --gutter: 48px; } }
@media (min-width: 1440px) { :root { --gutter: 64px; --abb: 24vw; } }
@media (min-width: 1920px) { :root { --gutter: 96px; --abb: 20vw; } }

/* --- base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 17px; -webkit-text-size-adjust: 100%; }
@media (min-width: 768px) { html { font-size: 18px; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--f-sans);
  font-size: var(--t-1);
  line-height: 1.6;
}

h1, h2 {
  margin: 0;
  font-family: var(--f-serif);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

p, dl, dd, figure { margin: 0; padding: 0; }
a { color: var(--navy); text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

.mono { font-family: var(--f-mono); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(100%);
  white-space: nowrap;
}

.shell {
  width: 100%;
  padding-inline: var(--gutter);
}

/* --- header band ----------------------------------------------------------- */
.topbar {
  background: var(--navy-ink);
  color: var(--on-dark);
  border-bottom: 3px solid var(--navy);
}
.topbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  padding-block: var(--sp-16);
}
.topbar__brand {
  display: inline-flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-width: 0;
  color: var(--on-dark);
  font-family: var(--f-serif);
  line-height: 1.15;
}
.topbar__name {
  font-size: clamp(1rem, 2vw + 0.55rem, 1.333rem);
  font-weight: 700;
}
.topbar__sub {
  margin-top: 2px;
  font-family: var(--f-sans);
  font-size: var(--t-label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--navy-pale);
}
.topbar__sub, .topbar__ort { display: none; }
@media (min-width: 420px) { .topbar__sub { display: block; } }
@media (min-width: 600px) { .topbar__ort { display: inline; } }

/* --- call buttons: no movement, the colour changes at once ------------------ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: 48px;
  padding: var(--sp-8) var(--sp-16);
  border: 2px solid var(--paper);
  background: transparent;
  color: var(--on-dark);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
  flex: 0 0 auto;
}
.pill__icon, .btn__icon { display: inline-flex; }
.pill:hover,
.pill:focus-visible {
  background: var(--paper);
  color: var(--navy-ink);
}
.pill__num { display: none; }
@media (min-width: 540px) {
  .pill__short { display: none; }
  .pill__num { display: inline; }
}
.pill--light {
  background: var(--paper);
  color: var(--navy-ink);
}
.pill--light:hover,
.pill--light:focus-visible {
  border-color: var(--navy-ink);
  background: var(--navy-ink);
  color: var(--on-dark);
}
.pill--light .pill__short { display: none; }
.pill--light .pill__num { display: inline; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  min-height: 56px;
  padding: var(--sp-12) var(--sp-24);
  background: var(--navy);
  color: var(--on-dark);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.btn:hover,
.btn:focus-visible { background: var(--navy-ink); }
.btn__body { display: inline-flex; flex-direction: column; align-items: flex-start; }
.btn__label {
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-pale);
}
.btn__num { font-size: var(--t-2); }

/* --- hero ------------------------------------------------------------------ */
.hero { padding-block: var(--sp-16) var(--sp-24); }
.hero__row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}
.hero__text { min-width: 0; }

.brow {
  margin-bottom: var(--sp-12);
  font-size: var(--t-label);
  letter-spacing: 0.04em;
  color: var(--mute);
}
.hero__h1 {
  margin-bottom: var(--sp-12);
  font-size: clamp(1.65rem, 1.2rem + 2.6vw, var(--t-5));
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.hero__name, .hero__mark { display: block; }
.hero__mark {
  margin-top: var(--sp-4);
  color: var(--navy);
  font-style: italic;
}
.hero__lead {
  max-width: 44ch;
  margin-bottom: var(--sp-16);
  font-size: clamp(var(--t-1), 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.5;
}
.hero__cta { margin-bottom: var(--sp-12); }
.hero__meta {
  font-size: var(--t-label);
  color: var(--mute);
}
.hero__meta span { white-space: nowrap; }

/* The gear photo: a narrow band under the text on phones, a tall plate beside
   it from 900px. A measuring scan passes over it once on load (see motion). */
.hero__photo {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--navy-ink);
  background: var(--navy-ink);
}
.hero__photo img {
  width: 100%;
  aspect-ratio: 4 / 1;
  object-fit: cover;
}
.photo-caption {
  padding: var(--sp-4) var(--sp-12);
  background: var(--paper);
  border-top: 1px solid var(--navy-ink);
  font-size: var(--t-label);
  line-height: 1.5;
  color: var(--mute);
}
@media (min-width: 600px) {
  .hero { padding-block: var(--sp-32); }
  .hero__row { gap: var(--sp-24); }
  .hero__photo img { aspect-ratio: 3 / 1; }
  .photo-caption { padding-block: var(--sp-8); }
}
@media (min-width: 900px) {
  .hero { padding-block: var(--sp-80); }
  .hero__row {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-64);
  }
  .hero__text { flex: 1 1 0; }
  .brow { margin-bottom: var(--sp-24); }
  .hero__h1 { margin-bottom: var(--sp-24); }
  .hero__lead { margin-bottom: var(--sp-32); }
  .hero__cta { margin-bottom: var(--sp-16); }
  .hero__photo {
    flex: 0 0 clamp(260px, 30%, 460px);
    width: clamp(260px, 30%, 460px);
  }
  .hero__photo img { aspect-ratio: 3 / 4; }
}
/* Wide screens: the plate turns landscape and takes more of the row, so no
   gap opens between the headline and the photo. */
@media (min-width: 1440px) {
  .hero__photo {
    flex-basis: 38%;
    width: 38%;
  }
  .hero__photo img { aspect-ratio: 4 / 3; }
}

.hero__scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
/* One layer: a faint warm wash with a bright 3px measuring line on its leading
   edge. It waits above the photo and is gone again after its single pass. */
.hero__scan::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(255, 180, 80, 0) 0%,
    rgba(255, 180, 80, 0.16) calc(100% - 3px),
    rgba(255, 170, 70, 0.95) calc(100% - 3px),
    rgba(255, 170, 70, 0.95) 100%);
  transform: translateY(-100%);
  opacity: 0;
}

/* --- section heads --------------------------------------------------------- */
.h2 {
  margin-bottom: var(--sp-32);
  font-size: clamp(1.5rem, 1.15rem + 1vw, var(--t-3));
  letter-spacing: -0.015em;
}

/* --- Technisches Datenblatt: ruler and five rows ---------------------------- */
.spec {
  padding-block: var(--section);
  border-top: 1px solid var(--rule);
}
.spec__ruler {
  position: relative;
  height: 32px;
  margin-bottom: var(--sp-32);
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  background:
    repeating-linear-gradient(to right, var(--navy-ink) 0, var(--navy-ink) 1px, transparent 1px, transparent 80px),
    repeating-linear-gradient(to right, var(--mute) 0, var(--mute) 1px, transparent 1px, transparent 8px);
  background-position: 0 bottom, 0 bottom;
  background-size: 80px 10px, 8px 4px;
  background-repeat: repeat-x;
  font-size: var(--t-label);
  line-height: 1;
  color: var(--mute);
}
.spec__ruler span {
  position: absolute;
  bottom: 14px;
  transform: translateX(-50%);
}
.spec__ruler span:nth-child(1) { left: 0; transform: none; }
.spec__ruler span:nth-child(2) { left: 10%; }
.spec__ruler span:nth-child(3) { left: 20%; }
.spec__ruler span:nth-child(4) { left: 30%; }
.spec__ruler span:nth-child(5) { left: 40%; }
.spec__ruler span:nth-child(6) { left: 50%; }
.spec__ruler span:nth-child(7) { left: 60%; }
.spec__ruler span:nth-child(8) { left: 70%; }
.spec__ruler span:nth-child(9) { left: 80%; }
.spec__ruler span:nth-child(10) { left: 90%; }
.spec__ruler span:nth-child(11) { left: auto; right: 0; transform: none; }
.spec__ruler span:nth-child(even) { display: none; }
@media (min-width: 600px) { .spec__ruler span:nth-child(even) { display: inline; } }

.data { border-top: 1px solid var(--rule); }
.data__row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-16);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 640px) {
  .data__row {
    grid-template-columns: 12rem 1fr;
    gap: var(--sp-16) var(--sp-32);
    align-items: baseline;
    padding-block: var(--sp-24);
  }
}
.data__label {
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}
.data__value {
  font-family: var(--f-serif);
  font-size: var(--t-2);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.data__value--small {
  font-family: var(--f-sans);
  font-size: var(--t-1);
}
.data__dim {
  display: block;
  font-family: var(--f-sans);
  font-size: var(--t-1);
  color: var(--mute);
}
.data__zeit {
  display: block;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .data__dim {
    display: inline-block;
    margin-left: var(--sp-8);
  }
  .data__zeit {
    display: inline-block;
    margin-right: var(--sp-16);
  }
}
.data__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 4px;
  background: var(--navy);
}

.link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--navy);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.link:hover,
.link:focus-visible {
  color: var(--navy);
  text-decoration-thickness: 2px;
}

/* --- Werkstattblatt: two columns of text, then numbered figures ------------- */
.sheet {
  padding-block: var(--section);
  border-top: 1px solid var(--rule);
}
.sheet__body {
  max-width: 84ch;
  font-size: clamp(var(--t-1), 0.95rem + 0.4vw, 1.2rem);
  line-height: 1.55;
}
.sheet__body p { margin-bottom: var(--sp-16); break-inside: avoid; }
.sheet__body p:last-child { margin-bottom: 0; }
@media (min-width: 768px) {
  .sheet__body {
    columns: 2;
    column-gap: var(--sp-48);
    column-rule: 1px solid var(--rule);
  }
}
/* Wide screens: the heading stands beside the two text columns. */
@media (min-width: 1440px) {
  .sheet__kopf {
    display: grid;
    grid-template-columns: minmax(16rem, 24%) minmax(0, 1fr);
    column-gap: var(--sp-64);
    align-items: start;
  }
  .sheet__body { max-width: 96ch; }
}

.abb-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  min-height: 48px;
  margin-top: var(--sp-48);
  margin-bottom: var(--sp-16);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--rule);
}
.abb-kopf__label {
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mute);
}
.abb-nav { display: flex; gap: var(--sp-8); }
.abb-nav[hidden] { display: none; }
.abb-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--navy-ink);
  border-radius: 0;
  background: transparent;
  color: var(--navy-ink);
  cursor: pointer;
}
.abb-nav__btn:hover,
.abb-nav__btn:focus-visible {
  background: var(--navy);
  color: var(--on-dark);
}

.abb {
  display: flex;
  gap: var(--sp-24);
  padding-inline: var(--gutter);
  padding-bottom: var(--sp-12);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--navy) var(--paper-warm);
}
.abb__bild {
  flex: 0 0 var(--abb);
  width: var(--abb);
  scroll-snap-align: start;
}
.abb__bild img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--navy-ink);
}
.abb__bild .lage--hoch { object-position: 50% 38%; }
.abb__bild .lage--tief { object-position: 50% 64%; }
.abb__text {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-12);
  padding-top: var(--sp-8);
  font-size: var(--t-label);
  line-height: 1.5;
}
.abb__nr {
  position: relative;
  padding-bottom: var(--sp-8);
  white-space: nowrap;
  color: var(--mute);
}
.abb__nr::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 4px;
  background: var(--navy);
}

/* --- Kontakt: three items with hairlines ------------------------------------ */
.reach {
  padding-block: var(--section);
  border-top: 1px solid var(--rule);
}
.strip {
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
}
.strip__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
@media (min-width: 768px) {
  .strip { flex-direction: row; gap: 0; }
  .strip__item {
    flex: 1 1 0;
    padding-inline: var(--sp-32);
    border-left: 1px solid var(--rule);
  }
  .strip__item:first-child { padding-left: 0; border-left: 0; }
  .strip__item:last-child { padding-right: 0; }
}
.strip__label {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.strip__value {
  font-family: var(--f-serif);
  font-size: var(--t-2);
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.strip__value--small {
  font-family: var(--f-sans);
  font-size: var(--t-1);
  font-weight: 400;
  line-height: 1.6;
}
.strip__note { color: var(--mute); }

/* --- call strip ------------------------------------------------------------ */
.callstrip {
  background: var(--navy);
  color: var(--on-dark);
  border-top: 3px solid var(--navy-ink);
}
.callstrip__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-16);
  padding-block: var(--sp-32);
}
@media (min-width: 640px) {
  .callstrip__row { flex-direction: row; justify-content: space-between; align-items: center; }
}
.callstrip__text {
  max-width: 60ch;
  font-family: var(--f-serif);
  font-size: var(--t-2);
  font-weight: 700;
  font-style: italic;
  line-height: 1.35;
}

/* --- footer ---------------------------------------------------------------- */
.foot {
  background: var(--navy-ink);
  color: var(--on-dark);
  padding-block: var(--sp-48) var(--sp-32);
}
.foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-32) var(--sp-64);
}
.foot__col { flex: 1 1 20ch; }
.foot__col:first-child { flex-grow: 2; }
.foot__name {
  margin-bottom: var(--sp-8);
  font-family: var(--f-serif);
  font-size: var(--t-2);
  font-weight: 700;
}
.foot__label {
  margin-bottom: var(--sp-8);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-pale);
}
.foot__body, .foot__hours {
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
.foot__link {
  color: var(--on-dark);
  text-decoration: underline;
  text-decoration-color: var(--navy-pale);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.foot__link:hover,
.foot__link:focus-visible {
  color: #ffffff;
  text-decoration-color: #ffffff;
  text-decoration-thickness: 2px;
}
.foot__legal {
  margin-top: var(--sp-32);
  padding-top: var(--sp-24);
  border-top: 1px solid var(--navy-line);
  font-size: var(--t-label);
  line-height: 1.5;
  color: var(--navy-pale);
}

/* --- focus ----------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}
.topbar :focus-visible,
.callstrip :focus-visible,
.foot :focus-visible { outline-color: var(--paper); }
.abb:focus-visible { outline-offset: -2px; }

/* Measuring mark: a short bar slides out on a data row or under a figure number. */
.data__row:focus-within::before { width: 24px; }
.abb:focus-visible .abb__nr::after { width: 24px; }
@media (hover: hover) {
  .data__row:hover::before { width: 24px; }
  .abb__bild:hover .abb__nr::after { width: 24px; }
}

/* --- motion ---------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html, .abb { scroll-behavior: smooth; }

  .link,
  .foot__link,
  .abb-nav__btn { transition: color 150ms ease-out, background-color 150ms ease-out; }
  .data__row::before,
  .abb__nr::after { transition: width 300ms ease-out; }

  /* Load sequence, once, about 1.1 s in all: the measuring scan runs down the
     gear photo, the headline and sentence settle. The call button, the hours
     and the photo itself stay still; nothing is left on the photo. */
  .hero__scan::after { animation: scan-wash 900ms cubic-bezier(0.4, 0, 0.2, 1) 150ms both; }
  .hero__h1,
  .hero__lead { animation: setzen 600ms cubic-bezier(0.2, 0.65, 0.3, 1) both; }
  .hero__h1 { animation-delay: 300ms; }
  .hero__lead { animation-delay: 420ms; }

  @keyframes scan-wash {
    0%   { transform: translateY(-100%); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(100%); opacity: 0; }
  }
  @keyframes setzen {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}