/* Thomas Leitner – Schlosserei mit Reparaturdienst, Graz-Liebenau
   One stylesheet. System sans with a system monospace for labels. */

/* --- tokens ---------------------------------------------------------------- */
:root {
  --red: #cc2218;            /* the wrench in their logo, one step darker for text contrast */
  --white: #ffffff;          /* the logo's own ground: header band only */

  --charcoal: #2d2d2d;
  --charcoal-ink: #141414;
  --plate-line: #4b4b4b;

  --paper: #f1ebe0;
  --paper-warm: #e4ddc9;
  --rule: #c9c0ad;
  --mute: #5a5244;
  --brass: #bfae8a;
  --brass-light: #d8c9a8;

  --text: #1a1a1a;
  --on-dark: #f1ebe0;

  --f-sans: -apple-system, "Segoe UI Variable Display", "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.25 on 17px / 18px */
  --t-label: 0.875rem;
  --t-1: 1rem;
  --t-2: 1.25rem;
  --t-3: 1.5625rem;

  /* 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);
  --platte: 80vw;
}

@media (min-width: 600px)  { :root { --platte: 46vw; } }
@media (min-width: 768px)  { :root { --gutter: 32px; --section: var(--sp-80); } }
@media (min-width: 1024px) { :root { --platte: 27vw; } }
@media (min-width: 1120px) { :root { --gutter: 48px; } }
@media (min-width: 1440px) { :root { --gutter: 64px; --platte: 26vw; } }
@media (min-width: 1920px) { :root { --gutter: 96px; --platte: 22vw; } }

/* --- 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-sans);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

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

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

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

/* --- header: their logo on its own white ground ----------------------------- */
.topbar {
  background: var(--white);
  border-bottom: 2px solid var(--charcoal-ink);
}
.topbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  padding-block: var(--sp-12);
}
.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-24);
}
/* The file is a 500px square with wide white margins. The frame shows the
   drawn part only; nothing of the logo itself is cut, and it is never upscaled. */
.topbar__logo {
  display: block;
  width: clamp(132px, 12vw + 92px, 220px);
  aspect-ratio: 21 / 8;
  overflow: hidden;
}
.topbar__logo img {
  width: 119.05%;
  max-width: none;
  margin: -40.48% 0 0 -9.52%;
}
.topbar__sub {
  display: none;
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mute);
}
@media (min-width: 900px) { .topbar__sub { display: block; } }

/* --- 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(--red);
  background: var(--red);
  color: var(--white);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
}
.pill__icon, .btn__icon { display: inline-flex; }
.pill:hover,
.pill:focus-visible {
  border-color: var(--charcoal-ink);
  background: var(--charcoal-ink);
}
.pill__num { display: none; }
@media (min-width: 540px) {
  .pill__short { display: none; }
  .pill__num { display: inline; }
}
.pill--light {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--charcoal-ink);
}
.pill--light:hover,
.pill--light:focus-visible {
  border-color: var(--white);
  background: var(--white);
}
.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(--red);
  color: var(--white);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.btn:hover,
.btn:focus-visible { background: var(--charcoal-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;
}
.btn__num { font-size: var(--t-2); }

/* --- hero ------------------------------------------------------------------ */
.hero { padding-top: var(--sp-16); }
.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.02em;
  color: var(--mute);
}
.hero__h1 {
  margin-bottom: var(--sp-12);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.625rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.hero__name, .hero__mark { display: block; }
.hero__mark {
  margin-top: var(--sp-4);
  color: var(--charcoal);
  font-weight: 400;
}
.hero__lead {
  max-width: 40ch;
  margin-bottom: var(--sp-16);
  font-size: clamp(var(--t-1), 0.95rem + 0.4vw, var(--t-2));
  line-height: 1.45;
}
.hero__cta { margin-bottom: var(--sp-12); }
.hero__meta {
  font-size: var(--t-label);
  color: var(--mute);
}
.hero__meta span { white-space: nowrap; }

/* The photo sits like a plate in a steel frame with a dark strip under it.
   On phones it runs edge to edge and joins the Werkstattschild below. */
.hero__photo {
  position: relative;
  overflow: hidden;
  width: calc(100% + 2 * var(--gutter));
  margin-inline: calc(-1 * var(--gutter));
  background: var(--charcoal-ink);
  border-top: 1px solid var(--charcoal-ink);
}
.hero__photo img {
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  object-position: 50% 62%;
}
.photo-caption {
  padding: var(--sp-8) var(--gutter);
  background: var(--charcoal-ink);
  color: var(--paper-warm);
  font-size: var(--t-label);
  line-height: 1.5;
}
.photo-caption .mono { color: var(--brass); }

@media (min-width: 600px) {
  .hero__photo img { aspect-ratio: 5 / 2; }
}
@media (min-width: 900px) {
  .hero { padding-block: var(--sp-80); }
  .hero__row {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp-48);
  }
  .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 54%;
    width: 54%;
    margin-inline: 0;
    border: 1px solid var(--charcoal);
  }
  .hero__photo img {
    aspect-ratio: 5 / 4;
    object-position: 50% 50%;
  }
  .photo-caption { padding-inline: var(--sp-16); }
}
@media (min-width: 1440px) {
  .hero__row { gap: var(--sp-64); align-items: center; }
  .hero__photo { flex-basis: 46%; width: 46%; }
}

