/* Beckon GmbH corporate page - "Onyx Silber".

   The owner chose this direction on 2026-10-04 out of four preview directions;
   the other three and the preview switcher are gone. What is left is ONE token
   set on :root. Components only ever read tokens, never a colour of their own.

   Typographic roles: display Archivo (variable, weight and width axes), body
   Inter, utility JetBrains Mono - the sister sites' fonts.

   Contrast: every text token was MEASURED against the grounds it sits on with
   the WCAG 2.1 relative-luminance formula, not eyeballed. The numbers are in the
   comments beside the tokens. */

:root {
  color-scheme: dark;

  /* grounds: near-black with a slight cool bias */
  --bg: #0a0b0d;
  --bg-elev: #0f1114;
  --surface: #14171b;

  /* silver hairlines */
  --line: rgba(214, 220, 228, 0.1);
  --line-strong: rgba(214, 220, 228, 0.22);

  /* text. ink 16.94:1 on --bg; muted 6.68:1 on --bg, 6.10:1 on --surface */
  --ink: #eceef1;
  --muted: #9097a1;
  /* silver as the accent. 12.44:1 on --bg */
  --accent: #c9ced5;
  --on-accent: #0a0b0d;

  /* brushed metal: a vertical fill on the hero headline and the wordmark.
     The END stop is the darkest point of the glyphs: #8a9099 = 6.12:1 on --bg. */
  --headline-fill: linear-gradient(180deg, #f7f8fa 0%, #e4e7eb 34%, #c9ced5 62%, #8a9099 100%);
  --wm-fill: linear-gradient(180deg, #f7f8fa 0%, #c9ced5 55%, #8a9099 100%);
  --wm-solid: #c9ced5;
  /* the one motion moment: a slow highlight across the silver headline */
  --sheen: linear-gradient(100deg, rgba(255, 255, 255, 0) 0 41%, rgba(255, 255, 255, 0.92) 50%, rgba(255, 255, 255, 0) 59% 100%);

  --head-bg: rgba(10, 11, 13, 0.72);
  --head-rule: linear-gradient(90deg, rgba(214, 220, 228, 0) 0%, rgba(214, 220, 228, 0.26) 18%, rgba(247, 248, 250, 0.5) 50%, rgba(214, 220, 228, 0.26) 82%, rgba(214, 220, 228, 0) 100%);
  --rule: linear-gradient(90deg, #f7f8fa 0%, #8a9099 55%, rgba(138, 144, 153, 0) 100%);
  /* a barely visible cool spotlight in the top area */
  --spot: radial-gradient(70% 60% at 18% -8%, rgba(200, 212, 228, 0.085) 0%, rgba(200, 212, 228, 0) 70%);
  --tile-hover: rgba(214, 220, 228, 0.028);

  /* type scale: light display weight, tight tracking */
  --h1-size: clamp(2.6rem, 6.2vw, 5rem);
  --h2-size: clamp(1.9rem, 3.6vw, 3rem);
  --h2-weight: 300;
  --h2-track: -0.025em;
  --h3-size: clamp(1.55rem, 2.3vw, 1.95rem);
  /* the label voice (eyebrows, kickers, figure sources, "to the website"):
     Archivo at expanded width, uppercase, widely tracked */
  --label-stretch: 125%;
  --label-size: 0.66rem;
  --label-weight: 500;
  --label-track: 0.28em;

  /* square corners everywhere; only the small controls get a hint of radius */
  --radius-ctl: 2px;
  --container: 1200px;

  /* product colours as TEXT on this ground (bright set). Measured on --bg:
     access 7.30, gym 11.04, billing 14.02, eventjob 8.83:1; on the tile hover
     ground (--tile-hover over --bg) 7.01, 10.60, 13.47, 8.48:1; on --surface
     all >= 6.67:1. Colour lives INSIDE the project tiles only (owner,
     2026-10-05, variant "Akzent"): the tile's top line, the topic line of its
     kicker and "to the website" on hover. Outside the tiles they do not
     appear. The marks carry their own brand colours. */
  --access-ink: #be87e5;
  --gym-ink: #9dc4ff;
  --billing-ink: #ffd47a;
  --eventjob-ink: #c79cee;

  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* side gutter in ONE place; never below 16px */
  --pad: 1.5rem;

  /* Height of the resting header bar, reserved by the body because the bar is
     out of flow at every width. 34px mark + 2 x 0.8rem padding = 59.6px. main.js
     measures the real bar and overwrites this; it is only the no-JS fallback.
     (The 40px language square is the tallest item: 40 + 25.6 = 65.6px.) */
  --topH: 66px;
}

/* ---------- base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topH) + 1.5rem);
  /* The one place overflow-x belongs. NOT on body: that turns the body into a
     scroll container and kills position:fixed for the header. */
  overflow-x: hidden;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-top: calc(var(--topH) + env(safe-area-inset-top, 0px));
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
}

a {
  color: inherit;
}

p {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

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

.skip {
  position: absolute;
  left: 0;
  top: -200px;
  z-index: 200;
  padding: 0.7rem 1rem;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 0;
}

.container {
  max-width: calc(var(--container) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ---------- shared type ---------- */

/* The label voice: eyebrows, kickers, the source lines of the key figures. */
.eyebrow,
.proj__kicker,
.proj__badge-chip,
.fig__src,
.contact__label,
.textlink {
  font-family: var(--font-display);
  font-stretch: var(--label-stretch);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  line-height: 1.5;
}

.eyebrow {
  margin: 0 0 1.4rem;
  color: var(--muted);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink);
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}

h2 {
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-track);
  line-height: 1.08;
}

.section-lead {
  margin-top: 1.2rem;
  max-width: 62ch;
  color: var(--muted);
  font-size: 1.04rem;
}

.section-lead + .section-lead {
  margin-top: 0.8rem;
}

/* A text link with a hairline under it: the page's only "button". */
.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0 0.5rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 0.25s ease, color 0.25s ease;
}

.textlink:hover {
  border-bottom-color: var(--accent);
}

.textlink--quiet {
  color: var(--muted);
}

.textlink--quiet:hover {
  color: var(--ink);
}

.textlink__arrow {
  font-family: var(--font-body);
  letter-spacing: 0;
  transition: transform 0.25s ease;
}

.textlink:hover .textlink__arrow {
  transform: translateY(2px);
}

/* ---------- header ---------- */
/* Fixed on desktop. Below 861px it is absolute instead: on iOS (Safari 26) the
   page cannot paint into the strip above a standing browser bar, and a fixed
   header there ends up half under it. Absolute means the bar rides out with the
   page, which is why the menu is a full-screen sheet and why there is a
   back-to-top button.
   Unlike the three product sites, the bar carries NO product siblings (owner,
   2026-10-05): the company brand on the left, the navigation on the right. */

.site-head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: var(--head-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  padding-top: env(safe-area-inset-top, 0px);
}

.site-head::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--head-rule);
  pointer-events: none;
}

