/* =============================================================
   LeitArt — shared site stylesheet
   Brand tokens (from the LeitArt Design System) + common site
   chrome (top nav, mobile menu, social pillar, arrow button,
   footer, page field). One responsive sheet for every page.
   ============================================================= */

/* ---------- Webfonts: Stack Sans Headline (brand) ---------- */
@font-face {
  font-family: "Stack Sans Headline";
  src: url("assets/fonts/StackSansHeadline-ExtraLight.ttf") format("truetype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Stack Sans Headline";
  src: url("assets/fonts/StackSansHeadline-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Stack Sans Headline";
  src: url("assets/fonts/StackSansHeadline-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Stack Sans Headline";
  src: url("assets/fonts/StackSansHeadline-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Stack Sans Headline";
  src: url("assets/fonts/StackSansHeadline-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Stack Sans Headline";
  src: url("assets/fonts/StackSansHeadline-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Brand palette ---------- */
  --la-lavagrau:    #3d464c;
  --la-kupferrot:   #e64435;
  --la-sonnengelb:  #fabb00;
  --la-fischerblau: #4ca0aa;

  /* ---------- Surface neutrals ---------- */
  --la-ink:    #2e353a;
  --la-ink-2:  #3a4248;
  --la-paper:  #ffffff;
  --la-rail:   #e9ecee;

  /* ---------- Semantic ---------- */
  --fg-1: var(--la-paper);
  --fg-2: rgba(255, 255, 255, 0.72);
  --fg-3: rgba(255, 255, 255, 0.48);
  --fg-on-light: var(--la-lavagrau);
  --bg-1: var(--la-ink);
  --bg-2: var(--la-ink-2);
  --bg-paper: var(--la-paper);
  --accent-warn:    var(--la-sonnengelb);
  --accent-alert:   var(--la-kupferrot);
  --accent-calm:    var(--la-fischerblau);
  --accent-primary: var(--la-lavagrau);
  --focus-ring: var(--la-sonnengelb);

  /* ---------- Type ---------- */
  --font-display:  "Stack Sans Headline", sans-serif;
  --font-body:     "Stack Sans Headline", sans-serif;
  --font-headline: "Stack Sans Headline", sans-serif;
  --font-mono:     ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-h2:     clamp(34px,  4vw,  56px);
  --fs-body:   17px;

  --lh-tight: 1.2;
  --lh-snug:  1.15;
  --lh-base:  1.45;
  --lh-loose: 1.6;

  --ls-eyebrow: 0.18em;
  --ls-display: -0.01em;
  --ls-body:    0;

  /* ---------- Spacing (4-pt) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --r-0: 0;
  --r-pill: 9999px;

  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 600ms;

  /* page horizontal padding */
  --pad-x: 56px;
  /* Homepage type scale. Every homepage section uses only these sizes, so
     the heading-to-title ratio (~3.6 : 1, taken from "Entdecke mehr") is the
     same in every section. New sections: pick from here, no one-off sizes. */
  --hm-h2: clamp(44px, 6.4vw, 93px);
  --hm-lead: clamp(20px, 2.1vw, 30px);
  --hm-h3: clamp(20px, 1.8vw, 26px);
  --hm-quote: clamp(17px, 1.3vw, 19px);
  --hm-body: clamp(15px, 1.1vw, 16px);
  --hm-meta: 13px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--la-ink);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: calc(var(--fs-body) + 2px);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-headline);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  margin: 0;
}
/* Every headline (h1/h2) shares one line-height, every sub-headline (h3/h4)
   shares another — kept as two tokens so nothing overrides them with a
   one-off value that risks descenders/ascenders clashing across lines. */
h1, h2 {
  line-height: var(--lh-tight);
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* A gradient clipped to text only paints within the element's own box —
     any glyph pixels that overflow it end up with nothing to show through
     (invisible, not just visually clipped). Force in-word breaks so long
     compound words/headlines never overflow their container in the first
     place. */
  overflow-wrap: break-word;
}
h3, h4 { line-height: var(--lh-snug); }

a { color: inherit; }
img { max-width: 100%; }

::selection { background: var(--la-sonnengelb); color: var(--la-lavagrau); }

/* =============================================================
   Page field — the brand dark gradient ground (fixed)
   ============================================================= */
.la-page {
  background:
    radial-gradient(70% 55% at 22% 18%, rgba(61, 70, 76, 0.55) 0%, rgba(61, 70, 76, 0) 65%),
    radial-gradient(60% 45% at 82% 78%, rgba(61, 70, 76, 0.32) 0%, rgba(61, 70, 76, 0) 70%),
    linear-gradient(180deg, #2e353a 0%, #2a3035 60%, #23282c 100%);
  background-attachment: fixed;
  color: var(--fg-1);
  min-height: 100vh;
  position: relative;
  overflow-x: clip;
}

/* Fine technical dot-grid overlay — the "coordinate system" texture.
   Sits above the gradient, below content. Very subtle. */
.la-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.15) 60%, rgba(0,0,0,0));
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.15) 60%, rgba(0,0,0,0));
}

.la-page > * { position: relative; z-index: 1; }

/* =============================================================
   Top navigation
   ============================================================= */
.la-nav {
  display: flex;
  align-items: center;
  padding: 20px var(--pad-x);
  gap: 32px;
  position: sticky;
  top: 0;
  z-index: 20;
  /* scroll state: subtle Ink tint + blur + hairline that fade in */
  background: rgba(46, 53, 58, 0);
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  transition: background var(--dur-base) var(--ease-out-expo),
              border-color var(--dur-base) var(--ease-out-expo),
              padding var(--dur-base) var(--ease-out-expo),
              backdrop-filter var(--dur-base) var(--ease-out-expo);
}
.la-nav.is-scrolled {
  background: rgba(40, 46, 51, 0.62);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  padding-top: 12px;
  padding-bottom: 12px;
}
.la-nav__brand { display: inline-flex; flex: 0 0 auto; }
.la-nav__brand img {
  width: 130px;
  display: block;
  margin-left: -14px;
}
.la-nav__links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 44px);
  margin: 0 0 0 auto;
  padding: 0;
}
.la-nav__links a, .la-nav__has > span {
  color: #fff;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease-out-expo);
  position: relative;
  padding-bottom: 4px;
}
.la-nav__links a:hover { opacity: 0.62; }
.la-nav__links a.is-current, .la-nav__has > span.is-current { opacity: 1; }
.la-nav__links a.is-current::after, .la-nav__has > span.is-current::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: #fff;
}
.la-nav__has > span { cursor: default; }

/* Stations of the data journey (Integration / Analyse / Aktion) in the
   "Leistungen" dropdown: a small square in the station color, matching the
   homepage app simulation. Use cases under "Lösungen in Aktion" get the
   same square, colored by their primary pillar. */
.la-nav__pillar::before, .la-nav__usecase::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  margin-right: -2px; background: var(--ac); flex: 0 0 auto;
}

/* Primary CTA — the only button in the nav */
.la-nav__cta {
  flex: 0 0 auto;
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap;
  color: var(--la-ink); background: #fff; text-decoration: none;
  padding: 10px 18px; border-radius: 999px;
  transition: background var(--dur-fast) var(--ease-out-expo);
}
.la-nav__cta:hover { background: var(--la-sonnengelb); }

/* Dropdowns — the stations under "Leistungen", the use cases grouped like
   /loesungen-in-aktion */
.la-nav__has { position: relative; }
/* invisible bridge across the gap so the panel stays open while the
   cursor travels from the nav item down into the dropdown */
