/* =============================================================
   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 ---------- */
  /* Size of the large hero titles (news, solutions). */
  --fs-hero-title: 93px;

  --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: 124.85px;
  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; align-items: center; 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); }
/* A normal flex item (not an absolutely-positioned overlay) so the square
   sits flush with the row's own left edge — the same edge the divider
   line (the row's border-bottom) and the main-page rows above it start
   from — instead of floating further left in the margin. */
.la-menu__pillar a::before, .la-menu__usecase a::before { content: ""; display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; background: var(--ac); }

/* 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;
  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%);
  /* Same side padding as the nav bar, so the entries line up with the logo. */
  padding: 120px var(--pad-x) 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; }
/* The arrow button in a brand colour instead of the dark default, e.g. in a hero. */
.la-arrow--kupferrot { background: var(--la-kupferrot); }
.la-arrow--sonnengelb { background: var(--la-sonnengelb); }
.la-arrow--fischerblau { background: var(--la-fischerblau); }

/* 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; }
/* Both recipes are also used on <button> triggers (e.g. the "load more"
   controls in news/+page.svelte) — strip the remaining browser button
   chrome .la-arrow's own border/background/padding don't already cover. */
/* Not `font: inherit` — that's MORE specific than the plain .la-arrow/
   .la-textlink rules above (an element + class beats a class alone), so it
   clobbered .la-textlink's own font-size/weight/family with whatever the
   button happened to inherit from its surrounding context. Both classes
   already declare every font property a <button> UA stylesheet would
   otherwise set, and the UA's own button selector is lower-specificity
   than .la-arrow/.la-textlink, so nothing else needs resetting here. */
button.la-arrow, button.la-textlink { appearance: none; -webkit-appearance: none; }
button.la-textlink { background: none; border: 0; padding: 0; }

/* =============================================================
   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.
   Two plain flex columns — copy on the left, keyvisual on the right —
   both in normal flow, so neither can ever overlap the other regardless
   of card width. (An earlier version absolutely positioned the keyvisual
   over the card with a fixed right-offset + translateX, which assumed a
   minimum card width to clear the copy column; on real layouts it ended
   up centered over the copy instead.) */
.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;
}
.la-footer__newsletter-copy { flex: 1 1 420px; max-width: 560px; display: flex; flex-direction: column; gap: 30px; }
.la-footer__newsletter-visual { flex: 1 1 420px; max-width: 560px; }
.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 SVG (viewBox 1753.8x1029.4) has transparent padding above and
   below the wordmark (visible mark y:233.7-836.5) but none on the sides —
   pulled up so the visible top lines up with the "Unternehmen" column
   heading next to it. No horizontal correction: the wordmark already
   spans the full canvas width, so its left edge is already flush with
   the address text below it. */
.la-footer__brandcol img { width: 124.85px; display: block; margin: -27px 0 18px 0; }
.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) {
  /* 38px: the Datenreise station pages' hero title (.tech-hero .uc-hero__title
     below, e.g. /integration) +8px — same size for the Lösungen in Aktion,
     News & Events and Mit uns hero titles, which both reference this token
     (.lx-hero__title directly, .ab-hero__title explicitly matched to it). */
  :root { --pad-x: 24px; --fs-hero-title: 46px; }
  .la-nav { padding: 18px 24px; gap: 16px; }
  .la-nav__links { 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; }
  /* Same size as the header logo (.la-nav__brand img above) — the brand
     column has no size override of its own otherwise, so it was still
     rendering at the desktop 127.4px here. */
  .la-footer__brandcol img { width: 104px; }
  /* The legal row's trailing tagline is redundant with the brand lockup
     right above it once the footer is this narrow. */
  .la-footer__legal .grow { display: none; }
  /* Below desktop width, stack copy above keyvisual instead of side by
     side — both already flow normally, so this is just a column switch.
     flex-basis is reset to auto: the desktop value (420px) sets a WIDTH
     basis for the row layout, but once flex-direction flips to column it
     becomes a forced minimum HEIGHT instead, leaving a large blank gap
     below any copy/visual shorter than 420px. */
  .la-footer__newsletter { padding: 42px 42px 52px; margin-bottom: 40px; min-height: 0; flex-direction: column; align-items: stretch; }
  .la-footer__newsletter-copy { max-width: none; flex-basis: auto; }
  .la-footer__newsletter-visual { width: 100%; max-width: 420px; margin: 24px auto 0; flex-basis: auto; }
  /* Same size as the "Tel. …" contact text next to it (.la-footer__col p). */
  .la-footer__seals-caption { font-size: 15px; }
  /* ExploreMore ("Entdecke mehr") carries .u-s15 (padding-top:0, defined in
     inline-utilities.css) for its OTHER use-sites, where a hero's "jump to"
     anchor already lands exactly at the section top — but ExploreMore
     itself always needs its own top gap. .lx-explore.u-s15 (two classes)
     outranks .u-s15 alone regardless of which stylesheet loads last. */
  .lx-explore.u-s15 { padding-top: 60px; }
}