/* Welding spark: one pass along the seam when the page loads (see motion). */
.hero__spark {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}
.hero__spark::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: 56%;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(180, 240, 255, 0) 30%,
    rgba(180, 240, 255, 0.9) 48%,
    rgba(255, 255, 255, 1) 50%,
    rgba(180, 240, 255, 0.9) 52%,
    rgba(180, 240, 255, 0) 70%,
    transparent 100%);
  transform: translateX(-120%) rotate(-6deg);
  filter: blur(1px);
}
.hero__spark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 56%,
    rgba(255, 255, 255, 0) 0%,
    rgba(180, 240, 255, 0) 20%,
    rgba(180, 240, 255, 0.35) 24%,
    rgba(180, 240, 255, 0) 28%);
  opacity: 0;
}

/* --- section heads with a Werkheft number ----------------------------------- */
.h2 {
  margin-bottom: var(--sp-24);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem);
}
.h2__num {
  display: inline-block;
  margin-right: var(--sp-8);
  font-size: 0.72em;
  font-weight: 400;
  letter-spacing: 0.08em;
  vertical-align: 0.15em;
  color: var(--mute);
}

/* --- Werkstattschild: the service register on a steel plate ----------------- */
.register {
  position: relative;
  padding-block: var(--sp-48);
  border-top: 2px solid var(--charcoal-ink);
  border-bottom: 2px solid var(--charcoal-ink);
  background:
    linear-gradient(170deg,
      rgba(255, 255, 255, 0.025) 0%,
      transparent 40%,
      transparent 60%,
      rgba(0, 0, 0, 0.3) 100%),
    linear-gradient(180deg,
      #3b3b3b 0%, var(--charcoal) 30%, var(--charcoal-ink) 100%);
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 768px) { .register { padding-block: var(--sp-80); } }

.register__rivet {
  position: absolute;
  z-index: 2;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #808080 0%, #4b4b4b 55%, #101010 100%);
}
.register__rivet--tl { top: 12px; left: 12px; }
.register__rivet--tr { top: 12px; right: 12px; }
.register__rivet--bl { bottom: 12px; left: 12px; }
.register__rivet--br { bottom: 12px; right: 12px; }
@media (min-width: 768px) {
  .register__rivet--tl { top: 16px; left: 16px; }
  .register__rivet--tr { top: 16px; right: 16px; }
  .register__rivet--bl { bottom: 16px; left: 16px; }
  .register__rivet--br { bottom: 16px; right: 16px; }
}

.register__inner { position: relative; z-index: 1; }
.register__brow {
  margin-bottom: var(--sp-16);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}
.register__title {
  margin-bottom: var(--sp-32);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  color: var(--on-dark);
}
@media (min-width: 768px) { .register__title { margin-bottom: var(--sp-48); } }

.items {
  margin-bottom: var(--sp-32);
  border-top: 1px solid var(--plate-line);
}
.item {
  position: relative;
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: var(--sp-16);
  align-items: baseline;
  padding-block: var(--sp-24);
  border-bottom: 1px solid var(--plate-line);
}
@media (min-width: 640px) { .item { grid-template-columns: 6rem 1fr; gap: var(--sp-24); } }
/* Wide screens get a second column of posts instead of an empty half plate. */
@media (min-width: 1024px) {
  .items {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--sp-64);
  }
}
.item__num {
  padding-top: var(--sp-4);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  color: var(--brass);
}
.item__body { display: flex; flex-direction: column; gap: var(--sp-4); }
.item__name {
  font-size: var(--t-2);
  font-weight: 700;
  line-height: 1.3;
  color: var(--on-dark);
}
.item__desc {
  max-width: 52ch;
  line-height: 1.45;
  color: var(--brass-light);
}
.item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 2px;
  background: var(--brass);
}
.register__foot { color: var(--brass-light); }

