/* ══════════════════════════════════════════════════════════════════════════
   iniationWARE — Industry design system.

   Ported from the prototype's design system (design/_ds/industry-.../styles.css
   — written without the glob, since "*" followed by "/" would close this
   comment). Three deliberate changes against the prototype:

   1. The prototype's @import of Google Fonts is gone. Fonts are self-hosted
      (assets/css/fonts.css) — a German site must not hand visitor IPs to a US
      CDN on page load, and it removes a render-blocking third-party round trip.
   2. Inline styles became classes. The prototype needed them; a static page
      does not, and a single cached stylesheet beats ~40 KB of repeated
      attributes on every one of the 24 pages.
   3. The type scale is legibility-first (see below). Our readers are plant
      managers and Geschäftsführer, largely 50+: the prototype's 10–13 px
      labels and 15 px navigation were decorative, not readable.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* neutral-500/600 were darkened: at #98989b / #7a7a7d they carried 2.9:1 and
     3.8:1 against the page — under WCAG AA, and the first thing to disappear
     for an ageing eye. Both now clear 4.5:1. */
  --color-neutral-500: #85858a;
  --color-neutral-600: #66666a;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;

  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-900: #1d2d3d;

  --font-heading: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Barlow", ui-sans-serif, system-ui, sans-serif;

  /* ── type scale ──────────────────────────────────────────────────────────
     In rem, not px, so the whole page follows a reader who has set a larger
     default font size in the browser — the single most common accommodation
     people make for themselves as their eyesight changes.

     Floor: 12 px for anything, 15 px for anything interactive or read as a
     sentence. Barlow Condensed is narrow, so wherever it carries small UI text
     (nav, buttons, tags) it gets a step more size and a touch more tracking
     than the body face would need. */
  --fs-micro: 0.75rem;    /* 12px — uppercase eyebrow labels, table headers */
  --fs-fine: 0.8125rem;   /* 13px — kickers, fine print */
  --fs-meta: 0.875rem;    /* 14px — breadcrumbs, captions, footer legal */
  --fs-sm: 0.9375rem;     /* 15px — dense secondary copy, list items */
  --fs-md: 1rem;          /* 16px — secondary body copy */
  --fs-base: 1.0625rem;   /* 17px — body copy */
  --fs-ui: 1.125rem;      /* 18px — navigation, buttons, form controls */
  --fs-lg: 1.1875rem;     /* 19px — intro copy */
  --fs-xl: 1.3125rem;     /* 21px — lead paragraphs */

  --wrap: 1320px;
  --gut: clamp(16px, 3vw, 32px);
  --sec: clamp(56px, 7vw, 104px);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  font-weight: 400;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.4em;
  text-wrap: balance;
}

/* Condensed tightens up badly at small sizes; below the display range the
   headings get their line-height and tracking back. */
h3, h4, h5, h6 { line-height: 1.25; letter-spacing: 0; }

p { margin: 0 0 1em; text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
figure { margin: 0; }
ul { margin: 0; padding: 0; }

a { color: var(--color-accent-700); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--color-accent-600); text-decoration: underline; }

:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--color-accent-900); color: #fff;
  padding: 14px 22px; font-family: var(--font-heading); font-size: var(--fs-ui);
}
.skip:focus { left: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut); }
.section { padding-block: var(--sec); }
.section-tight { padding-block: clamp(32px, 4vw, 56px); }
.section-top { padding-top: clamp(40px, 5vw, 80px); }
.rule-top { border-top: 1px solid var(--color-divider); }
.surface { background: var(--color-surface); border-block: 1px solid var(--color-divider); }
.muted { color: var(--color-neutral-700); }
.note { font-size: var(--fs-meta); color: var(--color-neutral-700); margin-top: 14px; }
.lead { font-size: var(--fs-xl); line-height: 1.6; color: var(--color-neutral-800); margin: 0; }
.kicker {
  font-size: var(--fs-fine); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-accent-700); margin-bottom: 18px;
}

/* — blueprint frame: registration marks at the corners of a hairline box — */
.blueprint { position: relative; border: 1px solid var(--color-divider); border-radius: 0; }
.blueprint > i {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > i::before, .blueprint > i::after { content: ""; position: absolute; background: currentColor; }
.blueprint > i::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > i::after { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .tl { top: -6px; left: -6px; }
.blueprint > .tr { top: -6px; right: -6px; }
.blueprint > .bl { bottom: -6px; left: -6px; }
.blueprint > .br { bottom: -6px; right: -6px; }

/* — buttons — */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-heading); font-weight: 600;
  font-size: var(--fs-ui); line-height: 1.25; letter-spacing: 0.015em;
  min-height: 48px; padding: 12px 24px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--color-divider); border-radius: 0; background: transparent;
  color: var(--color-text);
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); color: var(--color-bg); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-invert { background: var(--color-bg); border-color: var(--color-bg); color: var(--color-accent-900); }
.btn-invert:hover { background: #fff; border-color: #fff; color: var(--color-accent-900); }
.btn-block { width: 100%; }

.arrow::after { content: " →"; }

/* — tags — */
.tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-heading); font-size: var(--fs-md); letter-spacing: 0.04em;
  padding: 7px 15px; border: 1px solid var(--color-accent); color: var(--color-accent-700);
}
.tag-sm { font-size: var(--fs-sm); padding: 5px 12px; border-color: var(--color-divider); }

