/* ==========================================================================
   KK Elektrotechnik GmbH, landing page
   ========================================================================== */

/* Fonts: self-hosted, SIL Open Font License (see assets/fonts/LICENSE-*.txt) */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
  --black: #111111;
  --white: #ffffff;
  --surface: #f4f4f4;
  --night: #0e1325;
  --brand: #3e539d;
  --brand-on-dark: #8da2ea;
  --signal: #6081fb;
  --signal-glow: rgba(96, 129, 251, .35);
  --accent: #ff5500;
  --error: #b42318;
  --focus: var(--accent);

  /* Theme tokens, light by default */
  --bg: var(--white);
  --ink: var(--black);
  --ink-88: rgba(17, 17, 17, .88);
  --ink-72: rgba(17, 17, 17, .72);
  --ink-40: rgba(17, 17, 17, .40);
  --ink-16: rgba(17, 17, 17, .16);
  --line-10: rgba(17, 17, 17, .10);
  --line-20: rgba(17, 17, 17, .20);
  --line-30: rgba(17, 17, 17, .30);
  --brand-ink: var(--brand);
  --btn-solid-bg: var(--black);
  --btn-solid-ink: var(--white);
  --placeholder-bg: #ececec;

  --font-head: "Archivo", "Arial Narrow", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Every vw-based size stops growing by 1920 px (the page frame below): display, h1 and
     stat reach their caps exactly there */
  --fs-display: clamp(56px, 9.3vw, 178.56px);
  --fs-h1: clamp(44px, 5.8vw, 111.36px);
  --fs-h2: clamp(31px, 4.4vw, 84px);
  --fs-h3: clamp(26px, 2.6vw, 48px);
  --fs-h4: clamp(20px, 1.6vw, 28px);
  --fs-statement: clamp(24px, 2.5vw, 44px);
  --fs-stat: clamp(48px, 5.6vw, 107.52px);
  --fs-lead: clamp(18px, 1.35vw, 24px);
  --fs-body: clamp(16px, 1vw, 18px);
  --fs-small: 14px;
  --fs-label: 12px;

  --pad: clamp(20px, 2.3vw, 40px);
  --gutter: 20px;
  --section-y: clamp(80px, 9vw, 160px);
  --header-h: 72px;
  --radius-pill: 100vmax;
  --radius-s: 4px;
  --ease: cubic-bezier(.445, .05, .55, .95);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Page frame: beyond 1920 px (wide screens, zoomed-out browsers) content, photos and visuals
     stay 1920 px wide and centred, the section backgrounds run on. --frame-x is the side
     margin of the frame inside a full-width box (percentages resolve where it is used) */
  --page-max: 1920px;
  --page-max-h: 1200px;
  --frame-x: max(0px, (100% - var(--page-max)) / 2);
}

@media (max-width: 767px) {
  :root {
    --header-h: 64px;
    --fs-stat: clamp(40px, 11vw, 56px);
  }
}

/* Dark sections: KK night blue */
.section--dark {
  --bg: var(--night);
  --ink: #ffffff;
  --ink-88: rgba(255, 255, 255, .88);
  --ink-72: rgba(255, 255, 255, .72);
  --ink-40: rgba(255, 255, 255, .40);
  --ink-16: rgba(255, 255, 255, .16);
  --line-10: rgba(255, 255, 255, .12);
  --line-20: rgba(255, 255, 255, .20);
  --line-30: rgba(255, 255, 255, .32);
  --brand-ink: var(--brand-on-dark);
  --btn-solid-bg: #ffffff;
  --btn-solid-ink: #111111;
  --placeholder-bg: #161c30;
  background: var(--bg);
  color: var(--ink);
}

/* Brand sections: KK blue */
.section--brand {
  --bg: var(--brand);
  --ink: #ffffff;
  --ink-88: rgba(255, 255, 255, .92);
  --ink-72: rgba(255, 255, 255, .82);
  --ink-40: rgba(255, 255, 255, .5);
  --ink-16: rgba(255, 255, 255, .2);
  --line-10: rgba(255, 255, 255, .2);
  --line-20: rgba(255, 255, 255, .3);
  --line-30: rgba(255, 255, 255, .45);
  --brand-ink: #ffffff;
  --btn-solid-bg: #ffffff;
  --btn-solid-ink: var(--night);
  --focus: #ffffff;
  background: var(--bg);
  color: var(--ink);
}

/* Surface sections */
.section--surface {
  background: var(--surface);
  --placeholder-bg: #e9e9e9;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--ink);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

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

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

.nowrap {
  white-space: nowrap;
}

/* Skip link: visually hidden until focused */
.skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.skip-link:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background: #ffffff;
  color: #111111;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
}

/* ==========================================================================
   Typography
   ========================================================================== */

.h-display,
.h1,
.h2,
.h3,
.h4 {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -.01em;
  text-wrap: balance;
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: break-word;
  margin: 0;
}

.h-display {
  font-size: var(--fs-display);
}

.h1 {
  font-size: var(--fs-h1);
}

.h2 {
  font-size: var(--fs-h2);
}

.h3 {
  font-size: var(--fs-h3);
}

.h4 {
  font-size: var(--fs-h4);
  line-height: 1.1;
}

/* Section titles below a label */
.sec-title {
  margin-top: 20px;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.35;
  color: var(--ink-88);
  max-width: 46ch;
}

.statement {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-statement);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
}

.label {
  display: inline-flex;
  gap: .6em;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-72);
}

.label__index {
  color: var(--brand-ink);
}

/* ==========================================================================
   Buttons, links, icons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 17px 28px 15px;
  border: 1px solid var(--line-30);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}

.btn--solid {
  background: var(--btn-solid-bg);
  border-color: var(--btn-solid-bg);
  color: var(--btn-solid-ink);
}

.btn--small {
  min-height: 40px;
  padding: 12px 18px 11px;
}

.btn:hover,
.btn:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #111111;
}

.icon-arrow {
  flex: none;
  width: 12px;
  height: 12px;
}

.link {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  text-decoration-color: var(--line-30);
}

.link:hover {
  color: var(--brand-ink);
  text-decoration-color: currentColor;
}

/* ==========================================================================
   Grid, sections, placeholders
   ========================================================================== */

.container {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.grid {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  column-gap: var(--gutter);
}

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

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

.section {
  padding-block: var(--section-y);
}

.col-full {
  grid-column: 1 / -1;
}

.col-10 {
  grid-column: 1 / span 10;
}

.col-12 {
  grid-column: 1 / span 12;
}

@media (max-width: 991px) {
  .col-10,
  .col-12 {
    grid-column: 1 / -1;
  }
}

.placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: var(--ratio, 16 / 9);
  background-color: var(--placeholder-bg);
  background-image: radial-gradient(circle, var(--line-20) 1px, transparent 1.6px);
  background-size: 16px 16px;
  border: 1px dashed var(--line-30);
  border-radius: var(--radius-s);
}

.placeholder .label {
  max-width: 64ch;
  padding: 16px;
  text-align: center;
}

/* ==========================================================================
   Header and mobile menu
   ========================================================================== */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 100%;
}

/* Over the hero: transparent, white */
.header.is-on-dark,
.header.is-menu-open {
  --ink: #ffffff;
  --btn-solid-bg: #ffffff;
  --btn-solid-ink: #111111;
  --line-30: rgba(255, 255, 255, .32);
  --brand-ink: #8da2ea;
  color: #ffffff;
}

/* Scrolled: white glass bar */
.header.is-solid {
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--line-10);
}