.la-nav__has::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; }
.la-nav__sub {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px);
  width: max-content; padding: 16px; z-index: 30;
  background: rgba(34, 39, 43, 0.92); backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 18px 0 18px 0;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  display: grid; grid-template-columns: repeat(3, auto); gap: 12px 8px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out-expo), transform var(--dur-base) var(--ease-out-expo);
}
.la-nav__has:hover .la-nav__sub,
.la-nav__has:focus-within .la-nav__sub { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.la-nav__sub a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; border-radius: 12px 0 12px 0;
  font-family: var(--font-body); font-weight: 300; font-size: 14px; letter-spacing: 0; text-transform: none;
  color: rgba(255,255,255,0.82); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out-expo), color var(--dur-fast) var(--ease-out-expo);
}
.la-nav__sub a::after { display: none; }
.la-nav__group { display: flex; flex-direction: column; gap: 2px; }
.la-nav__grouptitle { padding: 6px 16px 4px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.la-nav__sub a:hover { background: rgba(255,255,255,0.08); color: #fff; opacity: 1; }
.la-nav__sub a.is-current { background: rgba(255,255,255,0.06); color: #fff; }

/* Mobile fullscreen menu — station and use-case sublists */
.la-menu__sub { list-style: none; margin: 2px 0 0; padding: 0 0 0 4px; display: flex; flex-direction: column; }
.la-menu__sub li { transition: none; }
.la-menu .la-menu__sub a, .la-menu__sub a {
  font-family: var(--font-body); font-weight: 300; font-size: 17px; letter-spacing: 0;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.06); color: rgba(255,255,255,0.74);
  display: flex; gap: 16px;
}
.la-menu__grouptitle { padding: 16px 0 2px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.la-menu__pillar a, .la-menu__usecase a { position: relative; }
.la-menu__pillar a::before, .la-menu__usecase a::before { content: ""; position: absolute; left: -20px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: var(--ac); }
.la-menu li a.la-menu__cta { display: inline-block; margin-top: 22px; padding: 12px 26px; border: 0; border-radius: 999px; background: #fff; color: var(--la-ink); font-size: 20px; }

/* Language toggle */
/* One link that always switches to the other language, wherever it is
   clicked; the white pill marks the current one. */
.la-lang {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  gap: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out-expo);
}
.la-lang span {
  color: rgba(255,255,255,0.65);
  font-family: var(--font-body);
  font-weight: 600; font-size: 13px; letter-spacing: 0.06em;
  padding: 6px 14px; border-radius: 999px;
  transition: background var(--dur-fast) var(--ease-out-expo), color var(--dur-fast) var(--ease-out-expo);
}
.la-lang:hover { border-color: rgba(255,255,255,0.6); }
.la-lang:hover span:not(.is-active) { color: #fff; }
.la-lang span.is-active { background: #fff; color: var(--la-lavagrau); }

/* Burger (hidden on desktop) */
.la-burger {
  appearance: none;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  width: 42px; height: 42px;
  display: none;
  place-items: center;
  cursor: pointer;
  position: relative;
}
.la-burger span {
  display: block; width: 17px; height: 1.5px; background: #fff;
  position: absolute;
  transition: transform var(--dur-base) var(--ease-out-expo), opacity var(--dur-fast);
}
.la-burger span:nth-child(1) { transform: translateY(-5px); }
.la-burger span:nth-child(3) { transform: translateY(5px); }
.la-burger.is-open span:nth-child(1) { transform: rotate(45deg); }
.la-burger.is-open span:nth-child(2) { opacity: 0; }
.la-burger.is-open span:nth-child(3) { transform: rotate(-45deg); }

/* =============================================================
   Social pillar (desktop, fixed right)
   ============================================================= */
.la-social {
  position: absolute;
  top: 112px; right: var(--pad-x);
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
  z-index: 15;
}
.la-social li a {
  display: block; width: 56px; height: 56px;
  transition: opacity var(--dur-fast) var(--ease-out-expo);
}
.la-social li a img { width: 100%; height: 100%; display: block; }
.la-social li a:hover { opacity: 0.5; }

/* =============================================================
   Mobile full-screen menu (shared)
   ============================================================= */
.la-menu {
  position: fixed;
  inset: 0 0 0 45px;
  height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  z-index: 19;
  background:
    radial-gradient(70% 55% at 22% 18%, rgba(61, 70, 76, 0.65) 0%, rgba(61, 70, 76, 0) 65%),
    linear-gradient(180deg, #2e353a 0%, #23282c 100%);
  padding: 120px 28px 40px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity var(--dur-base) var(--ease-out-expo), transform var(--dur-base) var(--ease-out-expo);
}
.la-menu.is-open { opacity: 1; pointer-events: auto; transform: none; }
.la-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.la-menu li {
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo);
}
.la-menu.is-open li { opacity: 1; transform: none; }
.la-menu li a, .la-menu li.u-s1 > span {
  display: block; color: #fff; text-decoration: none;
  font-family: var(--font-headline); font-weight: 700;
  font-size: 32px; letter-spacing: -0.01em;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.la-menu li a.is-current, .la-menu li.u-s1 > span.is-current { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.la-menu__social { margin-top: 14px; display: flex; justify-content: flex-end; gap: 2px; }
.la-menu__social a { display: block; width: 52px; height: 52px; transition: opacity var(--dur-fast) var(--ease-out-expo); }
.la-menu__social a:hover { opacity: 0.5; }
.la-menu__social a img { width: 100%; height: 100%; display: block; }

/* =============================================================
   Arrow button — the brand's only button
   ============================================================= */
.la-arrow {
  width: 64px; height: 64px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: #1d2226;
  cursor: pointer;
  display: inline-grid; place-items: center;
  transition: opacity var(--dur-base) var(--ease-out-expo), background var(--dur-base) var(--ease-out-expo), transform var(--dur-fast);
  padding: 0; flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25), 0 10px 24px rgba(0,0,0,0.30);
  text-decoration: none;
}
.la-arrow img { width: 22px; height: 22px; filter: invert(1); }
/* Hover: keep the dark fill, drop to 50% opacity (per design system) */
.la-arrow:hover { opacity: 0.5; }
.la-arrow:active { transform: scale(0.96); }
.la-arrow:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.la-arrow--sm { width: 52px; height: 52px; }
.la-arrow--sm img { width: 18px; height: 18px; }

/* Text link with inline arrow */
.la-textlink {
  display: inline-flex; align-items: center; gap: 12px;
  color: #fff; text-decoration: none;
  font-family: var(--font-body); font-weight: 600;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  transition: gap var(--dur-base) var(--ease-out-expo), opacity var(--dur-fast);
}
.la-textlink::after {
  content: ""; width: 28px; height: 1px; background: #fff;
  transition: width var(--dur-base) var(--ease-out-expo);
}
.la-textlink:hover { opacity: 0.85; }
.la-textlink:hover::after { width: 44px; }

/* =============================================================
   Shared section primitives
   ============================================================= */
.la-eyebrow {
  font-family: var(--font-body); font-weight: 700;
  font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-3);
  display: inline-flex; align-items: center; gap: 12px;
}
.la-eyebrow::before {
  content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.7;
}

.la-wrap { padding-left: var(--pad-x); padding-right: var(--pad-x); }

/* Reveal-on-scroll utility */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 800ms var(--ease-out-expo), transform 800ms var(--ease-out-expo);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* Auto fade-in applied to every heading that isn't already inside a
   .reveal block (via site.js) — identical motion to .reveal (same 26px
   lift, same 800ms brand easing), so every major heading site-wide shares
   one fade-in, whether it fades in on its own or as part of a revealed
   block. */
.fade-head {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 800ms var(--ease-out-expo), transform 800ms var(--ease-out-expo);
  will-change: opacity, transform;
}
.fade-head.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fade-head { transition: none; opacity: 1; transform: none; }
}

/* =============================================================
   Footer
   ============================================================= */
.la-footer { position: relative; padding: 80px var(--pad-x) 36px; z-index: 1; }

/* Newsletter signup — same corporate-gray card language as .ab-career/
   .hm-bookus__box. The visual reuses the Integration pillar page's own
   animated hero keyvisual (IntegrationKeyvisual.svelte/.ikv3) rather than
   a new graphic — same window-chrome frame cycling through its three
   scenes, scaled down to fit this card. */
.la-footer__newsletter {
  position: relative; overflow: hidden;
  margin-bottom: 56px;
  background: rgba(58,66,72,0.6);
  border-radius: 40px 0 40px 0;
  padding: 48px 56px;
  min-height: 520px;
  display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
}
/* Copy (text + CTA) is kept to a fixed-width column on the left so it can
   never grow into the keyvisual's space on the right. */
.la-footer__newsletter-copy { position: relative; z-index: 1; flex: 1 1 420px; max-width: 560px; display: flex; flex-direction: column; gap: 30px; }
.la-footer__newsletter-visual {
  position: absolute; z-index: 0;
  top: 50%; right: 48px; width: 560px; transform: translate(-200px, -50%);
}
.la-footer__newsletter-txt .la-eyebrow { margin-bottom: 16px; }
.la-footer__newsletter-txt h3 { font-size: clamp(34px, 4.2vw, 54px); line-height: var(--lh-tight); margin: 0 0 14px; }
.la-footer__newsletter-txt p { font-weight: 300; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.8); margin: 0; }
.la-footer__newsletter-cta { display: flex; align-items: center; gap: 18px; }
.la-footer__newsletter-cta .la-arrow { background: var(--la-fischerblau); border-color: #fff; }
.la-footer__newsletter-cta .la-textlink { flex-direction: row-reverse; }
.la-footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 0.8fr 0.9fr 1.1fr;
  gap: 48px; align-items: start;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
/* The logo PNG has transparent padding on every side around the wordmark
   itself (canvas 450x264, visible mark x:81-369, y:82-182) — pulled up so
   the visible top lines up with the "Unternehmen" column heading next to
   it, and pulled left (81/450 of the 130px render width = ~23.4px) so the
   visible wordmark's left edge lines up with the address text below it,
   not the invisible canvas edge. */
.la-footer__brandcol img { width: 130px; display: block; margin: -27px 0 18px -23.4px; }
.la-footer__col h4 {
  font-family: var(--font-body); font-weight: 700;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); margin: 0 0 14px;
}
.la-footer__col p {
  font-weight: 300; font-size: 15px; line-height: 1.7;
  color: rgba(255,255,255,0.78); margin: 0;
}
.la-footer__col a {
  color: rgba(255,255,255,0.78); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out-expo);
}
.la-footer__col a:hover { color: #fff; }
.la-footer__col p b { color: #fff; font-weight: 700; }
.la-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.la-footer__links a {
  font-weight: 300; font-size: 13px; color: rgba(255,255,255,0.78);
  text-decoration: none; transition: color var(--dur-fast) var(--ease-out-expo);
}
.la-footer__links a:hover { color: #fff; }
.la-footer__social { display: flex; gap: 2px; margin: 6px 0 0 -8px; }
.la-footer__social a { display: block; width: 52px; height: 52px; transition: opacity var(--dur-fast) var(--ease-out-expo); }
.la-footer__social a:hover { opacity: 0.5; }
.la-footer__social a img { width: 100%; height: 100%; display: block; }

/* Trust seals (ISO/BARC/Qlik), small-format, site-wide — footer only. */
.la-footer__seals { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.la-footer__seals-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.la-footer__seals-row img { width: auto; height: 55px; }
/* The ISO seal PNG has ~7% transparent padding on its left (canvas 360x360,
   visible mark x:25-335) — pulled left so the visible badge, not the empty
   canvas edge, lines up flush with the caption text below. The other two
   seals already touch their canvas edges. */
.la-footer__seals-row img:first-child { margin-left: -3.8px; }
.la-footer__seals-caption { margin: 0; font-weight: 300; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.5); }
.la-footer__legal {
  padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  color: rgba(255,255,255,0.5);
  font-family: var(--font-body); font-weight: 300; font-size: 12px;
}
.la-footer__legal a {
  color: rgba(255,255,255,0.7); text-decoration: none; letter-spacing: 0.06em;
  transition: color var(--dur-fast) var(--ease-out-expo);
}
.la-footer__legal a:hover { color: #fff; }
.la-footer__legal .sep { opacity: 0.4; }
.la-footer__legal .grow { margin-left: auto; }

/* =============================================================
   RESPONSIVE — tablet / mobile
   ============================================================= */
@media (max-width: 960px) {
  :root { --pad-x: 24px; }
  .la-nav { padding: 18px 24px; gap: 16px; }
  .la-nav__links { display: none; }
  .la-lang { display: none; }
  .la-burger { display: grid; margin-left: 0; }
  .la-nav__cta { margin-left: auto; padding: 9px 14px; font-size: 11px; }
  .la-nav__brand img { width: 104px; margin-left: 0; }
  .la-social { display: none; }
  .la-footer { padding: 56px 24px 28px; }
  .la-footer__grid { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
  .la-footer__brandcol, .la-footer__seals { grid-column: 1 / -1; }
  /* Below desktop width, the keyvisual no longer fits beside the copy
     column without overlapping it (its absolute positioning assumes the
     copy's own max-width leaves it clear) — stack it under the heading and
     teaser instead of overlaying them. */
  .la-footer__newsletter { padding: 32px; margin-bottom: 40px; min-height: 0; flex-direction: column; align-items: stretch; }
  .la-footer__newsletter-copy { order: 1; max-width: none; }
  .la-footer__newsletter-visual {
    order: 2; position: static;
    width: 100%; max-width: 420px; margin: -112px auto 0;
    top: auto; right: auto; transform: none; opacity: 1;
  }
}

@media (max-width: 560px) {
  /* The two link columns stay side by side so the footer doesn't get too long. */
  .la-footer__grid { grid-template-columns: 1fr 1fr; }
  .la-footer__contactcol { grid-column: 1 / -1; }
  .la-footer__seals-row { flex-wrap: wrap; row-gap: 14px; }
  .la-footer__seals-row img { height: 32px; }
  .la-footer__seals-row img:first-child { margin-left: -2.2px; }
  .la-footer__newsletter { padding: 28px 24px; min-height: 0; }
  .la-footer__newsletter-visual { max-width: 320px; }
}

/* Nav items + CTA + language toggle: tighten type and spacing on
   laptop widths, and hand over to the burger menu before they collide. */
@media (min-width: 961px) and (max-width: 1439px) {
  .la-nav { gap: 24px; }
  .la-nav__links { gap: clamp(16px, 1.6vw, 28px); }
  .la-nav__links a { font-size: 12px; letter-spacing: 0.12em; }
  .la-nav__cta { letter-spacing: 0.12em; padding: 10px 16px; }
}
@media (min-width: 961px) and (max-width: 1179px) {
  .la-nav__links, .la-lang { display: none; }
  .la-burger { display: grid; margin-left: 0; }
  .la-nav__cta { margin-left: auto; }
}
@media (min-width: 1180px) {
  .la-menu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}


/* =================================================================
   DATAPLUS TABLET KEYVISUAL (from tablet.css)
   ================================================================= */
/* =============================================================
   LeitArt — DataPlus tablet keyvisual (CSS recreation)
   A faithful, themeable rebuild of the Dataplus dashboard tablet
   used on the Finanzplanung hero. Fixed design size 1000×700;
   scaled to its container by tablet.js. Theme via tabletHTML(cfg).
   ============================================================= */

.kv-tablet { position: relative; width: 100%; }
.kv-tablet__scale { position: relative; transform-origin: top left; }

.tablet {
  width: 1000px; height: 700px; box-sizing: border-box;
  position: relative; padding: 18px;
  border-radius: 46px;
  background: linear-gradient(160deg, #1b1f23 0%, #0c0e10 60%, #070809 100%);
  box-shadow: 0 30px 70px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.04);
  font-family: var(--font-body, sans-serif);
}
/* Camera module — protrudes above the top bezel, centred */
.tablet__cam {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  width: 168px; height: 30px; border-radius: 16px;
  background: linear-gradient(180deg, #4a5157, #353b40);
  display: flex; align-items: center; justify-content: center; gap: 16px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.4); z-index: 6;
}
.tablet__cam i { width: 9px; height: 9px; border-radius: 999px; background: #1b1e21; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }

/* Screen */
.tablet__screen {
  position: relative; width: 100%; height: 100%; border-radius: 28px; overflow: hidden;
  display: grid; grid-template-columns: 176px 1fr 154px; background: #2e353a;
}

/* ---------- Left sidebar (DataPlus app shell) ---------- */
.tbl-side { background: #39424a; padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; }
.tbl-logo { display: block; }
.tbl-logo img { display: block; width: 116px; height: auto; }
.tbl-role { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.tbl-role b { font-weight: 700; font-size: 13px; color: #fff; }
.tbl-ic { width: 34px; height: 34px; border-radius: 999px; border: 2px solid #fff; display: grid; place-items: center; flex: 0 0 auto; }
.tbl-ic svg { width: 17px; height: 17px; stroke: #fff; fill: none; }
.tbl-hr { height: 1px; background: rgba(255,255,255,0.18); margin: 2px 0; }
.tbl-h { font-weight: 700; font-size: 11px; letter-spacing: 0.04em; color: #fff; }
.tbl-ext { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 2px 0; }
.tbl-ext i { display: grid; place-items: center; }
.tbl-ext i img { display: block; width: 60px; height: 60px; object-fit: contain; }
.tbl-nav { display: flex; flex-direction: column; gap: 11px; margin-top: 2px; }
.tbl-nav a { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,0.66); font-size: 12.5px; font-weight: 300; text-decoration: none; }
.tbl-nav a svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: 0 0 auto; }
.tbl-nav a.on { color: #fff; font-weight: 700; }

/* ---------- Main panel ---------- */
.tbl-main { background: #f3f5f6; padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.tbl-top { display: flex; align-items: center; justify-content: space-between; }
.tbl-title { font-family: var(--font-headline, sans-serif); font-weight: 700; font-size: 26px; color: #2f373d; letter-spacing: -0.01em; }
.tbl-top__r { display: flex; align-items: center; gap: 10px; }
.tbl-lang { font-size: 11px; font-weight: 600; color: #9aa3a8; letter-spacing: 0.04em; }
.tbl-cic { width: 34px; height: 34px; border-radius: 999px; border: 2px solid #2f373d; display: grid; place-items: center; }
.tbl-cic svg { width: 16px; height: 16px; stroke: #2f373d; fill: none; stroke-width: 2; }

.tbl-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tbl-kpi { background: #fff; border-radius: 14px; padding: 13px 14px 14px; box-shadow: 0 6px 16px rgba(0,0,0,0.07); }
.tbl-kpi.is-dim { opacity: 0.55; }
.tbl-kpi__h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tbl-kpi__h b { font-family: var(--font-headline, sans-serif); font-weight: 700; font-size: 16px; color: #3a4248; }
.tbl-badge { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; margin-left: auto; }
.tbl-kpi__v { font-family: var(--font-headline, sans-serif); font-weight: 700; font-size: 24px; color: #2f373d; letter-spacing: -0.01em; }
.tbl-kpi__t { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.tbl-kpi__pct { font-weight: 700; font-size: 12px; color: #4ca0aa; }
.tbl-kpi__lbl { font-weight: 300; font-size: 10px; line-height: 1.25; color: #9aa3a8; }
.tbl-spark { width: 16px; height: 12px; }

.tbl-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tbl-card { background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: 0 6px 16px rgba(0,0,0,0.07); }
.tbl-card__h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tbl-card__h b { font-family: var(--font-headline, sans-serif); font-weight: 700; font-size: 15px; color: #3a4248; }
.tbl-drop { display: inline-flex; align-items: center; gap: 6px; background: #eef1f2; border-radius: 999px; padding: 4px 10px; font-size: 10px; color: #7e878d; font-weight: 600; }
.tbl-drop svg { width: 9px; height: 9px; stroke: #7e878d; fill: none; stroke-width: 2.5; }
.tbl-pct { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #4ca0aa; margin-bottom: 8px; }

/* gantt */
.tbl-gantt { display: flex; flex-direction: column; gap: 6px; }
.tbl-gantt span { height: 8px; border-radius: 999px; background: #cfe0e3; }
.tbl-gantt span.a { background: #9cc6cc; }
.tbl-gantt span.b { background: #4ca0aa; }
.tbl-gantt span.dk { background: #b6c0c4; }
/* bars */
.tbl-bars { display: flex; align-items: flex-end; gap: 4px; height: 86px; }
.tbl-bars i { flex: 1; border-radius: 3px 3px 0 0; background: #4ca0aa; display: block; }
.tbl-bars i.l { background: #cfe0e3; }

.tbl-table { background: #fff; border-radius: 14px; padding: 14px 16px 16px; box-shadow: 0 6px 16px rgba(0,0,0,0.07); flex: 1; }
.tbl-table__cols { display: flex; gap: 10px; margin: 10px 0 8px; }
.tbl-table__cols span { flex: 1; font-size: 10.5px; font-weight: 700; color: #3a4248; }
.tbl-table__cols span:last-child { flex: 0 0 64px; text-align: center; color: #7e878d; }
.tbl-row { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.tbl-row span { flex: 1; height: 16px; border-radius: 999px; background: #eef1f2; }
.tbl-chip { flex: 0 0 64px; text-align: center; font-size: 10px; font-weight: 700; color: #fff; background: #4ca0aa; border-radius: 999px; padding: 4px 0; }
.tbl-chip.y { background: #4ca0aa; }

/* ---------- Right sidebar ---------- */
.tbl-r { background: #39424a; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.tbl-r__lbl { font-size: 12px; font-weight: 700; color: #fff; line-height: 1.15; }
.tbl-r__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tbl-r__drop { display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: 8px; padding: 7px 10px; font-size: 11px; color: #7e878d; font-weight: 600; }
.tbl-r__drop svg { width: 10px; height: 10px; stroke: #7e878d; fill: none; stroke-width: 2.5; }
.tbl-r__box { background: #fff; border-radius: 12px; height: 74px; }
.tbl-r__role { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tbl-r__role b { font-size: 11.5px; font-weight: 600; color: #fff; line-height: 1.15; }
.tbl-av { width: 30px; height: 30px; border-radius: 999px; border: 2px solid #fff; display: grid; place-items: center; flex: 0 0 auto; }
.tbl-av svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 1.8; }


/* =================================================================
   USE-CASE SUB-PAGES (from usecase.css)
   ================================================================= */
/* =============================================================
   LeitArt — Use-case sub-page styles (shared, desktop)
   Look & structure mirror the Budget- & Finanzplanung page:
   asymmetric borderless content boxes with a coloured hover bar,
   coloured arrow buttons, brand "disc" numbers, CSS tablet hero.
   ============================================================= */

/* ---------- Hero ---------- */
.uc-hero {
  position: relative; padding: 36px var(--pad-x) 84px;
  display: grid; grid-template-columns: 0.92fr 1.28fr;
  align-items: center; gap: 40px; min-height: 600px;
}
.uc-hero__inner { position: relative; z-index: 2; max-width: 620px; }
.uc-hero__title {
  font-size: clamp(46px, 5.4vw, 80px); line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 0;
}
.uc-hero__sub { margin-top: 22px; max-width: 470px; font-weight: 300; font-size: 18.5px; line-height: 1.62; color: rgba(255,255,255,0.82); }
.uc-hero__cta { margin-top: 32px; display: flex; align-items: center; gap: 18px; }

.uc-hero__visual { position: relative; z-index: 1; justify-self: end; width: 100%; margin-top: 16px; }
/* Leistungen and station heroes only — nudge the wireframe-cube keyvisual 30px lower. */
.tech-hero .uc-hero__visual { margin-top: 46px; }
.uc-hero__visual .kv-tablet {
  position: relative; z-index: 1; width: 78%; margin-left: auto; margin-right: auto;
  opacity: 0; transform: translateY(22px) scale(0.985);
  animation: uc-tablet-in 1100ms var(--ease-out-expo) 200ms both;
}
@keyframes uc-tablet-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .uc-hero__visual .kv-tablet { opacity: 1; transform: none; animation: none; } }

/* ---------- Section frame ---------- */
.uc-section { position: relative; padding: 84px var(--pad-x); z-index: 1; }
.uc-section--tight { padding-top: 24px; }
.uc-chaphead { display: flex; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: 44px; }
.uc-chaphead h2 { font-size: clamp(40px, 5.2vw, 76px); line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 0; }
.uc-chaphead p { margin: 0 0 6px; max-width: 420px; font-weight: 300; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.7); }
/* Nudge right so this intro lines up with the "Data Quality & Governance"
   box (2nd column of .uc-keys--3) directly below it. */
#plattform .uc-chaphead p { margin-left: 16px; }
@media (max-width: 960px) {
  .uc-chaphead { flex-direction: column; align-items: flex-start; }
  .uc-chaphead p { max-width: 100%; }
}

/* ---------- Content module ---------- */
.uc-mod {
  position: relative; display: grid; grid-template-columns: 1.02fr 0.98fr; align-items: stretch;
  background: rgba(58,66,72,0.42); border: 0; border-radius: 56px 0 56px 0; overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out-expo), background var(--dur-base) var(--ease-out-expo);
}
.uc-mod::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--ac, var(--la-fischerblau)); transform: scaleY(0); transform-origin: top; z-index: 3;
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.uc-mod:hover { background: rgba(64,73,80,0.6); transform: translateY(-3px); }
.uc-mod:hover::before { transform: scaleY(1); }
.uc-mod--rev { grid-template-columns: 0.98fr 1.02fr; border-radius: 0 56px 0 56px; }
.uc-mod--rev::before { left: auto; right: 0; }
.uc-mod__text { padding: 52px 52px 52px 56px; display: flex; flex-direction: column; }
.uc-mod--rev .uc-mod__text { order: 2; padding-left: 52px; }
.uc-mod__text h3 { font-size: clamp(28px, 3vw, 44px); line-height: var(--lh-snug); letter-spacing: -0.015em; margin: 0; }
.uc-mod__text p { font-weight: 300; font-size: 17px; line-height: 1.66; color: rgba(255,255,255,0.76); margin: 20px 0 0; }

/* inline stat discs */
.uc-stats { display: flex; gap: 36px; margin: 30px 0 0; flex-wrap: wrap; }
.uc-stat { display: flex; flex-direction: column; align-items: center; text-align: center; }
.uc-stat__n {
  width: 86px; height: 86px; border-radius: 999px; border: 4px solid #fff; box-sizing: border-box;
  background: var(--ac, var(--la-fischerblau)); box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  display: grid; place-items: center; font-family: var(--font-headline); font-weight: 700;
  /* One fixed size for every stat disc, regardless of content length (a
     single digit or a short string like "1 App") — the old "sm" variant
     made these wildly inconsistent from page to page since whether a given
     value counted as "long enough" for it was a manual, subjective call. */
  font-size: 24px; line-height: 1; letter-spacing: -0.01em; color: #fff;
  transition: opacity var(--dur-base) var(--ease-out-expo);
}
.uc-stat__n.sm { font-size: 24px; }
.uc-stat__n:hover { opacity: 0.5; }
.uc-stat__l { margin-top: 12px; font-weight: 300; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,0.66); max-width: 150px; }

.uc-mod__cta { margin-top: auto; padding-top: 34px; display: flex; align-items: center; gap: 16px; }
/* Use-case modules carry no arrow CTA (same as the Finanzplanung page) */
.uc-mod__cta { display: none; }
.uc-mod__cta .la-arrow { border-color: #fff; background: var(--ac, var(--la-fischerblau)); }

/* ---------- Image placeholder ---------- */
.uc-ph {
  position: relative; min-height: 340px; display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 22px, rgba(255,255,255,0) 22px 44px), rgba(46,53,58,0.7);
  border-left: 1px solid rgba(255,255,255,0.08);
}
.uc-mod--rev .uc-ph { order: 1; border-left: 0; border-right: 1px solid rgba(255,255,255,0.08); }
/* Modules with no image at all (no photography planned for the page) drop
   the .uc-ph cell entirely — collapse back to a single full-width column. */
.uc-mod--text-only { grid-template-columns: 1fr; }
.uc-ph__frame {
  width: calc(100% - 56px); height: calc(100% - 56px); border: 1.5px dashed rgba(255,255,255,0.22);
  border-radius: 28px 0 28px 0; display: grid; place-items: center; text-align: center; color: rgba(255,255,255,0.5);
}
.uc-ph__icon { width: 52px; height: 52px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.4); display: grid; place-items: center; margin: 0 auto 16px; }
.uc-ph__icon svg { width: 22px; height: 22px; stroke: rgba(255,255,255,0.55); }
.uc-ph__label { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
.uc-ph__hint { margin-top: 6px; font-weight: 300; font-size: 12px; letter-spacing: 0; color: rgba(255,255,255,0.4); }

/* ---------- Key components ---------- */
/* Tiles that are link targets (e.g. homepage chips → /integration#integration-pipelines)
   land below the sticky nav instead of under it. */
.uc-key[id], .hm-tcard[id] { scroll-margin-top: 130px; }
.uc-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.uc-key-wrap { position: relative; }
.uc-key {
  position: relative; overflow: hidden; background: rgba(58,66,72,0.42); border: 0; border-radius: 40px 0 40px 0;
  padding: 38px 40px 40px; transition: transform var(--dur-base) var(--ease-out-expo), background var(--dur-base) var(--ease-out-expo);
}
.uc-key::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--ac, var(--la-fischerblau));
  transform: scaleY(0); transform-origin: top; z-index: 2; transition: transform var(--dur-slow) var(--ease-out-expo);
}
.uc-key:hover { background: rgba(64,73,80,0.6); transform: translateY(-3px); }
.uc-key:hover::before { transform: scaleY(1); }
/* Explicit design request: a circular "New Service!" sticker badge — a
   supplied PNG (ring, shadow and tilted lettering all baked into the
   artwork), just sized and positioned here. It sits in the card's right edge,
   and a card with a sticker reserves that strip (padding-right), so the copy
   always wraps before it at any width. On narrower screens there is no room
   beside the copy, so it shrinks and sits on the card's top-right corner,
   next to the icon. Lives on .uc-key-wrap (a sibling of .uc-key, not a child
   of it) so the protruding corner placement isn't clipped by .uc-key's own
   overflow:hidden (needed for its hover accent bar). */
.uc-key__sticker { position: absolute; right: 30px; top: 50%; translate: 0 -50%; z-index: 3; width: 140px; height: auto; display: block; }
.uc-key-wrap:has(.uc-key__sticker) .uc-key { padding-right: 200px; }
@media (max-width: 1100px) {
  .uc-key__sticker { width: 96px; top: -22px; right: 18px; translate: none; }
  .uc-key-wrap:has(.uc-key__sticker) .uc-key { padding-right: 40px; }
}
.uc-key__bar { width: 36px; height: 4px; border-radius: 2px; background: var(--ac, var(--la-fischerblau)); margin-bottom: 22px; }
/* Per-card icon variant of the dash above — the same .la-arrow/.la-arrow--sm
   button recipe used for CTAs (static/leitart.css ~L426), just filled with a
   content icon instead of the arrow and not interactive (decorative, not a
   link). Blue fill like the brand's other blue arrow-buttons (e.g. .sol-case
   .la-arrow), overriding its default dark fill. */
.uc-key__icon { background: var(--ac, var(--la-fischerblau)); border-color: #fff; margin-bottom: 22px; cursor: default; }
.uc-key__icon:hover { opacity: 1; }
.uc-key__icon svg { width: 25px; height: 25px; stroke: currentColor; fill: none; }
.uc-key h3 { font-size: 22px; line-height: var(--lh-snug); margin: 0 0 12px; }
.uc-key p { font-weight: 300; font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,0.74); margin: 0; }

/* ---------- Results ---------- */
.uc-results { position: relative; overflow: hidden; background: rgba(58,66,72,0.5); border-radius: 64px 0 64px 0; display: grid; grid-template-columns: 1fr 1fr; }
.uc-results__num { padding: 60px 56px; border-bottom: 1px solid rgba(255,255,255,0.1); border-right: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; align-items: center; text-align: center; }
.uc-results__num:nth-child(2) { border-right: 0; }
.uc-results__n {
  width: 150px; height: 150px; border-radius: 999px; border: 5px solid #fff; box-sizing: border-box;
  box-shadow: 0 8px 26px rgba(0,0,0,0.38); display: grid; place-items: center;
  font-family: var(--font-headline); font-weight: 700;
  /* Same reasoning as .uc-stat__n above: one fixed size for every results
     disc regardless of content length. */
  font-size: 34px; line-height: 1; letter-spacing: -0.02em; color: #fff;
  transition: opacity var(--dur-base) var(--ease-out-expo);
}
.uc-results__n.sm { font-size: 34px; padding: 0 8px; }
.uc-results__n:hover { opacity: 0.5; }
.uc-results__num:nth-child(1) .uc-results__n { background: var(--la-kupferrot); }
.uc-results__num:nth-child(2) .uc-results__n { background: var(--la-fischerblau); }
.uc-results__l { margin-top: 20px; font-weight: 300; font-size: 17px; line-height: 1.5; color: rgba(255,255,255,0.74); max-width: 320px; text-align: center; }
.uc-results__note { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,0.1); padding: 44px 56px; }
.uc-results__note p { margin: 0; max-width: 760px; font-weight: 300; font-size: 17.5px; line-height: 1.66; color: rgba(255,255,255,0.8); }

/* ---------- Contact CTA ---------- */
/* Same treatment as the homepage's "Book us!" module: plain headline above,
   full-width corporate-gray box below (no border) holding the bold intro
   copy and the two contacts, evenly spread. */
.uc-cta { position: relative; padding: 104px var(--pad-x) 130px; }
.uc-cta__inner { position: relative; z-index: 1; max-width: 1180px; }
.uc-cta__title { font-size: clamp(40px, 5.2vw, 76px); line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 0; }
.uc-cta__box {
  position: relative; z-index: 1; margin-top: 48px;
  background: rgba(58,66,72,0.6);
  border-radius: 40px 0 40px 0;
  padding: 56px;
  display: flex; align-items: center; justify-content: space-evenly; gap: 48px; flex-wrap: wrap;
}
.uc-contact h4 { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 0 0 8px; font-family: var(--font-body); }
.uc-contact p { margin: 0; font-weight: 300; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.84); }
.uc-contact a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.3); }
.uc-contact a:hover { border-color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .uc-hero { grid-template-columns: 1fr; padding-bottom: 48px; min-height: 0; gap: 24px; }
  .uc-hero__inner { max-width: 100%; }
  .uc-hero__visual { justify-self: stretch; }
  .uc-section { padding: 56px var(--pad-x); }
  .uc-mod, .uc-mod--rev { grid-template-columns: 1fr; border-radius: 40px 0 40px 0; }
  .uc-mod__text, .uc-mod--rev .uc-mod__text { order: 1; padding: 38px 32px; }
  .uc-mod--rev .uc-ph, .uc-ph { order: 2; min-height: 240px; border-left: 0; border-right: 0; border-top: 1px solid rgba(255,255,255,0.08); }
  .uc-keys { grid-template-columns: 1fr; }
  .uc-results { grid-template-columns: 1fr; border-radius: 40px 0 40px 0; }
  .uc-results__num { border-right: 0 !important; padding: 40px 32px; }
  .uc-results__note { padding: 36px 32px; }
}
@media (max-width: 560px) {
  .uc-stats { gap: 28px; }
  .uc-mod__text { padding: 30px 24px; }
}


/* ---------- Finanzplanung (Use Case 01): PNG tablet hero + legacy extras (additive) ---------- */
.uc-hero__visual img {
  position: relative; z-index: 1; display: block; width: 100%; height: auto;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.45));
  opacity: 0; transform: translateY(22px) scale(0.985);
  animation: uc-tablet-in 1100ms var(--ease-out-expo) 220ms both;
}
@media (prefers-reduced-motion: reduce) { .uc-hero__visual img { opacity: 1; transform: none; animation: none; } }
.uc-hero__eyebrow { color: var(--la-fischerblau); }
.uc-hero__eyebrow::before { display: none; }
.uc-hero__cta span { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); }
.uc-mod__kicker { color: var(--ac, var(--la-fischerblau)); }
.uc-mod__cta span { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.78); }
.uc-results__pair { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.uc-results__icn { width: 150px; height: 150px; border-radius: 999px; border: 5px solid #fff; box-sizing: border-box; background: var(--la-sonnengelb); object-fit: cover; display: block; box-shadow: 0 8px 26px rgba(0,0,0,0.38); transition: opacity var(--dur-base) var(--ease-out-expo); }
.uc-results__icn:hover { opacity: 0.5; }

/* =================================================================
   LEGAL PAGES — Impressum / Datenschutz (from legal.css)
   ================================================================= */
/* =============================================================
   LeitArt — Legal pages (Impressum · Datenschutz)
   Long-form prose on the Ink ground. Desktop + mobile share the
   .lg-* type scale; mobile wraps it in the iOS frame via React.
   ============================================================= */

/* ---------- Desktop header ---------- */
.lg-head { padding: 40px var(--pad-x) 30px; }
.lg-head h1 {
  font-size: clamp(48px, 6vw, 92px); line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 30px 0 0;
}
.lg-head .lg-sub { margin: 20px 0 0; max-width: 620px; font-weight: 300; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.74); }

/* ---------- Content column ---------- */
.lg-wrap { padding: 16px var(--pad-x) 96px; }
.lg-doc { max-width: 820px; }
.lg-doc h2 {
  font-size: clamp(26px, 3vw, 38px); line-height: var(--lh-tight); letter-spacing: -0.015em;
  margin: 56px 0 0; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.12);
}
.lg-doc h2:first-of-type { margin-top: 30px; }
.lg-doc h3 { font-size: 19px; line-height: var(--lh-snug); margin: 32px 0 0; color: #fff; font-family: var(--font-headline); font-weight: 600; }
.lg-doc p { font-weight: 300; font-size: 17.5px; line-height: 1.68; color: rgba(255,255,255,0.82); margin: 16px 0 0; }
.lg-doc p.lead { color: rgba(255,255,255,0.9); }
.lg-doc a { color: var(--la-fischerblau); text-decoration: none; border-bottom: 1px solid rgba(76,160,170,0.5); }
.lg-doc a:hover { color: #fff; border-color: #fff; }
.lg-doc ul, .lg-doc ol { margin: 14px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.lg-doc li { position: relative; padding-left: 26px; font-weight: 300; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.82); }
.lg-doc li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 8px; height: 2px; border-radius: 2px; background: var(--la-rail); }

/* Address / contact callout block */
.lg-card {
  margin: 22px 0 0; padding: 28px 30px; background: rgba(58,66,72,0.42);
  border-radius: 28px 0 28px 0; position: relative; overflow: hidden;
}
.lg-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--la-fischerblau); }
.lg-card p { margin: 0; font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.88); }
.lg-card p + p { margin-top: 16px; }
.lg-card b { font-weight: 600; color: #fff; }

/* tiny note line */
.lg-note { margin-top: 40px; font-weight: 300; font-size: 15px; color: rgba(255,255,255,0.5); }

@media (max-width: 960px) {
  .lg-head { padding: 28px var(--pad-x) 20px; }
  .lg-wrap { padding: 8px var(--pad-x) 72px; }
}

/* ---------- Mobile (inside iOS frame) ---------- */
.m-legal { padding: 18px 22px 8px; }
.m-legal__eyebrow { color: var(--la-fischerblau); }
.m-legal h1 { font-family: var(--font-headline); font-weight: 700; font-size: 38px; line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 10px 0 0; }
.m-legal__sub { margin: 14px 0 0; font-weight: 300; font-size: 15.5px; line-height: 1.55; color: rgba(255,255,255,0.74); }
.m-legaldoc { padding: 8px 22px 30px; }
.m-legaldoc h2 { font-family: var(--font-headline); font-weight: 700; font-size: 21px; line-height: var(--lh-tight); letter-spacing: -0.01em; margin: 34px 0 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.12); }
.m-legaldoc h2:first-of-type { margin-top: 18px; }
.m-legaldoc h3 { font-family: var(--font-headline); font-weight: 600; font-size: 15.5px; margin: 22px 0 0; color: #fff; }
.m-legaldoc p { font-weight: 300; font-size: 15.5px; line-height: 1.62; color: rgba(255,255,255,0.82); margin: 12px 0 0; }
.m-legaldoc a { color: var(--la-fischerblau); text-decoration: none; border-bottom: 1px solid rgba(76,160,170,0.5); word-break: break-word; }
.m-legaldoc ul, .m-legaldoc ol { margin: 10px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.m-legaldoc li { position: relative; padding-left: 22px; font-weight: 300; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.82); }
.m-legaldoc li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 8px; height: 2px; border-radius: 2px; background: var(--la-rail); }
.m-legalcard { margin: 16px 0 0; padding: 20px 22px; background: rgba(58,66,72,0.42); border-radius: 22px 0 22px 0; position: relative; overflow: hidden; }
.m-legalcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--la-fischerblau); }
.m-legalcard p { margin: 0; font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,0.9); }
.m-legalcard p + p { margin-top: 12px; }
.m-legalcard b { font-weight: 600; color: #fff; }


/* =================================================================
   HOMEPAGE — Data in Action (hm-)
   ================================================================= */
/* ============================================================
   Homepage — Data in Action. Canvas dust-ring keyvisual.
   ============================================================ */
.hm-hero { position: relative; padding: 40px var(--pad-x) 120px; min-height: 720px; }
/* Keyvisual placed exactly as the design-system desktop hero: a large
   dust ring bleeding off the right as a background layer, with the claim
   top-left and the copy indented below-left. */
.hm-hero__visual {
  position: absolute; inset: -18% -14% -18% auto;
  width: 100%; z-index: 0; pointer-events: auto;
}
.hm-hero__visual canvas { width: 100%; height: 100%; display: block; }
/* Animated keyvisual — the official brand Spline dust ring, on a
   transparent background so the page Ink gradient shows through and the
   hero reads as one uniform colour. Native Spline mouse-over interaction. */
.hm-hero__spline {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
  background: transparent !important; --background-color: transparent;
  /* Zoomed in so the scene's rectangular edges sit outside the frame, and
     a radial mask dissolves any remaining boundary into the page. */
  transform: scale(1.5) translateX(2%); transform-origin: center;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 56%, rgba(0,0,0,0) 72%);
          mask-image: radial-gradient(circle at 50% 50%, #000 56%, rgba(0,0,0,0) 72%);
  z-index: 1; pointer-events: auto;
}
.hm-hero__inner { position: relative; z-index: 1; max-width: 980px; pointer-events: none; }
.hm-hero__inner a, .hm-hero__inner button { pointer-events: auto; }
.hm-hero__title {
  font-size: clamp(80px, 11vw, 168px); line-height: var(--lh-tight); letter-spacing: -0.02em;
  margin: 24px 0 0;
  /* No bespoke entrance here — every h1/h2/h3 gets the same subtle
     .fade-head reveal site-wide (see site.js); the hero used to opt out
     (data-no-autofade) for a flashier custom fade, now unified. */
}
.hm-hero__copy { margin-top: 64px; margin-left: 360px; max-width: 420px; }
.hm-hero__copy p { font-weight: 300; font-size: 17.5px; line-height: 1.65; color: rgba(255,255,255,0.85); margin: 0 0 30px; text-shadow: 0 1px 8px rgba(0,0,0,0.55); }

.hm-section { position: relative; padding: 88px var(--pad-x); z-index: 1; }
.hm-head { max-width: 760px; margin-bottom: 52px; }
.hm-head h2 { font-size: var(--hm-h2); line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 0; }
/* Homepage FAQ (Faq.svelte): native <details> rows, same surface colour as
   the "Entdecke mehr" teaser cards (.hm-tcard) but with no border — a
   subtler drop shadow carries the depth instead. The .la-arrow button
   turns to point down when a row is open. */
.hm-faq__list { display: grid; gap: 12px; }
.hm-faq__item { background: rgba(58,66,72,0.42); border-radius: 28px 0 28px 0; box-shadow: 0 6px 18px rgba(0,0,0,0.16); transition: background var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo); }
.hm-faq__item:hover, .hm-faq__item[open] { background: rgba(58,66,72,0.55); box-shadow: 0 10px 26px rgba(0,0,0,0.22); }
.hm-faq__item summary { display: flex; align-items: center; gap: 24px; padding: 22px 26px 22px 32px; cursor: pointer; list-style: none; }
.hm-faq__item summary::-webkit-details-marker { display: none; }
.hm-faq__item summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: 28px 0 28px 0; }
.hm-faq__n { flex: 0 0 auto; background: var(--la-fischerblau); }
.hm-faq__item h3 { flex: 1 1 auto; font-size: var(--hm-h3); line-height: var(--lh-snug); margin: 0; }
.hm-faq__icon { pointer-events: none; }
.hm-faq__icon img { transition: transform var(--dur-base) var(--ease-out-expo); }
.hm-faq__item[open] .hm-faq__icon img { transform: rotate(90deg); }
.hm-faq__item p { margin: 0; padding: 0 96px 28px 32px; font-weight: 300; font-size: var(--hm-body); line-height: 1.7; color: rgba(255,255,255,0.74); max-width: 1100px; }
@media (max-width: 700px) {
  .hm-faq__item summary { padding: 18px 18px 18px 22px; gap: 16px; }
  .hm-faq__item p { padding: 0 22px 22px; }
  .hm-faq__n { width: 40px; height: 40px; font-size: 13px; }
}
.hm-head p { margin: 22px 0 0 auto; max-width: 340px; font-weight: 300; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.7); }

/* Solutions teaser */
.hm-teaser { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.hm-tcard { display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 1px solid rgba(255,255,255,0.12); background: rgba(58,66,72,0.42); padding: 34px 32px 30px; min-height: 230px; box-shadow: 0 10px 30px rgba(0,0,0,0.22); transition: transform var(--dur-base) var(--ease-out-expo), border-color var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo); }
.hm-tcard:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.24); box-shadow: 0 18px 44px rgba(0,0,0,0.32); }
.hm-tcard__k { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; margin-bottom: 22px; }
.hm-tcard h3 { font-size: var(--hm-h3); line-height: var(--lh-snug); margin: 0 0 12px; }
/* Explicit design request: a data+ extension-icon badge to the left of a
   writeback tile's own heading (data-plus/+page.svelte TILES) — opt-in via
   a plain <img>, most .hm-tcard headings elsewhere don't use this. */
.hm-tcard__h { display: flex; align-items: center; gap: 16px; }
.hm-tcard__icon { width: 110px; height: 110px; flex: 0 0 auto; }
.hm-tcard p { font-weight: 300; font-size: var(--hm-body); line-height: 1.58; color: rgba(255,255,255,0.7); margin: 0 0 22px; }
.hm-tcard .la-textlink { margin-top: auto; }
.hm-tcard .la-arrow { margin-top: auto; }
.hm-tcard:hover .la-arrow { opacity: 0.5; }
/* Explicit design request: the data+ ("Aktion") page's own gray boxes
   (.hm-tcard — suite/writeback/teaser cards) get the same left accent-bar
   hover reveal as .uc-mod/.uc-key elsewhere (position:relative+overflow:
   hidden, a 5px bar scaling in from the top on hover), in the page's own
   red accent. Opt-in modifier rather than added to .hm-tcard itself, since
   that class is also used site-wide (e.g. ExploreMore's teaser cards)
   where this hover treatment wasn't asked for. */
.hm-tcard--accent { position: relative; overflow: hidden; }
.hm-tcard--accent::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--ac, var(--la-kupferrot));
  transform: scaleY(0); transform-origin: top; z-index: 2; transition: transform var(--dur-slow) var(--ease-out-expo);
}
.hm-tcard--accent:hover::before { transform: scaleY(1); }

/* Book us */
/* Intro module for the app simulation: kicker + heading build in on scroll
   (.reveal, like every other homepage section head) before the pinned
   simulation below, so that section's own compact header never has to
   carry a full-size heading. No bottom padding — the simulation's own top
   padding (.hm-sim) provides the gap to it. */
.hm-sim-intro { padding: 88px var(--pad-x) 0; }
.hm-sim-intro .hm-head { margin-bottom: 0; }
.hm-sim-intro h2 { margin-top: 18px; }
.hm-sim-intro p { margin: 18px 0 0; max-width: 480px; font-weight: 300; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.7); }

/* ---- App simulation & anatomy (hm-sim) ----
   Default styling is the static stacked layout (SSR / no JS / mobile /
   reduced motion). HomeAppSim.svelte adds .is-theater on capable desktop
   viewports, which turns the section into a sticky full-viewport stage;
   all movement (app shrink into the tile row, panel tease-in, mini-card
   and chip explosion, process-band sweep) is then driven per scroll frame
   via inline styles from the component. Tile geometry: three 26vw tiles
   (analytics / app / data+) with 2.5vw gaps, Integration tile spanning the
   full 83vw row below; the app shrinks to exactly tile width. */
.hm-sim { position: relative; padding: 88px var(--pad-x); z-index: 1; }
/* Heading + kicker live in the standalone .hm-sim-intro module right above
   this section; .hm-sim__head now only holds the scroll-hint mouse. */
.hm-sim__head { max-width: 760px; margin-bottom: 40px; }

/* Scroll hint: a delicate Magic Mouse contour above the section kicker. A
   finger-swipe glint glides down its surface, cycling through the three
   brand colors (one color per swipe, switched while the glint is out). */
.hm-sim__mouse {
  position: relative; display: block; width: 22px; height: 35px; margin: 0 0 16px;
  animation: hm-mouse-float 3.6s ease-in-out infinite;
  transition: opacity 0.3s ease;
}
.hm-sim__mouse svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hm-sim__mouse path { fill: rgba(255,255,255,0.03); stroke: rgba(255,255,255,0.5); stroke-width: 1.1; transition: stroke 0.25s ease; }
.hm-sim__mouse:hover path, .hm-sim__mouse:focus-visible path { stroke: rgba(255,255,255,0.85); }
.hm-sim__mouse i {
  position: absolute; left: 50%; top: 7px; width: 2px; height: 8px; margin-left: -1px; border-radius: 2px;
  color: var(--la-fischerblau); background: currentColor; box-shadow: 0 0 6px currentColor;
  animation: hm-mouse-swipe 2.4s cubic-bezier(0.5, 0, 0.3, 1) infinite, hm-mouse-tint 7.2s step-end infinite;
}
@keyframes hm-mouse-swipe {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 1; }
  60% { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(12px); opacity: 0; }
}
@keyframes hm-mouse-tint {
  0% { color: var(--la-fischerblau); }
  33.33% { color: var(--la-sonnengelb); }
  66.66% { color: var(--la-kupferrot); }
}
@keyframes hm-mouse-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) {
  .hm-sim__mouse, .hm-sim__mouse i { animation: none; }
}
.hm-sim__app { margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 30px 80px rgba(0,0,0,0.45); }
.hm-sim__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 24px; }
.hm-sim__col--int { grid-column: 1 / -1; }

/* Panels: same card recipe as the homepage teaser cards (hm-tcard). */
.hm-sim__panel { height: 100%; border: 1px solid rgba(255,255,255,0.12); background: rgba(58,66,72,0.42); padding: 28px 26px 26px; box-shadow: 0 10px 30px rgba(0,0,0,0.22); }
.hm-sim__panel--int { display: grid; grid-template-columns: 36% 1fr; gap: 12px 36px; align-items: center; }
.hm-sim__panel--int .hm-sim__panel-copy p { margin-bottom: 8px; }
/* The three sector names are the pillars of the leitart business model,
   so they lead as brand-colored headlines, each with the same numbered
   circle as the guideline items (.hm-prin__n) and the finale frame
   (.hm-sim__end-n); the h3 below is their tagline. */
.hm-sim__khead { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.hm-sim__k-n { background: var(--chip-c); }
.hm-sim__panel .hm-sim__k { font-family: var(--font-headline); font-weight: 700; font-size: var(--hm-h3); line-height: 1; letter-spacing: -0.015em; }
.hm-sim__panel h3 { font-size: 18px; font-weight: 500; line-height: 1.2; color: rgba(255,255,255,0.86); margin: 0 0 10px; }
.hm-sim__panel p { font-weight: 300; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.72); margin: 0 0 18px; }
.hm-sim__chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.hm-sim__chip { font-family: var(--font-mono); font-size: 11.5px; line-height: 1; padding: 8px 13px; border-radius: 9999px; border: 1px solid; color: rgba(255,255,255,0.92); white-space: nowrap; will-change: transform, opacity; }
.hm-sim__panel .hm-sim__k { color: var(--fg-1); }
.hm-sim__panel--int .hm-sim__chip { border-color: rgba(76,160,170,0.55); background: rgba(76,160,170,0.14); }
.hm-sim__panel--ana .hm-sim__chip { border-color: rgba(250,187,0,0.5); background: rgba(250,187,0,0.12); }
.hm-sim__panel--dp .hm-sim__chip { border-color: rgba(230,68,53,0.55); background: rgba(230,68,53,0.14); }
/* Linked chips: a filled chain-link badge in the segment color marks them as
   links at a glance; on hover the two chain halves snap together. */
.hm-sim__panel--int { --chip-c: var(--la-fischerblau); --chip-rgb: 76,160,170; }
.hm-sim__panel--ana { --chip-c: var(--la-sonnengelb); --chip-rgb: 250,187,0; }
.hm-sim__panel--dp  { --chip-c: var(--la-kupferrot); --chip-rgb: 230,68,53; }
.hm-sim__panel .hm-sim__chip:has(> a) { padding: 0; border-color: rgba(var(--chip-rgb),0.9); transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.hm-sim__chip > a { display: inline-flex; align-items: center; gap: 7px; padding: 4px 13px 4px 4px; color: inherit; text-decoration: none; }
.hm-sim__chip-ico { display: grid; place-items: center; flex: none; width: 19.5px; height: 19.5px; border-radius: 50%; background: var(--chip-c); color: var(--la-ink); transition: transform 0.25s ease; }
.hm-sim__chip-ico svg { width: 11px; height: 11px; overflow: visible; }
.hm-sim__chip-ico path { transition: transform 0.25s ease; }
.hm-sim__chip > a:hover .hm-sim__chip-ico { transform: rotate(-12deg) scale(1.08); }
.hm-sim__chip > a:hover .hm-sim__chip-ico-a { transform: translate(-1.6px, 1.6px); }
.hm-sim__chip > a:hover .hm-sim__chip-ico-b { transform: translate(1.6px, -1.6px); }
.hm-sim__chip > a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 9999px; }
.hm-sim__panel .hm-sim__chip:has(> a:hover) { border-color: var(--chip-c); background: rgba(var(--chip-rgb),0.3); box-shadow: 0 0 0 3px rgba(var(--chip-rgb),0.18); }
@media (prefers-reduced-motion: reduce) {
  .hm-sim__chip-ico, .hm-sim__chip-ico path { transition: none; }
}
.hm-sim__link { display: inline-block; margin-top: 10px; }
.hm-sim__hint { display: none; }

/* Mini cards: the app's building blocks, docked into the panels. */
.hm-sim__docks { display: flex; gap: 10px; margin-bottom: 16px; }
.hm-sim__mini { flex: 1; min-width: 0; height: 56px; border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; background: rgba(255,255,255,0.06); padding: 9px 10px; will-change: transform, opacity; }
.hm-sim__mini--kpis { display: flex; align-items: center; justify-content: space-around; }
.hm-sim__mini--kpis i { font-family: var(--font-headline); font-style: normal; font-weight: 700; font-size: 15px; color: #fff; }
.hm-sim__mini--bars { display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.hm-sim__mini--bars span { display: block; height: 7px; width: var(--w, 60%); border-radius: 999px; background: var(--la-kupferrot); }
.hm-sim__mini--bars span.is-teal { background: var(--la-fischerblau); }
.hm-sim__mini--bars span.is-rose { background: rgba(230,68,53,0.45); }
.hm-sim__mini--scatter svg { display: block; width: 100%; height: 100%; }
.hm-sim__mini--scatter circle { fill: var(--la-kupferrot); }
.hm-sim__mini--scatter circle.is-teal { fill: var(--la-fischerblau); }
.hm-sim__mini--table { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px; }

/* Sector mini animations: Analytics identifies critical data points
   (lasso around the red cluster, selecting the critical bar), Data+
   simulates input/interaction (typing line, status flipping to approved). */
.hm-sim__lasso { fill: none; stroke: var(--la-sonnengelb); stroke-width: 1.6; stroke-dasharray: 88; stroke-dashoffset: 88; transform: rotate(-8deg); transform-origin: 42px 20px; animation: hm-lasso 4.5s ease-in-out infinite; }
@keyframes hm-lasso {
  0%, 16% { stroke-dashoffset: 88; opacity: 0; }
  22% { opacity: 1; }
  55% { stroke-dashoffset: 0; opacity: 1; }
  80% { stroke-dashoffset: 0; opacity: 1; }
  94%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.hm-sim__mini--bars span:first-child { animation: hm-mini-select 4.5s ease infinite; }
@keyframes hm-mini-select {
  0%, 35% { box-shadow: none; }
  45%, 78% { box-shadow: 0 0 0 2px rgba(46,53,58,0.9), 0 0 0 3.5px var(--la-sonnengelb); }
  90%, 100% { box-shadow: none; }
}
/* Data+ minis with fixed pixel layouts (absolutely positioned parts) */
.hm-sim__docks { flex-wrap: wrap; }
.hm-sim__mini--kanban, .hm-sim__mini--excel, .hm-sim__mini--api { position: relative; flex: 0 0 150px; width: 150px; padding: 0; }

/* Excel import mini (6 s loop): the hand drags an XLSX file into the drop
   zone, which lights up; the file dissolves, the rows land one by one in
   the table and a check confirms the import. */
.hm-sim__xl-zone {
  position: absolute; left: 50px; top: 8px; width: 90px; height: 38px; box-sizing: border-box;
  border: 1px dashed rgba(255,255,255,0.28); border-radius: 4px;
  animation: hm-xl-zone 6s ease infinite;
}
@keyframes hm-xl-zone {
  0%, 26%, 44%, 100% { border-color: rgba(255,255,255,0.28); background: transparent; }
  32%, 40% { border-color: var(--la-fischerblau); background: rgba(76,160,170,0.1); }
}
/* The target table: a header row and three rows of empty cells. After the
   drop, the values are written into the cells row by row, cell by cell
   (steps(3) reveal), each written cell tinted teal. */
.hm-sim__xl-row { position: absolute; left: 5px; right: 5px; height: 6.5px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; }
.hm-sim__xl-row > i { border-radius: 1px; background: rgba(255,255,255,0.07); }
.hm-sim__xl-row.is-head { top: 4px; height: 5px; }
.hm-sim__xl-row.is-head > i { background: rgba(76,160,170,0.35); animation: hm-xl-head 6s ease infinite; }
.hm-sim__xl-row.is-r1 { top: 11px; }
.hm-sim__xl-row.is-r2 { top: 19px; }
.hm-sim__xl-row.is-r3 { top: 27px; }
.hm-sim__xl-vals {
  position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px;
  clip-path: inset(0 100% 0 0);
}
.hm-sim__xl-vals u {
  display: block; border-radius: 1px; background: rgba(76,160,170,0.22); text-decoration: none;
  font-family: var(--font-mono); font-size: 5.5px; font-weight: 600; line-height: 6.5px; text-align: right; padding-right: 1.5px;
  color: #fff; white-space: nowrap; overflow: hidden;
}
.hm-sim__xl-row.is-r1 .hm-sim__xl-vals { animation: hm-xl-write1 6s linear infinite; }
.hm-sim__xl-row.is-r2 .hm-sim__xl-vals { animation: hm-xl-write2 6s linear infinite; }
.hm-sim__xl-row.is-r3 .hm-sim__xl-vals { animation: hm-xl-write3 6s linear infinite; }
@keyframes hm-xl-head { 0%, 43% { background: rgba(76,160,170,0.35); } 47%, 88% { background: var(--la-fischerblau); } 94%, 100% { background: rgba(76,160,170,0.35); } }
@keyframes hm-xl-write1 {
  0%, 46% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(3, end); }
  54%, 88% { clip-path: inset(0 0 0 0); opacity: 1; }
  94%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
@keyframes hm-xl-write2 {
  0%, 54% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(3, end); }
  62%, 88% { clip-path: inset(0 0 0 0); opacity: 1; }
  94%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
@keyframes hm-xl-write3 {
  0%, 62% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: steps(3, end); }
  70%, 88% { clip-path: inset(0 0 0 0); opacity: 1; }
  94%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
.hm-sim__xl-ok {
  position: absolute; right: -6px; top: -6px; width: 13px; height: 13px; border-radius: 999px;
  background: var(--la-fischerblau); color: #fff; display: grid; place-items: center; transform: scale(0);
  box-shadow: 0 0 0 2px var(--la-ink); animation: hm-xl-ok 6s ease infinite;
}
.hm-sim__xl-ok svg { width: 8px; height: 8px; }
@keyframes hm-xl-ok { 0%, 71% { transform: scale(0); } 75% { transform: scale(1.25); } 78%, 88% { transform: scale(1); opacity: 1; } 94%, 100% { transform: scale(1); opacity: 0; } }
.hm-sim__xl-file {
  position: absolute; left: 10px; top: 12px; width: 24px; height: 30px; z-index: 1;
  background: var(--la-fischerblau); border-radius: 3px;
  clip-path: polygon(0 0, 68% 0, 100% 24%, 100% 100%, 0 100%);
  animation: hm-xl-file 6s ease-in-out infinite;
}
.hm-sim__xl-file u {
  position: absolute; left: 4px; right: 4px; top: 8px; height: 10px; text-decoration: none;
  background:
    linear-gradient(90deg, transparent 0 45%, rgba(255,255,255,0.75) 45% 55%, transparent 55%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.75) 0 1px, transparent 1px 3.5px);
}
.hm-sim__xl-file em { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-style: normal; font-family: var(--font-mono); font-size: 5.5px; font-weight: 700; letter-spacing: 0.04em; color: #fff; }
@keyframes hm-xl-file {
  0%, 12% { transform: none; opacity: 1; filter: none; }
  15% { transform: scale(1.08); filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5)); }
  36% { transform: translateX(73px) scale(1.08); filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5)); opacity: 1; }
  40% { transform: translateX(73px); filter: none; opacity: 1; }
  46% { transform: translateX(73px) scale(0.4); opacity: 0; }
  90% { transform: none; opacity: 0; }
  97%, 100% { transform: none; opacity: 1; }
}
.hm-sim__xl-hand { position: absolute; left: 15px; top: 17px; width: 15px; height: 15px; z-index: 2; opacity: 0; animation: hm-xl-hand 6s ease-in-out infinite; }
.hm-sim__xl-hand .tap-hand { display: block; width: 100%; height: 100%; }
.hm-sim__xl-hand i { position: absolute; left: 48%; top: 8%; width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.hm-sim__xl-hand i::before, .hm-sim__xl-hand i::after { content: ""; position: absolute; inset: 0; border-radius: 999px; border: 1.5px solid var(--la-kupferrot); opacity: 0; }
.hm-sim__xl-hand i::before { animation: hm-xl-ring 6s ease infinite; }
.hm-sim__xl-hand i::after { animation: hm-xl-ring 6s ease infinite 0.13s; }
@keyframes hm-xl-hand {
  0% { opacity: 0; transform: translate(9px, 9px); }
  8% { opacity: 1; transform: none; }
  12%, 15% { transform: scale(0.85); }
  36% { transform: translateX(73px) scale(0.85); }
  40% { transform: translateX(73px); }
  50% { opacity: 1; transform: translateX(73px); }
  58%, 100% { opacity: 0; transform: translate(80px, 9px); }
}
@keyframes hm-xl-ring {
  0%, 10% { opacity: 0; transform: scale(0.3); }
  13% { opacity: 0.9; transform: scale(0.8); }
  20% { opacity: 0; transform: scale(1.9); }
  37% { opacity: 0; transform: scale(0.3); }
  40% { opacity: 0.9; transform: scale(0.8); }
  47%, 100% { opacity: 0; transform: scale(1.9); }
}
@media (prefers-reduced-motion: reduce) {
  .hm-sim__xl-zone, .hm-sim__xl-row > i, .hm-sim__xl-vals, .hm-sim__xl-ok, .hm-sim__xl-file, .hm-sim__xl-hand, .hm-sim__xl-hand i::before, .hm-sim__xl-hand i::after { animation: none; }
  .hm-sim__xl-ok { transform: none; }
  .hm-sim__xl-vals { clip-path: none; }
  .hm-sim__xl-hand { display: none; }
}

/* Kanban mini (6 s loop): three columns; the tapping hand grabs a card
   from "to do", drags it into "doing" and drops it. */
.hm-sim__kb-col { position: absolute; top: 9px; width: 40px; height: 3px; border-radius: 2px; }
.hm-sim__kb-col::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 32px; border-radius: 3px; background: rgba(255,255,255,0.04); }
.hm-sim__kb-col.is-c0 { left: 10px; background: var(--la-fischerblau); }
.hm-sim__kb-col.is-c1 { left: 54px; background: var(--la-sonnengelb); }
.hm-sim__kb-col.is-c2 { left: 98px; background: var(--la-kupferrot); }
.hm-sim__kb-card { position: absolute; width: 40px; height: 8px; border-radius: 2px; background: rgba(255,255,255,0.2); }
.hm-sim__kb-card.is-moving { background: rgba(255,255,255,0.55); animation: hm-kb-card 6s ease-in-out infinite; }
@keyframes hm-kb-card {
  0%, 12% { transform: none; box-shadow: none; opacity: 1; }
  15% { transform: scale(1.08); box-shadow: 0 4px 10px rgba(0,0,0,0.5); }
  44% { transform: translateX(44px) scale(1.08); box-shadow: 0 4px 10px rgba(0,0,0,0.5); opacity: 1; }
  48%, 84% { transform: translateX(44px); box-shadow: none; opacity: 1; }
  88% { transform: translateX(44px); opacity: 0; }
  90% { transform: none; opacity: 0; }
  96%, 100% { transform: none; opacity: 1; }
}
.hm-sim__kb-hand { position: absolute; left: 23px; top: 29px; width: 15px; height: 15px; z-index: 2; opacity: 0; animation: hm-kb-hand 6s ease-in-out infinite; }
.hm-sim__kb-hand .tap-hand { display: block; width: 100%; height: 100%; }
.hm-sim__kb-hand i { position: absolute; left: 48%; top: 8%; width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.hm-sim__kb-hand i::before, .hm-sim__kb-hand i::after { content: ""; position: absolute; inset: 0; border-radius: 999px; border: 1.5px solid var(--la-kupferrot); opacity: 0; }
.hm-sim__kb-hand i::before { animation: hm-kb-ring 6s ease infinite; }
.hm-sim__kb-hand i::after { animation: hm-kb-ring 6s ease infinite 0.13s; }
@keyframes hm-kb-hand {
  0% { opacity: 0; transform: translate(9px, 9px); }
  8% { opacity: 1; transform: none; }
  12% { transform: scale(0.85); }
  15% { transform: scale(0.85); }
  44% { transform: translateX(44px) scale(0.85); }
  48% { transform: translateX(44px); }
  62% { opacity: 1; transform: translateX(44px); }
  70%, 100% { opacity: 0; transform: translate(52px, 8px); }
}
@keyframes hm-kb-ring {
  0%, 10% { opacity: 0; transform: scale(0.3); }
  13% { opacity: 0.9; transform: scale(0.8); }
  20% { opacity: 0; transform: scale(1.9); }
  45% { opacity: 0; transform: scale(0.3); }
  48% { opacity: 0.9; transform: scale(0.8); }
  55%, 100% { opacity: 0; transform: scale(1.9); }
}

/* API / MCP mini (4 s loop): a request travels API -> Data+ server ->
   MCP, the response comes back the same way; nodes light up on arrival. */
.hm-sim__api-end {
  position: absolute; top: 20px; height: 14px; padding: 0 5px; line-height: 13px;
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: 0.06em; color: rgba(255,255,255,0.82);
  border: 1px solid rgba(255,255,255,0.35); border-radius: 4px;
}
.hm-sim__api-end.is-api { left: 8px; animation: hm-api-end-a 4s linear infinite; }
.hm-sim__api-end.is-mcp { right: 8px; animation: hm-api-end-m 4s linear infinite; }
@keyframes hm-api-end-a { 0%, 3%, 96%, 100% { border-color: rgba(255,255,255,0.35); box-shadow: none; } 98% { border-color: var(--la-fischerblau); box-shadow: 0 0 0 3px rgba(76,160,170,0.25); } }
@keyframes hm-api-end-m { 0%, 45%, 52%, 100% { border-color: rgba(255,255,255,0.35); box-shadow: none; } 48% { border-color: var(--la-sonnengelb); box-shadow: 0 0 0 3px rgba(250,187,0,0.25); } }
.hm-sim__api-wire { position: absolute; top: 27px; width: 26px; height: 1px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.35) 0 3px, transparent 3px 6px); }
.hm-sim__api-wire.is-l { left: 38px; }
.hm-sim__api-wire.is-r { right: 38px; }
.hm-sim__api-hub {
  position: absolute; left: 65px; top: 18px; width: 18px; height: 18px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid rgba(255,255,255,0.5); border-radius: 5px 0 5px 2px; background: rgba(255,255,255,0.06);
  animation: hm-api-hub 4s linear infinite;
}
.hm-sim__api-hub i { width: 3px; height: 3px; border-radius: 999px; }
.hm-sim__api-hub i:nth-child(1) { background: var(--la-fischerblau); }
.hm-sim__api-hub i:nth-child(2) { background: var(--la-sonnengelb); }
.hm-sim__api-hub i:nth-child(3) { background: var(--la-kupferrot); }
@keyframes hm-api-hub {
  0%, 20%, 28%, 70%, 78%, 100% { box-shadow: none; border-color: rgba(255,255,255,0.5); }
  23%, 73% { box-shadow: 0 0 0 4px rgba(255,255,255,0.12), 0 0 10px rgba(255,255,255,0.35); border-color: #fff; }
}
.hm-sim__api-pkt { position: absolute; top: 25px; width: 5px; height: 5px; border-radius: 999px; opacity: 0; box-shadow: 0 0 6px currentColor; background: currentColor; }
.hm-sim__api-pkt.is-p1 { color: var(--la-fischerblau); animation: hm-api-p1 4s linear infinite; }
.hm-sim__api-pkt.is-p2 { color: var(--la-sonnengelb); animation: hm-api-p2 4s linear infinite; }
.hm-sim__api-pkt.is-p3 { color: var(--la-kupferrot); animation: hm-api-p3 4s linear infinite; }
.hm-sim__api-pkt.is-p4 { color: var(--la-fischerblau); animation: hm-api-p4 4s linear infinite; }
@keyframes hm-api-p1 { 0% { left: 37px; opacity: 0; } 3% { opacity: 1; } 20% { opacity: 1; } 22%, 100% { left: 61px; opacity: 0; } }
@keyframes hm-api-p2 { 0%, 25% { left: 83px; opacity: 0; } 28% { opacity: 1; } 45% { opacity: 1; } 47%, 100% { left: 107px; opacity: 0; } }
@keyframes hm-api-p3 { 0%, 50% { left: 107px; opacity: 0; } 53% { opacity: 1; } 70% { opacity: 1; } 72%, 100% { left: 83px; opacity: 0; } }
@keyframes hm-api-p4 { 0%, 75% { left: 61px; opacity: 0; } 78% { opacity: 1; } 95% { opacity: 1; } 97%, 100% { left: 37px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hm-sim__kb-card.is-moving, .hm-sim__kb-hand, .hm-sim__kb-hand i::before, .hm-sim__kb-hand i::after,
  .hm-sim__api-end, .hm-sim__api-hub, .hm-sim__api-pkt { animation: none; }
  .hm-sim__kb-hand, .hm-sim__api-pkt { display: none; }
}

/* Data+ mini form storyboard (9 s loop): the tapping hand types text,
   picks one of the three Leitart colors from a dropdown, then chooses a
   day in a small calendar popup. Popup positions and hand targets share
   fixed pixel anchors so every tap lands exactly on its control. */
.hm-sim__mf-row { display: flex; align-items: center; gap: 6px; }
.hm-sim__mf-row .is-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--la-kupferrot); flex: 0 0 auto; }
.hm-sim__mf-row em { flex: 1; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.18); }
/* The typed line in the first row; picking red from the dropdown paints it */
.hm-sim__mf-row em.hm-sim__mf-type { background: rgba(255,255,255,0.38); transform-origin: left center; animation: hm-mf-type 9s ease-in-out infinite, hm-mf-typecolor 9s linear infinite; }
@keyframes hm-mf-type { 0%, 6% { transform: scaleX(0.18); } 26%, 100% { transform: scaleX(1); } }
@keyframes hm-mf-typecolor { 0%, 42% { background: rgba(255,255,255,0.38); } 46%, 100% { background: rgba(230,68,53,0.75); } }
/* Color dropdown */
.hm-sim__mf-dd { position: relative; }
.hm-sim__mf-dd > b { width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,0.25); flex: 0 0 auto; animation: hm-mf-swatch 9s linear infinite; }
@keyframes hm-mf-swatch { 0%, 42% { background: rgba(255,255,255,0.25); } 46%, 100% { background: var(--la-kupferrot); } }
.hm-sim__mf-pop {
  position: absolute; left: 6px; top: -16px; z-index: 2; display: flex; gap: 5px; padding: 4px 6px;
  border-radius: 6px; background: var(--la-ink); border: 1px solid rgba(255,255,255,0.3); box-shadow: 0 6px 16px rgba(0,0,0,0.4);
  opacity: 0; animation: hm-mf-pop 9s ease infinite;
}
.hm-sim__mf-pop i { width: 8px; height: 8px; border-radius: 999px; }
.hm-sim__mf-pop i.is-b { background: var(--la-fischerblau); }
.hm-sim__mf-pop i.is-y { background: var(--la-sonnengelb); }
.hm-sim__mf-pop i.is-r { background: var(--la-kupferrot); }
@keyframes hm-mf-pop {
  0%, 28% { opacity: 0; transform: translateY(4px); }
  32%, 48% { opacity: 1; transform: none; }
  54%, 100% { opacity: 0; transform: translateY(4px); }
}
/* Date field with calendar icon + calendar popup */
.hm-sim__mf-dt { position: relative; }
.hm-sim__mf-dt > b { position: relative; width: 10px; height: 10px; border: 1.5px solid rgba(255,255,255,0.5); border-radius: 2px; flex: 0 0 auto; }
.hm-sim__mf-dt > b::before { content: ""; position: absolute; left: 1px; right: 1px; top: 1.5px; height: 2px; border-radius: 1px; background: rgba(255,255,255,0.5); }
.hm-sim__mf-datefill { transform-origin: left center; animation: hm-mf-datefill 9s ease infinite; }
@keyframes hm-mf-datefill { 0%, 68% { transform: scaleX(0.2); background: rgba(255,255,255,0.18); } 80%, 100% { transform: scaleX(1); background: rgba(255,255,255,0.38); } }
.hm-sim__mf-cal {
  position: absolute; left: 46px; top: -34px; z-index: 2; display: block; padding: 4px;
  border-radius: 6px; background: var(--la-ink); border: 1px solid rgba(255,255,255,0.3); box-shadow: 0 6px 16px rgba(0,0,0,0.4);
  opacity: 0; animation: hm-mf-cal 9s ease infinite;
}
.hm-sim__mf-cal > i { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.3); margin-bottom: 3px; }
.hm-sim__mf-cal > span { display: grid; grid-template-columns: repeat(7, 5px); gap: 1.5px; }
.hm-sim__mf-cal u { width: 5px; height: 5px; border-radius: 1px; background: rgba(255,255,255,0.16); text-decoration: none; }
.hm-sim__mf-cal u.is-pickday { animation: hm-mf-day 9s linear infinite; }
@keyframes hm-mf-cal {
  0%, 54% { opacity: 0; transform: translateY(4px); }
  58%, 76% { opacity: 1; transform: none; }
  82%, 100% { opacity: 0; transform: translateY(4px); }
}
@keyframes hm-mf-day {
  0%, 62% { background: rgba(255,255,255,0.16); box-shadow: none; }
  66% { background: var(--la-sonnengelb); box-shadow: 0 0 0 2.5px rgba(250,187,0,0.35); }
  72%, 100% { background: var(--la-sonnengelb); box-shadow: none; }
}
/* The hand travels row -> dropdown swatch -> calendar day, tapping each */
.hm-sim__mini-hand { position: absolute; left: 0; top: 0; width: 15px; height: 15px; opacity: 0; animation: hm-mf-hand 9s ease infinite; z-index: 3; }
.hm-sim__mini-hand .tap-hand { display: block; width: 100%; height: 100%; }
.hm-sim__mini-hand i { position: absolute; left: 48%; top: 8%; width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.hm-sim__mini-hand i::before,
.hm-sim__mini-hand i::after { content: ""; position: absolute; inset: 0; border-radius: 999px; border: 1.5px solid var(--la-kupferrot); opacity: 0; }
.hm-sim__mini-hand i::before { animation: hm-mf-ring 9s ease infinite; }
.hm-sim__mini-hand i::after { animation: hm-mf-ring 9s ease infinite 0.13s; }
@keyframes hm-mf-hand {
  0% { opacity: 0; transform: translate(75px, 34px); }
  5% { opacity: 1; transform: translate(53px, 14px); }
  8% { transform: translate(53px, 14px) scale(0.8); }
  11% { transform: translate(53px, 14px); }
  28% { transform: translate(53px, 14px); }
  34% { transform: translate(45px, 18px); }
  38% { transform: translate(45px, 18px) scale(0.8); }
  41% { transform: translate(45px, 18px); }
  54% { transform: translate(45px, 18px); }
  60% { transform: translate(81px, 30px); }
  64% { transform: translate(81px, 30px) scale(0.8); }
  67% { transform: translate(81px, 30px); }
  84% { opacity: 1; transform: translate(81px, 30px); }
  92%, 100% { opacity: 0; transform: translate(81px, 30px); }
}
@keyframes hm-mf-ring {
  0%, 7% { opacity: 0; transform: scale(0.3); }
  10% { opacity: 0.9; transform: scale(0.8); }
  16% { opacity: 0; transform: scale(1.9); }
  35% { opacity: 0; transform: scale(0.3); }
  38% { opacity: 0.9; transform: scale(0.8); }
  44% { opacity: 0; transform: scale(1.9); }
  61% { opacity: 0; transform: scale(0.3); }
  64% { opacity: 0.9; transform: scale(0.8); }
  70% { opacity: 0; transform: scale(1.9); }
  100% { opacity: 0; transform: scale(0.3); }
}
@media (prefers-reduced-motion: reduce) {
  .hm-sim__lasso, .hm-sim__mini--bars span:first-child, .hm-sim__mf-row em.hm-sim__mf-type, .hm-sim__mf-dd > b, .hm-sim__mf-pop, .hm-sim__mf-cal, .hm-sim__mf-datefill { animation: none; }
  .hm-sim__mf-pop, .hm-sim__mf-cal { display: none; }
  .hm-sim__mini-hand { display: none; }
  .hm-sim__mf-dd > b { background: var(--la-kupferrot); }
  .hm-sim__mf-row em.hm-sim__mf-type { background: rgba(230,68,53,0.75); }
  .hm-sim__mf-datefill { transform: none; background: rgba(255,255,255,0.38); }
}

/* Support-process bands (Data Integration): continuous, full-width flows.
   Data Quality = automated rule gates the flow passes through (a bad
   record gets bounced); Data Stewardship = people on the flow who check
   and take ownership (popping check bubbles). */
.hm-sim__bands { margin-bottom: 16px; }
.hm-sim__bandrow { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.hm-sim__bandrow > span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; color: rgba(255,255,255,0.85); flex: 0 0 148px; }
.hm-sim__band { position: relative; flex: 1; height: 12px; }
.hm-sim__flow { position: absolute; inset: 2px 0; border-radius: 999px; background: repeating-linear-gradient(90deg, rgba(76,160,170,0.5) 0 16px, rgba(76,160,170,0.14) 16px 32px); background-size: 32px 100%; animation: hm-band-flow 1.4s linear infinite; }
@keyframes hm-band-flow { to { background-position: 32px 0; } }
/* Quality gates: small check stations the flow runs through */
.hm-sim__gate { position: absolute; left: var(--x); top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 6px; background: var(--la-ink); border: 1.5px solid rgba(76,160,170,0.8); display: grid; place-items: center; color: var(--la-fischerblau); animation: hm-gate-flash 3.3s ease-in-out infinite; animation-delay: var(--gd, 0s); }
.hm-sim__gate svg { width: 11px; height: 11px; }
@keyframes hm-gate-flash {
  0%, 24%, 100% { box-shadow: none; border-color: rgba(76,160,170,0.8); }
  10% { box-shadow: 0 0 0 5px rgba(76,160,170,0.22); border-color: var(--la-fischerblau); }
}
/* Runner dots: a good record passes all gates, a bad one gets rejected */
.hm-sim__runner { position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -4px; border-radius: 999px; }
.hm-sim__runner--ok { background: var(--la-fischerblau); animation: hm-run-ok 4.2s linear infinite; }
@keyframes hm-run-ok { 0% { left: -2%; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { left: 101%; opacity: 0; } }
.hm-sim__runner--bad { background: var(--la-kupferrot); animation: hm-run-bad 4.2s linear infinite; animation-delay: 2.1s; }
@keyframes hm-run-bad {
  0% { left: -2%; opacity: 0; transform: none; }
  6% { opacity: 1; }
  48% { left: 50%; transform: none; opacity: 1; }
  56% { left: 52%; transform: translateY(11px) scale(0.6); opacity: 0; }
  100% { left: 52%; opacity: 0; }
}
/* Stewards: people stationed on the flow, checking and signing off */
.hm-sim__person { position: absolute; left: var(--x); top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 999px; background: var(--la-ink-2); border: 1.5px solid rgba(255,255,255,0.55); display: grid; place-items: center; color: #fff; }
.hm-sim__person svg { width: 13px; height: 13px; }
.hm-sim__person em { position: absolute; top: -13px; right: -9px; width: 15px; height: 15px; border-radius: 999px; background: var(--la-fischerblau); color: #fff; display: grid; place-items: center; transform: scale(0); animation: hm-person-check 4.2s ease infinite; animation-delay: var(--pd, 0s); }
.hm-sim__person em svg { width: 9px; height: 9px; }
@keyframes hm-person-check {
  0%, 38% { transform: scale(0); }
  46%, 74% { transform: scale(1); }
  82%, 100% { transform: scale(0); }
}
.hm-sim__bands small { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: rgba(255,255,255,0.45); margin-top: 2px; }
@media (prefers-reduced-motion: reduce) {
  .hm-sim__flow, .hm-sim__gate, .hm-sim__runner, .hm-sim__person em { animation: none; }
  .hm-sim__runner { display: none; }
  .hm-sim__person em { transform: scale(1); }
}

/* Theater mode (exploded-circle scroll choreography). The tiles dissolve
   entirely: three ring segments (Integration / Analytics / Data+) form and
   fill in sequence, sector content floats freely around the ring, the app
   vanishes in the middle, and a core label lands there above the Qlik
   Elite Partner badge. --ring-d (ring diameter) is set by the component. */
/* 100vh pinned stage + MAIN_VH (3.8) + SETTLE_VH (0.8) of scroll, see
   HomeAppSim.svelte. */
.hm-sim.is-theater { padding: 0; height: 560vh; }
.is-theater .hm-sim__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.is-theater .hm-sim__stage { position: relative; width: 100%; height: 100%; --ring-d: min(56vh, 40vw); }
.is-theater .hm-sim__head { position: absolute; top: 116px; left: 50%; transform: translateX(-50%); text-align: center; margin: 0; max-width: none; z-index: 5; }
.is-theater .hm-sim__mouse { position: absolute; left: 50%; bottom: calc(100% + 14px); margin: 0 0 0 -11px; }
.is-theater .hm-sim__app {
  position: absolute; left: 50%; top: calc(50% + 20px); z-index: 2;
  width: min(88vw, calc((100vh - 320px) * 1.985));
  transform: translate(-50%, -50%);
}
.is-theater .hm-app { aspect-ratio: auto; height: 100%; }
.is-theater .hm-sim__grid { display: contents; }
.is-theater .hm-sim__col { position: absolute; z-index: 3; opacity: 0; }
/* Sector blocks sit beside their ring segments: Integration fills the
   left band (its segment starts at 9 o'clock), Analytics the right band,
   Data+ the strip below — no dead corners on the stage. The Integration
   band is narrowed well past the degree counter's own box (.hm-sim__core,
   left: 50% - ring-d*0.3833 - 188px) so the two never share space, and the
   Data+ strip sits further below the ring so its mini cards have landing
   room before the "Aktion" copy. */
.is-theater .hm-sim__col--int { left: 4vw; top: calc(53% - 80px - var(--ring-d) * 0.3); width: calc(43vw - var(--ring-d) / 2 - 130px); }
.is-theater .hm-sim__col--ana { left: calc(50% + var(--ring-d) / 2 + 5vw); top: calc(53% - 80px - var(--ring-d) * 0.3); width: calc(43vw - var(--ring-d) / 2 - 20px); }
/* Centered (not left-anchored): Integration and Analyse already flank the
   ring symmetrically left/right, so Aktion — the apex below — reads as part
   of the same balanced triangle instead of pulling the whole composition's
   weight to the left. (left:0;right:0;margin:auto, not transform, so it
   doesn't fight the column's own translateY reveal transform.) */
.is-theater .hm-sim__col--dp { left: 0; right: 0; margin: 0 auto; top: calc(53% - 80px + var(--ring-d) / 2 + 64px); width: min(82vw, 1100px); }
/* Sector blocks float freely — no card chrome at all */
.is-theater .hm-sim__panel { background: transparent; border: 0; box-shadow: none; padding: 0; height: auto; display: block; }
.is-theater .hm-sim__panel p { display: none; }
.is-theater .hm-sim__link { display: none; }
.is-theater .hm-sim__panel h3 { font-size: 16px; }
.is-theater .hm-sim__panel .hm-sim__k { font-size: var(--hm-h3); }
.is-theater .hm-sim__khead { margin-bottom: 8px; }
.is-theater .hm-sim__panel-copy { margin-bottom: 14px; }
.is-theater .hm-sim__panel--int { text-align: right; }
.is-theater .hm-sim__panel--int .hm-sim__chips { justify-content: flex-end; }
.is-theater .hm-sim__panel--ana .hm-sim__mini { max-width: 130px; }
/* Top-aligned, not centered: the docks+chips block is now taller than the
   copy block (six chips wrap into two rows), and center-alignment would
   push it above the kicker — straight into the connector rule line drawn
   just above the kicker's own top edge. */
.is-theater .hm-sim__panel--dp { display: flex; align-items: flex-start; gap: 56px; }
.is-theater .hm-sim__panel--dp .hm-sim__panel-copy { flex: 0 0 auto; margin-bottom: 0; }
.is-theater .hm-sim__panel--dp .hm-sim__panel-body { flex: 1; min-width: 0; }
.is-theater .hm-sim__panel--dp .hm-sim__docks { margin-bottom: 10px; gap: 18px; }
.is-theater .hm-sim__panel--dp .hm-sim__mini { max-width: 170px; flex: 0 0 auto; width: 150px; }
.is-theater .hm-sim__panel--dp .hm-sim__docks { flex-wrap: nowrap; }
/* Grouped like the other two sectors: one row of mini cards, then the
   chips in their own fixed 3-column grid (two rows for the six Data+
   chips) instead of one wide, loosely wrapping row. */
.is-theater .hm-sim__panel--dp .hm-sim__chips { display: grid; grid-template-columns: repeat(3, max-content); justify-content: start; }
.is-theater .hm-sim__chip { opacity: 0; }
.is-theater .hm-sim__mini { opacity: 0; }
.is-theater .hm-sim__band { clip-path: inset(-16px 100% -8px 0); }
.is-theater .hm-sim__docks { display: flex; }
.is-theater .hm-sim__mini { flex: 0 1 auto; width: 31%; }
.is-theater .hm-sim__hint {
  display: block; position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 4;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.65);
}

/* Connector wires: a fine white line grows from each ring segment to its
   sector heading (--wq = draw progress, set per frame). A node in the
   segment color marks the start, a white dot the end; once drawn, a light
   pulse travels from the ring out to the sector. */
.hm-sim__wires { display: none; }
.is-theater .hm-sim__wires { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.hm-sim__wire { --wq: 0; --wb: 0; }
.hm-sim__wire-line, .hm-sim__wire-branch {
  fill: none; stroke: rgba(255,255,255,0.45); stroke-width: 1.2; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--wq));
}
.hm-sim__wire-branch { stroke-dashoffset: calc(1 - var(--wb)); }
.hm-sim__wire-glint {
  fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 0.045 0.955; stroke-dashoffset: 0; opacity: 0;
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.95));
  transition: opacity 0.4s ease;
}
.hm-sim__wire.is-live .hm-sim__wire-glint { animation: hm-wire-glint 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.hm-sim__wire--ana.is-live .hm-sim__wire-glint { animation-delay: -1.1s; }
.hm-sim__wire--dp.is-live .hm-sim__wire-glint { animation-delay: -2.2s; }
/* The pulse fades in leaving the ring and out arriving at the sector */
@keyframes hm-wire-glint {
  0% { stroke-dashoffset: 0.045; opacity: 0; }
  15% { opacity: 0.85; }
  80% { opacity: 0.85; }
  100% { stroke-dashoffset: -0.955; opacity: 0; }
}
.hm-sim__wire-node { stroke: #fff; stroke-width: 1.5; opacity: min(1, calc(var(--wq) * 8)); }
.hm-sim__wire--int .hm-sim__wire-node, .hm-sim__wire--int .hm-sim__wire-halo { fill: var(--la-fischerblau); }
.hm-sim__wire--ana .hm-sim__wire-node, .hm-sim__wire--ana .hm-sim__wire-halo { fill: var(--la-sonnengelb); }
.hm-sim__wire--dp .hm-sim__wire-node, .hm-sim__wire--dp .hm-sim__wire-halo { fill: var(--la-kupferrot); }
.hm-sim__wire-halo { opacity: 0; transform-box: fill-box; transform-origin: center; }
.hm-sim__wire.is-live .hm-sim__wire-halo { animation: hm-wire-halo 2.4s ease-out infinite; }
@keyframes hm-wire-halo { 0% { opacity: 0.55; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
.hm-sim__wire-end, .hm-sim__wire-end2 { fill: #fff; opacity: 0; transition: opacity 0.3s ease; }
.hm-sim__wire.is-live .hm-sim__wire-end, .hm-sim__wire.is-live .hm-sim__wire-end2 { opacity: 0.9; }

/* Final frame: heading + three pillar columns. Only exists on the theater
   stage; the stacked layout explains the pillars in its panels. The 360
   and the pillar names are transparent slots — the core number and the
   sector kickers fly in and cover them. */
.hm-sim__end { display: none; }
.is-theater .hm-sim__end {
  display: flex; flex-direction: column; justify-content: center; gap: clamp(32px, 6vh, 64px);
  position: absolute; inset: 0; padding: 110px var(--pad-x) 48px; z-index: 4; pointer-events: none;
}
.is-theater.is-settled .hm-sim__end { pointer-events: auto; }
.hm-sim__end-head { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
/* Same size as every homepage section heading (.hm-head h2), capped by the
   viewport height so the pinned frame still fits on short screens. The
   site-wide h2 text gradient would ignore the fade-in of .hm-sim__end-rest,
   so it moves from the h2 onto that inner span instead. */
.hm-sim__end-title { margin: 0; font-size: min(var(--hm-h2), 11vh); line-height: var(--lh-tight); letter-spacing: -0.02em; background: none; }
.hm-sim__end-rest { background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%); background-clip: text; -webkit-background-clip: text; }
.hm-sim__end-rest, .hm-sim__end-col, .hm-sim__end-n, .hm-sim__end-name, .hm-sim__end-text, .hm-sim__end-link { opacity: 0; }
.hm-sim__end-link { margin-top: auto; padding-top: 20px; }
.hm-sim__end-link::after { background: var(--c); }
/* Keyboard users can reach a link before the frame has settled — show it. */
.hm-sim__end-link:focus-visible { opacity: 1 !important; }
.hm-sim__end-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* Column = flex stack, so the links line up at the bottom of the row
   whatever the text length. Borderless, asymmetric-corner card (same
   recipe as .uc-mod / .m-legalcard) with a light shadow, so the three
   pillars read as one structured row instead of loose floating text. Starts
   at opacity 0 (above) and is faded in by the component once the ring
   frame behind it has fully cleared — never visible at the same time. */
.hm-sim__end-col {
  display: flex; flex-direction: column; align-items: flex-start;
  background: rgba(58,66,72,0.42); border-radius: 24px 0 24px 0;
  padding: 28px 26px 26px; box-shadow: 0 10px 30px rgba(0,0,0,0.22);
}
.hm-sim__end-col--int { --c: var(--la-fischerblau); }
.hm-sim__end-col--ana { --c: var(--la-sonnengelb); }
.hm-sim__end-col--dp { --c: var(--la-kupferrot); }
.hm-sim__end-bar { display: block; align-self: stretch; height: 4px; margin-bottom: 22px; visibility: hidden; }
/* Each pillar is a guideline item (.hm-prin__item + .hm-prin__n circle), so
   pillars and "Unsere Leitlinien" below speak the same language. Title and
   text mirror .hm-prin h3 / .hm-prin p; only the circle takes the pillar colour. */
.hm-sim__end-item { flex: 1; align-self: stretch; }
.hm-sim__end-n { background: var(--c); }
.hm-sim__end-body { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; }
.hm-sim__end-name { margin: 10px 0 12px; font-size: var(--hm-h3); font-weight: 600; line-height: var(--lh-snug); color: #fff; }
.hm-sim__end-text { margin: 0; max-width: 34em; font-weight: 300; font-size: var(--hm-body); line-height: 1.6; color: rgba(255,255,255,0.72); }

/* Ring: three segments, drawn on in sequence */
.hm-sim__ring { display: none; }
.is-theater .hm-sim__ring {
  display: block; position: absolute; z-index: 1; opacity: 0;
  left: 50%; top: calc(53% - 80px); width: var(--ring-d); height: var(--ring-d);
  margin: calc(var(--ring-d) / -2) 0 0 calc(var(--ring-d) / -2);
}
.hm-sim__ring svg { display: block; width: 100%; height: 100%; }
.hm-sim__ring-track { fill: none; stroke: rgba(255,255,255,0.09); stroke-width: 8; }
/* Segments start at 9 o'clock (where the degree counter sits) and draw
   clockwise: Integration left->top, Analytics right, Data+ bottom. */
.hm-sim__ring-seg { fill: none; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 0 1446; transform-origin: 300px 300px; }
.hm-sim__ring-seg--int { stroke: var(--la-fischerblau); transform: rotate(183deg); }
.hm-sim__ring-seg--ana { stroke: var(--la-sonnengelb); transform: rotate(303deg); }
.hm-sim__ring-seg--dp { stroke: var(--la-kupferrot); transform: rotate(63deg); }

/* Ring center core: a plain label, same size/weight as the sector kickers
   (.hm-sim__k, --hm-h3), that slides from the ring's left — where the
   segments start drawing — into the ring center as they finish. */
.hm-sim__core { display: none; }
.is-theater .hm-sim__core {
  display: block; position: absolute; z-index: 4; opacity: 0; text-align: center;
  /* While the ring draws it sits at the ring's left, at ring-center height;
     the component translates it to the ring center once drawn. The box is
     wide enough for the lead line and the two-line, centered title below
     it without either wrapping unexpectedly. */
  /* The ring stroke sits 11.67% of the diameter inside the ring box (r=230
     in a 600 viewBox); the label's right edge stays ~14px left of it. */
  left: calc(50% - var(--ring-d) * 0.3833 - 268px); top: calc(53% - 114px); width: 340px; pointer-events: none;
}
.hm-sim__core-num { display: flex; flex-direction: column; align-items: center; }
/* Lead line, same size/weight as the sector taglines (.hm-sim__panel h3 in
   theater mode) right above the title it introduces. */
.hm-sim__core-lead { display: block; font-size: 16px; font-weight: 500; line-height: 1.2; color: rgba(255,255,255,0.86); margin-bottom: 6px; }
.hm-sim__core-title { font-family: var(--font-headline); font-weight: 700; font-size: var(--hm-h3); line-height: 1.15; letter-spacing: -0.015em; color: var(--fg-1); }
/* Official Qlik Elite Partner badge under the core label: layered soft
   shadow for depth, and once landed a fine light sheen sweeps across the
   shield now and then — masked to the badge shape so it never spills. */
.hm-sim__core-badge {
  position: relative; display: block; width: 104px; margin: 14px auto 0; opacity: 0;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35)) drop-shadow(0 14px 26px rgba(0,0,0,0.5));
  will-change: transform, opacity;
}
.hm-sim__core-badge img { display: block; width: 100%; height: auto; }
.hm-sim__core-badge::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.55) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 160% 0;
  -webkit-mask: url(/assets/logos/qlik-elite-partner.png) center / 100% 100% no-repeat;
  mask: url(/assets/logos/qlik-elite-partner.png) center / 100% 100% no-repeat;
  mix-blend-mode: soft-light; opacity: 0;
}
.hm-sim__core-badge.is-in::after { opacity: 1; animation: hm-badge-sheen 6s ease-in-out 0.4s infinite; }
@keyframes hm-badge-sheen { 0% { background-position: 160% 0; } 28%, 100% { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) { .hm-sim__core-badge::after { display: none; } }
/* Caption under the badge, same size/weight as the lead line above the
   title (.hm-sim__core-lead) — centered in the full-width core box, not
   constrained to the badge's own 104px width. */
.hm-sim__core-caption { display: block; margin-top: 10px; font-size: 16px; font-weight: 500; line-height: 1.3; color: rgba(255,255,255,0.86); opacity: 0; }

/* Stacked layout below the theater breakpoint: one panel per row, so the
   Data+ minis keep their fixed widths side by side. */
@media (max-width: 1199px) {
  .hm-sim__grid { grid-template-columns: 1fr; }
  .hm-sim__panel h3 { font-size: 17px; }
}
@media (max-width: 960px) {
  .hm-sim__panel--int { grid-template-columns: 1fr; }
  .hm-sim__bandrow > span { flex-basis: 110px; }
}
/* Phones: slimmer card padding, KPI mini numbers kept apart, and the four
   Data+ minis as an even 2x2 grid (their fixed 150px layouts need ~140px,
   so the very narrowest phones zoom them down slightly). */
@media (max-width: 560px) {
  .hm-sim__panel { padding: 24px 18px 22px; }
  .hm-sim__mini--kpis { gap: 6px; padding-inline: 6px; justify-content: space-evenly; }
  .hm-sim__mini--kpis i { font-size: 14px; }
  .hm-sim__panel--dp .hm-sim__docks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hm-sim__panel--dp .hm-sim__mini { width: auto; }
}
@media (max-width: 370px) {
  .hm-sim__panel--dp .hm-sim__mini { zoom: 0.9; }
}

/* ---- Simulated Qlik app (hm-app), rendered inside .hm-sim__app ----
   Stylized rebuild of the recorded purchasing app. Sized with container
   query units so it scales with the app tile; [data-step] (set by
   FakeApp.svelte's timeline) drives the in-app animation states.
   Dark mode: tones sit just below/around the section's lavagrau ink so the
   app blends into the dark stage instead of glowing as a white block. */
.hm-app {
  --app-bg: #272d31;          /* sheet / hub canvas */
  --app-bg-2: #23292d;        /* canvas gradient end */
  --app-surface: #323a40;     /* objects, tiles */
  --app-surface-2: #3a4248;   /* popups, raised */
  --app-line: rgba(255,255,255,0.08);
  --app-line-2: rgba(255,255,255,0.05);
  --app-text: rgba(255,255,255,0.88);
  --app-text-2: rgba(255,255,255,0.66);
  --app-text-3: rgba(255,255,255,0.42);
  --app-shadow: 0 1px 2px rgba(0,0,0,0.22), 0 8px 22px rgba(0,0,0,0.22);
  container-type: inline-size; position: relative; aspect-ratio: 1.985; background: var(--app-bg); color: var(--app-text); display: flex; flex-direction: column;
}
/* macOS window bar wrapped around the app */
.hm-app__mac { display: flex; align-items: center; height: 3.2cqw; background: #1f2427; padding: 0 1.4cqw; flex: 0 0 auto; position: relative; }
.hm-app__dots { display: flex; gap: 0.7cqw; }
.hm-app__dots i { width: 1.05cqw; height: 1.05cqw; border-radius: 999px; background: #ff5f57; }
.hm-app__dots i:nth-child(2) { background: #febc2e; }
.hm-app__dots i:nth-child(3) { background: #28c840; }
.hm-app__url { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--font-mono); font-size: 0.95cqw; line-height: 1; color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.08); border-radius: 999px; padding: 0.42cqw 1.3cqw; white-space: nowrap; }

/* Qlik hub overlay: the central app platform. Visible in the "hub" step,
   zooms away once the purchasing app has been picked. */
.hm-app__hub {
  position: absolute; left: 0; right: 0; top: 3.2cqw; bottom: 0; z-index: 4;
  display: flex; flex-direction: column; padding: 1.6cqw 2cqw 1.1cqw;
  background: linear-gradient(180deg, var(--app-bg) 0%, var(--app-bg-2) 100%);
  opacity: 1; transition: opacity 0.45s ease, transform 0.45s ease;
}
.hm-app:not([data-step^="hub"]) .hm-app__hub { opacity: 0; transform: scale(1.04); pointer-events: none; }
.hm-app__hub-eyebrow { display: block; font-family: var(--font-mono); font-size: 0.85cqw; letter-spacing: 0.12em; text-transform: uppercase; color: var(--app-text-3); margin-bottom: 0.4cqw; }
.hm-app__hub-head strong { display: block; font-family: var(--font-headline); font-weight: 700; font-size: 1.9cqw; letter-spacing: -0.01em; color: var(--app-text); }
.hm-app__hub-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3cqw; align-content: center; margin: 0.9cqw 0; }
.hm-app__hub-tile {
  position: relative; display: flex; flex-direction: column; gap: 0.5cqw;
  padding: 1.3cqw 1.3cqw 1.4cqw; background: var(--app-surface); border: 1px solid var(--app-line);
  border-radius: 14px 0 14px 5px;
  box-shadow: var(--app-shadow);
}
.hm-app__hub-icon {
  width: 3.1cqw; height: 3.1cqw; border-radius: 9px 0 9px 3px;
  display: grid; place-items: center; color: #fff; margin-bottom: 0.3cqw;
}
.hm-app__hub-icon svg { width: 62%; height: 62%; }
.hm-app__hub-tile.is-c0 .hm-app__hub-icon { background: var(--la-fischerblau); }
.hm-app__hub-tile.is-c1 .hm-app__hub-icon { background: var(--la-sonnengelb); color: var(--la-lavagrau); }
.hm-app__hub-tile.is-c2 .hm-app__hub-icon { background: var(--la-kupferrot); }
.hm-app__hub-num { position: absolute; right: 0.9cqw; top: 0.8cqw; font-family: var(--font-mono); font-size: 0.8cqw; color: var(--app-text-3); }
.hm-app__hub-tile b { font-weight: 700; font-size: 1.05cqw; line-height: 1.15; color: var(--app-text); }
.hm-app__hub-tile small { font-size: 0.82cqw; line-height: 1.4; color: var(--app-text-2); }
/* The purchasing tile gets picked at the end of the hub step */
.hm-app[data-step="hub"] .hm-app__hub-tile.is-target { animation: hm-hub-pick 4s linear; }
@keyframes hm-hub-pick {
  0%, 55% { border-color: var(--app-line); transform: none; box-shadow: var(--app-shadow); }
  66%, 100% { border-color: var(--la-sonnengelb); transform: translateY(-3%); box-shadow: 0 2px 4px rgba(0,0,0,0.25), 0 14px 30px rgba(0,0,0,0.3), 0 0 0 3px rgba(250,187,0,0.2); }
}
.hm-app__hub-note { font-family: var(--font-mono); font-size: 0.8cqw; letter-spacing: 0.05em; color: var(--app-text-3); }
.hm-app__chrome { display: flex; align-items: center; gap: 1.2cqw; padding: 0 1.4cqw; height: 4.6cqw; background: var(--app-bg); border-bottom: 1px solid var(--app-line); flex: 0 0 auto; }
.hm-app__logo { display: block; height: 4.2cqw; width: auto; margin-left: -1cqw; }
.hm-app__crumb { font-size: 1.2cqw; color: var(--app-text-2); border-left: 1px solid var(--app-line); padding-left: 1.2cqw; }
.hm-app__user { margin-left: auto; width: 2.6cqw; height: 2.6cqw; border-radius: 999px; background: var(--la-fischerblau); color: #fff; font-size: 1cqw; font-weight: 600; display: grid; place-items: center; }
.hm-app__selbar { display: flex; align-items: center; padding: 0 1.4cqw; height: 3.4cqw; background: var(--app-bg-2); border-bottom: 1px solid var(--app-line); flex: 0 0 auto; }
.hm-app__selchip { display: inline-flex; align-items: center; gap: 0.8cqw; font-size: 1.05cqw; color: #fff; background: var(--app-surface-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); border-radius: 3px; padding: 0.5cqw 0.9cqw; opacity: 0; transform: translateY(20%); transition: opacity 0.3s ease, transform 0.3s ease; }
.hm-app__selchip b { font-weight: 400; opacity: 0.7; }
.hm-app[data-step="filtered"] .hm-app__selchip,
.hm-app[data-step="typing"] .hm-app__selchip,
.hm-app[data-step="picking"] .hm-app__selchip,
.hm-app[data-step="sent"] .hm-app__selchip { opacity: 1; transform: none; }
.hm-app__sheet { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 1.1cqw; padding: 1.2cqw 1.4cqw 1.4cqw; min-height: 0; background: linear-gradient(180deg, var(--app-bg) 0%, var(--app-bg-2) 100%); }
.hm-app__obj { border: 1px solid var(--app-line); border-radius: 5px; background: var(--app-surface); box-shadow: var(--app-shadow); transition: opacity 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; }
.hm-app__obj.is-away { box-shadow: none; }
.hm-app__obj > * { transition: opacity 0.25s ease; }
/* Ghost outline left behind once a building block has flown out. */
.hm-app__obj.is-away { border: 2px dashed rgba(255,255,255,0.22); background: rgba(255,255,255,0.025); }
.hm-app__obj.is-away > * { opacity: 0; }
.hm-app__obj-title { display: block; font-size: 1.05cqw; font-weight: 600; color: var(--app-text); padding: 0.9cqw 1.1cqw 0.5cqw; }
.hm-app[data-step="load"] .hm-app__obj { opacity: 0.35; }

/* KPI row */
.hm-app__kpis { display: flex; }
.hm-app__kpi { flex: 1; display: flex; align-items: center; gap: 1.1cqw; padding: 1cqw 1.4cqw; }
.hm-app__kpi + .hm-app__kpi { border-left: 1px solid var(--app-line); }
.hm-app__kpi svg { width: 2.8cqw; height: 2.8cqw; color: var(--la-fischerblau); flex: 0 0 auto; }
.hm-app__kpi-label { display: block; font-size: 1.1cqw; color: var(--app-text-2); }
.hm-app__kpi-num { display: block; font-family: var(--font-headline); font-weight: 700; font-size: 2.4cqw; line-height: 1.1; }

/* Charts row */
.hm-app__row { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 1.1cqw; flex: 0 0 auto; }
.hm-app__chart { position: relative; padding-bottom: 0.9cqw; }
.hm-app__bar { display: flex; align-items: center; gap: 0.9cqw; padding: 0.42cqw 1.1cqw; }
.hm-app__bar > span { flex: 0 0 7.2cqw; font-size: 1cqw; color: var(--app-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-app__bar-rail { flex: 1; height: 1.35cqw; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.hm-app__bar-rail i { display: block; height: 100%; width: var(--w-all); background: var(--la-kupferrot); transition: width 0.7s var(--ease-out-expo, ease); }
.hm-app__bar-rail i.is-teal { background: var(--la-fischerblau); }
.hm-app__bar-rail i.is-rose { background: rgba(230,68,53,0.45); }
.hm-app[data-step="load"] .hm-app__bar-rail i { width: 0; }
.hm-app[data-step="filtered"] .hm-app__bar-rail i,
.hm-app[data-step="typing"] .hm-app__bar-rail i,
.hm-app[data-step="picking"] .hm-app__bar-rail i,
.hm-app[data-step="sent"] .hm-app__bar-rail i { width: var(--w-sel); }

@keyframes hm-app-click { 0% { opacity: 0.9; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.6); } }

/* Scatter */
.hm-app__scatter { display: flex; flex-direction: column; }
.hm-app__scatter-plot {
  position: relative; flex: 1; margin: 0.3cqw 1.1cqw 0.9cqw; border-left: 1px solid rgba(255,255,255,0.14); border-bottom: 1px solid rgba(255,255,255,0.14); min-height: 6cqw;
  background-image: linear-gradient(var(--app-line-2) 1px, transparent 1px), linear-gradient(90deg, var(--app-line-2) 1px, transparent 1px);
  background-size: 12.5% 25%;
}
.hm-app__scatter-plot i { position: absolute; width: 0.9cqw; height: 0.9cqw; border-radius: 999px; background: var(--la-kupferrot); transition: opacity 0.5s ease, transform 0.5s ease; }
.hm-app__scatter-plot i.is-teal { background: var(--la-fischerblau); }
.hm-app__scatter-plot i.is-rose { background: rgba(230,68,53,0.45); }
.hm-app[data-step="filtered"] .hm-app__scatter-plot i:not(.stays),
.hm-app[data-step="typing"] .hm-app__scatter-plot i:not(.stays),
.hm-app[data-step="picking"] .hm-app__scatter-plot i:not(.stays),
.hm-app[data-step="sent"] .hm-app__scatter-plot i:not(.stays) { opacity: 0.1; transform: scale(0.5); }

/* Writeback table */
.hm-app__table { position: relative; flex: 0 1 auto; min-height: 0; }
.hm-app__tr { display: grid; grid-template-columns: 9cqw 8cqw 8cqw 8cqw 1fr 3.2cqw 9cqw; align-items: center; gap: 0.8cqw; padding: 0.5cqw 1.1cqw; font-size: 1.05cqw; color: var(--app-text); border-top: 1px solid var(--app-line-2); }
.hm-app__tr--head { font-size: 0.95cqw; font-weight: 600; color: var(--app-text-3); border-top: 0; padding-top: 0; }
.hm-app__pill { display: inline-block; font-size: 0.92cqw; font-weight: 600; line-height: 1; padding: 0.42cqw 0.8cqw; border-radius: 3px; color: #fff; background: var(--la-kupferrot); }
.hm-app__pill.is-amber { background: var(--la-sonnengelb); color: var(--la-lavagrau); }
.hm-app__pill.is-redline { background: rgba(230,68,53,0.16); color: rgba(255,255,255,0.88); }
.hm-app__pill--flip { position: relative; background: transparent; padding: 0; min-width: 7cqw; height: 1.8cqw; }
.hm-app__pill--flip i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; border-radius: 3px; transition: opacity 0.35s ease; }
.hm-app__pill--flip i.is-amber { background: var(--la-sonnengelb); color: var(--la-lavagrau); }
.hm-app__pill--flip i.is-ok { background: var(--la-fischerblau); color: #fff; opacity: 0; }
.hm-app[data-step="sent"] .hm-app__pill--flip i.is-amber { opacity: 0; }
.hm-app[data-step="sent"] .hm-app__pill--flip i.is-ok { opacity: 1; }
.hm-app__input { display: inline-flex; align-items: center; width: 100%; min-height: 1.9cqw; border: 1px solid rgba(255,255,255,0.14); border-radius: 3px; padding: 0 0.6cqw; font-size: 1cqw; background: rgba(0,0,0,0.14); }
.hm-app__caret { width: 1px; height: 1.2cqw; background: var(--app-text); margin-left: 1px; opacity: 0; }
.hm-app[data-step="typing"] .hm-app__caret { animation: hm-app-caret 0.9s step-end infinite; }
@keyframes hm-app-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
/* Follow-up date cell + date picker popup (reminder gets set on row 2) */
.hm-app__date { border-radius: 3px; padding: 0.2cqw 0.4cqw; margin: -0.2cqw -0.4cqw; transition: background 0.3s ease, font-weight 0.3s ease; }
.hm-app__date.is-set { background: rgba(250,187,0,0.22); color: #fff; font-weight: 600; }
.hm-app__picker {
  position: absolute; left: 24%; bottom: 42%; z-index: 5; width: 14cqw;
  background: var(--app-surface-2); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; padding: 0.8cqw;
  box-shadow: 0 14px 40px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.25);
  opacity: 0; transform: translateY(6%) scale(0.94); transform-origin: 40% 100%;
  transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none;
}
.hm-app[data-step="picking"] .hm-app__picker { opacity: 1; transform: none; }
.hm-app__picker-head { display: block; font-size: 0.9cqw; font-weight: 600; color: var(--app-text); margin-bottom: 0.5cqw; }
.hm-app__picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.15cqw; }
.hm-app__picker-grid span { font-size: 0.78cqw; line-height: 1; text-align: center; padding: 0.32cqw 0; border-radius: 3px; color: var(--app-text-2); }
.hm-app[data-step="picking"] .hm-app__picker-grid .is-pick { animation: hm-day-pick 2s forwards; animation-delay: 0.9s; }
@keyframes hm-day-pick {
  0%, 38% { background: transparent; color: var(--app-text-2); box-shadow: none; }
  50% { background: var(--la-sonnengelb); color: var(--la-lavagrau); box-shadow: 0 0 0 4px rgba(250,187,0,0.3); }
  100% { background: var(--la-sonnengelb); color: var(--la-lavagrau); font-weight: 700; box-shadow: none; }
}
.hm-app__send { width: 1.6cqw; height: 1.6cqw; color: var(--app-text-3); }
.hm-app[data-step="sent"] .hm-app__send.is-row2 { color: var(--la-fischerblau); animation: hm-app-send 0.5s ease; }
@keyframes hm-app-send { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }

/* Simulated tapping-hand cursor: the hand presses down and two red
   concentric rings burst from the fingertip at every click moment. */
.hm-app__cursorw { position: absolute; width: 2cqw; height: 2cqw; left: 50%; top: 50%; opacity: 0; z-index: 6; transition: left 0.8s var(--ease-out-expo, ease), top 0.8s var(--ease-out-expo, ease), opacity 0.3s ease; }
.hm-app__cursorw .tap-hand { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.55)); }
.hm-app__cursorw i { position: absolute; left: 48%; top: 10%; width: 2.2cqw; height: 2.2cqw; margin: -1.1cqw 0 0 -1.1cqw; pointer-events: none; }
.hm-app__cursorw i::before,
.hm-app__cursorw i::after { content: ""; position: absolute; inset: 0; border-radius: 999px; border: 2px solid var(--la-kupferrot); opacity: 0; }
.hm-app[data-step="hub"] .hm-app__cursorw { opacity: 1; left: 20%; top: 60%; z-index: 7; }
.hm-app[data-step="hub"] .hm-app__cursorw i::before { animation: hm-app-click 0.5s ease-out 2.5s; }
.hm-app[data-step="hub"] .hm-app__cursorw i::after { animation: hm-app-click 0.5s ease-out 2.64s; }
.hm-app[data-step="hub"] .hm-app__cursorw .tap-hand { animation: hm-app-press 0.3s ease 2.5s; }
/* Quick pick after the scroll-driven release: the hand is already on the
   purchasing tile and clicks right away. */
.hm-app[data-step="hubpick"] .hm-app__cursorw { opacity: 1; left: 20%; top: 60%; z-index: 7; transition: opacity 0.2s ease; }
.hm-app[data-step="hubpick"] .hm-app__cursorw i::before { animation: hm-app-click 0.5s ease-out 0.35s; }
.hm-app[data-step="hubpick"] .hm-app__cursorw i::after { animation: hm-app-click 0.5s ease-out 0.49s; }
.hm-app[data-step="hubpick"] .hm-app__cursorw .tap-hand { animation: hm-app-press 0.3s ease 0.35s; }
.hm-app[data-step="hubpick"] .hm-app__hub-tile.is-target {
  border-color: var(--la-sonnengelb); transform: translateY(-3%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.25), 0 14px 30px rgba(0,0,0,0.3), 0 0 0 3px rgba(250,187,0,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.hm-app[data-step="selecting"] .hm-app__cursorw,
.hm-app[data-step="filtered"] .hm-app__cursorw { opacity: 1; left: 58.5%; top: 47%; }
.hm-app[data-step="typing"] .hm-app__cursorw { opacity: 1; left: 56%; top: 84%; }
.hm-app[data-step="picking"] .hm-app__cursorw { opacity: 1; left: 28%; top: 79%; }
.hm-app[data-step="sent"] .hm-app__cursorw { opacity: 1; left: 66.5%; top: 84%; }
.hm-app[data-step="selecting"] .hm-app__cursorw i::before { animation: hm-app-click 0.5s ease-out 0.55s; }
.hm-app[data-step="selecting"] .hm-app__cursorw i::after { animation: hm-app-click 0.5s ease-out 0.69s; }
.hm-app[data-step="selecting"] .hm-app__cursorw .tap-hand { animation: hm-app-press 0.3s ease 0.55s; }
.hm-app[data-step="typing"] .hm-app__cursorw i::before { animation: hm-app-click 0.5s ease-out 0.6s; }
.hm-app[data-step="typing"] .hm-app__cursorw i::after { animation: hm-app-click 0.5s ease-out 0.74s; }
.hm-app[data-step="typing"] .hm-app__cursorw .tap-hand { animation: hm-app-press 0.3s ease 0.6s; }
.hm-app[data-step="picking"] .hm-app__cursorw i::before { animation: hm-app-click 0.5s ease-out 0.95s; }
.hm-app[data-step="picking"] .hm-app__cursorw i::after { animation: hm-app-click 0.5s ease-out 1.09s; }
.hm-app[data-step="picking"] .hm-app__cursorw .tap-hand { animation: hm-app-press 0.3s ease 0.95s; }
.hm-app[data-step="sent"] .hm-app__cursorw i::before { animation: hm-app-click 0.5s ease-out 0.15s; }
.hm-app[data-step="sent"] .hm-app__cursorw i::after { animation: hm-app-click 0.5s ease-out 0.29s; }
.hm-app[data-step="sent"] .hm-app__cursorw .tap-hand { animation: hm-app-press 0.3s ease 0.15s; }
@keyframes hm-app-press { 50% { transform: scale(0.8); } }
@media (prefers-reduced-motion: reduce) {
  .hm-app__cursorw, .hm-app__selchip { display: none; }
}

.hm-bookus { position: relative; padding: 110px var(--pad-x) 150px; overflow: hidden; }
.hm-bookus__visual { position: absolute; inset: auto -8% -24% 32%; height: 150%; z-index: 0; pointer-events: none; }
.hm-bookus__visual canvas { width: 100%; height: 100%; display: block; }
.hm-bookus__inner { position: relative; z-index: 1; max-width: 1180px; }
.hm-bookus__title { font-size: var(--hm-h2); line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 0; }

/* Contact box — same corporate-gray card language as .ab-career, spans the
   full section width (not capped to __inner's 1180px) rather than sitting
   in the narrow copy column next to the headline. */
.hm-bookus__box {
  position: relative; z-index: 1; margin-top: 48px; overflow: hidden;
  background: rgba(58,66,72,0.6);
  border-radius: 40px 0 40px 0;
  padding: 56px;
  display: flex; align-items: center; justify-content: space-evenly; gap: 48px; flex-wrap: wrap;
}
.hm-bookus__copy, .hm-bookus__box .la-people { position: relative; z-index: 1; }
/* Dashboard-screen frame, identical recipe to the app simulation above
   (.hm-sim__app chrome + .hm-app__mac bar): rounded, bordered, dropped
   shadow, its own macOS title bar — the paragraph becomes "a screen", tying
   this closing box back to that story instead of a plain text block. */
.hm-bookus__copy {
  margin: 0; max-width: 780px; flex: 0 1 720px;
  container-type: inline-size;
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  background: #272d31;
}
.hm-bookus__copy-body { padding: 36px 40px 40px; }
/* Same dashed "ghost slot" recipe as the app simulation's building blocks
   (.hm-app__obj.is-away), reused as three empty station slots so the data
   journey (Integration / Analyse / Aktion) reads at a glance. */
.hm-bookus__stations { display: flex; gap: 12px; margin-top: 24px; }
.hm-bookus__station {
  flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0;
  border: 2px dashed rgba(255,255,255,0.22); background: rgba(255,255,255,0.025); border-radius: 6px;
  padding: 14px 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hm-bookus__station i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 999px; }
.hm-bookus__station--int i { background: var(--la-fischerblau); }
.hm-bookus__station--ana i { background: var(--la-sonnengelb); }
.hm-bookus__station--dp i { background: var(--la-kupferrot); }
@media (max-width: 560px) { .hm-bookus__stations { flex-direction: column; } }
.hm-bookus__copy p { font-weight: 700; font-size: var(--hm-h3); line-height: var(--lh-snug); color: #fff; margin: 0; }

/* Founders — two contacts, each: round photo, centered text, mail arrow below */
.la-people { display: flex; flex-wrap: wrap; gap: 56px; margin-top: 0; width: max-content; max-width: 100%; }
.la-person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; width: 200px; }
.la-person__photo { width: 180px; height: 180px; display: block; }
.la-person__text h4 { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 0 0 8px; font-family: var(--font-body); }
.la-person__text p { margin: 0; font-weight: 300; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.84); }
.la-person .la-arrow { margin: 0; }
@media (max-width: 560px) { .la-people { gap: 36px; } .la-person { width: 160px; } .la-person__photo { width: 150px; height: 150px; } }
.hm-bookus__copy .la-people { max-width: none; }

@media (max-width: 960px) {
  .hm-hero { min-height: 600px; padding-bottom: 56px; }
  /* Mobile: the dust ring becomes a centred atmospheric backdrop behind the
     hero content. It needs an explicit height — bottom:auto alone collapses
     the container to 0 and the Spline scene would be invisible. */
  .hm-hero__visual { inset: 0 auto auto 50%; transform: translateX(-50%); width: 142%; height: 100%; opacity: 0.9; }
  .hm-hero__spline { transform: scale(1.3); }
  .hm-hero__copy { margin-top: 40px; margin-left: 0; }
  .hm-section { padding: 56px var(--pad-x); }
  .hm-sim-intro { padding: 56px var(--pad-x) 0; }
  .hm-head p { margin-left: 0; }
  .hm-teaser { grid-template-columns: 1fr; }
  .hm-bookus__inner { grid-template-columns: 1fr; }
  .hm-bookus__copy { margin-left: 0; margin-top: 32px; }
  .hm-bookus__visual { opacity: 0.55; }
}

/* =================================================================
   SOLUTIONS IN ACTION (sol-)
   ================================================================= */
/* ============================================================
   Solutions in Action — page-specific composition
   Accent weight: Fischerblau (calm/blue) leading the triad.
   ============================================================ */

/* ---------- Hero ---------- */
.sol-hero {
  position: relative;
  padding: 122px var(--pad-x) 96px;
  min-height: 660px;
  display: flex;
  align-items: center;
}
.sol-hero__visual {
  position: absolute;
  inset: -6% -10% 0 38%;
  z-index: 0;
  pointer-events: none;
}
.sol-hero__visual canvas { width: 100%; height: 100%; display: block; }
/* Spline hero keyvisual — transparent, decorative (autoplay), behind the copy */
.sol-hero__spline {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  background: transparent !important; --background-color: transparent;
  transform-origin: center; z-index: 0; pointer-events: auto;
}
.sol-hero__inner { position: relative; z-index: 1; max-width: 760px; pointer-events: none; }
.sol-hero__inner a, .sol-hero__inner button { pointer-events: auto; }
.sol-hero__title {
  font-size: clamp(64px, 8.5vw, 132px);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 22px 0 0;
}
.sol-hero__copy {
  margin-top: 36px;
  max-width: 480px;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255,255,255,0.82);
}
.sol-hero__cta { margin-top: 34px; display: flex; align-items: center; gap: 20px; }
.sol-hero__cta span {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-3);
}
/* corner coordinate ticks on hero */
.sol-hero__coords {
  position: absolute; right: var(--pad-x); bottom: 56px; z-index: 1;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.32); text-align: right; line-height: 1.7;
}

/* ---------- Section frame ---------- */
.sol-section { position: relative; padding: 96px var(--pad-x); z-index: 1; }
.sol-section--tight { padding-top: 40px; }
.sol-head { max-width: 760px; margin-bottom: 56px; }
.sol-head h2 {
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 16px 0 0;
}
.sol-head p {
  margin: 20px 0 0; max-width: 560px;
  font-weight: 300; font-size: 18px; line-height: 1.65;
  color: rgba(255,255,255,0.72);
}

/* ---------- Capabilities (4 disciplines) ---------- */
.sol-caps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.10);
}
.sol-cap {
  background: rgba(46,53,58,0.6);
  padding: 32px 28px 38px;
  position: relative;
  min-height: 280px;
  display: flex; flex-direction: column;
  transition: background var(--dur-base) var(--ease-out-expo);
}
.sol-cap:hover { background: rgba(58,66,72,0.85); }
.sol-cap__idx {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
  color: var(--fg-3); margin-bottom: 28px;
}
.sol-cap__bar { width: 32px; height: 3px; margin-bottom: 18px; border-radius: 2px; }
.sol-cap h3 { font-size: 21px; line-height: var(--lh-snug); margin: 0 0 14px; }
.sol-cap p {
  font-weight: 300; font-size: 16px; line-height: 1.6;
  color: rgba(255,255,255,0.7); margin: 0;
}

/* ---------- Use-case grid ---------- */
.sol-cases {
  display: grid;
  gap: 18px;
}
.sol-case {
  position: relative;
  display: block;
  text-decoration: none; color: inherit;
  background: rgba(58,66,72,0.5);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 34px 36px;
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out-expo), transform var(--dur-base) var(--ease-out-expo);
}
.sol-case::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--ac, var(--la-fischerblau));
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.sol-case:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.22); }
.sol-case:hover::before { transform: scaleY(1); }
.sol-case__top { display: flex; align-items: baseline; gap: 16px; margin-bottom: 22px; }
.sol-case__num {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em;
  color: var(--ac, var(--la-fischerblau)); font-weight: 600;
}
.sol-case__tag {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-3);
}
.sol-case h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: var(--lh-snug); margin: 0 0 14px; }
.sol-case p {
  font-weight: 300; font-size: 16.5px; line-height: 1.6;
  color: rgba(255,255,255,0.72); margin: 0 0 26px; max-width: 90%;
}
/* Use-case cards use the design-system arrow button in the brand blue
   (Fischerblau) with a white ring + white glyph. On hover the blue deepens
   and the arrow STAYS white (no white-fill flip). */
.sol-case .la-arrow { margin-top: 4px; background: var(--la-fischerblau); border-color: #fff; }
.sol-case:hover .la-arrow, .sol-case .la-arrow:hover { background: #3d8893; border-color: #fff; }
.sol-case:hover .la-arrow img, .sol-case .la-arrow:hover img { filter: invert(1); }

/* ---------- Anatomy / Process rails ---------- */
.sol-anatomy { position: relative; }
.sol-rails { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.sol-step__rail {
  width: 100%; display: flex; align-items: center; height: 88px;
  background: var(--la-rail); border: 0; cursor: pointer; text-align: left;
  border-radius: 9999px 9999px 0 9999px; padding: 0 32px 0 0;
  transition: background var(--dur-base) var(--ease-out-expo);
}
.sol-step__rail:hover, .sol-step.is-open .sol-step__rail { background: #fff; }
.sol-step__disc {
  width: 96px; height: 96px; border-radius: 999px; border: 5px solid #fff;
  box-sizing: border-box; box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  display: grid; place-items: center; color: #fff;
  font-family: var(--font-headline); font-weight: 700; font-size: 32px;
  margin-left: -4px; flex: 0 0 auto;
}
.sol-step__label {
  font-family: var(--font-headline); font-weight: 700;
  font-size: clamp(24px, 2.6vw, 38px); color: var(--la-lavagrau);
  letter-spacing: -0.01em; margin-left: 28px;
}
.sol-step__arr { margin-left: auto; width: 48px; height: 48px; display: grid; place-items: center; transition: transform var(--dur-base) var(--ease-out-expo); }
.sol-step__arr svg { width: 30px; height: 30px; color: var(--la-lavagrau); }
.sol-step.is-open .sol-step__arr { transform: rotate(90deg); }
.sol-step__body { overflow: hidden; max-height: 0; transition: max-height var(--dur-slow) var(--ease-out-expo); }
.sol-step.is-open .sol-step__body { max-height: 320px; }
.sol-step__inner { padding: 26px 0 26px 124px; max-width: 720px; }
.sol-step__inner p {
  font-weight: 300; font-size: 17.5px; line-height: 1.65;
  color: rgba(255,255,255,0.78); margin: 0;
}

/* ---------- Example stat band ---------- */
.sol-stats {
  margin-top: 64px;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  display: grid; grid-template-columns: 1.1fr repeat(3, 1fr);
}
.sol-stats__lead { padding: 38px 36px 38px 0; }
.sol-stats__lead .la-eyebrow { color: var(--la-fischerblau); }
.sol-stats__lead h3 { font-size: 26px; line-height: var(--lh-snug); margin: 16px 0 0; }
.sol-stat {
  padding: 38px 32px; border-left: 1px solid rgba(255,255,255,0.12);
  display: flex; flex-direction: column; justify-content: center;
}
.sol-stat__n {
  font-family: var(--font-headline); font-weight: 700;
  font-size: clamp(40px, 4.4vw, 64px); line-height: 0.95; letter-spacing: -0.02em;
}
.sol-stat__l {
  margin-top: 12px; font-weight: 300; font-size: 15.5px; line-height: 1.5;
  color: rgba(255,255,255,0.66);
}

/* ---------- Offerings (Wir bieten mehr) ---------- */
.sol-offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.sol-offer { position: relative; padding-top: 28px; border-top: 2px solid rgba(255,255,255,0.16); }
.sol-offer h3 { font-size: 22px; margin: 0 0 14px; }
.sol-offer p {
  font-weight: 300; font-size: 16.5px; line-height: 1.62;
  color: rgba(255,255,255,0.7); margin: 0 0 22px;
}

/* ---------- Contact CTA ---------- */
.sol-cta {
  position: relative; padding: 110px var(--pad-x) 130px; overflow: hidden;
}
.sol-cta__visual { position: absolute; inset: auto -8% -20% 30%; height: 130%; z-index: 0; pointer-events: none; }
.sol-cta__visual canvas { width: 100%; height: 100%; display: block; }
.sol-cta__inner { position: relative; z-index: 1; max-width: 720px; }
.sol-cta__title { font-size: clamp(56px, 8vw, 128px); line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 16px 0 0; }
.sol-cta__copy { margin-top: 28px; max-width: 440px; font-weight: 300; font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.82); }
.sol-cta__row { margin-top: 36px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.sol-cta__contacts { display: flex; gap: 40px; flex-wrap: wrap; }
.sol-contact h4 { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 0 0 8px; font-family: var(--font-body); }
.sol-contact p { margin: 0; font-weight: 300; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.82); }
.sol-contact a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.3); }
.sol-contact a:hover { border-color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  /* .sol-hero is a flex row by default (desktop: visual absolutely
     positioned behind the copy, so row vs column never mattered there).
     The visual switches to position: relative below, so it needs an
     explicit column direction here — otherwise it stays a flex row item
     squeezed side by side with .sol-hero__inner instead of stacking above
     the title and teaser. */
  .sol-hero { min-height: 540px; padding-bottom: 64px; align-items: flex-start; flex-direction: column; padding-top: 8px; }
  .sol-hero__visual { position: relative; inset: auto; height: 280px; width: 100%; margin: 8px 0 -10px; opacity: 0.9; }
  .sol-hero__inner { max-width: 100%; }
  .sol-hero__coords { display: none; }
  .sol-section { padding: 64px var(--pad-x); }
  .sol-caps { grid-template-columns: 1fr 1fr; }
  .sol-cases { grid-template-columns: 1fr; }
  .sol-stats { grid-template-columns: 1fr 1fr; }
  .sol-stats__lead { grid-column: 1 / -1; padding: 28px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .sol-stat:nth-child(2) { border-left: 0; }
  .sol-offers { grid-template-columns: 1fr; gap: 30px; }
  .sol-cta__visual { opacity: 0.55; }
  .sol-step__inner { padding-left: 0; }
  .sol-step.is-open .sol-step__body { max-height: 480px; }
}
@media (max-width: 560px) {
  .sol-caps { grid-template-columns: 1fr; }
  .sol-stats { grid-template-columns: 1fr; }
  .sol-stat { border-left: 0; border-top: 1px solid rgba(255,255,255,0.12); }
  .sol-step__disc { width: 72px; height: 72px; font-size: 24px; }
  .sol-step__rail { height: 72px; }
  .sol-step__label { font-size: 22px; margin-left: 18px; }
}

/* =================================================================
   LEARN & EXPLORE (lx-)
   ================================================================= */
/* ============================================================
   Learn & Explore — accent weight: Sonnengelb
   ============================================================ */

/* ---------- Hero (viz as full backdrop) ---------- */
.lx-hero {
  position: relative;
  padding: 64px var(--pad-x) 88px;
  min-height: 600px;
  display: flex; align-items: center;
}
.lx-hero__visual { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lx-hero__visual canvas { width: 100%; height: 100%; display: block; pointer-events: auto; }
.lx-hero__inner { position: relative; z-index: 1; max-width: 820px; margin-top: 25px; }
.lx-hero__title {
  font-size: clamp(64px, 8.5vw, 132px); line-height: var(--lh-tight); letter-spacing: -0.02em;
  margin: 22px 0 0;
}
.lx-hero__copy { margin-top: 36px; max-width: 480px; font-weight: 300; font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.82); }
.lx-hero__cta { margin-top: 34px; display: flex; align-items: center; gap: 20px; }
.lx-hero__cta span { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); }

/* ---------- Sections ---------- */
.lx-section { position: relative; padding: 96px var(--pad-x); z-index: 1; }
.lx-head { max-width: 760px; margin-bottom: 52px; }
.lx-head h2 { font-size: clamp(34px, 4.6vw, 64px); line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 30px 0 0; }
.lx-head p { margin: 20px 0 0; max-width: 580px; font-weight: 300; font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.72); }
.lx-head .la-eyebrow { color: var(--la-rail); }
#dataplus .la-eyebrow { color: #fff; opacity: 0.2; }

/* ---------- Dataplus modules ---------- */
.lx-modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lx-mod {
  position: relative; padding: 30px 28px 32px;
  background: rgba(58,66,72,0.45);
  border: 0; border-radius: 40px 0px;
  overflow: hidden;
  transition: background var(--dur-base) var(--ease-out-expo);
}
/* Same hover affordance as the Solutions use-case cards: a coloured bar
   that grows down the left edge. Colours follow the brand triad. */
.lx-mod::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 5px; background: var(--ac, var(--la-sonnengelb));
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.lx-mod:hover { background: rgba(58,66,72,0.8); }
.lx-mod:hover::before { transform: scaleY(1); }
.lx-mod:nth-child(1) { --ac: var(--la-fischerblau); }
.lx-mod:nth-child(2) { --ac: var(--la-sonnengelb); }
.lx-mod:nth-child(3) { --ac: var(--la-kupferrot); }
.lx-mod:nth-child(4) { --ac: var(--la-fischerblau); }
.lx-mod:nth-child(5) { --ac: var(--la-sonnengelb); }
.lx-mod:nth-child(6) { --ac: var(--la-kupferrot); }
.lx-mod__k { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ac, var(--la-sonnengelb)); opacity: 1; margin-bottom: 18px; }
.lx-mod h3 { font-size: 22px; margin: 0 0 12px; }
.lx-mod p { font-weight: 300; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.7); margin: 0; }

/* ---------- Shared "wide" tile grid (Tutorials, News, Events) ----------
   Same design system across all three /news card grids: 4 tiles per row,
   a 7-color accent cycle driving the hover bar + hover text color, and a
   translucent brand-gray hover overlay on the media. Each grid's CTA
   ("Alle Tutorials" / "Auf LinkedIn folgen" / "Alle Events") sits as the
   grid's own last item (span 1) rather than below it, so with exactly 7
   tiles it always lands flush next to the trailing tile in row 2
   (7 = 4+3, one cell free) instead of on its own row. */
.lx-tut, .lx-posts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 60px; }
.lx-tut__cta, .lx-posts__cta {
  grid-column: span 1; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center;
}
.lx-tut__cta-inner, .lx-posts__cta-inner { display: flex; align-items: center; justify-content: center; gap: 20px; }

/* ---------- Tutorials (YouTube) ---------- */
.lx-tutcard {
  position: relative;
  display: block; text-decoration: none; color: inherit;
  border: 0; overflow: hidden; border-radius: 56px 0px;
  background: rgba(46,53,58,0.5);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  transition: transform var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo);
}
/* Same hover affordance as the Dataplus / use-case boxes: a coloured bar
   grows down the left edge. */
.lx-tutcard::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 3;
  width: 5px; background: var(--ac, var(--la-sonnengelb));
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.lx-tutcard:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,0.36); }
.lx-tutcard:hover::before { transform: scaleY(1); }
.lx-tutcard:hover h3 { color: var(--ac); }
.lx-tutcard__thumb {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: #2b3236;
  display: grid; place-items: center;
}
/* As the two-click placeholder on /news it is a <button>: reset the UA styles. */
button.lx-tutcard__thumb { width: 100%; padding: 0; border: 0; cursor: pointer; font: inherit; color: inherit; }
.lx-tutcard__thumb:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.lx-tutcard__thumb::after {
  /* fine scanline grid for a "screen" feel */
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 100% 13px; opacity: 0.5;
}
.lx-play {
  width: 58px; height: 58px; border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.85); background: rgba(29,34,38,0.6);
  display: grid; place-items: center; position: relative; z-index: 1;
  transition: background var(--dur-base) var(--ease-out-expo);
}
.lx-tutcard:hover .lx-play { background: #fff; }
.lx-play svg { width: 20px; height: 20px; margin-left: 3px; color: #fff; transition: color var(--dur-base) var(--ease-out-expo); }
.lx-tutcard:hover .lx-play svg { color: var(--la-lavagrau); }
.lx-tutcard__meta { padding: 20px 22px 24px; }
.lx-tutcard__tag { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ac, var(--la-fischerblau)); opacity: 1; }
.lx-tutcard h3 { font-size: 22px; line-height: var(--lh-snug); margin: 12px 0 8px; transition: color var(--dur-base) var(--ease-out-expo); }
.lx-tutcard p { font-weight: 300; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.62); margin: 0; }
.lx-tut__status { font-weight: 300; font-size: 17px; color: rgba(255,255,255,0.66); margin: 0; }

/* Video variant of the tutorial card: embedded player instead of a thumb */
.lx-tutcard__frame { position: relative; aspect-ratio: 16 / 9; background: #2b3236; }
.lx-tutcard__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* Hover darkening overlay — brand gray, translucent — matching the
   postcard media treatment below. pointer-events: none keeps the embedded
   iframe fully interactive underneath it. */
.lx-tutcard__frame::after, .lx-tutcard__thumb::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: var(--la-lavagrau); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out-expo);
}
.lx-tutcard:hover .lx-tutcard__frame::after, .lx-tutcard:hover .lx-tutcard__thumb::before { opacity: 0.45; }