.head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.8rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  min-width: 0;
}

.brand svg {
  flex: none;
}

/* The stacked two-line uppercase wordmark of Beckon Access, in brushed silver.
   `color` last as the fallback: an engine that ignores -webkit-text-fill-color
   must still paint the text. */
.wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.02;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 100%;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--wm-fill);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--wm-solid);
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.4vw, 1.4rem);
}

.nav-links > a {
  padding: 0.5rem 0.4rem;
  color: var(--muted);
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.nav-links > a:hover {
  color: var(--ink);
}

.lang-widget {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  margin-left: 0.4rem;
  padding: 0;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-ctl);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lang-widget:hover {
  border-color: var(--accent);
}

.lang-widget-mob {
  display: none;
}

.nav-burger {
  display: none;
  width: 40px;
  height: 40px;
  flex: none;
  padding: 0;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-ctl);
  cursor: pointer;
  position: relative;
}

.burger-bar,
.burger-bar::before,
.burger-bar::after {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.5px;
  background: var(--accent);
  transform: translateX(-50%);
}

.burger-bar {
  top: 50%;
  margin-top: -1px;
}

.burger-bar::before,
.burger-bar::after {
  content: '';
}

.burger-bar::before {
  top: -6px;
}

.burger-bar::after {
  top: 6px;
}

/* full-screen menu */
.nav-sheet {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 5rem) var(--pad) calc(env(safe-area-inset-bottom, 0px) + 3rem);
  background: var(--bg);
  overflow-y: auto;
}

.nav-sheet.open {
  display: flex;
}

.nav-sheet__links {
  display: flex;
  flex-direction: column;
}

.nav-sheet__links > a {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 8vw, 2.4rem);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-track);
  line-height: 1.15;
  text-decoration: none;
  color: var(--ink);
}

.nav-sheet__x {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 1.1rem);
  right: var(--pad);
  padding: 0.55rem 0.95rem;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-ctl);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding-block: clamp(5rem, 13vw, 10.5rem) clamp(4.5rem, 10vw, 8rem);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--topH)) 0 0;
  background: var(--spot);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero__title {
  max-width: 18ch;
  font-size: var(--h1-size);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.03;
  /* the fill, with the sheen layer parked off to the right at rest */
  background-image: var(--sheen), var(--headline-fill);
  background-size: 250% 100%, 100% 100%;
  background-position: 0% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ink);
  /* background-clip:text paints only inside the box: the umlaut dots above the
     tight first line and the descenders of the last line must stay inside it,
     or they vanish. */
  padding-block: 0.16em 0.08em;
  margin-top: -0.16em;
}