/* Open menu forces the on-dark look */
.header.is-menu-open {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.header__logo {
  display: block;
  flex: none;
}

/* Large enough for the "ELEKTROTECHNIK GmbH" line to be read; beside the menu (from 1200 px)
   it grows with the width, the menu needs the room at 1200 px */
.header__logo img {
  width: auto;
  height: clamp(30px, 2.5vw, 40px);
}

/* Below 1200 px as large as on the desktop (40 px) where it fits */
@media (max-width: 1199px) {
  .header__logo img {
    height: 40px;
  }
}

/* Phones: the logo (255:33.7) may reach to 32 px before the menu button, which ends 56 px
   before the right edge: width 100vw - 108 px, at least 28 px high (320 px phones) */
@media (max-width: 767px) {
  .header__logo img {
    height: clamp(28px, calc((100vw - 108px) / 7.57), 40px);
  }
}

.header .logo--color {
  display: none;
}

.header.is-solid:not(.is-menu-open) .logo--color {
  display: block;
}

.header.is-solid:not(.is-menu-open) .logo--white {
  display: none;
}

.header__nav {
  margin-left: auto;
}

.header__links {
  display: flex;
  gap: 32px;
}

.nav__link {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .35em;
}

.nav__link:hover,
.nav__link[aria-current="true"] {
  color: var(--brand-ink);
  text-decoration-color: currentColor;
}

.header__toggle {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.header__bars {
  position: relative;
  display: block;
  width: 22px;
  height: 12px;
}

.header__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: top .4s var(--ease), transform .4s var(--ease);
}

.header__bars span:nth-child(1) {
  top: 0;
}

.header__bars span:nth-child(2) {
  top: 10.5px;
}

.header__toggle[aria-expanded="true"] .header__bars span:nth-child(1) {
  top: 5.25px;
  transform: rotate(45deg);
}

.header__toggle[aria-expanded="true"] .header__bars span:nth-child(2) {
  top: 5.25px;
  transform: rotate(-45deg);
}

/* Eight links plus the CTA need 1200 px; below that the burger opens them */
@media (max-width: 1199px) {
  .header__nav {
    display: none;
  }

  .header__cta {
    margin-left: auto;
  }

  .header__toggle {
    display: inline-flex;
    margin-left: 0;
  }
}

@media (max-width: 991px) {
  .header__cta {
    display: none;
  }

  .header__toggle {
    margin-left: auto;
  }
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow-y: auto;
  padding-top: calc(var(--header-h) + 32px);
  padding-right: var(--pad);
  padding-bottom: 32px;
  padding-left: var(--pad);
  background: var(--night);
  color: #ffffff;
  --ink: #ffffff;
  --btn-solid-bg: #ffffff;
  --btn-solid-ink: #111111;
  --line-30: rgba(255, 255, 255, .32);
  --brand-ink: #8da2ea;
}

.menu[hidden] {
  display: none;
}

.menu__link {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: #ffffff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(32px, 8vw, 56px);
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
}

.menu__link:hover,
.menu__link[aria-current="true"] {
  color: var(--brand-ink);
}

.menu__cta {
  margin-top: 40px;
}

.menu__tel {
  display: block;
  margin-top: 24px;
  font-size: var(--fs-lead);
}

@media (min-width: 992px) {
  .menu {
    display: none;
  }
}

.is-locked {
  overflow: hidden;
}

/* Pointer follower (main.js, after unitedcarriers.com): ring with the scroll progress and a dot,
   trailing the system cursor, which stays visible. Inverts against any background; over links
   and buttons it grows and takes the hover colour (accent). Only with a fine pointer and motion allowed. */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: difference;
  transition: opacity .3s var(--ease);
}

.cursor.is-visible {
  opacity: 1;
}

.cursor__ring {
  position: absolute;
  top: -24px;
  left: -24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  transition: transform .35s var(--ease), background-color .35s var(--ease);
}

.cursor__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

.cursor__track,
.cursor__progress {
  fill: none;
  transition: stroke .35s var(--ease);
}

.cursor__track {
  stroke: rgba(255, 255, 255, .4);
  stroke-width: 1;
}

.cursor__progress {
  stroke: #ffffff;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
}

.cursor__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform .3s var(--ease);
}

.cursor.is-link {
  mix-blend-mode: normal;
}

.cursor.is-link .cursor__ring {
  transform: scale(1.5);
  background: rgba(255, 85, 0, .14);
}

.cursor.is-link .cursor__track,
.cursor.is-link .cursor__progress {
  stroke: var(--accent);
}

.cursor.is-link .cursor__dot {
  transform: scale(0);
}

.cursor.is-down .cursor__ring {
  transform: scale(.85);
}

.cursor.is-link.is-down .cursor__ring {
  transform: scale(1.35);
}

/* ==========================================================================
   1 Hero
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: max(640px, 100vh);
  min-height: max(640px, 100svh);
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: clamp(32px, 4vw, 64px);
  overflow: hidden;
}

/* Landscape: at most 1200 px high, so tall or zoomed-out windows keep the 1920 x 1200 frame */
@media (orientation: landscape) {
  .hero {
    min-height: max(640px, min(100vh, var(--page-max-h)));
    min-height: max(640px, min(100svh, var(--page-max-h)));
  }
}

/* Rendered PCB with SVG pulses. Sizes per breakpoint: plan table "Hero-Visual" */
.hero__visual {
  position: absolute;
  top: 50%;
  right: -12vw;
  width: min(108vh, 1080px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  perspective: 1400px;
  pointer-events: none;
}

@media (max-width: 991px), (orientation: portrait) {
  .hero__visual {
    top: 42%;
    right: -46vw;
    width: 112vw;
  }
}

@media (max-width: 767px) {
  .hero__visual {
    top: 30%;
    right: auto;
    left: 50%;
    width: 132vw;
    transform: translate(-50%, -50%);
  }
}

.hero__pcb {
  position: absolute;
  inset: 0;
}

.hero__pcb picture,
.hero__pcb-img,
.pcb-overlay {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Light adds up on the board */
.pcb-overlay {
  overflow: visible;
  mix-blend-mode: screen;
}

.pcb-glow path {
  fill: none;
  stroke: var(--signal);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-opacity: .5;
}

.pulse path {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 9 120;
  stroke-dashoffset: 9;
}

.pulse__halo {
  stroke: var(--signal);
  stroke-width: 8;
  stroke-opacity: .45;
}

.pulse__core {
  stroke: #e8edff;
  stroke-width: 2.4;
}

.hero__ic-glow {
  position: absolute;
  top: 27%;
  left: 27%;
  width: 46%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(96, 129, 251, .34) 0%, rgba(96, 129, 251, .12) 38%, rgba(96, 129, 251, 0) 68%);
  mix-blend-mode: screen;
}

/* E²MS ring lettering around the IC (from the E²MS circle logo) */
.hero__ring {
  position: absolute;
  top: 21%;
  left: 21%;
  width: 58%;
  height: 58%;
  opacity: .9;
}

/* Wide board from 992 px in landscape: the render fills the hero, anchored right and centred
   vertically; portrait tablets from 992 px (iPad Pro) keep the square visual of the
   768-991 px layout. Sizes per breakpoint: plan table "Hero-Visual" (redesign v3, v7) */
.hero__board {
  display: none;
}

@media (min-width: 992px) and (orientation: landscape) {
  .hero__visual {
    display: none;
  }

  /* The board moves right just enough for the ring to clear the headline by about 24 px.
     Below 2:1 the board is twice the hero height wide and the ring's left edge sits at
     hero width + shift - 0.3318 x board width; the headline ends at about 58.4 % of the
     width. At most so far that the ring stays 16 px inside the hero */
  .hero__board {
    --board-shift: clamp(0px, 66.4vh - 41.6vw + 24px, 13.6vh - 16px);
    position: absolute;
    inset: 0;
    left: var(--frame-x);
    right: var(--frame-x);
    display: block;
    container-type: size;
    perspective: min(100vw, var(--page-max));
    pointer-events: none;
  }

  /* Tilts around the hero centre (main.js), which sits 50 % of the hero width left of its right edge */
  .hero__board-inner {
    --board-w: max(100vw + var(--board-shift), 200vh);
    position: absolute;
    top: calc(50% - var(--board-w) / 4);
    right: calc(-1 * var(--board-shift));
    width: var(--board-w);
    aspect-ratio: 2;
    transform-origin: calc(100% - var(--board-shift) - 50vw) 50%;
    will-change: transform;
  }

  /* Container units resolve where the shift is used, in .hero__board-inner, against the hero size */
  @supports (width: 1cqw) {
    .hero__board {
      --board-shift: clamp(0px, 66.4cqh - 41.6cqw + 24px, 13.6cqh - 16px);
    }

    .hero__board-inner {
      --board-w: max(100cqw + var(--board-shift), 200cqh);
      transform-origin: calc(100% - var(--board-shift) - 50cqw) 50%;
    }
  }
}

/* Beyond 1920 px the board ends with the frame: its edges fade into the hero background */
@media (min-width: 1921px) and (orientation: landscape) {
  .hero__board {
    --fade: min(120px, (100vw - var(--page-max)) / 2);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  }
}

.hero__board-inner picture,
.hero__board-img,
.board-overlay {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.board-overlay {
  overflow: visible;
  mix-blend-mode: screen;
}

.board-glow path {
  fill: none;
  stroke: var(--signal);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-opacity: .42;
}

/* One speed on every trace: dash length and duration come per trace from post.py */
.board-pulses .pulse path {
  stroke-dasharray: var(--dash) 200;
  stroke-dashoffset: var(--dash);
}

/* IC glow and ring sit on the IC at (500, 500) of the frame -1260…940 × -50…1050 */
.hero__board-glow {
  top: 29.09%;
  left: 69.55%;
  width: 20.91%;
  height: 41.82%;
}

.hero__board-ring {
  top: 23.64%;
  left: 66.82%;
  width: 26.36%;
  height: 52.73%;
}

/* Top layer keeps the navigation calm; side/bottom layer keeps the copy legible */
.hero__shade {
  position: absolute;
  inset: 0;
  left: var(--frame-x);
  right: var(--frame-x);
  background:
    linear-gradient(180deg, rgba(14, 19, 37, .9) 0, rgba(14, 19, 37, 0) 160px),
    linear-gradient(90deg, rgba(14, 19, 37, .92) 0%, rgba(14, 19, 37, .6) 36%, rgba(14, 19, 37, 0) 62%);
}

@media (max-width: 991px), (orientation: portrait) {
  .hero__shade {
    background:
      linear-gradient(180deg, rgba(14, 19, 37, .9) 0, rgba(14, 19, 37, 0) 120px),
      linear-gradient(0deg, rgba(14, 19, 37, .96) 0%, rgba(14, 19, 37, .78) 42%, rgba(14, 19, 37, 0) 74%);
  }
}

/* Phones: the copy runs over the chip and the ring lettering, so the board darkens from
   the label down. Stops in px from the bottom, where the copy is anchored; above the
   label the board stays bright */
@media (max-width: 767px) {
  .hero__shade {
    background:
      linear-gradient(180deg, rgba(14, 19, 37, .9) 0, rgba(14, 19, 37, 0) 120px),
      linear-gradient(0deg, rgba(14, 19, 37, .96) 0, rgba(14, 19, 37, .8) 340px, rgba(14, 19, 37, .72) 560px,
        rgba(14, 19, 37, .55) 740px, rgba(14, 19, 37, 0) 880px);
  }
}

.hero__content {
  position: relative;
  z-index: 1;
  /* a flex item: the auto margins of .container would shrink it to its content and centre it */
  width: 100%;
}

/* Below 992 px the ring lettering crosses the label: an opaque pill keeps it apart */
@media (max-width: 991px), (orientation: portrait) {
  .hero__label {
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 18px;
    background: rgba(14, 19, 37, .88);
    color: rgba(255, 255, 255, .88);
  }
}

.hero__title {
  max-width: 62%;
  margin: 20px 0 0;
  font-size: clamp(44px, 9.6vw, 184px);
  line-height: .92;
}

@media (max-width: 991px), (orientation: portrait) {
  .hero__title {
    max-width: 100%;
  }
}

/* Wide board: squarer than 1.38:1 even the largest shift leaves no room beside the full
   headline, so it shrinks until it ends 24 px before the ring (ring left at the largest
   shift = width - 0.5276 x height - 16 px, headline right = margin + 5.84 x font size) */
@media (min-width: 992px) and (orientation: landscape) {
  .hero__title {
    font-size: clamp(44px, min(9.6vw, 16.7vw - 9vh - 7px), 184px);
  }
}

/* Each line is a mask for its reveal; width follows the word so nothing is cut off */
.hero__line {
  display: block;
  width: max-content;
  overflow: hidden;
  padding-top: .08em;
  margin-top: -.08em;
}

.hero__line-inner {
  display: inline-block;
}

.hero__sup {
  margin: 0 -.03em 0 -.05em;
  color: var(--signal);
  text-shadow: 0 0 .35em rgba(96, 129, 251, .55);
}

.hero__claim {
  margin-top: clamp(14px, 1.4vw, 24px);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--brand-on-dark);
}

.hero__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-top: clamp(28px, 3.4vw, 56px);
}