/* ---------- News & Stories (LinkedIn) ---------- */
.lx-postcard {
  position: relative;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  border: 0; overflow: hidden; border-radius: 56px 0px;
  background: rgba(46,53,58,0.5);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  transition: transform var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo);
}
.lx-postcard::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 3;
  width: 5px; background: var(--ac, var(--la-sonnengelb));
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.lx-postcard:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,0.36); }
.lx-postcard:hover::before { transform: scaleY(1); }
.lx-postcard:hover .la-textlink { color: var(--ac); }
.lx-postcard:hover .la-textlink::after { background: var(--ac); }
/* Shared 7-color accent cycle for all three "wide" grids (Tutorials, News,
   Events) — same corporate colors the Events tiles' baked-in "Mehr
   erfahren" buttons use, kept consistent everywhere for one visual system. */
.lx-tut .lx-tutcard:nth-child(1), .lx-posts .lx-postcard:nth-child(1) { --ac: var(--la-sonnengelb); }
.lx-tut .lx-tutcard:nth-child(2), .lx-posts .lx-postcard:nth-child(2) { --ac: var(--la-kupferrot); }
.lx-tut .lx-tutcard:nth-child(3), .lx-posts .lx-postcard:nth-child(3) { --ac: var(--la-lavagrau); }
.lx-tut .lx-tutcard:nth-child(4), .lx-posts .lx-postcard:nth-child(4) { --ac: var(--la-fischerblau); }
.lx-tut .lx-tutcard:nth-child(5), .lx-posts .lx-postcard:nth-child(5) { --ac: var(--la-kupferrot); }
.lx-tut .lx-tutcard:nth-child(6), .lx-posts .lx-postcard:nth-child(6) { --ac: var(--la-sonnengelb); }
.lx-tut .lx-tutcard:nth-child(7), .lx-posts .lx-postcard:nth-child(7) { --ac: var(--la-fischerblau); }
.lx-postcard__media {
  position: relative; aspect-ratio: 16 / 9; background: #2b3236; overflow: hidden;
  border-radius: 0;
}
.lx-postcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Hover darkening overlay — brand gray, translucent. */
.lx-postcard__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--la-lavagrau); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out-expo);
}
.lx-postcard:hover .lx-postcard__media::after { opacity: 0.45; }
.lx-postcard__badge {
  position: absolute; top: 22px; left: 14px; z-index: 2;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; color: #fff;
  background: var(--ac, var(--la-fischerblau));
}
.lx-postcard__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 22px 26px 24px; }
.lx-postcard__date { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); letter-spacing: 0.06em; }
.lx-postcard h3 { font-size: 22px; line-height: var(--lh-snug); margin: 12px 0 8px; }
.lx-postcard p { font-weight: 300; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.66); margin: 0 0 16px; flex: 1 1 auto; }
.lx-postcard .la-textlink { margin-top: auto; }
.lx-li-follow__icon { display: block; width: 52px; height: 52px; flex: 0 0 auto; transition: opacity var(--dur-base) var(--ease-out-expo), transform var(--dur-fast); }
.lx-li-follow__icon img { width: 100%; height: 100%; display: block; }
.lx-li-follow__icon:hover { opacity: 0.7; transform: scale(1.04); }