/* ── header ─────────────────────────────────────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-divider);
}
/* flex-wrap is the escape hatch for a reader running a large browser default
   font: at ~150% the wordmark plus the language switch and burger no longer fit
   a phone line, so the control group takes a row of its own — still right
   aligned — instead of the page scrolling sideways. See .brand below, which is
   what makes the row give way here rather than overflow. */
.hdr-in {
  max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut);
  min-height: 76px; display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px clamp(14px, 2vw, 28px); padding-block: 8px;
}
/* Not shrinkable, so the row wraps instead: a shrinking wordmark just spills
   its own text over the controls and pushes the burger off the right edge,
   which is what happened at a large browser default font. "GmbH" drops under
   the wordmark first, and only then does the control group take its own row. */
.brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; flex: 0 0 auto; color: var(--color-text); }
.brand:hover { text-decoration: none; color: var(--color-text); }
.brand-name { font-family: var(--font-heading); font-size: 1.5rem; letter-spacing: -0.01em; }
.brand-name b { font-weight: 600; color: var(--color-accent-700); }
.brand-suffix { font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-600); }

.nav { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px); margin-left: auto; }
.nav a {
  font-family: var(--font-heading); font-size: var(--fs-ui); letter-spacing: 0.02em;
  color: var(--color-text); padding: 6px 0 4px; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--color-accent-700); text-decoration: none; border-bottom-color: var(--color-accent-400); }
/* Bare [aria-current] on purpose: the nav marks the current page with "page"
   and the enclosing section with "true", and both carry the same marker. */
.nav a[aria-current] { color: var(--color-accent-700); border-bottom-color: var(--color-accent); }

.hdr-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 0 0 auto; }
/* Secondary weight on purpose: language and menu are wayfinding, not the call
   to action next to them. Both stay well above the 24px minimum target. */