@media (max-width: 767px) {
  .hero__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

.hero__lead {
  max-width: 40ch;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Opaque brand blue: stands out from the board, no trace shines through */
.hero__event {
  --ink-72: rgba(255, 255, 255, .82);
  display: grid;
  gap: 6px;
  max-width: 320px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--radius-s);
  color: var(--ink);
  font-size: var(--fs-small);
  text-decoration: none;
  background: var(--brand);
  box-shadow: 0 24px 64px rgba(4, 7, 18, .55);
  transition: border-color .4s var(--ease);
}

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

.hero__event-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  color: var(--ink);
}

/* Pause button for all looping motion (WCAG 2.2.2) */
.motion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-30);
  border-radius: 50%;
  background: rgba(14, 19, 37, .55);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}

.motion-toggle:hover {
  border-color: var(--signal);
}

.motion-toggle__icon {
  width: 16px;
  height: 16px;
}

.motion-toggle__play,
.is-motion-paused .motion-toggle__pause {
  display: none;
}

.is-motion-paused .motion-toggle__play {
  display: inline;
}

.hero__motion {
  position: absolute;
  z-index: 2;
  top: calc(var(--header-h) + 16px);
  right: calc(var(--frame-x) + var(--pad));
}

/* Short phones start the copy right below the header: keep it clear of the pause button */
@media (max-width: 767px) {
  .hero {
    padding-top: calc(var(--header-h) + 76px);
  }
}

.no-js .motion-toggle {
  display: none;
}

/* Hero choreography (JS enabled, no reduced motion) */
@media all { /* motion for everyone since 2026-10-20, see main.js */
  .js .hero__label {
    animation: hero-rise .9s var(--ease-out) both;
  }

  .js .hero__line-inner {
    animation: hero-line 1s var(--ease-out) 120ms both;
  }

  .js .hero__line + .hero__line .hero__line-inner {
    animation-delay: 220ms;
  }

  .js .hero__claim {
    animation: hero-rise .9s var(--ease-out) 380ms both;
  }

  .js .hero__intro {
    animation: hero-rise .9s var(--ease-out) 480ms both;
  }

  .js .hero__event {
    animation: hero-rise .9s var(--ease-out) 560ms both;
  }

  .js .hero__pcb-img {
    animation: pcb-in 1.4s var(--ease-out) both;
  }

  /* Traces power up from the IC outward */
  .js .pcb-glow path {
    stroke-dasharray: 100 100;
    stroke-dashoffset: 100;
    animation: trace-on 1.2s var(--ease-out) forwards;
    animation-delay: calc(600ms + var(--i) * 40ms);
  }

  .js .pcb-pulses {
    opacity: 0;
    animation: fade-in .8s linear 1.6s forwards;
  }

  .pulse path {
    animation: pulse-run var(--dur, 3.6s) linear var(--delay, 0s) infinite;
  }

  .js .hero__ring {
    animation: fade-in-ring 1.2s var(--ease-out) .9s both, ring-spin 60s linear infinite;
  }

  .hero__ic-glow {
    animation: ic-breathe 4s ease-in-out infinite;
  }

  /* fade only: a scale would shift the board against its pulse overlay */
  .js .hero__board-img {
    animation: board-in 1.2s var(--ease-out) both;
  }

  /* Wide board: traces power up from the IC outward, nearest first, then the pulses start */
  .js .board-glow path {
    stroke-dasharray: 100 100;
    stroke-dashoffset: 100;
    animation: trace-on 1.4s var(--ease-out) forwards;
    animation-delay: calc(500ms + var(--i) * 45ms);
  }

  .js .board-pulses {
    opacity: 0;
    animation: fade-in .8s linear 1.8s forwards;
  }

  .board-pulses .pulse path {
    animation: board-pulse var(--dur, 6s) linear var(--delay, 0s) infinite;
  }
}