/* ---------- Demo banner ---------- */
.lx-demo {
  position: relative; margin: 0 var(--pad-x) 96px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(58,66,72,0.7);
  padding: 56px 56px;
  display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
}
.lx-demo__txt { flex: 1 1 360px; }
.lx-demo__txt h3 { font-size: clamp(28px, 3.2vw, 44px); line-height: var(--lh-tight); margin: 30px 0 14px; }
.lx-demo__txt p { font-weight: 300; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.78); margin: 0; max-width: 520px; }
.lx-demo__cta { display: flex; align-items: center; gap: 18px; }

/* ---------- Glossary / key concepts ---------- */
.lx-gloss { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1); }
.lx-term { background: var(--la-ink); padding: 32px 34px; position: relative; }
.lx-term__co { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--fg-3); position: absolute; top: 18px; right: 22px; }
.lx-term h3 { font-size: 22px; margin: 0 0 12px; max-width: 80%; }
.lx-term p { font-weight: 300; font-size: 16px; line-height: 1.62; color: rgba(255,255,255,0.7); margin: 0; }
.lx-term__bar { width: 26px; height: 3px; border-radius: 2px; background: var(--la-sonnengelb); margin-bottom: 16px; }

/* ---------- News strip ---------- */
.lx-news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lx-newscard {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border-top: 2px solid rgba(255,255,255,0.16); padding-top: 22px; min-height: 200px;
  transition: border-color var(--dur-base) var(--ease-out-expo);
}
.lx-newscard:hover { border-color: var(--la-sonnengelb); }
.lx-newscard__date { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); letter-spacing: 0.06em; }
.lx-newscard h3 { font-size: 21px; line-height: var(--lh-snug); margin: 14px 0 10px; }
.lx-newscard p { font-weight: 300; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.66); margin: 0 0 18px; }
.lx-newscard .la-textlink { margin-top: auto; }