.langsw { display: flex; border: 1px solid var(--color-divider); }
.langsw a {
  font-family: var(--font-heading); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.08em;
  padding: 8px 11px; color: var(--color-text);
}
.langsw a:hover { text-decoration: none; background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.langsw a + a { border-left: 1px solid var(--color-divider); }
.langsw a[aria-current="true"] { background: var(--color-accent); color: var(--color-bg); }

/* Built to the live site's button: no box drawn around it, a 24×20 icon whose
   three bars sit at top, middle and bottom, and the same fold into a cross when
   the menu opens. The padding is what sizes the icon inside the 48px target. */
.burger {
  width: 48px; height: 48px; display: none; padding: 14px 12px;
  flex-direction: column; justify-content: space-between; align-items: stretch;
  background: transparent; border: 0; border-radius: 6px; cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.burger span {
  display: block; width: 100%; height: 2px; border-radius: 1px; background: var(--color-text);
  transform-origin: center; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
.burger:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.burger:active { transform: scale(0.95); }
/* The cross still forms, it just arrives instead of travelling. */
@media (prefers-reduced-motion: reduce) {
  .burger, .burger span { transition: none; }
  .burger:active { transform: none; }
}
.hdr[data-open="true"] .burger span:first-child { transform: translateY(9px) rotate(45deg); }
.hdr[data-open="true"] .burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hdr[data-open="true"] .burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.mnav { display: none; border-top: 1px solid var(--color-divider); padding: 8px var(--gut) 24px; }
.mnav a {
  display: block; font-family: var(--font-heading); font-size: 1.375rem; letter-spacing: 0.01em;
  padding: 15px 0; border-bottom: 1px solid var(--color-divider); color: var(--color-text);
}
.mnav a:hover { text-decoration: none; color: var(--color-accent-700); }
.mnav a[aria-current] { color: var(--color-accent-700); }

.mnav .btn { margin-top: 18px; }
/* The open menu is taller than a phone held sideways, and a sticky header
   stays pinned — so without a cap its lower half simply cannot be reached.
   Capping the whole header to the viewport and letting the list scroll inside
   keeps every entry, including the appointment button, within reach. */
.hdr[data-open="true"] { display: flex; flex-direction: column; max-height: 100vh; max-height: 100dvh; }
/* The explicit width is not redundant: the row centres itself with `margin: 0
   auto`, and in a column flex container auto margins beat the default stretch —
   so without it the whole header row collapses to its content width and drifts
   into the middle the moment the menu opens. */
.hdr[data-open="true"] .hdr-in { width: 100%; }
.hdr[data-open="true"] .mnav { display: block; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* The switch to the burger moved from 900px to 1080px: at 18 px the five nav
   labels plus the CTA no longer fit a 900 px line, and a menu that collides is
   worse than a menu behind a button. */
@media (max-width: 1080px) {
  .nav { display: none; }
  .hdr-right .btn-cta { display: none; }
  .burger { display: flex; }
}

/* Only where the nav is actually on screen does it do the pushing, and the
   control group joins it rather than drifting further right. This has to be a
   media query and not `.nav + .hdr-right`: a hidden nav is still a sibling, so
   the plain selector also cancelled the push below 1080px — which is why the
   language switch and the burger sat next to the wordmark on a phone instead
   of in the top right corner. */
@media (min-width: 1081px) {
  .nav + .hdr-right { margin-left: 0; }
}

/* ── breadcrumb ─────────────────────────────────────────────────────────── */
.crumbs { font-size: var(--fs-meta); color: var(--color-neutral-700); padding-top: 18px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/ "; color: var(--color-neutral-500); }
.crumbs a { color: var(--color-neutral-700); }

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero { border-bottom: 1px solid var(--color-divider); }
.hero-grid {
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(40px, 6vw, 88px) var(--gut) 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(28px, 4vw, 64px); align-items: end;
}
.hero h1 { font-size: clamp(40px, 6.4vw, 84px); line-height: 0.98; margin: 0 0 18px; letter-spacing: -0.02em; }
.hero-sub {
  font-family: var(--font-heading); font-size: clamp(22px, 2.5vw, 32px);
  line-height: 1.2; color: var(--color-accent-700); margin: 0 0 26px;
}
.hero-body { max-width: 52ch; font-size: var(--fs-lg); line-height: 1.65; color: var(--color-neutral-800); margin: 0 0 30px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 44px; }
.hero-fig { margin-bottom: 44px; }
.hero-meta {
  max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.hero-meta > div { padding: 20px 0 22px 18px; border-left: 1px solid var(--color-divider); }
.hero-meta dt { font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 6px; }
.hero-meta dd { font-family: var(--font-heading); font-size: 1.5rem; margin: 0; }

/* ── page hero ──────────────────────────────────────────────────────────── */
.phero { padding-block: clamp(28px, 4vw, 56px) clamp(40px, 5vw, 72px); }
.phero-in { max-width: 62ch; }
.phero h1 { font-size: clamp(36px, 5.2vw, 68px); line-height: 1; margin: 0 0 20px; }
.phero .btn { margin-top: 28px; }
.phero-dark { background: var(--color-accent-900); color: var(--color-bg); }
.phero-dark h1 { color: var(--color-bg); }
.phero-dark .kicker { color: var(--color-accent-300); }
.phero-dark .lead { color: var(--color-accent-200); }

/* ── section head ───────────────────────────────────────────────────────── */
.head {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: baseline;
  border-top: 1px solid var(--color-text); padding-top: 16px; margin-bottom: 40px;
}
.head-num { font-family: var(--font-heading); font-size: var(--fs-meta); letter-spacing: 0.14em; color: var(--color-accent-700); }
.head h2 { font-size: clamp(28px, 3.6vw, 46px); margin: 0; flex: 1 1 280px; }
.head p { max-width: 44ch; font-size: var(--fs-md); color: var(--color-neutral-800); margin: 0; }
.head a { font-family: var(--font-heading); font-size: var(--fs-ui); white-space: nowrap; }

/* ── prose columns ──────────────────────────────────────────────────────── */
.prose { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(24px, 3vw, 56px); }
.prose p { margin: 0; font-size: var(--fs-base); line-height: 1.7; color: var(--color-neutral-800); }
.prose p:first-child { font-size: var(--fs-xl); line-height: 1.55; color: var(--color-text); }
.prose-more { margin: 24px 0 0; }

/* prose beside a photograph: the paragraphs give up their own column split and
   stack into a single measure, so the text column and the picture stay equals
   instead of the text fraying into three narrow strips next to it. */
.prose-media {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(24px, 3vw, 56px); align-items: start;
}
.prose-media .prose { grid-template-columns: 1fr; gap: 1em; max-width: 58ch; }

/* ── grids sharing a hairline (1px gap over a divider-coloured bed) ─────── */
.hairgrid {
  display: grid; gap: 1px; background: var(--color-divider);
  border: 1px solid var(--color-divider);
}
.hairgrid > * { background: var(--color-bg); }
.surface .hairgrid > * { background: var(--color-surface); }
.cols-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.stat { padding: 26px 22px; }
/* overflow-wrap is reset from the document default: these values are single
   words as often as they are numbers, and a stat that reads "Echtzei / t" is
   worse than one that sits a little tight in its cell. */
.stat b { display: block; font-family: var(--font-heading); font-weight: 600; font-size: clamp(36px, 4.4vw, 54px); line-height: 1; color: var(--color-accent-700); overflow-wrap: normal; }
.stat span { display: block; font-size: var(--fs-sm); line-height: 1.5; color: var(--color-neutral-700); margin-top: 10px; }

.kv { padding: 20px 18px; }
.kv dt, .kv b { font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; line-height: 1.25; margin-bottom: 6px; display: block; }
.kv dd, .kv span { margin: 0; font-size: var(--fs-md); line-height: 1.55; color: var(--color-neutral-700); display: block; }

.factcell { padding: 24px 20px; }
.factcell dt { font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 8px; }
.factcell dd { font-family: var(--font-heading); font-size: 1.375rem; line-height: 1.35; margin: 0; }

/* ── cards ──────────────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.cards-lg { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.card {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 28px 24px 30px; border: 1px solid var(--color-divider); background: transparent;
}
/* was --color-accent at 11px — 3.7:1, the weakest text on the page */
.card-kicker { font-size: var(--fs-fine); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); }
.card h3 { font-size: 1.625rem; margin: 0; }
/* ":not()" on all four of these is load-bearing, not cosmetic. A rule like
   ".card p" (0,1,1) outranks ".card-kicker" (0,1,0), so every <p> carrying a
   class inside one of these blocks was silently taking the body-paragraph
   styles instead of its own — the kicker rendered at 16px instead of 13px and,
   far worse, inherited "flex: 1" and stretched to eat whatever slack its card
   had left. That is why headings and text starts sat up to 27px apart across
   one row. Only the real body paragraph may grow. */
.card p:not(.card-kicker) { font-size: var(--fs-md); line-height: 1.65; color: var(--color-neutral-800); margin: 0; flex: 1; }
.card ul { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 4px 0 0; }
.card li { font-size: var(--fs-sm); line-height: 1.5; color: var(--color-neutral-700); padding-left: 16px; border-left: 1px solid var(--color-accent-300); }
.card > a { font-family: var(--font-heading); font-size: var(--fs-ui); margin-top: 4px; }

/* ── steps ──────────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.step { border-top: 2px solid var(--color-accent); padding-top: 18px; }
.step b { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 44px; line-height: 1; color: var(--color-accent-400); }
.step h3 { font-size: 1.4375rem; margin: 12px 0 10px; }
.step p { font-size: var(--fs-md); line-height: 1.65; color: var(--color-neutral-800); margin: 0; }

/* ── split (text + key/value or tag groups) ─────────────────────────────── */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(24px, 3vw, 56px); align-items: start; }
.split h2 { font-size: clamp(26px, 3vw, 40px); margin: 0 0 14px; }
.split > div > p { font-size: var(--fs-base); line-height: 1.7; color: var(--color-neutral-800); max-width: 50ch; }
.taggroups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(18px, 2vw, 28px); }
.taggroup { padding: 24px 20px; border: 1px solid var(--color-divider); display: flex; flex-direction: column; gap: 10px; }
.taggroup h3 { font-size: 1.375rem; margin: 0; }
.taggroup div { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── banner (dark accent band) ──────────────────────────────────────────── */
.banner { background: var(--color-accent-900); color: var(--color-bg); }
.banner-in {
  max-width: var(--wrap); margin: 0 auto; padding: var(--sec) var(--gut);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(30px, 4vw, 64px); align-items: center;
}
.banner .kicker { color: var(--color-accent-300); }
.banner h2 { font-size: clamp(30px, 4vw, 52px); margin: 0 0 18px; color: var(--color-bg); }
.banner p { font-size: var(--fs-lg); line-height: 1.65; color: var(--color-accent-200); margin: 0 0 28px; max-width: 52ch; }
.banner .hairgrid { background: color-mix(in srgb, var(--color-bg) 22%, transparent); border-color: color-mix(in srgb, var(--color-bg) 22%, transparent); }
.banner .hairgrid > * { background: var(--color-accent-900); }
.banner .stat b { font-size: 32px; color: var(--color-bg); }
.banner .stat span { color: var(--color-accent-300); font-size: var(--fs-meta); margin-top: 8px; }
.banner .stat { padding: 22px 18px; }

/* ── logo band ──────────────────────────────────────────────────────────── */
/* The band scrolls because the list is longer than a line, not for decoration.
   Consequences of that, in order of importance:
   - it stops for anyone who has asked their system for reduced motion,
   - it stops on hover and whenever focus lands inside, so a logo can actually
     be read and a keyboard user is never chased by a moving target,
   - it is slow: ~4.5s per mark, set per-band via --marquee-duration.
   The marks are greyed back to the page's two-colour palette and come up in
   full colour on hover, which keeps eight foreign brand colours from becoming
   the loudest thing on the page. */
.marquee { display: flex; gap: var(--marquee-gap, clamp(40px, 6vw, 88px)); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track {
  list-style: none; margin: 0; padding: 0; flex: none;
  display: flex; align-items: center; gap: var(--marquee-gap, clamp(40px, 6vw, 88px));
  animation: marquee var(--marquee-duration, 40s) linear infinite;
}
@keyframes marquee {
  /* The gap after the last item belongs to the loop, hence the calc(). */
  to { transform: translateX(calc(-100% - var(--marquee-gap, clamp(40px, 6vw, 88px)))); }
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
.logo { flex: none; display: grid; place-items: center; }
.logo img {
  height: clamp(32px, 3.6vw, 44px); width: auto; max-width: 220px; object-fit: contain;
  /* Greyed, but not faded to a whisper: at opacity 0.6 the lighter marks
     (INSYS icom, Portainer) all but vanished, which fails the same readers the
     type scale was raised for. */
  filter: grayscale(1) contrast(1.15) opacity(0.85);
  transition: filter 0.2s;
}
.marquee:hover .logo img { filter: none; }
/* A name with no logo file yet. Set in the display face so it reads as a mark
   rather than as running text, and sized to sit level with the logos. */
.logo-word {
  font-family: var(--font-heading); font-weight: 600; font-size: clamp(19px, 2vw, 25px);
  letter-spacing: 0.01em; line-height: 1.1; white-space: nowrap;
  color: var(--color-neutral-700);
}
@media (prefers-reduced-motion: reduce) {
  /* No animation at all, and the duplicate track is dropped so the row simply
     wraps onto as many lines as it needs — nothing is hidden, nothing moves. */
  .marquee { display: block; overflow: visible; mask-image: none; }
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 28px; }
  .marquee-track[aria-hidden="true"] { display: none; }
  .logo img { filter: grayscale(1) contrast(0.85) opacity(0.75); }
}

/* ── tag cloud ──────────────────────────────────────────────────────────── */
.cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.cloud-title { font-size: var(--fs-fine); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 22px; }

/* ── FAQ (native details/summary — works without JavaScript) ────────────── */
.faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 4vw, 64px); align-items: start; }
.faq-intro { border-top: 1px solid var(--color-text); padding-top: 16px; }
.faq-intro h2 { font-size: clamp(28px, 3.6vw, 46px); margin: 0; }
.faq-intro p { font-size: var(--fs-md); color: var(--color-neutral-700); margin-top: 18px; max-width: 38ch; }
.faq details { border-bottom: 1px solid var(--color-divider); }
.faq summary {
  display: flex; gap: 16px; align-items: baseline; justify-content: space-between;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-family: var(--font-heading); font-weight: 600; font-size: 1.375rem; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--color-accent-700); }
.faq summary::after { content: "+"; font-size: 26px; color: var(--color-accent-700); line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { font-size: var(--fs-base); line-height: 1.7; color: var(--color-neutral-800); padding-bottom: 22px; max-width: 62ch; }
.faq details > div p { margin: 0; }

/* ── table ──────────────────────────────────────────────────────────────── */
.tablewrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); min-width: 560px; }
.table th {
  text-align: left; font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-neutral-700); padding: 12px 8px; border-bottom: 1px solid var(--color-divider);
}
.table td { padding: 14px 8px; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.table td:first-child { font-family: var(--font-heading); font-size: var(--fs-lg); }

/* ── gallery ────────────────────────────────────────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(18px, 2vw, 28px); align-items: stretch; }
.gallery-3 { grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .gallery-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .gallery-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Equal card height per row: fixed image ratio, title, then body fills the rest. */
.gallery > article {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-width: 0;
  height: 100%;
}
.gallery > article > .fig { width: 100%; }
.gallery .photo img { object-position: center; }
.gallery h3 { font-size: 1.4375rem; margin: 16px 0 6px; }
.gallery p { font-size: var(--fs-md); line-height: 1.6; color: var(--color-neutral-700); margin: 0; }

/* ── event photo gallery (company) ───────────────────────────────────────── */
.gallery-events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(36px, 5vw, 64px);
}
.gallery-event {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  min-width: 0;
}
@media (min-width: 800px) {
  .gallery-event {
    grid-template-columns: minmax(16ch, 0.85fr) minmax(0, 1.6fr);
    align-items: start;
    gap: clamp(24px, 3vw, 40px);
  }
}
.gallery-event-copy h3 {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  margin: 0 0 8px;
  max-width: 22ch;
}
.gallery-event-copy p {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--color-neutral-700);
  margin: 0;
  max-width: 42ch;
}
.gallery-photos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
  gap: clamp(12px, 1.5vw, 18px);
}
.gallery-photos > li { min-width: 0; }
.gallery-photos .photo {
  background: color-mix(in srgb, var(--color-surface) 70%, var(--color-accent-200));
}
.gallery-photos .photo img { object-fit: contain; object-position: center; }
@media (prefers-reduced-motion: no-preference) {
  .gallery-photos .photo img {
    transition: transform 0.45s ease;
  }
  .gallery-photos > li:hover .photo img,
  .gallery-photos > li:focus-within .photo img {
    transform: scale(1.03);
  }
}