@keyframes board-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* A pulse runs 80 % of its cycle and rests beyond the trace end for the rest */
@keyframes board-pulse {
  80%,
  100% {
    stroke-dashoffset: -100;
  }
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-line {
  from {
    transform: translateY(105%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes pcb-in {
  from {
    opacity: 0;
    transform: scale(1.04);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes trace-on {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

@keyframes fade-in-ring {
  from {
    opacity: 0;
  }

  to {
    opacity: .9;
  }
}

@keyframes pulse-run {
  to {
    stroke-dashoffset: -111;
  }
}

@keyframes ring-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ic-breathe {
  0%,
  100% {
    opacity: .5;
  }

  50% {
    opacity: 1;
  }
}

/* Paused: by the toggle everywhere, and loops in sections that are off screen */
.is-motion-paused *,
.is-motion-paused *::before,
.is-motion-paused *::after,
.is-offscreen *,
.is-offscreen *::before,
.is-offscreen *::after {
  animation-play-state: paused !important;
}

/* ==========================================================================
   2 Manufaktur
   ========================================================================== */

.manu-statement {
  margin-top: 48px;
}

.manu-figure {
  grid-column: 5 / span 12;
  margin-top: 80px;
}

.manu-figure__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-s);
}

/* Reveal cover in the section colour: slides away to uncover a photo (see qa_checks coverGone) */
.reveal-cover {
  display: none;
  position: absolute;
  inset: -1px;
  z-index: 1;
  background: var(--bg, #ffffff);
  pointer-events: none;
}

.reveal-cover--x {
  transform-origin: right center;
}

.reveal-cover--y {
  transform-origin: center bottom;
}

.manu-figure img {
  width: 100%;
}

.manu-figure figcaption {
  display: flex;
  margin-top: 12px;
}

@media (max-width: 991px) {
  .manu-figure {
    grid-column: 1 / -1;
  }
}

.stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: 96px;
}

@media (max-width: 991px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.stat {
  padding: 24px 0 0 20px;
  border-left: 1px solid var(--line-20);
}

.stat__value {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-stat);
  line-height: .95;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.stat__unit {
  font-size: .5em;
  margin-left: .08em;
}

.stat__label {
  display: block;
  max-width: 28ch;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-72);
}

/* Image reveal: curtain from the top while the photo settles (JS enabled, no reduced motion) */
@media all { /* motion for everyone since 2026-10-20, see main.js */
  .js .manu-figure[data-reveal] {
    opacity: 1;
    transform: none;
  }

  .js .manu-figure[data-reveal] img {
    transform: scale(1.08);
    transition: transform 1.4s var(--ease-out);
  }

  .js .manu-figure[data-reveal] .reveal-cover {
    display: block;
    transition: transform 1.2s var(--ease-out);
  }

  .js .manu-figure[data-reveal].is-visible img {
    transform: none;
  }

  .js .manu-figure[data-reveal].is-visible .reveal-cover {
    transform: scaleY(0);
  }
}

/* Text fill (JS enabled, no reduced motion) */
.is-fill-ready .w {
  color: var(--ink-16);
  transition: color .35s linear;
}

.is-fill-ready .w.is-edge {
  color: var(--brand-ink);
}

.is-fill-ready .w.is-on {
  color: var(--ink);
}

/* ==========================================================================
   3 Leistungen
   ========================================================================== */

/* clip-path keeps the tall sticky video layer inside the section without creating
   a scroll container, so the sticky layers inside keep working */
.services {
  position: relative;
  clip-path: inset(0);
}

/* Tinted video layer: sticks to the viewport while the section scrolls by.
   The negative margins take it out of the flow and pull it into the top padding. */
.services__media {
  position: sticky;
  top: max(0px, (100vh - var(--page-max-h)) / 2);
  z-index: 0;
  max-width: var(--page-max);
  height: min(100vh, var(--page-max-h));
  margin-top: calc(-1 * var(--section-y));
  margin-inline: auto;
  margin-bottom: calc(var(--section-y) - min(100vh, var(--page-max-h)));
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}

/* Beyond 1920 px the video also fades at the sides of the frame */
@media (min-width: 1921px) {
  .services__media {
    --fade: min(120px, (100vw - var(--page-max)) / 2);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%),
      linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%),
      linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
    mask-composite: intersect;
  }
}

.services__poster,
.services__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.services__video {
  opacity: 0;
  transition: opacity .8s var(--ease);
}

.services__video.is-playing {
  opacity: 1;
}

/* Keeps the copy legible above the brightest video frames */
.services__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14, 19, 37, .84) 0%, rgba(14, 19, 37, .64) 50%, rgba(14, 19, 37, .8) 100%);
}

.services__tools,
.services__head,
.services__scroller,
.services__foot {
  position: relative;
  z-index: 1;
}

.services__tools {
  display: flex;
  justify-content: flex-end;
  margin-bottom: -44px;
}

/* Phones get the poster only, so there is nothing to pause here */
@media (max-width: 767px) {
  .services__tools {
    display: none;
  }
}

.services__lead {
  grid-column: 1 / span 7;
  margin-top: 24px;
}

.services__track {
  position: relative;
}

.services__rail {
  display: none;
}

/* Standard layout (also used below 992px and without JS) */
.services__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: 64px;
  padding-inline: calc(var(--frame-x) + var(--pad));
}

@media (max-width: 991px) {
  .services__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.services__item {
  position: relative;
  padding: 24px 0 40px;
  border-top: 1px solid var(--line-20);
}

.services__title {
  margin-top: 20px;
  hyphens: manual;
  -webkit-hyphens: manual;
}

.services__text {
  max-width: 34ch;
  margin-top: 16px;
  font-size: clamp(16px, 1vw, 18px);
  color: var(--ink-72);
}

.services__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.services__tags li {
  padding: 6px 10px;
  border: 1px solid var(--line-20);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.services__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 64px;
}

.services__scroller.is-hscroll + .services__foot {
  margin-top: 0;
}

/* Horizontal scroll layout (desktop, JS enabled, no reduced motion) */
.is-hscroll .services__sticky {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

.is-hscroll .services__track {
  display: flex;
  width: max-content;
  padding: 72px calc(var(--frame-x) + var(--pad)) 0;
  will-change: transform;
}

.is-hscroll .services__list {
  display: flex;
  margin-top: 0;
  padding-inline: 0;
}

.is-hscroll .services__rail {
  display: block;
  position: absolute;
  top: 36.5px;
  left: var(--pad);
  right: 0;
  height: 0;
}

.is-hscroll .services__rail::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line-20);
}

.is-hscroll .services__rail-progress {
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--signal);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
}

.is-hscroll .services__signal {
  position: absolute;
  top: -6px;
  left: -6px;
  z-index: 2;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 6px rgba(96, 129, 251, .2), 0 0 24px rgba(96, 129, 251, .6);
}

.is-hscroll .services__item {
  flex: none;
  width: clamp(320px, 26vw, 440px);
  padding: 0 32px;
  border-top: 0;
  border-left: 1px solid var(--line-20);
}

.is-hscroll .services__title,
.is-hscroll .services__text,
.is-hscroll .services__tags li {
  transition: color .4s var(--ease);
}

/* Inactive items are dimmed by color, not by opacity, so the labels keep full contrast */
.is-hscroll .services__item:not(.is-active) .services__title {
  color: rgba(255, 255, 255, .66);
}

.is-hscroll .services__item:not(.is-active) .services__text {
  color: rgba(255, 255, 255, .62);
}

.is-hscroll .services__item:not(.is-active) .services__tags li {
  color: rgba(255, 255, 255, .66);
}

.is-hscroll .services__item::before {
  content: "";
  position: absolute;
  top: -40px;
  left: -5px;
  width: 9px;
  height: 9px;
  box-sizing: border-box;
  border: 1px solid var(--line-30);
  border-radius: 50%;
  background: var(--night);
}

.is-hscroll .services__item.is-active::before {
  border-color: var(--signal);
  background: var(--signal);
}

/* ==========================================================================
   4 Vorteile: pain points and our answers
   ========================================================================== */

.solves__lead {
  grid-column: 1 / span 7;
  margin-top: 24px;
}

/* Photo sticks beside the rows on desktop; plan table ".solves__media" */
.solves__media {
  grid-column: 1 / span 6;
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + 32px);
  margin-top: 64px;
}

/* Cut-out portrait on the surface colour: fills the width, shifted down for headroom,
   so the landscape crops below 992 px show head and shoulders */
.solves__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% clamp(16px, 2.5vw, 40px);
  border-radius: var(--radius-s);
  background: var(--surface);
}

.solves {
  --p: 1;
  position: relative;
  grid-column: 8 / span 9;
  margin-top: 64px;
  padding-left: 44px;
}

/* Rail with the signal running down as the rows are solved */
.solves::before,
.solves::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 9px;
  width: 1px;
  background: var(--line-20);
}

.solves::after {
  width: 2px;
  left: 8.5px;
  background: var(--signal);
  transform-origin: top;
  transform: scaleY(var(--p));
}

.solve {
  position: relative;
  padding: 28px 0 32px;
  border-top: 1px solid var(--line-10);
}

.solve::before {
  content: "";
  position: absolute;
  top: 33px;
  left: -40px;
  z-index: 1;
  width: 11px;
  height: 11px;
  box-sizing: border-box;
  border: 1px solid var(--line-30);
  border-radius: 50%;
  background: #ffffff;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}

.solve__pain {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(18px, 1.3vw, 22px);
  line-height: 1.3;
}

/* Strike-through drawn as a growing background line, works across line breaks */
.solve__pain-text {
  color: var(--ink-72);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 58%;
  background-size: 100% 2px;
  transition: background-size .5s var(--ease-out), color .4s var(--ease);
}

.solve__title {
  margin-top: 14px;
  transition: color .4s var(--ease) .15s;
}

.solve__text {
  max-width: 52ch;
  margin-top: 10px;
  font-size: 16px;
  color: var(--ink-72);
}

.solve.is-solved::before {
  border-color: var(--signal);
  background: var(--signal);
  box-shadow: 0 0 0 5px rgba(96, 129, 251, .18);
}

/* Unsolved look only with JS and motion; without them every row shows its solved state */
@media all { /* motion for everyone since 2026-10-20, see main.js */
  .js .solve:not(.is-solved) .solve__pain-text {
    color: var(--ink);
    background-size: 0% 2px;
  }

  .js .solve:not(.is-solved) .solve__title {
    color: var(--ink-72);
  }
}

.solves__note {
  grid-column: 8 / span 9;
  margin-top: 40px;
  padding: 20px 24px;
  border-left: 2px solid var(--signal);
  background: var(--surface);
  font-size: 16px;
  color: var(--ink-88);
}

@media (max-width: 991px) {
  .solves__lead,
  .solves__media,
  .solves,
  .solves__note {
    grid-column: 1 / -1;
  }

  .solves__media {
    position: static;
  }

  .solves__media img {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 767px) {
  .solves__media img {
    aspect-ratio: 4 / 3;
  }

  .solves {
    padding-left: 32px;
  }

  .solve::before {
    left: -28px;
  }
}

/* ==========================================================================
   5 Qualität
   ========================================================================== */

.qual__lead {
  grid-column: 1 / span 8;
  margin-top: 24px;
}

.certs {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: 80px;
}

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

.cert {
  padding-left: 20px;
  border-left: 1px solid var(--line-20);
}

.cert__code {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 40px);
  line-height: 1.05;
  text-transform: uppercase;
  hyphens: manual;
  -webkit-hyphens: manual;
}

.cert__text {
  margin-top: 12px;
  font-size: 16px;
  color: var(--ink-72);
}

/* Beside the photo from 1200 px, above it below. The list takes the height of its grid row
   and spreads it over the rows, each row's content centred between its lines; plan table
   ".qual__tests" */
.qual__tests {
  grid-column: 1 / span 6;
  display: flex;
  flex-direction: column;
  margin-top: 96px;
}

.tests {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}

.tests__row {
  flex: 1 0 auto;
  align-content: center;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 20px;
  /* 18 px up to 1470 px, then it grows with the width (the photo beside it does too) up to 1920 px */
  padding: clamp(18px, calc(1.5vw - 4px), 24.8px) 0;
}

/* Row rule drawn from the left when the row is revealed */
.tests__row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line-20);
  transform-origin: left center;
}