@media (max-width: 560px) {
  /* Header: the language switch stays in the bar next to the CTA and the
     burger, just smaller (the logo, CTA, switch and burger must share ~335px). */
  .la-nav { padding-left: 20px; padding-right: 20px; gap: 10px; }
  .la-nav__cta { padding: 8px 11px; }
  .la-lang { padding: 3px; }
  .la-lang span { padding: 5px 8px; font-size: 12px; }
  /* 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 58px; min-height: 0; }
  .la-footer__newsletter-visual { max-width: 320px; }
}

@media (max-width: 380px) { .la-nav__brand img { width: 88px; } }
/* Very narrow phones: the CTA is also in the menu, so the bar drops it. */
@media (max-width: 359px) {
  .la-nav__cta { display: none; }
  .la-lang { margin-left: auto; }
}

/* 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 { display: none; }
  .la-burger { display: grid; margin-left: 0; }
  .la-nav__cta { margin-left: auto; }
  /* In this range the burger replaces the nav links, but .la-social isn't
     hidden yet (that only happens at ≤960px — see above), so both sit in
     the corner together. Each is flush to the same right padding edge, but
     the 56px icon box and the 42px burger don't share a center by default
     (the icons land 7px left of the burger's center) — recenter the icon
     column under the burger instead of leaving it visibly offset. */
  .la-social { right: calc(var(--pad-x) - 7px); }
}
@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 ---------- */
/* align-items: start (not center) so the title/teaser/CTA block and the
   visual both start at the same fixed y on every page using this hero,
   regardless of how many lines the title or sub happen to run to —
   centering here made that y position drift per page with copy length. */
.uc-hero {
  position: relative; padding: 36px var(--pad-x) 84px;
  display: grid; grid-template-columns: 0.92fr 1.28fr;
  align-items: start; 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; }
/* The Datenreise station pages (Integration/Analyse/Aktion) only — every
   hero element (title/teaser/CTA block and visual) shifted down 60px as
   one unit, on top of the shared .uc-hero padding-top, since align-items:
   start means both columns start at the row's top edge together. */
.pl-hero { padding-top: 96px; }
/* 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: 18px; 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; }
  /* Datenreise station pages (Integration/Analyse/Aktion) only. */
  .tech-hero .uc-hero__title { font-size: 38px; line-height: 1.1; }
  .uc-section { padding: 56px var(--pad-x); }
  .uc-cta { padding-top: 60px; padding-bottom: 60px; }
  .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 { font-size: 13px; }
  /* The number badge needs to shrink to match the arrow button
     (.la-arrow--sm, 52px) — the two must always stay the same size. Width/
     height moved to a block after .hm-prin__n's own base rule below: that
     rule (also width/height:56px, same specificity) sits later in the file
     and was winning over this one. */
  .hm-faq__icon { width: 40px; height: 40px; }
  .hm-faq__icon img { width: 14px; height: 14px; }
}
.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; }