/* ── case studies ───────────────────────────────────────────────────────── */
.case {
  border-top: 1px solid var(--color-text); padding: 28px 0 clamp(36px, 4vw, 56px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(24px, 3vw, 56px);
}
.case-sector { font-size: var(--fs-fine); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 10px; }
.case h2 { font-size: clamp(26px, 3vw, 38px); margin: 0 0 14px; max-width: 22ch; }
.case p:not(.case-sector) { font-size: var(--fs-base); line-height: 1.7; color: var(--color-neutral-800); margin: 0; max-width: 50ch; }
.case .stat { padding: 20px 16px; }
.case .stat b { font-size: 30px; }
.case .stat span { font-size: var(--fs-meta); margin-top: 8px; }

/* ── person ─────────────────────────────────────────────────────────────── */
/* Two equal auto-fit columns left the portrait floating in a column twice its
   own width, because the figure is capped at 340px. The photo column is now
   sized to the photo, and the text gets the rest. */
.person { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3vw, 56px); align-items: start; }
@media (min-width: 760px) {
  .person { grid-template-columns: 340px minmax(0, 1fr); }
}
.person figure { max-width: 340px; }
.person h2 { font-size: clamp(26px, 3vw, 38px); margin: 0 0 6px; }
.person-role { font-size: var(--fs-meta); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 18px; }
.person p:not(.person-role) { font-size: var(--fs-base); line-height: 1.7; color: var(--color-neutral-800); margin: 0 0 14px; max-width: 56ch; }
.person ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.person li { font-size: var(--fs-sm); line-height: 1.5; color: var(--color-neutral-700); padding-left: 16px; border-left: 1px solid var(--color-accent-300); max-width: 62ch; }