.tests dt {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(20px, 1.6vw, 30.72px);
  line-height: 1.1;
  text-transform: uppercase;
  hyphens: manual;
  -webkit-hyphens: manual;
}

.tests dd {
  font-size: 16px;
  color: var(--ink-72);
}

/* Landscape photo across columns 8-16, at most half the content (from 820 px) and the window
   height, flush right. The
   grid row takes the taller of photo and list: the list spreads its rows to the photo's
   height, a taller list (about 1200-1280 px) stretches the photo; plan table ".qual__media" */
.qual__media {
  grid-column: 8 / span 9;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 96px;
}

/* Container units (cqw) of the section's grid measure the content width */
.qual__grid {
  container-type: inline-size;
}

.qual__media .scan {
  flex: 1 0 auto;
  width: 100%;
  max-width: calc((100vh - var(--header-h) - 64px) * 3 / 2);
  /* between v6 (820 px cap) and v7 (always 9 columns): at most half the content, not below 820 px */
  max-width: min(calc((100vh - var(--header-h) - 64px) * 3 / 2), max(820px, 50cqw));
}

.qual__media figcaption {
  display: flex;
  margin-top: 12px;
}

/* Photo with an AOI-style scan: a line sweeps across and uncovers the image.
   Airlock photo in 3:2; where it is stretched to a taller list (about 1200-1280 px) the
   left side, door frame and wall, is cropped first; plan table ".qual__media" */
.scan {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-s);
}

.scan img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}

.scan__grid,
.scan__line {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.scan__grid {
  background-image:
    linear-gradient(rgba(96, 129, 251, .4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 129, 251, .4) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Full-width box whose right edge carries the line, moved with transform only */
.scan__line::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  background: #e8edff;
  box-shadow: 0 0 14px 3px rgba(96, 129, 251, .85);
}

@media all { /* motion for everyone since 2026-10-20, see main.js */
  .js .qual__media[data-reveal] {
    opacity: 1;
    transform: none;
  }

  .js .qual__media[data-reveal] .reveal-cover {
    display: block;
  }

  .js .qual__media[data-reveal].is-visible .reveal-cover {
    animation: scan-uncover 1.6s linear forwards;
  }

  .js .qual__media[data-reveal].is-visible .scan__line {
    animation: scan-line 1.6s linear forwards;
  }

  .js .qual__media[data-reveal].is-visible .scan__grid {
    animation: scan-grid 2.2s ease-out forwards;
  }

  .js .tests__row[data-reveal]::before {
    transform: scaleX(0);
    transition: transform .9s var(--ease-out) var(--reveal-delay, 0ms);
  }

  .js .tests__row[data-reveal].is-visible::before {
    transform: none;
  }
}

@keyframes scan-uncover {
  to {
    transform: scaleX(0);
  }
}

@keyframes scan-line {
  0% {
    opacity: 1;
    transform: translateX(-100%);
  }

  92% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(0);
  }
}

@keyframes scan-grid {
  0% {
    opacity: 0;
  }

  25% {
    opacity: .7;
  }

  100% {
    opacity: 0;
  }
}

.qual__closing {
  grid-column: 1 / span 12;
  margin-top: 96px;
}

/* Whole photo under the list, flush left, never taller than the window */
@media (max-width: 1199px) {
  .qual__tests {
    grid-column: 1 / -1;
  }

  .qual__media {
    grid-column: 1 / -1;
    align-self: auto;
    justify-self: start;
    display: block;
    width: min(100%, calc((100vh - var(--header-h) - 64px) * 3 / 2));
    margin-top: 48px;
  }

  .qual__media .scan {
    max-width: none;
  }
}

/* As wide as the closing statement below */
@media (min-width: 992px) and (max-width: 1199px) {
  .qual__media {
    grid-column: 1 / span 12;
  }
}

@media (max-width: 991px) {
  .qual__closing {
    grid-column: 1 / -1;
  }
}

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

/* ==========================================================================
   6 Branchen
   ========================================================================== */

.branchen__lead {
  grid-column: 1 / span 7;
  margin-top: 24px;
}

/* Leads spanning more than 4 columns would create implicit tracks on the mobile grid */
@media (max-width: 991px) {
  .services__lead,
  .qual__lead,
  .branchen__lead {
    grid-column: 1 / -1;
  }
}

.marquee {
  margin-top: 64px;
  padding-block: 28px;
  border-block: 1px solid var(--line-10);
  overflow: hidden;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__list {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
  padding-right: clamp(24px, 3vw, 56px);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 112px);
  line-height: 1;
  text-transform: uppercase;
}

.marquee__item {
  white-space: nowrap;
}

.marquee__dot {
  display: inline-block;
  flex: none;
  width: .18em;
  height: .18em;
  background: var(--signal);
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

.industries {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: 64px;
}

@media (max-width: 991px) {
  .industries {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.industry {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line-10);
}

.industries__no {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--ink-72);
}

.industries__name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
}

@media not all { /* reduced-motion fallback, unused since 2026-10-20 (main.js) */
  .marquee {
    display: none;
  }
}

/* ==========================================================================
   7 Praxis: cases as tabs with a journey timeline
   ========================================================================== */

.case-tabs {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 48px;
}

.case-tabs[hidden] {
  display: none;
}

.case-tab {
  min-height: 44px;
  padding: 13px 22px 12px;
  border: 1px solid var(--line-30);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}

.case-tab:hover {
  border-color: var(--signal);
}

.case-tab[aria-selected="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #ffffff;
}

/* Each case is its own grid; plan table ".case__main" / ".case__journey" */
.case {
  grid-column: 1 / -1;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 2px solid var(--ink);
}

.case[hidden] {
  display: none;
}

.case + .case {
  margin-top: 80px;
}

.js .case-tabs:not([hidden]) ~ .case + .case {
  margin-top: 48px;
}

.case__main {
  grid-column: 1 / span 7;
}

.case__journey {
  grid-column: 9 / span 8;
}

.case__title {
  margin-top: 12px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 44px);
  line-height: 1.05;
  text-transform: uppercase;
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: break-word;
}

.case__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.case__chips li {
  padding: 6px 12px;
  border: 1px solid var(--line-20);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-88);
}

.case__quote {
  margin-top: 40px;
  padding-left: 20px;
  border-left: 2px solid var(--signal);
}

.case__quote p {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-lead);
  line-height: 1.35;
}

.case__quote footer {
  display: flex;
  margin-top: 16px;
}

/* Journey: four stations on a trace */
.case__journey {
  position: relative;
  padding-left: 36px;
}

.case__journey::before,
.case__journey::after {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 5px;
  width: 1px;
  background: var(--line-20);
}

.case__journey::after {
  left: 4.5px;
  width: 2px;
  background: var(--signal);
  transform-origin: top;
}

.journey__step {
  position: relative;
  padding-bottom: 28px;
}

.journey__step:last-child {
  padding-bottom: 0;
}

.journey__step::before {
  content: "";
  position: absolute;
  top: 1px;
  left: -36px;
  z-index: 1;
  width: 11px;
  height: 11px;
  box-sizing: border-box;
  border: 2px solid var(--signal);
  border-radius: 50%;
  background: #ffffff;
}

.journey__step:last-child::before {
  background: var(--signal);
  box-shadow: 0 0 0 5px rgba(96, 129, 251, .18);
}

.journey__text {
  margin-top: 8px;
  font-size: 16px;
  color: var(--ink-88);
}