/* Mobile scroll-pinned choreography (JS: setupMobileChoreo in
   HomeAppSim.svelte) — the narrower-viewport equivalent of .is-theater:
   same "pin the viewport while it builds" mechanism (position: sticky +
   extra scroll-budget height set on the section itself), just without the
   ring geometry. The app hub and the three panels stack on top of each
   other (position: absolute, same box) inside the pinned stage and
   crossfade one into the next as the user scrolls, instead of flying out
   to ring segments. overflow-y: auto on each panel is a safety net for
   phones short enough that a panel's full build-up doesn't fit the pinned
   viewport — scrolls internally there rather than clipping. */
.is-mobile-choreo .hm-sim__pin { position: sticky; top: 0; height: 100dvh; overflow: hidden; display: flex; align-items: center; }
.is-mobile-choreo .hm-sim__stage { position: relative; width: 100%; height: 100%; }
.is-mobile-choreo .hm-sim__app { position: absolute; inset: 0; margin: auto; width: min(92%, 420px); height: fit-content; max-height: 100%; }
.is-mobile-choreo .hm-sim__grid { position: absolute; inset: 0; display: block; margin: 0; }
.is-mobile-choreo .hm-sim__col {
  /* Anchored below the stepper (see .hm-sim__mobile-steps below), not
     vertically centered in the full pinned height: centering made the
     panel's actual screen position depend on its content height, so no
     fixed padding-top on .hm-sim__panel could reliably clear the stepper
     for every panel — a short panel centered lower, pushing its heading
     back up into the stepper row regardless of padding. */
  position: absolute; top: 170px; bottom: 16px; left: 16px; right: 16px; margin: 0 auto;
  max-width: 460px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; align-items: flex-start;
}
.is-mobile-choreo .hm-sim__panel { height: auto; width: 100%; }
/* The panel's own "01 Integration" kicker circle is redundant with (and,
   before this, visually collided with) the persistent stepper above — the
   stepper is now the one place that number lives. Keeps the pillar name
   text next to it. */
.is-mobile-choreo .hm-sim__k-n { display: none; }
/* Recap of all three stations together (.hm-journey-mobile, further down)
   replaces the old pinned/scroll-jacked take on narrow viewports: a
   position:absolute slide with its own overflow-y:auto scrollbar inside
   the sticky pin made scrolling forward/back over it feel janky, not like
   a normal page. It's a plain content module straight after this section
   now, not part of the pin at all — .hm-sim__end itself (the ring's own
   in-place crossfade) stays .is-theater-only, like .hm-sim__ring and
   .hm-sim__core already were. */
.hm-journey-mobile { display: none; }
/* Shown whenever #app-sim isn't running the desktop ring (.is-theater) —
   covers both the mobile choreography and the reduced-motion static
   fallback (neither of which ever shows the ring's own in-place
   .hm-sim__end). Plain CSS sibling selector, not a JS-driven class: it
   stays correct even before hydration, and needs no scroll logic of its
   own at all — that's the point, a normal content module scrolls with the
   page like everything else, no pin, no internal scrollbar. */