/* ── CEO / founder greeting ─────────────────────────────────────────────── */
.greeting {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
@media (min-width: 720px) {
  .greeting { grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); }
}
.greeting > .fig { max-width: 220px; }
.greeting-copy { margin: 0; min-width: 0; }
.greeting-copy .kicker { margin-bottom: 14px; }
.greeting-copy blockquote {
  margin: 0;
  padding: 0;
  border: 0;
}
.greeting-copy blockquote p {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-text);
  margin: 0 0 16px;
  max-width: 38ch;
}
.greeting-copy blockquote p:last-child { margin-bottom: 0; }
.greeting-copy figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: clamp(20px, 2.5vw, 28px);
  padding-top: 16px;
  border-top: 1px solid var(--color-divider);
  max-width: 38ch;
}
.greeting-name {
  font-family: var(--font-heading);
  font-style: normal;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-text);
}
.greeting-role {
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.greeting-copy .btn { margin-top: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .greeting > .fig img {
    transition: transform 0.5s ease;
  }
  .greeting:hover > .fig img,
  .greeting:focus-within > .fig img {
    transform: scale(1.02);
  }
}

/* ── CTA strip ──────────────────────────────────────────────────────────── */
.ctastrip {
  border-top: 1px solid var(--color-text); padding-top: 28px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 4vw, 56px); align-items: center;
}
.ctastrip h2 { font-size: clamp(26px, 3.2vw, 42px); margin: 0 0 14px; }
.ctastrip p { font-size: var(--fs-base); line-height: 1.7; color: var(--color-neutral-800); margin: 0 0 24px; max-width: 50ch; }
/* Flex rather than the shared column grid: with three facts in a two-column
   grid the fourth cell stays empty, and the strip is exactly wide enough for
   two between roughly 790 and 1190px. Wrapped flex items take the width that
   is left instead, so the last fact simply runs the full row. */