/* Panel change and journey drawing (JS enabled, no reduced motion) */
@media all { /* motion for everyone since 2026-10-20, see main.js */
  .js .case.is-active {
    animation: hero-rise .6s var(--ease-out) both;
  }

  .js .case.is-active .case__journey::after {
    animation: journey-draw .9s var(--ease-out) .15s both;
  }

  .js .case.is-active .journey__step {
    animation: hero-rise .6s var(--ease-out) both;
  }

  .js .case.is-active .journey__step:nth-child(1) { animation-delay: .15s; }
  .js .case.is-active .journey__step:nth-child(2) { animation-delay: .35s; }
  .js .case.is-active .journey__step:nth-child(3) { animation-delay: .55s; }
  .js .case.is-active .journey__step:nth-child(4) { animation-delay: .75s; }
}

@keyframes journey-draw {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

@media (max-width: 991px) {
  .case__main,
  .case__journey {
    grid-column: 1 / -1;
  }

  .case__journey {
    margin-top: 40px;
  }
}

/* ==========================================================================
   8 Ablauf: steps on a trace that fills while scrolling
   ========================================================================== */

/* Plan table ".steps": 4 columns with a horizontal trace from 992 px, one column with a vertical rail below */
.steps {
  --p: 1;
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: 80px;
  padding-top: 44px;
}

.steps__rail {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line-20);
}

.steps__rail::after {
  content: "";
  position: absolute;
  inset: -0.5px 0;
  background: var(--signal);
  transform-origin: left center;
  transform: scaleX(var(--p));
}

/* Full-length box whose far end carries the signal; moved with transform only */
.steps__head {
  position: absolute;
  inset: 0;
  transform: translateX(calc((var(--p) - 1) * 100%));
}

.steps__signal {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 6px rgba(96, 129, 251, .2), 0 0 24px rgba(96, 129, 251, .6);
}

.step {
  position: relative;
  padding-left: 20px;
  border-left: 1px solid var(--line-20);
}

/* Node where the step drops off the trace */
.step::before {
  content: "";
  position: absolute;
  top: -35px;
  left: -5.5px;
  width: 11px;
  height: 11px;
  box-sizing: border-box;
  border: 1px solid var(--signal);
  border-radius: 50%;
  background: var(--signal);
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}

.step__no {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(56px, 6vw, 112px);
  line-height: .9;
  color: var(--brand-ink);
  -webkit-text-stroke: 1.5px var(--brand-ink);
  transition: color .5s var(--ease);
}

.step__title {
  margin-top: 24px;
}

.step__text {
  margin-top: 12px;
  font-size: 16px;
  color: var(--ink-72);
}

/* Not yet reached: outlined number, hollow node (JS enabled, no reduced motion) */
@media all { /* motion for everyone since 2026-10-20, see main.js */
  .js .step:not(.is-reached) .step__no {
    color: transparent;
  }

  .js .step:not(.is-reached)::before {
    background: var(--surface);
  }

  .js .step.is-reached::before {
    box-shadow: 0 0 0 5px rgba(96, 129, 251, .18);
  }
}

.steps__cta {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 64px;
}

@media (max-width: 991px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
    padding-top: 0;
    padding-left: 36px;
  }

  .steps__rail {
    top: 6px;
    bottom: 0;
    left: 5px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .steps__rail::after {
    inset: 0 -0.5px;
    transform-origin: center top;
    transform: scaleY(var(--p));
  }

  .steps__head {
    transform: translateY(calc((var(--p) - 1) * 100%));
  }

  .steps__signal {
    top: auto;
    right: -6px;
    bottom: -6px;
  }

  .step {
    padding-left: 0;
    border-left: 0;
  }

  .step::before {
    top: 6px;
    left: -36px;
  }
}

/* ==========================================================================
   9 FAQ
   ========================================================================== */

.faq__intro {
  grid-column: 1 / span 6;
}

.faq__lead {
  margin-top: 24px;
}

.faq__call {
  margin-top: 32px;
}

.faq__list {
  grid-column: 8 / span 9;
}

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

.faq__item:last-child {
  border-bottom: 1px solid var(--line-20);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-lead);
  list-style: none;
  cursor: pointer;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__icon {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
}

.faq__icon::before {
  width: 20px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

.faq__icon::after {
  width: 1.5px;
  height: 20px;
  transform: translate(-50%, -50%);
  transition: transform .4s var(--ease);
}

.faq__item[open] .faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__answer {
  max-width: 60ch;
  padding-bottom: 24px;
}

/* Smooth open and close where the browser can animate details content */
@media all { /* motion for everyone since 2026-10-20, see main.js */
  @supports selector(::details-content) {
    :root {
      interpolate-size: allow-keywords;
    }

    .faq__item::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size .45s var(--ease-out), content-visibility .45s allow-discrete;
    }

    .faq__item[open]::details-content {
      block-size: auto;
    }
  }
}

.faq__answer p {
  font-size: var(--fs-body);
  color: var(--ink-72);
}

@media (max-width: 991px) {
  .faq__intro,
  .faq__list {
    grid-column: 1 / -1;
  }

  .faq__list {
    margin-top: 48px;
  }
}

/* ==========================================================================
   10 Kontakt
   ========================================================================== */

.kontakt {
  position: relative;
  overflow: hidden;
}

.kontakt > .container {
  position: relative;
  z-index: 1;
}

/* Decorative traces with signals running toward the call to action; plan table ".kontakt__traces" */
.kontakt__traces {
  position: absolute;
  top: 0;
  right: var(--frame-x);
  bottom: 0;
  width: calc((100% - 2 * var(--frame-x)) / 2);
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%);
  mask-image: linear-gradient(90deg, transparent 0, #000 45%);
}

.kontakt__lines path {
  fill: none;
  stroke: rgba(255, 255, 255, .22);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.kontakt__vias circle {
  fill: var(--brand);
  stroke: rgba(255, 255, 255, .45);
  stroke-width: 1.5;
}

.kontakt__pulses .pulse__halo {
  stroke: #c9d4ff;
  stroke-width: 6;
  stroke-opacity: .5;
}

.kontakt__pulses .pulse__core {
  stroke: #ffffff;
  stroke-width: 2;
}

@media (max-width: 991px) {
  .kontakt__traces {
    width: 100%;
    opacity: .35;
  }
}

@media (max-width: 767px) {
  .kontakt__traces {
    display: none;
  }
}

.kontakt__title {
  grid-column: 1 / -1;
  margin-top: 24px;
}

.contact-main {
  grid-column: 1 / span 7;
  margin-top: 64px;
}

.contact__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.contact__event {
  margin-top: 32px;
  font-size: var(--fs-small);
  color: var(--ink-72);
}

.contact__points {
  grid-column: 10 / span 7;
  margin-top: 64px;
}

.contact__point {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--line-10);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-88);
}

.contact__point::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--signal);
}

.section--brand .contact__point::before {
  background: #ffffff;
}

@media (max-width: 991px) {
  .contact-main,
  .contact__points {
    grid-column: 1 / -1;
  }

  .contact__points {
    margin-top: 48px;
  }
}

/* ==========================================================================
   11 Footer
   ========================================================================== */

.footer {
  padding-top: var(--section-y);
  padding-bottom: 32px;
  background: #ffffff;
}

.footer__brand {
  grid-column: 1 / span 6;
}

.footer__logo {
  width: auto;
  height: 32px;
}

.footer__claim {
  margin-top: 24px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  text-transform: uppercase;
}

.footer__tagline {
  margin-top: 8px;
  font-size: 16px;
  color: var(--ink-72);
}

.footer__col {
  grid-column: span 3;
  font-size: 16px;
  line-height: 1.9;
}

.footer__col--nav {
  grid-column: 8 / span 3;
}

.footer__col--contact {
  grid-column: 11 / span 3;
}

.footer__col--legal {
  grid-column: 14 / span 3;
}

.footer__col > .label {
  display: flex;
  margin-bottom: 16px;
}

.footer__links .link {
  text-decoration: none;
}

.footer__links .link:hover {
  text-decoration: underline;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: clamp(48px, 6vw, 96px);
  padding-top: 20px;
  border-top: 1px solid var(--line-10);
}

@media (max-width: 991px) {
  .footer__brand {
    grid-column: 1 / -1;
  }

  .footer__col {
    margin-top: 40px;
  }

  .footer__col--nav {
    grid-column: 1 / span 4;
  }

  .footer__col--contact {
    grid-column: 5 / span 4;
  }

  .footer__col--legal {
    grid-column: 1 / span 4;
  }
}