.hm-sim:not(.is-theater) + .hm-journey-mobile { display: block; }
.hm-journey-mobile { max-width: 900px; margin: 0 auto; }
.hm-journey-mobile .hm-sim__end-head { margin-bottom: 30px; }
.hm-journey-mobile .hm-sim__end-bar { display: none; }
.hm-journey-mobile .hm-sim__end-cols { grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 900px) {
  .hm-journey-mobile .hm-sim__end-cols { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
/* .hm-sim__end-rest/-col/-n/-name/-text/-link all carry a baseline
   opacity:0 meant for the ring choreography's own JS-driven reveal — this
   module has no such JS, so they're reset to visible here; the whole
   module fades in together via .reveal (see site.js) instead, same simple
   mechanism as every other homepage section. */
.hm-journey-mobile .hm-sim__end-rest,
.hm-journey-mobile .hm-sim__end-col,
.hm-journey-mobile .hm-sim__end-n,
.hm-journey-mobile .hm-sim__end-name,
.hm-journey-mobile .hm-sim__end-text,
.hm-journey-mobile .hm-sim__end-link {
  opacity: 1;
}
/* Same defensive swap as .hm-sim__end-rest's old mobile override: the
   gradient-clip-text technique rendered unreliably on some real phones. */
.hm-journey-mobile .hm-sim__end-rest { background: none; color: #fff; -webkit-text-fill-color: #fff; }

.hm-sim__mobile-steps { display: none; }
.is-mobile-choreo .hm-sim__mobile-steps {
  /* Same left-anchoring recipe (left/right 16px, centered up to a 460px
     cap) as .hm-sim__col below, plus the panel's own 26px left padding —
     so the row starts at exactly the panel text's left edge on any
     viewport width, instead of a fixed px guess that only matched by
     coincidence at one width. 116px clears the sticky nav (~101px tall),
     same offset as .is-theater .hm-sim__head. */
  display: flex; align-items: center; gap: 8px;
  position: absolute; top: 116px; left: 16px; right: 16px; margin: 0 auto;
  max-width: 460px; padding-left: 26px; z-index: 3;
}
/* Same numbered-circle recipe as everywhere else on the site (.hm-prin__n) —
   compound selectors throughout (.hm-prin__n.hm-sim__mobile-step...) rather
   than plain .hm-sim__mobile-step, so these overrides win on specificity
   alone and don't depend on where .hm-prin__n's own base rule happens to
   sit in the file. Width/height/font-size for the active (bigger) step are
   NOT set here — a plain .is-active class rule still depends on it
   outranking .hm-prin__n's own 56px base rule on specificity, which some
   visitors never actually saw apply; setupMobileChoreo in HomeAppSim.svelte
   sets those three properties as inline style instead, which always wins
   regardless of any cascade quirk. The transition below still animates
   those inline-set values smoothly. */
.hm-prin__n.hm-sim__mobile-step {
  width: 26px; height: 26px; border-width: 2px; border-color: rgba(255,255,255,0.3);
  font-size: 10px; background: rgba(29,34,38,0.7); box-shadow: none;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out-expo), width var(--dur-base) var(--ease-out-expo), height var(--dur-base) var(--ease-out-expo), font-size var(--dur-base) var(--ease-out-expo), border-color var(--dur-base) var(--ease-out-expo), background var(--dur-base) var(--ease-out-expo);
}
.hm-prin__n.hm-sim__mobile-step--int { border-color: var(--la-fischerblau); }
.hm-prin__n.hm-sim__mobile-step--ana { border-color: var(--la-sonnengelb); }
.hm-prin__n.hm-sim__mobile-step--dp { border-color: var(--la-kupferrot); }
.hm-prin__n.hm-sim__mobile-step.is-active { background: #1d2226; }
.hm-prin__n.hm-sim__mobile-step--int.is-active { background: var(--la-fischerblau); }
.hm-prin__n.hm-sim__mobile-step--ana.is-active { background: var(--la-sonnengelb); }
.hm-prin__n.hm-sim__mobile-step--dp.is-active { background: var(--la-kupferrot); }

/* 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: 960px) { .la-people { width: 100%; justify-content: center; } }
@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 { padding-top: 60px; padding-bottom: 60px; }
  .hm-bookus__inner { grid-template-columns: 1fr; }
  .hm-bookus__copy { margin-left: 0; margin-top: 32px; }
  .hm-bookus__visual { opacity: 0.55; }
  /* The "screen" card's text doesn't shrink with its own narrower mobile
     width (container-type:inline-size is set but no @container rule uses
     it yet), so long words were overflowing the frame. This class is
     shared by the homepage's own "Book us!" card AND (via UcCta.svelte)
     the contact-closing module on every pillar/solution page, so the fix
     lands everywhere at once. Dropped to the site's standard copytext
     recipe (see .hm-tcard p / .hm-prin p / .hm-faq__item p) instead of
     just shrinking the bold headline-style size it had before. */
  .hm-bookus__copy-body { padding: 24px; }
  .hm-bookus__copy p { font-weight: 300; font-size: var(--hm-body); line-height: 1.6; color: rgba(255,255,255,0.76); }
}

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

/* ---------- Hero ---------- */
.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 of /loesungen-in-aktion (inside Hero.svelte's .lx-hero__visual) — 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;
}

/* ---------- Section frame ---------- */
.sol-section { position: relative; padding: 96px var(--pad-x); z-index: 1; }
/* The hero's arrow jumps here. The section has no top padding (.u-s15), so its
   first card would end up behind the sticky nav (101px on a phone). 123px puts
   it 22px below the nav, where the heading of /news lands (its section has 64px
   top padding). */
#loesungsbereiche { scroll-margin-top: 123px; }
.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) {
  /* The Spline scene frames its camera from window.innerWidth/innerHeight —
     the real device viewport — not from the <spline-viewer> element's own
     box, so no CSS on that element can fix the crop (see onMount in
     +page.svelte, which swaps it for an iframe on mobile instead). The
     iframe's own window size comes from ITS box below: width/height in vw
     keep the (pre-transform, real) size proportional to the viewport —
     generous enough to render like desktop does — and scale() only shrinks
     it back down visually afterward, landing at ~100vw / ~107vw to exactly
     fill the viewport width (300 * 0.3333 ≈ 100, 320 * 0.3333 ≈ 107). The
     height is taller than the zoom-safe width alone would need, because on
     an actual phone (unlike this codebase's desktop-browser testing) the
     scene still rendered visibly cropped top/bottom at a shorter box —
     giving it more vertical headroom than strictly necessary is cheap,
     cropping content isn't.
     .sol-hero__visual fills the hero behind the title and copy on narrow
     screens, like the keyvisual of the news hero (Hero.svelte), and clips
     whatever overflows. The cube sits about 26vw above the middle of the
     iframe, so the iframe's centre goes to 72% of the hero's height plus that
     26vw, and 25vw right of the middle: the cube then sits at the lower right,
     where the news hero's network sits, instead of behind the title. */
  .sol-hero__visual { inset: 0; overflow: hidden; opacity: 0.9; }
  .sol-hero__splineFrame { position: absolute; inset: auto; top: calc(72% + 26vw); left: calc(50% + 25vw); width: 300vw; height: 320vw; border: 0; background: transparent; transform-origin: center center; transform: translate(-50%, -50%) scale(0.3333); }
  .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: var(--fs-hero-title); line-height: var(--lh-tight); letter-spacing: -0.02em;
  margin: 22px 0 0;
}
/* A long word ("Lösungen") runs out of a phone screen at the full title size.
   This title gets the largest size at which the word still fits the line: the
   screen width minus the 2 * 24px padding, divided by the word's width in em
   (--fit-em, measured for "Lösungen"), but never more than the token. For
   another long word, set --fit-em in a variant of this rule. (A prop would put
   the number into a style attribute, which the CSP does not allow.) */
.lx-hero__title--fit {
  --fit-em: 4.55;
  font-size: clamp(36px, calc((100vw - 48px) / var(--fit-em)), var(--fs-hero-title));
}
.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: flex-start;
}
.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; }
/* Server-proxied YouTube thumbnail behind the scanlines and the play icon. */
.lx-tutcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.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; }