/* ---------- Event article (/news/[slug]) ---------- */
.lx-article__back { display: inline-block; margin-bottom: 32px; }
.lx-article__top { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(28px, 4vw, 56px); margin: 0 0 56px; }
/* Same reasoning as .lx-postcard__media above: 40px bottom-right matches
   the baked-in "Mehr erfahren" pill so no background sliver shows. */
.lx-article__media { margin: 0; border-radius: 56px 0 56px 0; overflow: hidden; background: #2b3236; }
.lx-article__media img { display: block; width: 100%; height: auto; }
.lx-article__intro .la-eyebrow { color: var(--la-sonnengelb); }
.lx-article__intro h1 { font-size: clamp(28px, 3.4vw, 44px); line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 30px 0 0; }
.lx-article__intro p { margin: 18px 0 0; font-weight: 300; font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.72); }
.lx-article__body { max-width: 700px; }
.lx-article__body p { font-weight: 300; font-size: 19px; line-height: 1.75; color: rgba(255,255,255,0.78); margin: 0 0 24px; }
.lx-article__body p:last-child { margin-bottom: 0; }
.lx-article__list { margin: 0 0 24px; padding: 0; list-style: none; }
.lx-article__body h2 { font-size: clamp(22px, 2.4vw, 30px); line-height: var(--lh-snug); letter-spacing: -0.01em; margin: 56px 0 18px; }
/* Explicit content request: photo gallery on event recaps. Thumbnails in a
   grid, each opening the full-size photo; corner shape of the article media
   (.lx-article__media) at a smaller radius. */