/* Two lines. The second half sits in <em> for its meaning only; it carries
   the same silver fill as the first. */
.hero__title > span,
.hero__title > em {
  display: block;
  font-style: normal;
}

.hero__rule {
  display: block;
  width: min(26rem, 70%);
  height: 1px;
  margin: clamp(2rem, 4vw, 3rem) 0;
  background: var(--rule);
}

.hero__sub {
  max-width: 60ch;
  color: var(--muted);
  font-size: clamp(1.04rem, 1.35vw, 1.18rem);
  line-height: 1.65;
}

.hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-top: clamp(2rem, 4vw, 2.8rem);
}

/* ---------- sections ---------- */

.section {
  padding-block: clamp(4.5rem, 10vw, 8rem);
}

.section-head {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 48rem;
}

/* ---------- projects ---------- */
/* A 2x2 grid of large tiles sharing 1px hairlines, like the cells of a table.
   No shadows, no radius. */

.proj-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.proj {
  --p: var(--access-ink);
  position: relative;
  display: flex;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.proj--gym {
  --p: var(--gym-ink);
}

.proj--billing {
  --p: var(--billing-ink);
}

.proj--eventjob {
  --p: var(--eventjob-ink);
}

/* Colour inside the tiles, and only there (owner, 2026-10-05, variant
   "Akzent"): the mark in full colour, the topic line of the kicker and this
   1px top line in the product colour - all at rest - and "to the website"
   turning product colour on hover. Title, body and domain stay neutral. */
.proj::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: -1px;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--p);
}

.proj__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: clamp(21rem, 30vw, 25rem);
  padding: clamp(1.6rem, 3.4vw, 3rem);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.proj__link:hover,
.proj__link:focus-visible {
  background: var(--tile-hover);
}

.proj__link:focus-visible {
  outline-offset: -3px;
}

.proj__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(2.2rem, 4.5vw, 3.6rem);
}

.proj__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
}

/* The marks stand in their own full colour, at rest too - the one place on
   the page where they do (the key figures keep them silver). */
.proj__mark svg {
  display: block;
  width: 44px;
  height: 44px;
}

/* Partner marking (Event Job): a chip, plus a plain note. */
.proj__badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
  text-align: right;
}

.proj__badge-chip {
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-ctl);
  color: var(--muted);
  white-space: nowrap;
}

.proj__badge .sep {
  display: none;
}