.ctafacts { display: flex; flex-wrap: wrap; }
.ctafacts > * { flex: 1 1 180px; }
/* The cells here are half the page split three ways, the narrowest a stat ever
   gets. At the size set for numbers a word like "Echtzeit" ran a few pixels
   over and — inheriting break-word from body — split between its letters. */
.ctastrip .stat b { font-size: clamp(28px, 3vw, 40px); }

/* ── contact ────────────────────────────────────────────────────────────── */
.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(30px, 4vw, 72px); align-items: start; }
.contact h1 { font-size: clamp(36px, 5.2vw, 64px); line-height: 1; margin: 0 0 20px; }
.contact-lead { font-size: var(--fs-lg); line-height: 1.65; color: var(--color-neutral-800); margin: 0 0 32px; max-width: 46ch; }
.contact-details a { font-family: var(--font-heading); font-size: 1.3125rem; }
.contact-next { margin-top: 32px; }
.contact-next h2 { font-size: 1.375rem; margin-bottom: 12px; }
.contact-next ol { margin: 0; padding-left: 22px; font-size: var(--fs-base); line-height: 1.65; color: var(--color-neutral-800); }
.contact-next li { margin-bottom: 8px; }

/* ── form ───────────────────────────────────────────────────────────────── */
/* Labels, the topic legend and the radio options were 12–14 px — the smallest
   type on the site sat on the one screen where a reader has to be precise.
   Everything here is now ≥15 px, and the radio target ≥44 px. */