/* --- Was wir machen: text beside a row of framed plates --------------------- */
.say {
  padding-block: var(--section);
  border-top: 1px solid var(--rule);
}
.say__row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
}
.say__text { padding-inline: var(--gutter); }
.say__body {
  max-width: 44ch;
  font-size: clamp(var(--t-1), 0.95rem + 0.4vw, var(--t-2));
  line-height: 1.55;
}

.platten {
  position: relative;
  display: flex;
  gap: var(--sp-16);
  padding-inline: var(--gutter);
  padding-bottom: var(--sp-12);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--charcoal) var(--paper-warm);
}
/* Once the two buttons are switched on (blaettern.js sets this class) the row
   shows no scrollbar: it moves with the buttons, by swiping on a phone, or with
   the arrow keys. Without the script the browser's scrollbar stays as fallback. */
.platten--tasten {
  padding-bottom: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.platten--tasten::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.platte {
  flex: 0 0 var(--platte);
  width: var(--platte);
  scroll-snap-align: start;
  border: 1px solid var(--charcoal);
  background: var(--charcoal-ink);
}
.platte img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.platte .bild--oben { object-position: 50% 22%; }
.platte .bild--mitte-oben { object-position: 50% 40%; }
.platte .bild--unten { object-position: 50% 82%; }
.platte .bild--rechts { object-position: 80% 50%; }
.platte__leiste {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-12) var(--sp-16);
  color: var(--on-dark);
  line-height: 1.35;
}
.platte__art {
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass);
}
.platte__name { font-weight: 700; }
.platte__leiste::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 2px;
  background: var(--brass);
}

.blatt {
  display: flex;
  gap: var(--sp-8);
  padding-inline: var(--gutter);
}
.blatt[hidden] { display: none; }
.blatt__taste {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--charcoal);
  border-radius: 0;
  background: var(--charcoal);
  color: var(--on-dark);
  cursor: pointer;
}
.blatt__taste:hover,
.blatt__taste:focus-visible {
  background: var(--paper);
  color: var(--charcoal-ink);
}

@media (min-width: 1024px) {
  .say__row {
    display: grid;
    grid-template-columns: minmax(22rem, 34%) minmax(0, 1fr);
    grid-template-areas:
      "text   platten"
      "blatt  platten";
    column-gap: var(--sp-48);
    row-gap: var(--sp-32);
    align-items: start;
  }
  .say__text { grid-area: text; padding-right: 0; }
  .platten {
    grid-area: platten;
    padding-left: 0;
    scroll-padding-left: 0;
  }
  .blatt { grid-area: blatt; align-self: end; padding-right: 0; }
}