/* Hover darkening overlay — brand gray, translucent — matching the
   postcard media treatment below. */
.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__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; } }
/* The site's modal (Modal.svelte): a full-viewport native <dialog> with the dark
   backdrop and the close button in the corner. The photo lightbox and the
   video player are variants of it. The page behind does not scroll. */
.lx-modal { 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-modal::backdrop { background: rgba(0,0,0,0.6); }
.lx-modal__close { position: absolute; top: 20px; right: 20px; }
.lx-modal__close svg { width: 18px; height: 18px; color: #fff; }
html:has(.lx-modal[open]) { overflow: hidden; }

/* Lightbox of the gallery (PhotoGallery.svelte): the photo between the site's
   .la-arrow buttons. */
.lx-modal--lightbox[open] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(12px, 2vw, 28px); }
.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); }
@media (max-width: 700px) {
  .lx-modal--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; }
}

/* Video player of /news (VideoModal.svelte): the player, grown out of its card,
   in the middle of the modal. */
.lx-modal--video[open] { display: grid; place-items: center; }
.lx-vmodal__frame {
  position: relative; overflow: hidden; border-radius: 56px 0; background: #2b3236;
  aspect-ratio: 16 / 9; width: min(960px, 100%, calc((100dvh - 96px) * 16 / 9));
  box-shadow: 0 16px 40px rgba(0,0,0,0.36);
}
.lx-vmodal__frame--short { aspect-ratio: 9 / 16; width: auto; height: min(900px, calc(100dvh - 96px)); max-width: 100%; }
.lx-vmodal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.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; }
  /* News & Events only (:has(#kv-hero) singles out NodesKeyvisual's canvas,
     the only user of that id, without touching Lösungen's own nested
     .sol-hero__visual/.sol-hero__splineFrame sizing, which is positioned
     relative to this same shared .lx-hero__visual box). Matches the
     Lösungen hero's proportions: a modest graphic below the text instead
     of a full-bleed background running behind it — kv-nodes.js reads this
     box's actual size via ResizeObserver, so shrinking it here is enough,
     no extra scaling needed. */
  /* .lx-hero itself is "display:flex; align-items:center" — its text
     column (.lx-hero__inner) is vertically CENTRED in the hero, not
     top-anchored. Centring this box at top:50% put it right on top of
     that centred text instead of below it. Anchoring to the bottom edge
     instead keeps it below the text reliably, regardless of exactly how
     tall the (vertically centred) text block happens to render. */
  .lx-hero__visual:has(#kv-hero) { inset: auto; top: auto; bottom: 40px; left: 50%; right: auto; transform: translateX(-50%); width: min(420px, 85%); height: 220px; opacity: 1; }
  /* Lösungen in Aktion + News & Events (shared Hero.svelte). */
  .lx-hero__title { line-height: 1.1; }
  .lx-section { padding: 64px var(--pad-x); }
  .lx-cta { padding-top: 60px; padding-bottom: 60px; }
  .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; }
}
@media (max-width: 560px) {
  /* Heroes on phones: the solutions hero looks like the news hero. Measured on
     the news hero at 390px: 665px tall, the keyvisual network 257px wide with
     its centre at 67% / 58% of the hero. The news network places itself
     (kv-nodes.js); the Spline cube sits in an iframe, so it is sized and placed
     here: scale(0.6) makes it as wide as the network (it is 142px wide at the
     tablet scale of 0.3333), and the iframe's centre goes to 67% across and 58%
     down plus 54vw, the distance of the cube above the iframe's centre at this
     scale (30vw at 0.3333, times 1.8). */
  .lx-hero { min-height: 665px; }
  /* Smaller and centred in the hero instead of lower-right — at the
     original size/position the cube ran into the teaser copy below the
     title. */
  /* Below the title/teaser/button, not behind them — centering it in the
     hero (top: 50%) landed it right on top of the title text. */
  .sol-hero__splineFrame { top: 92%; left: 50%; transform: translate(-50%, -50%) scale(0.32); }
}