.form { position: relative; padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 18px; }
.form h2 { font-size: 1.75rem; margin: 0; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
/* Scoped with ">" on purpose. As a bare ".field label" this rule also matched
   the radio options nested inside the topic fieldset — and at (0,1,1) it beat
   ".radio" at (0,1,0), forcing them to display:block. That made every option's
   dot an inline span, so its width was ignored and it rendered as a 4 px sliver
   of border, and the option text took this rule's small label size instead of
   its own. The radios below only look right because this no longer reaches them. */
.field > label, .field-legend {
  display: block; font-size: var(--fs-sm); font-weight: 500;
  margin-bottom: 7px; color: var(--color-neutral-800);
}
.field-legend { padding: 0; }
.field .req { color: var(--color-accent-700); }
.input {
  width: 100%; min-height: 48px; padding: 11px 12px; font: inherit; font-size: var(--fs-ui);
  color: var(--color-text); background: var(--color-surface); border-radius: 0;
  border: 1px solid var(--color-divider); caret-color: var(--color-accent);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 130px; resize: vertical; line-height: 1.6; }
.radios { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; }
.radio {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: var(--fs-ui); line-height: 1.3; min-height: 44px; padding: 4px 0;
}
.radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio .dot { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--color-neutral-600); }
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 5px var(--color-bg); }
.radio input:focus-visible + .dot { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.form-hint { font-size: var(--fs-meta); line-height: 1.55; color: var(--color-neutral-700); margin: 0; }

/* ── register interest ──────────────────────────────────────────────────── */
.interest {
  display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3vw, 48px);
  padding: clamp(24px, 3vw, 44px); background: var(--color-surface);
}
@media (min-width: 820px) {
  .interest { grid-template-columns: 1.1fr 1fr; align-items: start; }
}
/* Kompakte Variante für Seiten, die schon mit einem CTA enden. Zwei schwere
   Konversionskästen übereinander lesen sich als Drängeln; diese hier ist
   sichtbar der leisere zweite Weg: keine Kachelfläche, nur eine Oberlinie,
   kleinere Überschrift, ein Satz statt eines Absatzes. */
.interest-compact {
  background: transparent; padding: clamp(24px, 3vw, 36px) 0 0;
  border-top: 1px solid var(--color-divider);
}
.interest-compact .interest-copy h2 { font-size: clamp(21px, 2.2vw, 27px); }
.interest-compact .interest-copy p { font-size: var(--fs-md); max-width: 42ch; }
@media (min-width: 820px) {
  .interest-compact { grid-template-columns: 1fr 1fr; align-items: center; }
}

.interest-copy h2 { font-size: clamp(26px, 3vw, 38px); margin: 0 0 14px; }
.interest-copy p { font-size: var(--fs-base); line-height: 1.7; color: var(--color-neutral-800); margin: 0; max-width: 46ch; }
.interest-form { display: flex; flex-direction: column; gap: 16px; }

/* The honeypot must be reachable by a bot parsing the DOM and invisible to a
   person — so it is moved out of view rather than display:none, which some
   bots check for. aria-hidden and tabindex keep it out of assistive tech. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; }

.check {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  font-size: var(--fs-ui); line-height: 1.35; min-height: 44px; padding: 2px 0;
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box {
  width: 24px; height: 24px; flex: none; border: 2px solid var(--color-neutral-600);
  background: var(--color-bg); display: grid; place-items: center;
}
.check:hover .box { border-color: var(--color-accent); }
.check .box::after {
  content: ""; width: 12px; height: 7px; border-left: 3px solid var(--color-bg);
  border-bottom: 3px solid var(--color-bg); transform: rotate(-45deg) translate(1px, -2px); opacity: 0;
}
.check input:checked + .box { background: var(--color-accent); border-color: var(--color-accent); }
.check input:checked + .box::after { opacity: 1; }
.check input:focus-visible + .box { outline: 3px solid var(--color-accent); outline-offset: 3px; }

/* Revealed by CSS, not by script: the checkbox works before site.js loads and
   still works if it never does. The :not() keeps this rule out of the way once
   the form is answered — without it, it outweighs the "ok" rule below and the
   phone number stays on screen while every other field has gone. */