.lx-gallery { margin-top: 72px; }
.lx-gallery h2 { font-size: clamp(22px, 2.4vw, 30px); line-height: var(--lh-snug); margin: 0 0 24px; }
.lx-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lx-gallery__grid a { display: block; overflow: hidden; border-radius: 24px 0 24px 0; background: #2b3236; }
.lx-gallery__grid img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform var(--dur-base) var(--ease-out-expo); }
.lx-gallery__grid a:hover img { transform: scale(1.04); }
.lx-gallery__grid a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 900px) { .lx-gallery__grid { grid-template-columns: 1fr 1fr; gap: 10px; } }
/* Lightbox of the gallery (PhotoGallery.svelte): full-viewport native
   <dialog>, the photo between the site's .la-arrow buttons. */
.lx-lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 24px clamp(16px, 4vw, 48px); border: 0; background: rgba(20,24,27,0.94); color: #fff; }
.lx-lightbox[open] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(12px, 2vw, 28px); }
.lx-lightbox::backdrop { background: rgba(0,0,0,0.6); }
.lx-lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.lx-lightbox__figure img { display: block; max-width: 100%; max-height: calc(100dvh - 120px); object-fit: contain; border-radius: 24px 0 24px 0; }
.lx-lightbox__figure figcaption { font-weight: 300; font-size: 14px; color: rgba(255,255,255,0.6); }
.lx-lightbox__prev img { transform: rotate(180deg); }
.lx-lightbox__close { position: absolute; top: 20px; right: 20px; }
.lx-lightbox__close svg { width: 18px; height: 18px; color: #fff; }
html:has(.lx-lightbox[open]) { overflow: hidden; }
@media (max-width: 700px) {
  .lx-lightbox[open] { grid-template-columns: minmax(0, 1fr); }
  .lx-lightbox__figure img { max-height: calc(100dvh - 220px); }
  .lx-lightbox__prev, .lx-lightbox__next { position: absolute; bottom: 28px; }
  .lx-lightbox__prev { left: 24px; }
  .lx-lightbox__next { right: 24px; }
}
.lx-article__list li {
  position: relative; padding-left: 26px;
  font-weight: 300; font-size: 19px; line-height: 1.6; color: rgba(255,255,255,0.78);
  margin: 0 0 14px;
}
.lx-article__list li:last-child { margin-bottom: 0; }
.lx-article__list li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--la-rail);
}
@media (max-width: 800px) {
  .lx-article__top { grid-template-columns: 1fr; }
}