/* =================================================================
   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; }
/* Width is capped at 100% of its own grid column (.ab-hero__inner's first
   track, see below), not a vw fraction of the full viewport: a vw-based
   cap ignored how narrow that column actually is and let the canvas
   overflow into .ab-hero__lead's text at viewport widths from ~961px up
   to ~1766px. */
.ab-hero__visual { margin-top: 20px; width: min(620px, 100%); 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; }
/* Fixed 93px, not the clamp() this rule name would suggest: the markup
   carried a since-removed legacy utility class (.u-s16, inline-utilities.css)
   that forced exactly this value on every viewport width, silently
   overriding whatever this rule computed — including every attempt at a
   mobile-only font-size override, since that stylesheet loads after this
   one. Keeping the same fixed value here preserves the actual desktop
   appearance now that u-s16 is gone, while the mobile override below still
   applies on top of it as intended. */
.ab-hero__title { font-size: 93px; 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);
}
/* The info column takes the free width and may shrink below its content, so
   a long e-mail address wraps instead of pushing the arrow out of the card. */
.ab-person__info { flex: 1 1 auto; min-width: 0; }
.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); overflow-wrap: anywhere; }
.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) {
  /* 49px = .lx-hero's own top offset to its title (padding-top:24px +
     .lx-hero__inner's margin-top:25px) — .ab-hero__inner carries no
     margin-top of its own, so this hero's padding-top has to supply the
     whole 49px alone to land the title at the same height. */
  .ab-hero { min-height: 520px; padding-top: 49px; 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-cta { padding-top: 60px; padding-bottom: 60px; }
  .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; }
  /* The KvPlanes keyvisual's own animation drifts its layers upward,
     running into the copy above it with only the shared .uc-hero__visual
     margin-top (16px) between them. */
  .ab-section__visual { margin-top: 46px; }
  .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); }
  /* Stacked into one column (not side by side), each card is its own grid
     row now, so they no longer stretch to a shared row height — a 2-line
     name (Sebastian Nädtke) made that card visibly taller than the other. */
  .ab-people { grid-template-columns: 1fr; }
  .ab-person { min-height: 210px; }
  .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); }
  .ab-person { gap: 16px; padding: 24px 20px; }
  .ab-person__mono { width: 48px; height: 48px; font-size: 18px; }
}