.proj__badge-note {
  max-width: 24ch;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.proj__kicker {
  display: block;
  margin-bottom: 0.9rem;
  color: var(--muted);
}

/* The expanded label face is wide, so components and topic get a line each
   instead of breaking somewhere in the middle of the topic
   ("IOT · / ZUTRITTSKONTROLLE"). The separator stays in the markup for
   text-only readers. */
.proj__kicker .comp,
.proj__kicker .topic {
  display: block;
}

.proj__kicker .sep {
  display: none;
}

.proj__kicker .topic {
  margin-top: 0.2rem;
  color: var(--p);
}

.proj__title {
  margin-bottom: 0.85rem;
  font-size: var(--h3-size);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.proj__body {
  max-width: 48ch;
  margin-bottom: 2.2rem;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.6;
}

.proj__foot {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.proj__domain {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.proj__more {
  font-family: var(--font-display);
  font-stretch: var(--label-stretch);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.25s ease;
}

.proj__link:hover .proj__more,
.proj__link:focus-visible .proj__more {
  color: var(--p);
}

.proj__arrow {
  display: inline-block;
  margin-left: 0.3rem;
  font-family: var(--font-body);
  letter-spacing: 0;
  transition: transform 0.25s ease;
}

.proj__link:hover .proj__arrow,
.proj__link:focus-visible .proj__arrow {
  transform: translateX(4px);
}

/* ---------- company ---------- */

.company {
  border-top: 1px solid var(--line);
}

.company__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

/* Four key figures of the products (owner, 2026-10-05, variant C
   "Kennzahlen"): a 2x2 hairline grid like the project tiles, one column below
   441px. Value and label are quoted VERBATIM from the product sites
   (content/*.mjs, company.figures). No company data here - that stands in the
   imprint. The source line speaks in the shared label voice (top of the file),
   a little tighter. */
.figs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}

.fig {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.fig__value {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.fig__label {
  margin-top: 0.75rem;
  margin-bottom: 1.3rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.fig__src {
  margin-top: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  letter-spacing: 0.16em;
}

/* Silver, and it stays silver: the product colours belong to the project
   tiles alone. Same filter the tile marks had before 2026-10-05. */
.fig__src svg {
  display: block;
  flex: none;
  filter: grayscale(1) brightness(1.22) contrast(0.92);
  opacity: 0.88;
}

.fig__partner {
  letter-spacing: 0;
}

/* ---------- contact ---------- */

.contact {
  border-top: 1px solid var(--line);
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

/* The one card: the company's address, framed like the key-figure grid
   beside the company text above it. */
.contact__card {
  min-width: 0;
  padding: clamp(1.3rem, 2.6vw, 1.9rem);
  border: 1px solid var(--line-strong);
}

.contact__label {
  margin-bottom: 0.8rem;
  color: var(--muted);
}

/* Selectable as text, in one go: one click selects the whole address. */
.mailbox {
  margin-bottom: 1.2rem;
  font-family: var(--font-display);
  font-weight: var(--h2-weight);
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  letter-spacing: var(--h2-track);
  line-height: 1.1;
  color: var(--ink);
  -webkit-user-select: all;
  user-select: all;
  overflow-wrap: anywhere;
}

/* ---------- footer ---------- */

.site-foot {
  position: relative;
  background: var(--bg-elev);
  padding-block: 2.6rem calc(2.6rem + env(safe-area-inset-bottom, 0px));
}

.site-foot::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--head-rule);
}

.foot-row {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

.foot-tagline {
  margin-top: 0.9rem;
  max-width: 36ch;
  color: var(--muted);
  font-size: 0.87rem;
}

.foot-links {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  color: var(--muted);
  font-size: 0.88rem;
}

.foot-links a {
  color: var(--muted);
  text-decoration: none;
}

.foot-links a:hover {
  color: var(--ink);
}

.foot-copy {
  color: var(--muted);
  font-size: 0.82rem;
}

/* ---------- legal pages ---------- */

.legal {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.legal h1 {
  font-size: clamp(2rem, 4.6vw, 3rem);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-track);
  line-height: 1.08;
}

.legal-intro {
  margin-top: 1.1rem;
  max-width: 70ch;
  color: var(--muted);
}

.legal-block {
  padding-top: 1.6rem;
  max-width: 72ch;
}

.legal-block h2 {
  margin-bottom: 0.6rem;
  font-size: 1.08rem;
  font-weight: 600;
  font-stretch: 100%;
  text-transform: none;
  letter-spacing: 0;
}

.legal-block p {
  margin-bottom: 0.7rem;
  color: var(--muted);
  font-size: 0.95rem;
  /* long words (Datenschutzbehörde) and URLs must break, not widen the page */
  overflow-wrap: break-word;
}

.legal-block ul {
  margin: 0.4rem 0 0.8rem;
  padding-left: 1.2rem;
  color: var(--muted);
  font-size: 0.95rem;
  overflow-wrap: break-word;
}

.legal-block li {
  margin-bottom: 0.3rem;
}

.legal-block a {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.legal-odr {
  padding: 1rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.9rem;
}

/* ---------- back to top ---------- */

.totop {
  position: fixed;
  z-index: 90;
  right: max(var(--pad), env(safe-area-inset-right, 0px));
  bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
  width: 54px;
  height: 54px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--head-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.totop.show {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.totop svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

/* r=25 here must match the circumference in main.js */
.totop__bahn,
.totop__fort {
  fill: none;
  stroke-width: 1.5;
}

.totop__bahn {
  stroke: var(--line-strong);
}

.totop__fort {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 157.08;
  stroke-dashoffset: 157.08;
}

.totop i {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 9px;
  height: 9px;
  border-left: 1.5px solid var(--ink);
  border-top: 1.5px solid var(--ink);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ---------- the one motion moment ---------- */
/* A single slow sheen across the headline on load. The resting state (before
   and after) is the plain fill - the text is never hidden. */
@keyframes sheen {
  from {
    background-position: 100% 0, 0 0;
  }
  to {
    background-position: 0% 0, 0 0;
  }
}

.hero__title {
  animation: sheen 2.6s cubic-bezier(0.45, 0.05, 0.25, 1) 0.35s both;
}

/* =====================================================================
   Breakpoints
   ===================================================================== */

@media (max-width: 960px) {
  .company__grid,
  .contact__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  :root {
    /* the 40px menu button is taller than the mark: 40 + 2 x 0.8rem */
    --topH: 66px;
  }

  /* Absolute, not fixed: see the .site-head note. */
  .site-head {
    position: absolute;
  }

  .nav-links {
    display: none;
  }

  .nav-burger,
  .lang-widget-mob {
    display: inline-flex;
  }

  .lang-widget-mob {
    margin-left: 0;
  }

  .foot-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .proj-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .proj__link {
    min-height: 0;
  }

  .proj__top {
    margin-bottom: 1.8rem;
  }

  .hero {
    padding-block: 4rem 4rem;
  }
}

@media (max-width: 440px) {
  .figs {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 399px) {
  :root {
    --pad: 1rem;
  }

  .totop {
    width: 46px;
    height: 46px;
  }

  .proj__top {
    flex-wrap: wrap;
  }

  .proj__badge {
    align-items: flex-start;
    text-align: left;
  }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}