.field-phone { display: none; }
.endpoint-form:not([data-state="ok"]):has(.check input:checked) .field-phone { display: block; }

/* Shared by both forms that post to the endpoint — "Interesse bekunden" and
   the contact form. Only the answer stays behind once one has gone through:
   the fields are of no further use, and leaving them invites a second send. */
.form-status { margin: 0; font-size: var(--fs-md); line-height: 1.55; }
.form-status:empty { display: none; }
.endpoint-form[data-state="sending"] .form-status { color: var(--color-neutral-700); }
.endpoint-form[data-state="ok"] .form-status { color: var(--color-accent-700); font-weight: 500; }
.endpoint-form[data-state="error"] .form-status { color: #8c2f2f; font-weight: 500; }
.endpoint-form[data-state="ok"] .field,
.endpoint-form[data-state="ok"] .form-row,
.endpoint-form[data-state="ok"] .check,
.endpoint-form[data-state="ok"] button { display: none; }

/* ── figures (inline SVG blueprint placeholders) ────────────────────────── */
.fig { position: relative; background: var(--color-surface); display: grid; place-items: center; }
.fig svg { width: 100%; height: 100%; }
.fig figcaption {
  position: absolute; inset: auto 0 0 0; text-align: center; padding: 14px;
  font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-700);
}
.fig-43 { aspect-ratio: 4 / 3; }
.fig-11 { aspect-ratio: 1 / 1; }
.fig-34 { aspect-ratio: 3 / 4; }
.fig-21 { aspect-ratio: 2 / 1; }
.fig-32 { aspect-ratio: 3 / 2; }

/* A real photo in the same frame as the blueprint placeholders. The files are
   already cut to their slot's ratio, so object-fit only guards against a later
   swap for a differently-shaped file. */
.photo { background: var(--color-surface); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
/* The placeholder caption sits over empty line art; over a photograph it needs
   its own ground to stay readable. */
.photo figcaption {
  background: color-mix(in srgb, var(--color-accent-900) 82%, transparent);
  color: var(--color-accent-200); backdrop-filter: blur(2px);
}

/* ── legal pages ────────────────────────────────────────────────────────── */
/* The measure is set on the inner wrapper, not on .legal itself: .legal shares
   its element with .wrap, and a max-width there would centre the column and
   break the left alignment every other page keeps. */
.legal { padding-block: clamp(32px, 4vw, 56px) var(--sec); }
.legal > div { max-width: 72ch; }
.legal h1 { font-size: clamp(32px, 4vw, 52px); margin-bottom: 8px; }
.legal h2 { font-size: clamp(22px, 2.4vw, 30px); margin: 40px 0 12px; padding-top: 20px; border-top: 1px solid var(--color-divider); }
.legal h3 { font-size: 1.375rem; margin: 26px 0 8px; }
.legal h4 { font-size: 1.1875rem; margin: 20px 0 6px; }
.legal p, .legal li { font-size: var(--fs-base); line-height: 1.75; color: var(--color-neutral-800); }
.legal ul, .legal ol { padding-left: 24px; margin-bottom: 1em; }
.legal li { margin-bottom: 6px; }
.legal .last-updated { font-size: var(--fs-meta); color: var(--color-neutral-700); }
.legal .content-section:first-of-type h2:first-child { border-top: 0; padding-top: 0; margin-top: 24px; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.ftr { background: var(--color-accent-900); color: var(--color-accent-200); }
.ftr a { color: var(--color-accent-200); }
.ftr a:hover { color: #fff; }
.ftr-in {
  max-width: var(--wrap); margin: 0 auto; padding: clamp(44px, 5vw, 72px) var(--gut) 32px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(26px, 3vw, 48px);
}
.ftr-brand { font-family: var(--font-heading); font-size: 1.5rem; color: var(--color-bg); margin-bottom: 12px; }
.ftr p:not(.ftr-brand) { font-size: var(--fs-md); line-height: 1.65; margin: 0; max-width: 32ch; }
.ftr h2 { font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-400); margin-bottom: 16px; font-weight: 600; }
.ftr ul { list-style: none; display: flex; flex-direction: column; gap: 11px; font-size: var(--fs-md); }
/* Marks which of the two numbers is the mobile. Smaller, but not below the
   12px floor — it still has to be readable. */
.ftr-note { font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-400); }
.ftr-bottom {
  max-width: var(--wrap); margin: 0 auto; padding: 20px var(--gut) 40px;
  border-top: 1px solid color-mix(in srgb, var(--color-bg) 20%, transparent);
  font-size: var(--fs-meta); color: var(--color-accent-400);
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between;
}
.ftr-bottom p { max-width: 68ch; margin: 0; font-size: var(--fs-meta); line-height: 1.6; color: var(--color-accent-400); }

@media print {
  .hdr, .ftr, .skip, .form { display: none; }
  body { background: #fff; }
}