/* =================================================================
   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; }
/* Same ~60px module rhythm as every other mobile section (.hm-section,
   .hm-bookus, .uc-cta, …), and the standard 960px breakpoint instead of
   this section's own 900px one — at 901-960px wide this used to fall
   through to the unconditional 180px above instead of a mobile value. */
@media (max-width: 960px) {
  .hm-principles { padding-top: 60px; padding-bottom: 60px; }
  .hm-principles__head { margin-bottom: 52px; }
}
.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; }
@media (max-width: 700px) { .hm-faq__n { width: 40px; height: 40px; } }
.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; }
@media (max-width: 960px) {
  /* Same size as the Lösungen-in-Aktion/News hero title (--fs-hero-title,
     lowered to 85px on mobile above). */
  .ab-hero__title { font-size: var(--fs-hero-title); line-height: 1.1; }
  /* The arrow sat inline beside the (now two-line) title, centred in the
     row and floating mid-block instead of reading as a left-aligned CTA
     below it, like every other hero on the site. */
  .ab-hero__row { flex-direction: column; align-items: flex-start; gap: 24px; }
}

/* 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__row--toggle { cursor: pointer; }
.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
   animation (leitart-logo-animated.svg, formerly a GIF) runs ~9.6s start
   to finish, with "DATEN IN AKTION" only appearing in its final ~4s — so
   its hold window is sized to 10s, longer than the logo's own loop, which
   guarantees it completes at least one full pass (and so shows the
   slogan) somewhere within every window regardless of the logo'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 logo 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); }
/* min() of the fixed desktop size and a frame-relative percentage — same
   formula as .nkv-logo img below (its mobile fix came first): at the
   desktop frame width this resolves to the original fixed 180px, but on
   the narrower mobile frame (see .ikv3's own ≤960px override) it scales
   down with the frame instead of overflowing it. */