/* ---------- Event sign-up (HubSpot embed) ---------- */
.lx-signup { position: relative; padding: 0 var(--pad-x) 96px; z-index: 1; }
.lx-signup__head { max-width: 640px; margin: 0 0 36px; }
.lx-signup__head h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 16px 0 0; }
.lx-signup__head p { margin: 18px 0 0; font-weight: 300; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.72); }
.lx-signup__form { max-width: 640px; background: rgba(58,66,72,0.7); border-radius: 24px; padding: clamp(24px, 3vw, 40px); }

/* ---------- CTA ---------- */
.lx-cta { position: relative; padding: 110px var(--pad-x) 130px; overflow: hidden; }
.lx-cta__visual { position: absolute; inset: -10% 0 -10% 34%; z-index: 0; pointer-events: none; }
.lx-cta__visual canvas { width: 100%; height: 100%; display: block; }
.lx-cta__inner { position: relative; z-index: 1; max-width: 720px; }
.lx-cta__title { font-size: clamp(50px, 7vw, 112px); line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 16px 0 0; }
.lx-cta__copy { margin-top: 26px; max-width: 460px; font-weight: 300; font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.82); }
.lx-cta__row { margin-top: 34px; display: flex; align-items: center; gap: 20px; }
.lx-cta__row span { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .lx-hero { min-height: 520px; padding-top: 24px; align-items: flex-start; }
  .lx-hero__visual { inset: 0; opacity: 0.7; }
  .lx-section { padding: 64px var(--pad-x); }
  .lx-modules { grid-template-columns: 1fr; }
  .lx-tut { grid-template-columns: 1fr 1fr; gap: 20px; }
  .lx-posts { grid-template-columns: 1fr 1fr; gap: 20px; }
  .lx-demo { margin: 0 var(--pad-x); padding: 40px 32px; }
  .lx-gloss { grid-template-columns: 1fr; }
  .lx-news { grid-template-columns: 1fr; }
  .lx-cta__visual { opacity: 0.5; }
}
@media (max-width: 560px) {
  .lx-tut { grid-template-columns: 1fr; }
  .lx-posts { grid-template-columns: 1fr; }
  .lx-tut__cta, .lx-posts__cta { grid-column: span 1; align-items: flex-start; }
}

/* =================================================================
   ABOUT (ab-)
   ================================================================= */
/* ============================================================
   About — accent weight: Kupferrot
   ============================================================ */

/* ---------- Hero ---------- */
.ab-hero { position: relative; padding: 144px var(--pad-x) 88px; min-height: 620px; display: flex; align-items: center; }
.ab-hero__visual { margin-top: 20px; width: min(620px, 48vw); height: min(620px, 78vh); z-index: 0; pointer-events: none; }
.ab-hero__visual canvas { width: 100%; height: 100%; display: block; pointer-events: auto; }
.ab-hero__inner { position: relative; z-index: 1; max-width: 760px; pointer-events: none; }
.ab-hero__inner a { pointer-events: auto; }
.ab-hero__title { font-size: clamp(72px, 10vw, 168px); line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 22px 0 0; }
.ab-hero__copy { margin-top: 32px; max-width: 480px; font-weight: 300; font-size: 19px; line-height: 1.6; color: rgba(255,255,255,0.84); }
.ab-hero__copy b { font-weight: 600; color: #fff; }

/* ---------- We in short ---------- */
.ab-short { position: relative; padding: 0 var(--pad-x) 96px; z-index: 1; }
.ab-short__lead {
  font-family: var(--font-headline); font-weight: 700;
  font-size: clamp(32px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -0.02em;
  max-width: 1000px; margin: 0;
}
.ab-short__lead em { font-style: normal; color: var(--la-kupferrot); }
.ab-short__facts { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,0.14); }
.ab-fact { padding: 30px 28px 8px 0; border-right: 1px solid rgba(255,255,255,0.12); }
.ab-fact:last-child { border-right: 0; }
.ab-fact__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--fg-3); margin-bottom: 14px; }
.ab-fact__v { font-family: var(--font-headline); font-weight: 700; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.0; letter-spacing: -0.01em; }
.ab-fact__d { margin-top: 10px; font-weight: 300; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.62); }

/* ---------- Story timeline ---------- */
.ab-section { position: relative; padding: 96px var(--pad-x); z-index: 1; }
.ab-head { max-width: 760px; margin-bottom: 56px; }
.ab-head .la-eyebrow { color: var(--la-rail); }
.ab-head h2 { font-size: clamp(34px, 4.6vw, 64px); line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 30px 0 0; }

.ab-chapters { border-top: 1px solid rgba(255,255,255,0.12); }
.ab-chapter {
  display: grid; grid-template-columns: 96px 1fr; gap: 40px;
  padding: 40px 0; border-bottom: 1px solid rgba(255,255,255,0.12);
  align-items: center;
}
/* Chapter numbers in the arrow-button idiom: a coloured disc with a
   white ring and white numeral. Colours follow the design-system
   sequence (Fischerblau, Sonnengelb, Kupferrot, Fischerblau, Lavagrau). */
.ab-chapter__no {
  width: 64px; height: 64px; border-radius: 999px;
  border: 2px solid #fff; box-sizing: border-box;
  display: grid; place-items: center;
  font-family: var(--font-headline); font-weight: 700; font-size: 22px;
  letter-spacing: 0; color: #fff;
  background: var(--la-fischerblau);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25), 0 10px 24px rgba(0,0,0,0.30);
  transition: opacity var(--dur-base) var(--ease-out-expo);
}
/* Mouse-over: drop the disc to 50% opacity (matches the arrow-button feel). */
.ab-chapter:hover .ab-chapter__no { opacity: 0.5; }
.ab-chapter__no span { display: none; }
.ab-chapter:nth-child(1) .ab-chapter__no { background: var(--la-fischerblau); }
.ab-chapter:nth-child(2) .ab-chapter__no { background: var(--la-sonnengelb); }
.ab-chapter:nth-child(3) .ab-chapter__no { background: var(--la-kupferrot); }
.ab-chapter:nth-child(4) .ab-chapter__no { background: var(--la-fischerblau); }
.ab-chapter:nth-child(5) .ab-chapter__no { background: var(--la-lavagrau); }
.ab-chapter__body { max-width: 760px; }
.ab-chapter__body h3 { font-size: clamp(24px, 2.6vw, 34px); line-height: var(--lh-snug); margin: 0 0 16px; }
.ab-chapter__body p { font-weight: 300; font-size: 18px; line-height: 1.66; color: rgba(255,255,255,0.76); margin: 0; }

/* Story + keyvisual: two columns, text half-width, visual fills the rest. */
.ab-section__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.ab-section__visual { align-self: center; }

/* ---------- Stats band ---------- */
.ab-stats { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(255,255,255,0.14); border-bottom: 1px solid rgba(255,255,255,0.14); }
.ab-stat { padding: 44px 30px; border-right: 1px solid rgba(255,255,255,0.12); }
.ab-stat:last-child { border-right: 0; }
.ab-stat__n { font-family: var(--font-headline); font-weight: 700; font-size: clamp(42px, 4.6vw, 68px); line-height: 0.95; letter-spacing: -0.02em; }
.ab-stat__n small { font-size: 0.42em; font-weight: 600; vertical-align: super; color: var(--la-kupferrot); margin-left: 4px; letter-spacing: 0; }
.ab-stat__l { margin-top: 14px; font-weight: 300; font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,0.66); }

/* ---------- People ---------- */
.ab-people { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.ab-person {
  display: flex; gap: 24px; align-items: flex-start;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(58,66,72,0.4);
  padding: 30px 32px;
  transition: border-color var(--dur-base) var(--ease-out-expo), background var(--dur-base) var(--ease-out-expo);
}
.ab-person:hover { border-color: rgba(230,68,53,0.4); background: rgba(58,66,72,0.7); }
.ab-person__mono {
  width: 64px; height: 64px; flex: 0 0 auto; border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.25); display: grid; place-items: center;
  font-family: var(--font-headline); font-weight: 700; font-size: 22px; color: #fff;
  background: rgba(29,34,38,0.6);
}
.ab-person__info h3 { font-size: 21px; margin: 0 0 10px; }
.ab-person__role { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--la-kupferrot); margin-bottom: 8px; }
.ab-person__info p { font-weight: 300; font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,0.74); margin: 0; }
.ab-person__info a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.28); }
.ab-person__info a:hover { border-color: #fff; }

/* ---------- Careers ---------- */
.ab-career {
  position: relative; margin: 0 var(--pad-x) 96px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(58,66,72,0.6);
  padding: 56px; display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
}
.ab-career__txt { flex: 1 1 360px; }
.ab-career__txt h3 { font-size: clamp(28px, 3.4vw, 46px); line-height: var(--lh-tight); margin: 30px 0 14px; }
.ab-career__txt p { font-weight: 300; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.8); margin: 0; max-width: 540px; }
.ab-career__cta { display: flex; align-items: center; gap: 18px; }

/* ---------- CTA ---------- */
.ab-cta { position: relative; padding: 110px var(--pad-x) 130px; overflow: hidden; }
.ab-cta__visual { position: absolute; inset: -20% -10% -20% 36%; z-index: 0; pointer-events: none; }
.ab-cta__visual canvas { width: 100%; height: 100%; display: block; }
.ab-cta__inner { position: relative; z-index: 1; max-width: 720px; }
.ab-cta__title { font-size: clamp(56px, 8vw, 128px); line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 16px 0 0; }
.ab-cta__copy { margin-top: 26px; max-width: 440px; font-weight: 300; font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.82); }
.ab-cta__row { margin-top: 34px; display: flex; align-items: center; gap: 20px; }
.ab-cta__row span { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .ab-hero { min-height: 520px; padding-top: 8px; flex-direction: column; align-items: stretch; }
  .ab-hero__visual { height: 240px; width: 100%; margin-top: 16px; opacity: 0.9; }
  .ab-hero__inner { max-width: 100%; width: 100%; }
  .ab-section, .ab-short { padding-left: var(--pad-x); padding-right: var(--pad-x); }
  .ab-section { padding-top: 64px; padding-bottom: 64px; }
  .ab-short__facts { grid-template-columns: 1fr 1fr; }
  .ab-fact:nth-child(2) { border-right: 0; }
  .ab-section__grid { grid-template-columns: 1fr; gap: 32px; }
  .ab-chapter { grid-template-columns: 1fr; gap: 14px; }
  .ab-chapter__no { width: 56px; height: 56px; font-size: 19px; }
  .ab-stats { grid-template-columns: 1fr 1fr; }
  .ab-stat:nth-child(2) { border-right: 0; }
  .ab-stat:nth-child(1), .ab-stat:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.12); }
  .ab-people { grid-template-columns: 1fr; }
  .ab-career { padding: 40px 32px; margin-bottom: 64px; }
  .ab-cta__visual { opacity: 0.5; }
}
@media (max-width: 560px) {
  .ab-short__facts { grid-template-columns: 1fr; }
  .ab-fact { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.12); padding-right: 0; padding-bottom: 22px; }
  .ab-stats { grid-template-columns: 1fr; }
  .ab-stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
}


/* =================================================================
   IMAGE SLOT (editable placeholder) — fills the .uc-ph cell, brand look
   ================================================================= */
.uc-ph { position: relative; }
.uc-ph image-slot { position: absolute; inset: 28px; width: auto; height: auto; }
.uc-ph image-slot::part(frame) {
  background: rgba(46,53,58,0.55);
  border-radius: 28px 0 28px 0 !important;
}
.uc-ph image-slot::part(ring) {
  border: 1.5px dashed rgba(255,255,255,0.22) !important;
  border-radius: 28px 0 28px 0 !important;
}
.uc-ph image-slot::part(empty) { color: rgba(255,255,255,0.6); }
@media (max-width: 960px) { .uc-ph image-slot { inset: 22px; } }

/* Prinzipien */
.hm-principles { padding-top: 180px; padding-bottom: 180px; }
.hm-principles__head { margin-bottom: 120px; }
/* On the Uc pages (/leistungen) the heading takes the chapter heading size
   (.uc-chaphead h2) of the sections around it. */
.uc-section .hm-principles__head h2 { font-size: clamp(40px, 5.2vw, 76px); }
/* Optional eyebrow above it, spaced like the demo block (.tech-demo__text h2). */
.hm-principles__head .la-eyebrow + h2 { margin-top: 30px; }
/* Right after the pillar frame of the ring animation (which already keeps
   its own gap, see END_GAP in HomeAppSim.svelte) the full top padding
   would leave a hole. */
.hm-sim.is-theater + .hm-principles { padding-top: 120px; }
@media (max-width: 900px) { .hm-principles { padding-top: 100px; padding-bottom: 100px; } }
.hm-prin { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; row-gap: 56px; }
.hm-prin__item { position: relative; display: flex; gap: 24px; align-items: flex-start; padding: 0; }
.hm-prin::before { content: ""; position: absolute; left: 50%; top: 0; bottom: -56px; width: 1px; background: linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.10) 45%, rgba(255,255,255,0.22)); }
.hm-prin__item:nth-child(n+3)::after { content: ""; position: absolute; top: -28px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.40), rgba(255,255,255,0.10) 45%, rgba(255,255,255,0.22)); }
.hm-prin__n { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 999px; border: 3px solid #fff; box-sizing: border-box; box-shadow: 0 6px 20px rgba(0,0,0,0.35); display: grid; place-items: center; font-family: var(--font-headline); font-weight: 700; font-size: 18px; color: #fff; }
.hm-prin__n svg { width: 24px; height: 24px; }
.hm-prin h3 { font-size: var(--hm-h3); font-weight: 600; margin: 10px 0 12px; line-height: var(--lh-snug); }
.hm-prin p { font-weight: 300; font-size: var(--hm-body); line-height: 1.6; color: rgba(255,255,255,0.72); margin: 0; }
/* Overarching guideline under the section heading */
.hm-principles__head .hm-principles__lead { margin: 28px 0 0; max-width: 24em; font-family: var(--font-headline); font-weight: 500; font-size: var(--hm-lead); line-height: 1.25; letter-spacing: -0.01em; color: rgba(255,255,255,0.86); }
.hm-principles__head { display: flex; align-items: center; justify-content: space-between; gap: 48px; max-width: none; }
/* Mini testimonials from the BARC survey, under the guidelines. Plain
   quote marks in white — the brand colors stay reserved for the pillars. */
/* No rule between guidelines and voices: the break is whitespace only, as
   between the pillar frame and the guidelines (END_GAP + 120px top padding). */
.hm-voices { margin-top: 180px; }
.hm-voices h2 { font-size: var(--hm-h2); line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 0; }
/* BARC key figures above the voices, on the same three-column grid and in
   the same card (.hm-voice blockquote recipe: borderless, asymmetric
   corners, light shadow) as the quotes below. Each card's icon button
   stands where the quote mark sits on a quote card, in the same brand-color
   cycle (teal / yellow / red). */
.hm-stats { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.hm-stat { display: flex; flex-direction: column; }
.hm-stat:nth-child(3n+1) { --qc: var(--la-fischerblau); }
.hm-stat:nth-child(3n+2) { --qc: var(--la-sonnengelb); }
.hm-stat:nth-child(3n) { --qc: var(--la-kupferrot); }
.hm-stat__card { position: relative; flex: 1; padding: 44px 26px 26px; background: rgba(58,66,72,0.42); border-radius: 26px 0 26px 0; box-shadow: 0 10px 30px rgba(0,0,0,0.22); display: flex; flex-direction: column; }
/* Same size as the guideline icon buttons above (.hm-prin__n: 56px). */
.hm-stat__icon {
  position: absolute; top: -26px; left: 20px; width: 56px; height: 56px; border-radius: 999px;
  display: grid; place-items: center; background: var(--qc); color: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
.hm-stat__icon svg { width: 24px; height: 24px; }
/* Figure, not a section heading — sized to lead the card without
   overpowering it (roughly half of --hm-h2). */
.hm-stat__n { font-family: var(--font-headline); font-weight: 700; font-size: clamp(32px, 2.6vw, 40px); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm-stat__top { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 0.12em; font-size: clamp(32px, 2.6vw, 40px); }
.hm-stat__badge { font-family: var(--font-headline); font-weight: 600; font-size: 17px; line-height: 1; color: #fff; white-space: nowrap; margin-left: 0.15em; }
.hm-stat__x { position: relative; top: 0.153em; margin-left: -0.12em; }
.hm-stat__l { margin-top: 12px; font-family: var(--font-headline); font-weight: 600; font-size: 18px; line-height: 1.3; color: #fff; }
.hm-stat small { margin-top: 6px; font-weight: 300; font-size: var(--hm-meta); line-height: 1.5; color: rgba(255,255,255,0.6); }
/* Slider: three cards per view on desktop (same grid as the key figures
   above), one plus a peek of the next on mobile. Native scroll-snap, so
   swipe and trackpad work without JS; padding-top leaves room for the
   hanging quote marks, which the scroll container would clip otherwise. */
.hm-voices__list {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 96px) / 3); column-gap: 48px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-top: 52px; scrollbar-width: none;
}
.hm-voices__list::-webkit-scrollbar { display: none; }
.hm-voices__list:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 6px; }
.hm-voice { scroll-snap-align: start; }
.hm-voices__nav { display: flex; gap: 12px; margin-top: 36px; }
.hm-voices__nav .la-arrow { background: transparent; border-color: rgba(255,255,255,0.7); }
.hm-voices__nav .la-arrow:hover:not(:disabled) { background: rgba(255,255,255,0.08); }
.hm-voices__nav .la-arrow:disabled { opacity: 0.3; cursor: default; }
.hm-voices__prev img { transform: rotate(180deg); }
.hm-voice { margin: 0; display: flex; flex-direction: column; }
/* A quiet speech bubble (site card surface, asymmetric corners like the
   site cards; the sharp corner points down to the speaker). An oversized,
   filled quote mark in one brand color per voice hangs over its top edge, and a
   small voice wave that gently "speaks" stands in for the speaker. */
.hm-voices__slider { margin-top: 72px; }
.hm-voice blockquote { position: relative; flex: 1; margin: 0; padding: 40px 28px 28px; background: rgba(58,66,72,0.42); border-radius: 26px 0 26px 0; box-shadow: 0 10px 30px rgba(0,0,0,0.22); }
.hm-voice blockquote::before {
  content: "\201C"; position: absolute; top: -0.6em; left: 22px;
  font-family: var(--font-headline); font-weight: 700; font-size: 112px; line-height: 1;
  color: var(--qc, var(--la-fischerblau));
}
.hm-voice:nth-child(3n+1) { --qc: var(--la-fischerblau); }
.hm-voice:nth-child(3n+2) { --qc: var(--la-sonnengelb); }
.hm-voice:nth-child(3n) { --qc: var(--la-kupferrot); }
.hm-voice blockquote p { margin: 0; font-family: var(--font-headline); font-weight: 500; font-size: var(--hm-quote); line-height: 1.45; letter-spacing: -0.005em; color: rgba(255,255,255,0.92); }
.hm-voice figcaption { display: flex; align-items: center; gap: 14px; padding-top: 18px; font-weight: 300; font-size: var(--hm-meta); line-height: 1.45; color: rgba(255,255,255,0.6); }
.hm-voice__wave { flex: 0 0 auto; display: flex; align-items: center; gap: 3px; height: 22px; padding-left: 2px; }
.hm-voice__wave i { display: block; width: 3px; height: 100%; border-radius: 3px; background: rgba(255,255,255,0.7); transform-origin: center; transform: scaleY(var(--s, 0.4)); animation: hm-voice-talk 1.6s ease-in-out infinite; }
.hm-voice__wave i:nth-child(1) { --s: 0.35; animation-delay: -0.2s; }
.hm-voice__wave i:nth-child(2) { --s: 0.7; animation-delay: -0.9s; }
.hm-voice__wave i:nth-child(3) { --s: 1; animation-delay: -0.5s; }
.hm-voice__wave i:nth-child(4) { --s: 0.6; animation-delay: -1.3s; }
.hm-voice__wave i:nth-child(5) { --s: 0.3; animation-delay: -0.7s; }
.hm-voice:nth-child(3n+2) .hm-voice__wave i { animation-duration: 1.9s; }
.hm-voice:nth-child(3n) .hm-voice__wave i { animation-duration: 1.4s; }
@keyframes hm-voice-talk { 0%, 100% { transform: scaleY(var(--s, 0.4)); } 50% { transform: scaleY(calc(var(--s, 0.4) * 0.45)); } }
@media (prefers-reduced-motion: reduce) { .hm-voice__wave i { animation: none; } }
.hm-voices__source { margin: 48px 0 0; max-width: 60em; font-weight: 300; font-size: var(--hm-meta); line-height: 1.5; color: rgba(255,255,255,0.45); }
@media (max-width: 900px) {
  .hm-voices { margin-top: 120px; }
  .hm-principles__head { flex-direction: column; align-items: flex-start; gap: 32px; }
  .hm-stats { grid-template-columns: 1fr; gap: 32px; }
  .hm-voices__list { grid-auto-columns: 86%; column-gap: 20px; }
}
@media (max-width: 900px) {
  .hm-prin { grid-template-columns: 1fr; margin-left: 0; }
  .hm-prin__item { padding: 22px 0; }
  .hm-prin__item + .hm-prin__item { border-left: 0; border-image: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.16); }
  .hm-prin::before { display: none; }
  .hm-prin__item:nth-child(n+3)::after { display: none; }
}

/* Leistungen and station pages */
.uc-keys--3 { grid-template-columns: repeat(3, 1fr); }
.uc-key .la-textlink { margin-top: 24px; }
.tech-pull { max-width: 900px; margin: 56px 0 0; font-family: var(--font-headline); font-weight: 400; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.3; letter-spacing: -0.01em; color: rgba(255,255,255,0.92); }
.tech-demo { display: flex; align-items: center; gap: 48px; background: rgba(58,66,72,0.42); border-radius: 56px 0 56px 0; padding: 52px 56px; }
.tech-demo__text { flex: 1 1 auto; }
.tech-demo__text h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 30px 0 16px; }
.tech-demo__text p { font-weight: 300; font-size: 17px; line-height: 1.66; color: rgba(255,255,255,0.76); margin: 0; max-width: 720px; }
.tech-demo .la-arrow { flex: 0 0 auto; }
@media (max-width: 1100px) { .uc-keys--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .uc-keys--3 { grid-template-columns: 1fr; } .tech-demo { flex-direction: column; align-items: flex-start; gap: 28px; padding: 36px 28px; border-radius: 36px 0 36px 0; } }

/* Station pages (Integration / Analyse / Aktion) — see PillarPage.svelte */
/* Below the data+ tiles: a note on the rest of the suite, the link to
   dataplusextension.com and the demo tenant. */
.pl-more { margin-top: 32px; }
/* Badge row (simulation chips) below a chapter-head intro, e.g. on /data-plus. */
.uc-chaphead .hm-sim__chips { margin-top: 18px; }
.pl-more__note { max-width: 900px; margin: 0 0 22px; font-weight: 300; font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,0.74); }
.pl-more__demo { margin-top: 56px; }
.pl-mods { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.pl-solutions .sol-group__list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 48px; }
/* Muted kicker treatment instead of .la-textlink's bright CTA look (same
   dash-before recipe as .la-eyebrow, just on a link): a single dash before
   the label only, in the same dim .fg-3 tone as the label text, no dash
   after. */