@media (max-width: 767px) {
  .footer__col--nav,
  .footer__col--contact,
  .footer__col--legal {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Scroll reveal (JS enabled, no reduced motion)
   ========================================================================== */

@media all { /* motion for everyone since 2026-10-20, see main.js */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .9s var(--ease-out) var(--reveal-delay, 0ms), transform .9s var(--ease-out) var(--reveal-delay, 0ms);
  }

  .js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Reduced motion and no-JS fallbacks
   ========================================================================== */

@media not all { /* reduced-motion fallback, unused since 2026-10-20 (main.js) */
  .pcb-pulses,
  .motion-toggle {
    display: none;
  }

  .faq__icon::after,
  .header__bars span {
    transition: none;
  }
}

.no-js .header__cta {
  display: inline-flex;
}

.no-js .header__toggle {
  display: none;
}

/* Without JS the call-to-action replaces the menu button on phones and needs the room:
   the logo keeps its former 22 px there */
@media (max-width: 767px) {
  .no-js .header__logo img {
    height: 22px;
  }
}

/* ==========================================================================
   10 Kontaktseite, Formulare, Messe-Dialog, Datenschutz-Banner (v9)
   Column spans per breakpoint: plan table in docs/superpowers/plans/2026-10-19-redesign-v9.md
   ========================================================================== */

.consent[hidden],
.consent__panel[hidden],
.event-meeting[hidden],
.form[hidden],
.form-success[hidden],
.form-demo[hidden],
.form-failure[hidden],
.field__error[hidden],
.form-success__demo[hidden],
.form-success__note[hidden] {
  display: none;
}

/* Intro on night blue; the E²MS ring of the hero, still and faint, fills the right side */
.contact-intro {
  --ring-w: min(30vw, 520px);
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(48px, 6vw, 96px));
  padding-bottom: clamp(56px, 6vw, 96px);
}

.contact-intro > .container {
  position: relative;
  z-index: 1;
}

.contact-intro__ring {
  position: absolute;
  top: calc(var(--header-h) + 24px);
  right: calc(var(--frame-x) + var(--pad) - 4%);
  /* ends above the benefits row, so no text runs over the lettering */
  width: var(--ring-w);
  height: auto;
  opacity: .16;
  pointer-events: none;
}

/* v11: the board of the home page hero behind the ring, still (no tilt, pulses or spin) and
   tinted in a dark blue (tools/build_contact_board.py), so it stays in the background. It fades
   out below the header and towards the text, like the shade of the home page hero. Same scale
   as on the hero: the ring takes 580 of the 2200 units of the board, whose IC centre sits at
   80 % of its width and half its height */
.contact-intro__board {
  --board-fade: linear-gradient(90deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .45) 36%, #000 62%),
    linear-gradient(180deg, transparent var(--header-h), #000 calc(var(--header-h) + 96px));
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: var(--board-fade);
  -webkit-mask-composite: source-in;
  mask-image: var(--board-fade);
  mask-composite: intersect;
}

/* the picture ends above the bottom of the intro on narrower screens: its lower edge fades out */
.contact-intro__board img {
  position: absolute;
  top: calc(var(--header-h) + 24px - var(--ring-w) * .448276);
  right: calc(var(--frame-x) + var(--pad) - 4% - var(--ring-w) * .258621);
  width: calc(var(--ring-w) * 3.793103);
  max-width: none;
  height: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 98%);
}

@media (max-width: 991px) {
  .contact-intro__ring,
  .contact-intro__board {
    display: none;
  }
}

.contact-intro__label {
  grid-column: 1 / -1;
}

.contact-intro__title {
  grid-column: 1 / span 10;
  margin-top: 20px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: .95;
  text-transform: uppercase;
  text-wrap: balance;
}

.contact-intro__lead {
  grid-column: 1 / span 10;
  max-width: 48ch;
  margin-top: 24px;
  color: var(--ink-88);
}

.contact-benefits {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: clamp(40px, 5vw, 72px);
  padding: 0;
  list-style: none;
}

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

.contact-benefit__index {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .04em;
  color: var(--brand-ink);
}

.contact-benefit__title {
  margin-top: 12px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.1;
  text-transform: uppercase;
}

.contact-benefit__text {
  margin-top: 8px;
  color: var(--ink-72);
}

@media (max-width: 1199px) {
  .contact-intro__title,
  .contact-intro__lead {
    grid-column: 1 / span 12;
  }
}

@media (max-width: 991px) {
  .contact-intro__title,
  .contact-intro__lead {
    grid-column: 1 / -1;
  }
}

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

/* Form beside direct contact, address and map */
.inquiry {
  padding-top: clamp(56px, 6vw, 96px);
}

.contact-form {
  grid-column: 1 / span 9;
  min-width: 0;
}

.contact-aside {
  grid-column: 11 / span 6;
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

@media (max-width: 991px) {
  .contact-form,
  .contact-aside {
    grid-column: 1 / -1;
  }

  .contact-aside {
    margin-top: 64px;
  }
}

.inquiry__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1;
  text-transform: uppercase;
}

.contact-form__nojs {
  display: none;
  margin-top: 24px;
  max-width: 52ch;
}

.no-js .contact-form__nojs {
  display: block;
}

.no-js .contact-form .form {
  display: none;
}

/* Form controls, shared by the contact form and the fair dialog */
.form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 32px;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 20px;
}

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

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field__label,
.form-details__summary {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-72);
}

legend.field__label {
  margin-bottom: 8px;
  padding: 0;
}

.field__optional {
  margin-left: .4em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-72);
}

.req {
  color: var(--brand-ink);
}

.field__input {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid var(--line-30);
  border-radius: var(--radius-s);
  background: var(--white);
  color: var(--black);
  font: 400 16px/1.4 var(--font-body);
  transition: border-color .2s var(--ease);
}

.field__input:hover {
  border-color: var(--ink-40);
}

.field__input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--ink);
}

.field__input::placeholder {
  color: #6b6b6b;
}

textarea.field__input {
  min-height: 160px;
  resize: vertical;
}

select.field__input {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5l4-4' fill='none' stroke='%23111' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
}

.is-invalid .field__input,
.field__input[aria-invalid="true"] {
  border-color: var(--error);
}

.field__error {
  font-size: var(--fs-small);
  color: var(--error);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  position: relative;
  display: inline-flex;
}

.chip__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 16px;
  border: 1px solid var(--line-30);
  border-radius: var(--radius-pill);
  font-size: 14px;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}

.chip__input:checked + span {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
}

.chip__input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.file-drop__box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 20px;
  border: 1px dashed var(--line-30);
  border-radius: var(--radius-s);
  background: var(--surface);
}

.file-drop__input {
  max-width: 100%;
  font: 400 14px/1.4 var(--font-body);
}

.file-drop__input::file-selector-button {
  margin-right: 14px;
  padding: 10px 16px;
  border: 1px solid var(--line-30);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--black);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}

.file-drop__hint,
.file-list,
.form__hint {
  font-size: var(--fs-small);
  color: var(--ink-72);
}

.file-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.file-list:empty {
  display: none;
}

.form-details {
  border-block: 1px solid var(--line-20);
}

.form-details__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  color: var(--ink);
  list-style: none;
  cursor: pointer;
}

.form-details__summary::-webkit-details-marker {
  display: none;
}

.form-details__summary::after {
  content: "+";
  margin-left: auto;
  font-size: 20px;
  line-height: 1;
}

.form-details[open] .form-details__summary::after {
  content: "\2013";
}

.form-details__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 8px 0 28px;
}

.field--check {
  justify-content: flex-end;
  padding-bottom: 14px;
}

.check {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 6px 14px;
  align-items: start;
}

.check__box {
  display: grid;
  place-content: center;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  border: 1.5px solid var(--ink-72);
  border-radius: 3px;
  background: var(--white);
  appearance: none;
  cursor: pointer;
}

.check__box::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--brand);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  transform: scale(0);
  transition: transform .15s var(--ease);
}

.check__box:checked {
  border-color: var(--brand);
}

.check__box:checked::before {
  transform: scale(1);
}

.check__box:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.check.is-invalid .check__box {
  border-color: var(--error);
}

.check__label {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-88);
}

.check .field__error {
  grid-column: 2;
}

/* Spam trap: off screen, never focused, never read out */
.form-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

.form-demo {
  padding: 10px 14px;
  border-radius: var(--radius-s);
  background: #eef1ff;
  color: var(--brand);
  font-size: var(--fs-small);
}

.form-failure {
  padding: 14px 16px;
  border-left: 3px solid var(--error);
  background: #fdf1ef;
  color: var(--black);
  font-size: 15px;
}

.form-success {
  margin-top: 32px;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--black);
}

.form-success__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.1;
  text-transform: uppercase;
}

.form-success > p + p {
  margin-top: 12px;
}

.form-success__demo {
  color: var(--brand);
  font-size: var(--fs-small);
}

/* Direct contact, address, map */
.contact-direct {
  --ink: #ffffff;
  --line-30: rgba(255, 255, 255, .4);
  padding: 28px;
  border-radius: var(--radius-s);
  background: var(--night);
  color: #ffffff;
}

.contact-direct .label {
  color: rgba(255, 255, 255, .78);
}

.contact-direct__person {
  margin-top: 14px;
  color: rgba(255, 255, 255, .88);
}

.contact-direct__tel {
  display: block;
  margin-top: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(28px, 2.4vw, 40px);
  line-height: 1.1;
  color: #ffffff;
  text-decoration: none;
}

.contact-direct__mail {
  display: inline-block;
  margin-top: 10px;
}

.contact-address {
  font-style: normal;
  line-height: 1.6;
}