.ikv3-logo img { display: block; width: min(180px, 32%); height: auto; }
@media (max-width: 960px) {
  /* The -90px/-20px desktop offset exists only to clear .la-social's
     icons fixed at the hero's top-right corner (see .ikv3's own comment
     above) — .la-social is already hidden at this breakpoint, so the
     compensation just squeezes the frame (and everything scaled to fit
     it, e.g. scene 1's docks/chips) far narrower than the stacked mobile
     column actually allows. */
  .ikv3 { width: 100%; margin: 0; }
}
@media (max-width: 720px) {
  .ikv3-card { width: 88%; padding: 20px 18px; }
}
/* Scene 1's docks/chips reuse the homepage panel's own mobile compacting
   (static/leitart.css .hm-sim__bandrow / .hm-sim__mini--kpis / .hm-sim__
   panel--dp rules above) — same values, just scoped under .ikv3-card--<
   variant> (see PillarKeyvisual.svelte's own comment on why that's a new
   selector rather than reusing .hm-sim__panel--int/--ana/--dp directly:
   those classes also carry the homepage panel's two-column desktop grid,
   built for a layout this frame doesn't have). Without this, scene 1's
   content (sized for the homepage panel's own, much wider mobile card)
   overflows the far narrower keyvisual frame. */
@media (max-width: 960px) {
  .ikv3-card--int .hm-sim__bandrow > span { flex-basis: 110px; }
}
@media (max-width: 560px) {
  .ikv3-card .hm-sim__mini--kpis { gap: 6px; padding-inline: 6px; justify-content: space-evenly; }
  .ikv3-card .hm-sim__mini--kpis i { font-size: 14px; }
  .ikv3-card--dp .hm-sim__docks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ikv3-card--dp .hm-sim__mini { width: auto; }
  /* Still taller than the keyvisual frame even with the grid above (the
     homepage panel this was all copied from has much more height to
     spare than this frame's 1.985 aspect ratio leaves) — compact the
     docks/chips further, scoped to this frame only so the homepage panel
     itself (which fits fine at this width) is untouched. */
  .ikv3-card { padding: 14px; }
  .ikv3-card .hm-sim__docks { gap: 6px; margin-bottom: 10px; }
  .ikv3-card .hm-sim__mini { height: 34px; padding: 6px 8px; }
  .ikv3-card .hm-sim__chips { gap: 6px; }
  .ikv3-card .hm-sim__chip { font-size: 10px; padding: 6px 10px; }
  .ikv3-card .hm-sim__chip > a { padding: 3px 10px 3px 3px; gap: 5px; }
  .ikv3-card .hm-sim__chip-ico { width: 16px; height: 16px; }
  /* Integration's own docks (bandrows instead of minis) need the same
     compacting — same reasoning as the docks/chips rules above. */
  .ikv3-card .hm-sim__bands { margin-bottom: 6px; }
  .ikv3-card .hm-sim__bandrow { gap: 8px; margin-bottom: 10px; }
  .ikv3-card .hm-sim__band { height: 8px; }
  .ikv3-card .hm-sim__bands small { font-size: 9px; margin-top: 0; }
  /* The gate/person markers are absolutely centered on the band (top:50%,
     margin -half their own fixed size) — shrunk to the band's own 8px
     height above, not just the band itself, or they still stick out past
     it into the row above/below at their original 20px/24px size. */
  .ikv3-card .hm-sim__gate { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }
  .ikv3-card .hm-sim__gate svg { width: 8px; height: 8px; }
  .ikv3-card .hm-sim__person { width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; }
  .ikv3-card .hm-sim__person svg { width: 8px; height: 8px; }
  .ikv3-card .hm-sim__person em { width: 10px; height: 10px; top: -7px; right: -5px; }
  .ikv3-card .hm-sim__person em svg { width: 6px; height: 6px; }
  /* Even fully compacted, scene 1's content still doesn't fit the frame's
     desktop-tuned 1.985 aspect ratio at real phone widths (measured: still
     ~76-96px taller than the frame at 342px/300px) — scoped to .ikv3 only
     (not .nkv or the homepage's own FakeApp simulation, both unaffected),
     so only this frame gets taller/more-square on phones. FakeApp's own
     sizing (scene 2) is cqw/width-based, so it's unaffected by the extra
     height; the logo (scene 3) stays centered either way. */
  .ikv3 .hm-app { aspect-ratio: 1.3; }
}
@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; }