.pl-solutions__all { display: inline-flex; align-items: center; margin-top: 22px; color: var(--fg-3); }
.pl-solutions__all::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.7; }
.pl-solutions__all::after { content: none; }
@media (max-width: 760px) {
  .pl-solutions .sol-group__list { grid-template-columns: 1fr; }
}

.ab-short__lead p { margin: 0; }
.ab-short__lead p + p { margin-top: 0.7em; }

.ab-hero__cta { margin-top: 34px; }

.ab-hero__inner { display: grid; grid-template-columns: minmax(0,0.8fr) minmax(0,1.2fr); gap: clamp(40px, 6vw, 104px); align-items: start; max-width: 100%; }
.ab-hero__lead { font-family: var(--font-headline); font-weight: 700; font-size: clamp(26px, 2.9vw, 40px); line-height: 1.18; letter-spacing: -0.015em; color: #fff; max-width: 22em; margin-top: 0; text-wrap: pretty; }
.ab-hero__lead p { margin: 0; }
.ab-hero__lead p + p { margin-top: 0.9em; }
@media (max-width: 960px) { .ab-hero__inner { grid-template-columns: 1fr; gap: 32px; align-items: start; } .ab-hero__lead { margin-top: 0; max-width: none; } }

.ab-hero__lead--mute { color: rgba(255,255,255,0.45); }

.ab-hero__row { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); }
.ab-hero__row .ab-hero__title { margin: 0; }
.ab-hero__row .la-arrow { flex: 0 0 auto; }

/* Lösungsbereiche — thematische Gruppen */
/* 3 tiles per row (5 tiles -> 3 + 2), stretched to fill the full section
   width and left-aligned — row 2's leftover space sits on the right. */
.sol-cases { grid-template-columns: repeat(3, 1fr); }
.sol-group { position: relative; padding: 87px 34px 26px; border-radius: 40px 0 40px 0; background: rgba(58,66,72,0.42); }
.sol-group { overflow: hidden; }
.sol-group::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--ac); }
.sol-group h3 { font-family: var(--font-headline); font-weight: 700; font-size: 22px; line-height: var(--lh-snug); letter-spacing: -0.01em; margin: 0 0 12px; }
.sol-group > p { font-weight: 300; font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,0.72); margin: 0 0 22px; }
.sol-group__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sol-group__list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.14); color: #fff; text-decoration: none; font-weight: 500; font-size: 15px; transition: color var(--dur-fast) ease; }
.sol-group__list a:hover { color: var(--ac); }
.sol-group__list .la-arrow--sm { background: var(--ac); transition: transform var(--dur-fast) ease; }
.sol-group__list a:hover .la-arrow--sm { transform: translateX(4px); }
/* Mobile: stack the tiles. The 3-column rule above comes after the
   960px block further up and would otherwise override it. */
@media (max-width: 960px) {
  .sol-cases { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sol-group { padding: 56px 22px 20px; border-radius: 28px 0 28px 0; }
  .sol-group h3 { font-size: 20px; }
  .sol-group > p { font-size: 15.5px; }
}

/* Contact CTA — Titel links, Ansprechpartner rechts (sol-/ab-cta only;
   uc-cta uses the "Book us!"-style box instead, see above) */
.sol-cta__inner, .ab-cta__inner { max-width: 1180px; display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto 1fr; column-gap: 72px; align-items: start; }
.sol-cta__title, .ab-cta__title { grid-column: 1; grid-row: 1; font-size: 72px; line-height: var(--lh-tight); margin: 0; }
.sol-cta__copy, .ab-cta__copy { grid-column: 1; grid-row: 2; margin-top: 14px; }
.sol-cta__inner .la-people, .ab-cta__inner .la-people { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
@media (max-width: 900px) {
  .sol-cta__inner, .ab-cta__inner { grid-template-columns: 1fr; }
  .sol-cta__inner .la-people, .ab-cta__inner .la-people { grid-column: 1; grid-row: auto; margin-top: 40px; }
}

.la-menu li { position: relative; }
.la-menu__toggle { position: absolute; right: 0; top: 26px; width: 34px; height: 34px; display: grid; place-items: center; background: none; border: 0; color: rgba(255,255,255,0.7); cursor: pointer; padding: 0; }
.la-menu__toggle svg { width: 20px; height: 20px; transition: transform var(--dur-fast) var(--ease-out-expo); }
.la-menu__toggle.is-open svg { transform: rotate(180deg); }
.la-menu__sub[hidden] { display: none; }

.uc-hero__visual image-slot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }

/* ---------- Leistungen and stations: Prisma keyvisual (pure CSS, 3D via transforms) ---------- */
.kv-planes { position: relative; z-index: 1; width: 100%; max-width: 620px; aspect-ratio: 1 / 0.88; margin-inline: auto; perspective: 1500px; }
.kv-planes__scene { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(42deg); }
.kv-planes__p { position: absolute; left: 21%; top: 21%; width: 58%; aspect-ratio: 1; --a: calc(0.40 + var(--i) * 0.11); --ln: rgb(255 255 255 / calc(0.26 * var(--a))); border: 1px solid rgb(255 255 255 / calc(0.55 * var(--a))); background-image: repeating-linear-gradient(0deg, var(--ln) 0 1px, transparent 1px 11.11%), repeating-linear-gradient(90deg, var(--ln) 0 1px, transparent 1px 11.11%); transform-style: preserve-3d; transform: translate3d(calc(var(--i) * 2.4%), calc(var(--i) * 2.4%), calc(var(--i) * 18px)); transition: transform 950ms cubic-bezier(.36,0,.66,0.04); will-change: transform; }
.uc-hero__visual:hover .kv-planes__p { transition: transform 620ms cubic-bezier(.22,1,.36,1); transform: translate3d(calc(var(--i) * 7.4% + var(--jx,0%)), calc(var(--i) * 2.4% + var(--jy,0%)), calc(var(--i) * 50px)); }
.kv-planes__p::after { content: ""; position: absolute; left: 24%; top: 26%; width: 52%; height: 50px; transform-origin: top center; transform: rotateX(90deg); background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.45) 0 1px, transparent 1px 12.5%), linear-gradient(to top, transparent 0%, rgba(255,255,255,0.30) 45%, transparent 70%); background-size: 100% 100%, 100% 260%; background-repeat: no-repeat; filter: opacity(var(--a)); -webkit-mask-image: linear-gradient(to top, transparent, #000 35%, #000 65%, transparent); mask-image: linear-gradient(to top, transparent, #000 35%, #000 65%, transparent); opacity: 0; transition: opacity 420ms ease; }
.kv-planes__p:last-child::after { display: none; }
@keyframes kv-stream { from { background-position: 0 0, 0 100%; } to { background-position: 0 0, 0 -160%; } }
.uc-hero__visual:hover .kv-planes__p::after { opacity: .5; animation: kv-stream 3.2s linear infinite; }
.kv-planes__p > i { position: absolute; display: block; left: calc(var(--x) * 11.111%); top: calc(var(--y) * 11.111%); width: calc(var(--w,1) * 11.111%); height: calc(var(--h,1) * 11.111%); background: rgb(255 255 255 / calc(0.9 * var(--a) * var(--pa,1))); transform-style: preserve-3d; }
.kv-planes__p > i::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(255 255 255 / calc(0.26 * var(--a) * var(--pa,1))); transform: translate3d(20%,20%,calc(var(--i) * -18px)); transition: transform 950ms cubic-bezier(.36,0,.66,0.04); }
.uc-hero__visual:hover .kv-planes__p > i::before { transition: transform 620ms cubic-bezier(.22,1,.36,1); transform: translate3d(20%,20%,calc(var(--i) * -50px)); }
@property --pa { syntax: "<number>"; inherits: true; initial-value: 1; }
@keyframes kv-cell-pulse { 0%, 100% { --pa: 0.1; } 50% { --pa: 1; } }
.kv-planes__p > i.is-pulse { animation: kv-cell-pulse var(--dt,8s) ease-in-out var(--pd,0s) infinite; }
@media (prefers-reduced-motion: reduce) {
  .kv-planes__p > i.is-pulse { animation: none; }
  .uc-hero__visual:hover .kv-planes__p { transform: translate3d(calc(var(--i) * 2.4%), calc(var(--i) * 2.4%), calc(var(--i) * 18px)); }
  .uc-hero__visual:hover .kv-planes__p::after { animation: none; }
}
.kv-planes__p:nth-child(1) { --jx: 2.0%; --jy: -3.0%; }
.kv-planes__p:nth-child(2) { --jx: -3.5%; --jy: 2.5%; }
.kv-planes__p:nth-child(3) { --jx: 4.0%; --jy: 3.0%; }
.kv-planes__p:nth-child(4) { --jx: -2.5%; --jy: -4.0%; }
.kv-planes__p:nth-child(5) { --jx: 3.0%; --jy: -1.5%; }
.kv-planes__p:nth-child(6) { --jx: -1.5%; --jy: 4.5%; }

/* Integration hero headline only: "01" in the brand's own arrow-button
   circle (.la-arrow, same recipe as the hero's CTA below — here filled
   with text instead of the arrow icon), with the h1 text centered to its
   right, at the exact same .uc-hero__title size as every other
   pillar/use-case hero. */
.uc-hero__title:has(.uc-hero__kicker-n) { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
/* h1/h2 paint their text via a clipped gradient (see h1, h2 above) with
   color/-webkit-text-fill-color: transparent — inherited here too, which
   would make "01" invisible against the circle's solid fill, so both are
   reset back to a plain solid white. */
.uc-hero__kicker-n {
  font-family: var(--font-headline); font-weight: 700; font-size: 20px;
  background-image: none; color: #fff; -webkit-text-fill-color: #fff;
}

/* ---------- Pillar hero keyvisual (PillarKeyvisual.svelte, used by
   IntegrationKeyvisual.svelte and AnalyticsKeyvisual.svelte) ----------
   One window-chrome frame (.hm-sim__app + .hm-app / .hm-app__mac, the same
   recipe the homepage app simulation wraps around FakeApp's rebuilt
   dashboard) that builds up through three scenes in an endless crossfade —
   that pillar's own close-up content (e.g. Integration's data-quality/
   stewardship bands, Analytics' KPI/bars/scatter minis) and link chips
   from its homepage panel body (same .hm-sim__band / .hm-sim__mini /
   .hm-sim__chip classes as HomeAppSim.svelte, its own elements staggering
   in), then the real FakeApp nested inside the otherwise empty frame, then
   the animated LeitArt wordmark centered in that same frame. Each scene
   has its own
   @keyframes sized to its own hold time within one shared 18s master
   loop, so only one is ever visible — no JS needed. The logo scene's
   animated GIF (leitart-logo-animation.gif) runs ~9.6s start to finish,
   with "DATEN IN AKTION" only appearing in its final ~2.4s — so its hold
   window is sized to 10s, longer than the GIF's own loop, which
   guarantees the GIF completes at least one full pass (and so shows the
   slogan) somewhere within every window regardless of the GIF's playback
   phase relative to the CSS cycle. A shorter hold (the original equal-
   thirds split) cut the scene before the slogan ever appeared. */
/* Narrower than the visual column it sits in (.uc-hero__visual, right-
   aligned) and flush to that column's left edge — not centered — so the
   freed space lands on the right, clearing .la-social's icons fixed at
   the hero's top-right corner instead of running into them. */
.ikv3 { position: relative; z-index: 1; width: calc(100% - 90px); margin-right: auto; margin-left: -20px; }
.hm-sim__app.ikv3-frame { box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
.ikv3-stage { position: relative; flex: 1; min-height: 0; }
.ikv3-step { position: absolute; inset: 0; opacity: 0; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.ikv3:hover .ikv3-step, .ikv3:hover .ikv3-build { animation-play-state: paused; }
/* 18s master loop, split into three unequal holds: scene 1 (bands/chips)
   0-4s, scene 2 (FakeApp) 4-8s, scene 3 (logo) 8-18s — the logo needs the
   long tail so its GIF has room to reach "DATEN IN AKTION" (see comment
   above). Each step gets its own @keyframes (rather than one shared
   keyframe + delay, as when all three scenes held equal thirds) because
   the hold lengths now differ. Same 0.4s fade in/out throughout. */
.ikv3-step--2 { animation: ikv3-step2-fade 18s infinite; }
.ikv3-step--3 { animation: ikv3-step3-fade 18s infinite; }
.ikv3-step--4 { animation: ikv3-step4-fade 18s infinite; }
@keyframes ikv3-step2-fade {
  0% { opacity: 0; }
  2.22% { opacity: 1; }
  20% { opacity: 1; }
  22.22% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes ikv3-step3-fade {
  0%, 22.22% { opacity: 0; }
  24.44% { opacity: 1; }
  42.22% { opacity: 1; }
  44.44% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes ikv3-step4-fade {
  0%, 44.44% { opacity: 0; }
  46.67% { opacity: 1; }
  97.78% { opacity: 1; }
  100% { opacity: 0; }
}
.ikv3-card { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; height: fit-content; width: 78%; padding: 26px 24px; }
.ikv3-card--mid { width: 88%; }
/* The band rows' label column is a fixed 148px in the homepage's wider
   panel body (static/leitart.css .hm-sim__bandrow > span) — slightly
   trimmed here so it fits this frame's narrower card alongside the chips. */
.ikv3-card--mid .hm-sim__bandrow > span { flex-basis: 118px; }
.ikv3-chips { --chip-c: var(--la-fischerblau); --chip-rgb: 76,160,170; }
.ikv3-chips--ana { --chip-c: var(--la-sonnengelb); --chip-rgb: 250,187,0; }
.ikv3-chips--dp { --chip-c: var(--la-kupferrot); --chip-rgb: 230,68,53; }
.ikv3-chips .hm-sim__chip { border-color: rgba(var(--chip-rgb),0.55); background: rgba(var(--chip-rgb),0.14); }
.ikv3-chips .hm-sim__chip:has(> a) { padding: 0; border-color: rgba(var(--chip-rgb),0.9); }
.ikv3-chips .hm-sim__chip:has(> a:hover) { border-color: var(--chip-c); background: rgba(var(--chip-rgb),0.3); box-shadow: 0 0 0 3px rgba(var(--chip-rgb),0.18); }
/* Within scene 1, the bands and chips build up in their own sequence —
   same fade-up, each delayed a little further into the scene's active
   window (see .ikv3-step--2's keyframes above, starting at loop position
   0s). Duration matches the 18s master loop so these stay anchored to
   scene 1's start on every repeat; delays keep the same real-seconds
   offsets as before, just rebased from an 8s to an 18s period. */
.ikv3-build { opacity: 0; transform: translateY(8px); animation: ikv3-build-in 18s ease-out infinite; }
.ikv3-build--1 { animation-delay: -17.7s; }
.ikv3-build--2 { animation-delay: -17.1s; }
.ikv3-build--3 { animation-delay: -16.5s; }
.ikv3-build--4 { animation-delay: -16s; }
@keyframes ikv3-build-in {
  0% { opacity: 0; transform: translateY(8px); }
  1.78% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
/* Scene 2: the real FakeApp dashboard filling most of the single outer
   frame. FakeApp normally wraps its content in its own .hm-app__mac bar
   (it's a standalone window elsewhere, e.g. the homepage simulation) —
   hidden here so this scene doesn't nest a second window chrome inside
   .ikv3-frame's. */
.ikv3-inset { position: absolute; inset: 0; margin: auto; width: 92%; height: fit-content; }
.ikv3-inset .hm-app__mac { display: none; }
/* Two classes to outrank the generic .uc-hero__visual img rule (static/
   leitart.css ~L908, the use-case tablet-PNG entrance animation) — without
   this, it beats .hm-app__logo's own 4.2cqw sizing and blows this logo up
   to the full frame width every time FakeApp's hub/chrome header shows it. */
.ikv3-inset .hm-app__logo { width: 4.2cqw; height: auto; animation: none; filter: none; opacity: 1; transform: none; }
/* Scene 3: the animated LeitArt wordmark, centered in the same frame as
   the other two scenes — nothing else in the frame, just the logo. */
.ikv3-logo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform: translateY(-15px); }
.ikv3-logo img { display: block; width: 180px; height: auto; }
@media (max-width: 720px) {
  .ikv3-card { width: 88%; padding: 20px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ikv3-step, .ikv3-build { animation: none; opacity: 1; transform: none; }
  .ikv3-step--3, .ikv3-step--4 { display: none; }
}

/* ---------- Newsletter keyvisual (NewsletterKeyvisual.svelte, footer
   only — see +layout.svelte) ----------
   Same window-chrome frame recipe as the pillar keyvisual above
   (.hm-sim__app + .hm-app / .hm-app__mac), its own three scenes instead:
   a title card (0–3s), then the homepage's "Qlik hub" tile grid
   (.hm-app__hub-tile, the view under "Dein Business in einer App" —
   same markup/CSS as FakeApp.svelte, newsletter topics instead of
   business apps) popping in one by one and flickering together once
   (3–8s), then the animated LeitArt wordmark (8–18s) — unchanged logic
   from .ikv3-step--4 above, just renamed so editing this frame never
   touches the shared Integration/Analytics pages. */
.nkv { position: relative; z-index: 1; width: 100%; }
.hm-sim__app.nkv-frame { box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
.nkv-stage { position: relative; flex: 1; min-height: 0; }
.nkv-step { position: absolute; inset: 0; opacity: 0; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.nkv:hover .nkv-step { animation-play-state: paused; }
.nkv-step--title { animation: nkv-step-title-fade 18s infinite; }
.nkv-step--tiles { animation: nkv-step-tiles-fade 18s infinite; }
.nkv-step--logo { animation: nkv-step-logo-fade 18s infinite; }
@keyframes nkv-step-title-fade {
  0% { opacity: 0; }
  2.22% { opacity: 1; }
  14.44% { opacity: 1; }
  16.67% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes nkv-step-tiles-fade {
  0%, 16.67% { opacity: 0; }
  18.89% { opacity: 1; }
  42.22% { opacity: 1; }
  44.44% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes nkv-step-logo-fade {
  0%, 44.44% { opacity: 0; }
  46.67% { opacity: 1; }
  97.78% { opacity: 1; }
  100% { opacity: 0; }
}
/* .hm-app__hub is normally only shown while its parent .hm-app carries a
   "hub…" data-step (see FakeApp.svelte's journey timeline); here the
   frame never leaves that step, so each screen just sits still while
   its own .nkv-step is visible. */
.nkv .hm-app__hub { position: static; height: 100%; }
/* Tiles: icon to the left, heading + tag stacked to its right instead
   of below — frees up width for a much larger heading than the
   homepage hub's own stacked layout allows. Scoped under .nkv so the
   real homepage hub tiles (FakeApp.svelte) keep their own layout. */
.nkv .hm-app__hub-tile { flex-direction: row; align-items: center; gap: 1cqw; }
.nkv .hm-app__hub-icon { margin-bottom: 0; }
.nkv-tile-text { display: flex; flex-direction: column; gap: 0.25cqw; min-width: 0; }
.nkv-tile-text b { font-size: 2.3cqw; line-height: 1.2; }
.nkv-hub--title { align-items: center; justify-content: center; }
.nkv-titlecard { text-align: center; }
.nkv-titlecard .hm-app__hub-eyebrow { font-size: 1.4cqw; margin-bottom: 0.8cqw; }
.nkv-titlecard strong { font-size: 4.4cqw; line-height: 1.08; }
/* Tiles fade in one by one, left to right — each gets its own keyframe
   with its own absolute appear-time (as a % of the shared 18s loop,
   scene "tiles" is visible 3.4s–7.6s) rather than one shared keyframe
   shifted via negative animation-delay (the .ikv3-build technique
   above): that trick only reveals correctly when the reveal sits right
   at the scene's own fade-in — staggering multiple reveals later into
   an already-visible scene left every tile sitting at opacity:1,
   carried over from the previous loop, before its own brief reset blip,
   so all four looked like they appeared at once. Then all four flicker
   together once — very subtly — as a little flourish before the scene
   fades out (a transient brightness pulse has no "already visible"
   state to carry over, so the shared-keyframe + delay technique is
   fine for that one). */
.nkv-tile { opacity: 0; transform: translateY(10px); animation: 18s ease-out infinite, nkv-tile-shimmer 18s linear infinite; }
.nkv-tile--1 { animation-name: nkv-tile-pop-1, nkv-tile-shimmer; animation-delay: 0s, -11.5s; }
.nkv-tile--2 { animation-name: nkv-tile-pop-2, nkv-tile-shimmer; animation-delay: 0s, -11.5s; }
.nkv-tile--3 { animation-name: nkv-tile-pop-3, nkv-tile-shimmer; animation-delay: 0s, -11.5s; }
.nkv-tile--4 { animation-name: nkv-tile-pop-4, nkv-tile-shimmer; animation-delay: 0s, -11.5s; }
@keyframes nkv-tile-pop-1 {
  0%, 18.33% { opacity: 0; transform: translateY(10px); }
  19.44%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes nkv-tile-pop-2 {
  0%, 20.56% { opacity: 0; transform: translateY(10px); }
  21.67%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes nkv-tile-pop-3 {
  0%, 23.33% { opacity: 0; transform: translateY(10px); }
  24.44%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes nkv-tile-pop-4 {
  0%, 26.11% { opacity: 0; transform: translateY(10px); }
  27.22%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes nkv-tile-shimmer {
  0%, 1%, 100% { filter: brightness(1); }
  1.8% { filter: brightness(1.12); }
  3.4% { filter: brightness(1); }
}
.nkv-logo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform: translateY(-15px); }
/* min() of a fixed px size and a frame-relative percentage: at the
   560px-wide desktop frame this resolves to the original fixed 160px
   (160px = 28.6% of 560px, under the 32% cap), unchanged from before; on
   the narrower stacked mobile frame (420px/320px, see the ≤960px/≤560px
   rules) it scales down with the frame instead of staying fixed-size and
   looking oversized. */
.nkv-logo img { display: block; width: min(160px, 32%); height: auto; }
@media (prefers-reduced-motion: reduce) {
  .nkv-step { animation: none; opacity: 1; transform: none; }
  .nkv-step--title, .nkv-step--logo { display: none; }
  .nkv-tile { animation: none; opacity: 1; transform: none; filter: none; }
}

/* ---------- News: Highlight-Modul ---------- */
.lx-highlight { position: relative; z-index: 1; padding: 0 var(--pad-x) 96px; margin-top: 50px; }
.lx-highlight__panel { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); align-items: center; gap: clamp(32px, 5vw, 72px); background: rgba(58,66,72,0.7); border-radius: 56px 0 56px 0; padding: clamp(36px, 4vw, 56px); }
.lx-highlight__media { margin: 0; }
.lx-highlight__media img { display: block; width: 100%; height: auto; }
.lx-highlight__text h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 30px 0 0; text-wrap: pretty; }
.lx-highlight__text p { margin: 24px 0 0; max-width: 30em; font-weight: 300; font-size: 18px; line-height: 1.7; color: rgba(255,255,255,0.72); }
.lx-highlight .la-eyebrow { color: var(--la-rail); }
@media (max-width: 900px) { .lx-highlight__panel { grid-template-columns: 1fr; gap: 32px; border-radius: 36px 0 36px 0; } }

.ab-career__cta .la-textlink::after { display: none; }