/* --- Kontakt --------------------------------------------------------------- */
.reach {
  padding-block: var(--section);
  border-top: 1px solid var(--rule);
}
.reach__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14ch, 1fr));
  gap: var(--sp-48) var(--sp-64);
}
.col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding-top: var(--sp-16);
  border-top: 2px solid var(--charcoal);
}
.col__label {
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}
.col__value {
  font-size: var(--t-2);
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.col__note { color: var(--mute); }
.col__hours {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--sp-4) var(--sp-12);
  font-variant-numeric: tabular-nums;
}
.col__dim { color: var(--mute); }
.link {
  text-decoration: underline;
  text-decoration-color: var(--charcoal);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.link:hover,
.link:focus-visible { text-decoration-thickness: 2px; }
.link--karte { color: var(--text); }

/* --- call strip ------------------------------------------------------------ */
.callstrip {
  background: var(--charcoal);
  color: var(--on-dark);
  border-top: 2px solid var(--charcoal-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: 40ch;
  font-size: var(--t-2);
  font-weight: 700;
  line-height: 1.35;
}

/* --- footer ---------------------------------------------------------------- */
.foot {
  background: var(--charcoal-ink);
  color: var(--on-dark);
  padding-block: var(--sp-48) var(--sp-32);
}
.foot__flex {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-32) var(--sp-64);
}
.foot__col--left { flex: 2 1 22ch; }
.foot__col--right { flex: 1 1 18ch; }
.foot__name {
  margin-bottom: var(--sp-8);
  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(--brass);
}
.foot__body {
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
.foot__body.mono { font-size: var(--t-label); line-height: 1.8; }
.foot__link {
  color: var(--on-dark);
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.foot__link:hover,
.foot__link:focus-visible {
  color: var(--white);
  text-decoration-color: var(--white);
  text-decoration-thickness: 2px;
}
.foot__legal {
  margin-top: var(--sp-32);
  padding-top: var(--sp-24);
  border-top: 1px solid var(--charcoal);
  font-size: var(--t-label);
  color: var(--brass);
}

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

/* Engraving mark: a short line cuts in beside a post or over a plate's strip. */
.item:focus-within { background-color: rgba(191, 174, 138, 0.06); }
.item:focus-within::before { width: 32px; }
.platten:focus-visible .platte__leiste::before { width: 32px; }
@media (hover: hover) {
  .item:hover { background-color: rgba(191, 174, 138, 0.06); }
  .item:hover::before { width: 32px; }
  .platte:hover .platte__leiste::before { width: 32px; }
}

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

  .link,
  .foot__link,
  .blatt__taste { transition: color 150ms ease-out, background-color 150ms ease-out, text-decoration-color 150ms ease-out; }
  .item { transition: background-color 300ms ease-out; }
  .item::before,
  .platte__leiste::before { transition: width 300ms ease-out; }

  /* Load sequence, once, about 1.1 s in all: the spark passes along the weld
     seam and flashes, the headline and sentence settle. The call button, the
     hours and the photo itself stay still. */
  .hero__spark { animation: spark-on 900ms linear 150ms both; }
  .hero__spark::before { animation: spark-arc 900ms cubic-bezier(0.4, 0, 0.2, 1) 150ms both; }
  .hero__spark::after { animation: spark-flash 500ms ease-out 450ms 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 spark-on {
    0%, 99% { opacity: 1; }
    100% { opacity: 0; }
  }
  @keyframes spark-arc {
    0%   { transform: translateX(-120%) rotate(-6deg); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateX(120%) rotate(-6deg); opacity: 0; }
  }
  @keyframes spark-flash {
    0%   { opacity: 0; }
    40%  { opacity: 1; }
    100% { opacity: 0; }
  }
  @keyframes setzen {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}