.contact-map {
  margin: 0;
}

.contact-map img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-s);
  background: var(--night);
}

@media (min-width: 768px) and (max-width: 991px) {
  .contact-map img {
    aspect-ratio: 16 / 9;
  }
}

.contact-map__credit {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-72);
}

.contact-route {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Trade fair band on the contact page */
.contact-fair__label {
  grid-column: 1 / -1;
}

.contact-fair__title {
  grid-column: 1 / span 9;
  margin-top: 16px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: .95;
  text-transform: uppercase;
}

.contact-fair__text {
  grid-column: 1 / span 8;
  margin-top: 20px;
  font-size: var(--fs-lead);
  color: var(--ink-88);
}

.contact-fair__cta {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 32px;
}

@media (max-width: 991px) {
  .contact-fair__title,
  .contact-fair__text {
    grid-column: 1 / -1;
  }
}

/* Trade fair dialog: centred up to 640 px, full screen on phones */
.dialog {
  width: min(640px, calc(100% - 32px));
  max-width: 640px;
  max-height: min(90vh, 900px);
  /* anchored at the top instead of centred: when the short thanks replaces the form, the dialog keeps its place */
  margin: max(24px, 5vh) auto auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-s);
  background: var(--white);
  color: var(--black);
  box-shadow: 0 30px 80px rgba(14, 19, 37, .35);
  overflow: auto;
  overscroll-behavior: contain;
}

.dialog::backdrop {
  background: rgba(14, 19, 37, .72);
}

.dialog__inner {
  position: relative;
  padding: clamp(24px, 4vw, 40px);
}

.dialog__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-20);
  border-radius: 50%;
  background: var(--white);
  color: var(--black);
  cursor: pointer;
}

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

.dialog__close:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.dialog__close svg {
  width: 16px;
  height: 16px;
}

.dialog__title {
  margin-top: 12px;
  padding-right: 48px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1;
  text-transform: uppercase;
}

.dialog__meta {
  margin-top: 10px;
  color: var(--ink-72);
}

.dialog .form {
  gap: 20px;
  margin-top: 24px;
}

@media (max-width: 767px) {
  .dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }
}

.choice-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
}

.choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

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

.choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px 16px 50px;
  border: 1px solid var(--line-30);
  border-radius: var(--radius-s);
  cursor: pointer;
}

.choice:has(.choice__input:checked) {
  border-color: var(--brand);
  background: #f3f5ff;
  box-shadow: inset 0 0 0 1px var(--brand);
}

.choice__input {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--brand);
}

.choice__title {
  font-weight: 600;
}

.choice__text {
  font-size: var(--fs-small);
  color: var(--ink-72);
}

/* Privacy banner: card bottom left, full width on phones; both choices look the same */
.consent {
  --focus: var(--accent);
  position: fixed;
  z-index: 950;
  left: 24px;
  bottom: 24px;
  width: min(440px, calc(100% - 48px));
  max-height: calc(100vh - 48px);
  padding: 24px;
  overflow: auto;
  border-radius: var(--radius-s);
  background: var(--night);
  color: #ffffff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.consent:focus {
  outline: none;
}

.consent__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.consent__text {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .84);
}

.consent .link {
  color: #ffffff;
  text-decoration-color: rgba(255, 255, 255, .5);
}

.consent__panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.switch {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .84);
}

.switch__input {
  position: relative;
  width: 40px;
  height: 22px;
  margin: 0;
  border-radius: 11px;
  background: rgba(255, 255, 255, .24);
  appearance: none;
  cursor: pointer;
  transition: background-color .2s var(--ease);
}

.switch__input::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform .2s var(--ease);
}

.switch__input:checked {
  background: var(--signal);
}

.switch__input:checked::before {
  transform: translateX(18px);
}

.switch__input:disabled {
  opacity: .7;
  cursor: default;
}

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

.switch__text strong {
  display: block;
  font-weight: 600;
  color: #ffffff;
}

.consent__save {
  align-self: flex-start;
  border-color: rgba(255, 255, 255, .4);
  color: #ffffff;
}

.consent__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.consent__btn {
  padding-inline: 14px;
  border-color: #ffffff;
  background: #ffffff;
  color: var(--night);
}

.consent__more {
  grid-column: 1 / -1;
  justify-self: center;
  min-height: 44px;
  padding: 10px;
  border: 0;
  background: none;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: .3em;
  cursor: pointer;
}

.consent__btn:hover,
.consent__save:hover,
.consent__more:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.consent__more:hover {
  background: none;
  color: var(--accent);
}

@media (max-width: 767px) {
  .consent {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 60vh;
    padding: 20px max(16px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    border-radius: 0;
  }
}

.footer__consent {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* ==========================================================================
   12 Impressum, Datenschutz, Linktree (v12)
   Legal pages: the contact intro (label, title, lead, ring) on night blue, then the text.
   Columns: text 1 / span 10 from 1200 px (contents list 12 / span 5 beside it, Datenschutz),
   1 / span 12 from 992 px, full width below; lines stay under 72 characters.
   Linktree: one centred column, 480 px wide, on phones the full width minus the 20 px gutters.
   ========================================================================== */

.legal-intro {
  padding-bottom: clamp(48px, 5vw, 80px);
}

.legal {
  padding-top: clamp(56px, 6vw, 96px);
}

.legal__body {
  grid-column: 1 / span 10;
  min-width: 0;
  max-width: 72ch;
}

.legal__toc {
  grid-column: 12 / span 5;
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) + 32px);
}

@media (max-width: 1199px) {
  .legal__body {
    grid-column: 1 / span 12;
  }

  .legal__toc {
    display: none;
  }
}

@media (max-width: 991px) {
  .legal__body {
    grid-column: 1 / -1;
  }
}

.legal__body h2 {
  margin-top: 56px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.1;
  text-transform: uppercase;
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.legal__body h2:first-child {
  margin-top: 0;
}

.legal__body h3 {
  margin-top: 32px;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.4;
}

.legal__body p,
.legal__body ul,
.legal__body address,
.legal__facts {
  margin-top: 16px;
  line-height: 1.6;
  color: var(--ink-88);
}

.legal__body address {
  font-style: normal;
}

.legal__body ul {
  padding-left: 1.2em;
  list-style: disc;
}

.legal__body li + li {
  margin-top: 6px;
}

.legal__body .link {
  overflow-wrap: anywhere;
}

/* Impressum facts: label beside value from 768 px, stacked on phones */
.legal__facts {
  display: grid;
  grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
  gap: 10px 24px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line-20);
}

.legal__facts dt {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 2.1;
  color: var(--ink-72);
}

.legal__facts dd {
  margin: 0;
}

@media (max-width: 767px) {
  .legal__facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .legal__facts dd + dt {
    margin-top: 14px;
  }
}

/* Art. 21 must stand out from the rest of the text */
.legal__note {
  margin-top: 24px;
  padding: 20px 24px 22px;
  border-left: 3px solid var(--brand);
  background: var(--surface);
}

.legal__note h3 {
  margin-top: 0;
}

.legal__toc .label {
  display: flex;
  margin-bottom: 16px;
}

.legal__toc-list {
  padding-left: 0;
  border-left: 1px solid var(--line-20);
  font-size: 16px;
  line-height: 1.4;
}

.legal__toc-list li + li {
  margin-top: 10px;
}

.legal__toc-list .link {
  display: block;
  padding-left: 16px;
  text-decoration: none;
  color: var(--ink-72);
}

.legal__toc-list .link:hover {
  color: var(--brand-ink);
}

/* Linktree: link-in-bio page, no navigation */
body.page-linktree {
  background: var(--night);
}

.linktree {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(48px, 9vh, 96px) 20px 32px;
  overflow: hidden;
}

.linktree__ring {
  position: absolute;
  top: clamp(-160px, -14vw, -40px);
  left: 50%;
  width: min(150vw, 720px);
  max-width: none;
  transform: translateX(-50%);
  opacity: .1;
  pointer-events: none;
}

.linktree__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 0 auto;
  width: 100%;
  max-width: 480px;
  text-align: center;
}

.linktree__logo img {
  width: min(255px, 70vw);
  height: auto;
}

.linktree__label {
  margin-top: 48px;
}

.linktree__title {
  margin-top: 14px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(32px, 8.5vw, 44px);
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;
}

.linktree__text {
  margin-top: 16px;
  max-width: 36ch;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-72);
}

.linktree__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 40px;
}

.linktree__btn {
  width: 100%;
  min-height: 56px;
  text-align: center;
}

.linktree__social {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}

.linktree__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-30);
  border-radius: 50%;
  color: var(--ink);
  transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}

.linktree__icon svg {
  width: 20px;
  height: 20px;
}

.linktree__icon:hover,
.linktree__icon:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #111111;
}

.linktree__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin-top: auto;
  padding-top: 48px;
  font-size: var(--fs-small);
  color: var(--ink-72);
}

.linktree__footer .link {
  color: var(--ink-72);
}