/* Header mega menus and the Lösungen / Produkt pages (markup: build-content.mjs, behaviour: js/menu.js, js/lx.js).
   Plain CSS loaded after the Tailwind build and pages.css, tokens from main.css only. Prefixes: mm- (desktop menu),
   mg- (phone menu group), lx- (content pages and the illustration library). */

/* ===================================================================================================================
   Mega menu (desktop from 1024 px). Reference: fynk's Solutions menu, a white panel under the bar with plain columns,
   an uppercase grey column title and a grey "all" link with an arrow. The panel hangs from the header bar (.hd-bar is
   the positioned ancestor), centred on it, so it follows the bar into the floating state. Columns come from
   --mm-tpl, the width from --mm-w (both set by the build per menu); a third column (Ressourcen) needs nothing new.
   =================================================================================================================== */
.mm { display: contents; }
.mm-btn { cursor: pointer; }
.mm-btn .mm-chev { margin-left: 2px; color: var(--color-ink-3); transition: transform 180ms var(--ease), color 180ms var(--ease); }
.mm-btn[aria-expanded="true"] .mm-chev { transform: rotate(180deg); color: var(--color-ink); }
.mm-btn.is-current { color: var(--color-ink); }
.mm-panel { position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 0; z-index: 2; width: min(var(--mm-w, 640px), calc(100vw - 32px));
  padding: 24px; border-radius: 16px; background: #fff;
  box-shadow: 0 16px 32px -8px rgb(50 33 0 / .10), 0 6px 12px -4px rgb(50 33 0 / .06), 0 0 0 1px rgb(26 25 23 / .08); }
.mm-panel:not([hidden]) { display: grid; grid-template-columns: var(--mm-tpl, repeat(2, minmax(0, 1fr))); gap: 16px;
  transition: opacity 180ms var(--ease), translate 180ms var(--ease); }
@starting-style { .mm-panel:not([hidden]) { opacity: 0; translate: -50% -4px; } }
#mainHeader.is-scrolled .mm-panel { top: calc(100% + 10px); }
.mm-col { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 4px; }
/* the tinted column reaches 12 px from the panel edge; its heading sits on the same line as the other headings (28 px) */
.mm-col-tint { margin: -12px -12px -12px 0; padding: 16px 12px 16px; border-radius: 12px; background: rgb(50 33 0 / .03); }
/* like fynk: a 1 px line between plain columns, from the first link down (the gap is 16 px, the line sits in its middle) */
.mm-col:not(.mm-col-tint) + .mm-col:not(.mm-col-tint)::before { content: ""; position: absolute; left: -8px; top: 32px; bottom: 4px; width: 1px; background: var(--color-line); }
.mm-h { padding: 0 12px 8px; font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink-3); }
.mm-list { display: flex; flex-direction: column; padding-bottom: 8px; }
.mm-a { display: flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: 8px; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--color-ink);
  transition: background-color 180ms var(--ease); }
.mm-a:hover, .mm-a:focus-visible { background: rgb(50 33 0 / .05); }
.mm-a[aria-current="page"] { background: rgb(50 33 0 / .06); }
.mm-rich { align-items: flex-start; gap: 12px; padding: 10px 12px; }
.mm-ic { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--color-ink); background: #fff; box-shadow: inset 0 0 0 1px var(--color-line); }
.mm-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mm-name { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--color-ink); }
.mm-sub { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--color-ink-3); }
.mm-all { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 36px; margin-top: auto; padding: 0 12px; border-radius: 8px;
  font-size: 14px; line-height: 20px; font-weight: 500; color: var(--color-ink-3); transition: color 180ms var(--ease); }
.mm-all:hover, .mm-all:focus-visible { color: var(--color-ink); }
.mm-arr { flex: none; transition: transform 180ms var(--ease); }
/* featured card at the foot of the tinted column (build-content.mjs menus, "feature"): a small image of the page, name, one line */
.mm-feat { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding: 8px; border-radius: 10px; color: inherit; transition: background-color 180ms var(--ease); }
.mm-feat:hover, .mm-feat:focus-visible { background: rgb(50 33 0 / .04); }
.mm-feat-img.lx-img { height: 96px; margin-bottom: 10px; background-color: #fff; box-shadow: inset 0 0 0 1px var(--color-line); }
.mm-feat-img .lx-stage { --w: 300px; inset: auto; left: 50%; top: 50%; width: 222%; height: 260px; transform: translate(-50%, -50%) scale(.45); }
.mm-feat-n { padding-inline: 4px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--color-ink); }
.mm-feat-s { padding-inline: 4px; font-size: 13px; line-height: 18px; color: var(--color-ink-3); }
.mm-all:hover .mm-arr { transform: translateX(2px); }
@media (max-width: 1023px) { .mm-panel { display: none !important; } }

/* Phone menu groups: a 56 px row like the other entries, the group opens underneath (column titles uppercase grey) */
.mg-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; height: 56px; border-bottom: 1px solid var(--color-line);
  font-size: 16px; font-weight: 500; color: var(--color-ink); text-align: left; }
.mg-btn .mm-chev { width: 16px; height: 16px; color: var(--color-ink-3); transition: transform 180ms var(--ease); }
.mg-btn[aria-expanded="true"] .mm-chev { transform: rotate(180deg); color: var(--color-ink); }
.mg-panel { padding: 8px 0 12px; border-bottom: 1px solid var(--color-line); }
.mg-h { padding: 12px 0 4px; font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink-3); }
.mg-a { display: flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; line-height: 20px; color: var(--color-ink); }
.mg-a[aria-current="page"] { font-weight: 600; }
.mg-all { color: var(--color-ink-3); font-weight: 500; }
.mg-rich { padding-block: 6px; }
.mg-tx { display: flex; flex-direction: column; gap: 1px; }
.mg-sub { font-size: 13px; line-height: 18px; color: var(--color-ink-3); }

/* Footer: a fourth column (Lösungen) when it exists */
@media (min-width: 768px) { .foot-cols:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ===================================================================================================================
   Content pages
   =================================================================================================================== */
.lx-bc ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 13px; line-height: 20px; color: var(--color-ink-3); }
.lx-bc li { display: inline-flex; align-items: center; }
.lx-bc li + li::before { content: "/"; margin-inline: 8px; color: var(--color-ink-4); }
.lx-bc a { color: var(--color-ink-3); text-underline-offset: 3px; transition: color 180ms var(--ease); }
.lx-bc a:hover { color: var(--color-ink); text-decoration-line: underline; }
.lx-bc [aria-current] { color: var(--color-ink-2); }

.lx-hero { padding: 20px 0 36px; }
@media (min-width: 1024px) { .lx-hero { padding: 32px 0 64px; } }
.lx-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 32px; }
@media (min-width: 1024px) { .lx-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; margin-top: 48px; }
  .lx-hero-grid.is-text { grid-template-columns: minmax(0, 1fr); } }
.lx-hero-grid.is-text .lx-hero-txt { max-width: 880px; }
/* H1 to H2 like the home page (76 to 52, about 1.45): H1 64 to section H2 44 on wide screens, 56 to 44 from 1024 px,
   42 to 30 on phones. "Vertragsmanagement" carries a soft hyphen after "Vertrags" (build), hyphens: manual breaks only there. */
.lx-h1 { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 36; letter-spacing: -0.015em; line-height: 1.06; color: var(--color-ink); text-wrap: balance; overflow-wrap: break-word;
  hyphens: manual; -webkit-hyphens: manual; font-size: clamp(30px, 9.6vw, 40px); }
@media (min-width: 1024px) { .lx-h1 { font-size: 56px; line-height: 1.04; letter-spacing: -0.018em; } }
@media (min-width: 1280px) { .lx-h1 { font-size: 64px; line-height: 1.03; letter-spacing: -0.02em; } }
.lx-h2 { font-size: 30px; }
@media (min-width: 1024px) { .lx-h2 { font-size: 44px; line-height: 1.08; } }
/* hubs: text centred like fynk's overview pages, button below */
.lx-hero.is-center .lx-hero-txt { max-width: 880px; margin-inline: auto; text-align: center; }
.lx-hero.is-center .lx-lead { margin-inline: auto; max-width: 640px; }
.lx-hero.is-center .lx-cta-row { justify-content: center; }
/* hub H1 on phones a little smaller, so "Vertragsmanagement" stays whole in the last line instead of "Vertrags- / management" */
@media (max-width: 639px) { .lx-hero.is-center .lx-h1 { font-size: min(8.8vw, 40px); } }
@media (min-width: 1024px) { .lx-hero.is-center { padding-bottom: 88px; } .lx-hero.is-center .lx-hero-grid { margin-top: 64px; } }
.lx-lead { margin-top: 20px; max-width: 560px; font-size: 17px; line-height: 26px; color: var(--color-ink-2); text-wrap: pretty; }
@media (min-width: 1024px) { .lx-lead { font-size: 19px; line-height: 29px; } }
.lx-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 32px; }
.lx-note { margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--color-ink-3); }
.lx-avail { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding-inline: 12px; border-radius: 6px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--color-ink);
  background: #fff; box-shadow: inset 0 0 0 1px rgb(26 25 23 / .1); transition: box-shadow 180ms var(--ease); }
.lx-avail:hover { box-shadow: inset 0 0 0 1px rgb(26 25 23 / .22); }
.lx-avail-l { color: var(--color-ink-3); font-weight: 400; }
/* quiet text links: "Preise ansehen" beside the trial button, "Mehr zu ..." under a tile */
.lx-tl, .lx-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--color-ink-2); text-underline-offset: 4px; text-decoration-color: var(--color-line-strong); transition: color 180ms var(--ease); }
.lx-tl { min-height: 44px; font-size: 15px; line-height: 20px; }
.lx-more { min-height: 32px; margin-top: 10px; font-size: 14px; line-height: 20px; }
.lx-tl:hover, .lx-more:hover { color: var(--color-ink); text-decoration-line: underline; }
.lx-tl .mm-arr, .lx-more .mm-arr { color: var(--color-ink-3); }
.lx-tl:hover .mm-arr, .lx-more:hover .mm-arr { transform: translateX(2px); }
/* API paths in running text */
.lx-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: max(13px, .86em); padding: 1px 5px; border-radius: 4px; background: var(--color-sunk); color: var(--color-ink); overflow-wrap: anywhere; }

.lx-h3 { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 36; letter-spacing: -0.01em; font-size: 24px; line-height: 30px; color: var(--color-ink); text-wrap: balance; }
@media (max-width: 639px) { .lx-h3 { font-size: 22px; line-height: 28px; } }
main :where(.lx-hero, [id^="lx-"], #rollen, #branchen, #p-funktionen, #p-mehr) :is(h2, h3) { text-wrap: balance; }

/* pains: three quiet cards */
.lx-pains { display: grid; gap: 16px; }
@media (min-width: 1280px) { .lx-pains { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.lx-pain { padding: 24px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--color-line); }
.lx-pain h3 { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--color-ink); }
.lx-pain p { margin-top: 8px; font-size: 15px; line-height: 22px; color: var(--color-ink-2); text-wrap: pretty; }
/* 640 to 1023 px (one card per row) and 1024 to 1279 px: title left, text right, so long two-word titles stay on one line */

/* tile grids: 2 x 2 (features, four blocks) and three columns (hubs, three or five blocks) */
.lx-g2, .lx-g3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 768px) { .lx-g2, .lx-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 56px; } }
@media (min-width: 1024px) { .lx-g2 { row-gap: 64px; } .lx-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 56px; } }
.lx-tile { display: block; border-radius: 12px; color: inherit; }
.lx-tile:focus-visible { outline-offset: 6px; }
.lx-tile:hover .tile-cap h3 { text-decoration-line: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lx-feat .tile-cap h3, .lx-tile .tile-cap h3 { text-wrap: balance; }
/* Produkt hub, five Funktionen: two wide tiles, then three narrow ones (no hole in the grid) */
.lx-g5 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 768px) { .lx-g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 56px; } .lx-g5 > :last-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .lx-g5 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .lx-g5 > * { grid-column: span 2; } .lx-g5 > :nth-child(-n+2) { grid-column: span 3; } .lx-g5 > :last-child { grid-column: span 2; } }
@media (min-width: 768px) { .lx-g5 .lx-img { height: 280px; } }
@media (min-width: 1024px) { .lx-g5 > :nth-child(-n+2) .lx-img { height: 320px; } .lx-g5 > :nth-child(n+3) .lx-img { height: 260px; } }

/* Lösungen hub: compact text cards (name, one sentence, arrow), four columns (nine cards: three) */
.lx-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 640px) { .lx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) { .lx-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lx-cards.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lx-card { display: flex; flex-direction: column; gap: 8px; min-height: 100%; padding: 20px 20px 16px; border-radius: 12px; background: #fff; color: inherit;
  box-shadow: 0 0 0 1px var(--color-line); transition: box-shadow 180ms var(--ease); }
.band-white .lx-card { background: rgb(50 33 0 / .025); box-shadow: inset 0 0 0 1px rgb(26 25 23 / .07); }
.lx-card:hover { box-shadow: 0 0 0 1px var(--color-line-strong), 0 6px 16px -8px rgb(50 33 0 / .12); }
.band-white .lx-card:hover { box-shadow: inset 0 0 0 1px var(--color-line-strong); }
.lx-card:focus-visible { outline-offset: 3px; }
.lx-card-n { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--color-ink); }
.lx-card-d { font-size: 14px; line-height: 21px; color: var(--color-ink-2); text-wrap: pretty; }
.lx-card-go { margin-top: auto; padding-top: 8px; color: var(--color-ink-3); }
.lx-card:hover .lx-card-go { color: var(--color-ink); }
.lx-card:hover .mm-arr { transform: translateX(3px); }
@media (max-width: 639px) { .lx-card { position: relative; padding: 16px 44px 16px 16px; } .lx-card-go { position: absolute; right: 16px; top: 18px; padding: 0; } }

/* contracts and deadlines */
/* one column: the chips run the full width above the table, the table gets the full width */
.lx-cd { display: grid; gap: 48px; }
@media (min-width: 1024px) { .lx-cd { gap: 56px; } }
.lx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

.lx-chips li { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 6px; font-size: 15px; line-height: 22px; color: var(--color-ink); background: #fff; box-shadow: inset 0 0 0 1px rgb(26 25 23 / .1); }
@media (max-width: 639px) {
  /* phones: long names ("Allgemeine Verkaufs- und Einkaufsbedingungen") as a ruled list, not as wrapped pills */
  .lx-chips { display: block; margin-top: 12px; border-top: 1px solid var(--color-line-strong); }
  .lx-chips li { display: flex; min-height: 0; padding: 12px 0; border-radius: 0; background: none; box-shadow: none; border-bottom: 1px solid var(--color-line); }
}.lx-dl-card { margin-top: 20px; padding: 4px 28px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--color-line); }
.lx-dl { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.lx-dl thead th { padding: 14px 16px 10px 0; text-align: left; font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink-3); border-bottom: 1px solid var(--color-line-strong); }
.lx-dl tbody th, .lx-dl td { padding: 14px 16px 14px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-line); }
.lx-dl tbody tr:last-child > * { border-bottom: 0; }
.lx-dl tbody th { width: 28%; font-weight: 600; color: var(--color-ink); }
.lx-dl td { color: var(--color-ink-2); }
.lx-dl .lx-basis { width: 22%; padding-right: 0; color: var(--color-ink); font-variant-numeric: tabular-nums lining-nums; }
@media (max-width: 639px) {
  .lx-dl-card { padding: 4px 20px; }
  .lx-dl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .lx-dl, .lx-dl tbody, .lx-dl tr, .lx-dl tbody th, .lx-dl td { display: block; width: auto !important; }
  .lx-dl tr { padding: 16px 0; border-bottom: 1px solid var(--color-line); }
  .lx-dl tbody tr:last-child { border-bottom: 0; }
  .lx-dl tbody th, .lx-dl td { padding: 0; border: 0; }
  .lx-dl td { margin-top: 6px; }
  .lx-dl .lx-basis::before { content: attr(data-l) ": "; color: var(--color-ink-3); }
}
.lx-fine { margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--color-ink-3); }

/* workflow and how-to: the step cards of the home page (text only) */
.lx-steps { display: grid; gap: 16px; }
@media (min-width: 1280px) { .lx-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.lx-step { padding: 24px 24px 28px; border-radius: 16px; background-color: rgb(50 33 0 / .03); box-shadow: inset 0 0 0 1px rgb(26 25 23 / .06); }
.lx-step-mk { display: block; font-size: 13px; line-height: 20px; color: var(--color-ink-3); font-variant-numeric: tabular-nums lining-nums; }
.lx-step h3 { margin-top: 8px; font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 36; font-size: 24px; line-height: 30px; letter-spacing: -0.01em; color: var(--color-ink); }
.lx-step p { margin-top: 8px; font-size: 15px; line-height: 22px; color: var(--color-ink-2); text-wrap: pretty; }
@media (min-width: 640px) and (max-width: 1279px) {
  .lx-pain, .lx-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .lx-pain > :not(p), .lx-step > :not(p) { grid-column: 1; }
  .lx-pain > p, .lx-step > p { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
@media (max-width: 639px) { .lx-step h3 { font-size: 22px; line-height: 28px; } }
/* 320 px: two-word step headings ("Rahmenvertrag hochladen") stay on one line instead of leaving one word in line 2 */
@media (max-width: 359px) { .lx-step { padding: 20px 18px 24px; } .lx-step h3 { font-size: 20px; line-height: 26px; letter-spacing: -0.012em; hyphens: manual; -webkit-hyphens: manual; } }
@media (min-width: 1024px) and (max-width: 1279px) { .lx-pain, .lx-step { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* product details: ruled two-column list */
.lx-det { display: grid; gap: 0 40px; border-top: 1px solid var(--color-line-strong); }
@media (min-width: 768px) { .lx-det { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lx-det > div { padding: 20px 0; border-bottom: 1px solid var(--color-line); }
.lx-det dt { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--color-ink); }
.lx-det dd { margin-top: 4px; font-size: 15px; line-height: 22px; color: var(--color-ink-2); text-wrap: pretty; }

/* FAQ (the home accordion) and sources */
.lx-faq-grid { display: grid; gap: 32px; }
@media (min-width: 1024px) { .lx-faq-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; } .lx-faq-grid > :last-child { padding-left: 32px; } }
.lx-fq { border-top: 1px solid var(--color-line-strong); }
.lx-fq-item { border-bottom: 1px solid var(--color-line); }
.lx-fq-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; text-align: left; font-size: 17px; line-height: 26px; font-weight: 500; color: var(--color-ink); border-radius: 6px; }
.lx-fq-btn > span { text-wrap: balance; }
.lx-fq-chev { flex: none; color: var(--color-ink-3); transition: transform 180ms var(--ease); }
.lx-fq-btn:hover .lx-fq-chev { color: var(--color-ink); }
.lx-fq-btn[aria-expanded="true"] .lx-fq-chev { transform: rotate(180deg); color: var(--color-ink); }
.lx-fq-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 240ms var(--ease); }
.lx-fq.js .lx-fq-panel { grid-template-rows: 0fr; }
.lx-fq.js .lx-fq-panel.is-open { grid-template-rows: 1fr; }
.lx-fq-in { overflow: hidden; }
.lx-fq-in p { padding: 0 48px 22px 0; font-size: 16px; line-height: 26px; color: var(--color-ink-2); max-width: 36rem; }
@media (min-width: 1024px) { .lx-fq-in p { font-size: 17px; line-height: 28px; } }
.lx-src { margin-top: 32px; max-width: 36rem; }
.lx-src ol { margin-top: 12px; display: grid; gap: 8px; list-style: decimal; padding-left: 20px; font-size: 14px; line-height: 20px; color: var(--color-ink-3); }
.lx-src a { overflow-wrap: anywhere; }

/* related cards ("Passt dazu", "Passende Lösungen"): one pattern, icon plus name plus one line, in a 64 px band */
.lx-rel-sec { padding-block: 48px; }
@media (min-width: 1024px) { .lx-rel-sec { padding-block: 64px; } }
.lx-rc-grid { display: grid; gap: 12px; margin-top: 24px; }
@media (min-width: 768px) { .lx-rc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lx-rc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.lx-rc { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--color-line); transition: box-shadow 180ms var(--ease); }
.lx-rc:hover { box-shadow: 0 0 0 1px var(--color-line-strong); }
.lx-rc:hover .lx-rc-n { text-decoration-line: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lx-rc > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lx-rc-n { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--color-ink); }
.lx-rc-s { font-size: 14px; line-height: 20px; color: var(--color-ink-3); }

/* closing band (like the home page) */
.lx-close { display: grid; gap: 32px; }
@media (min-width: 1024px) { .lx-close { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; } .lx-close > :last-child { justify-self: end; width: 100%; max-width: 500px; } }
.lx-close h2 { color: #fff; }
.lx-close-sub { margin-top: 20px; max-width: 560px; font-size: 17px; line-height: 26px; color: rgb(247 246 244 / .74); }
@media (min-width: 1024px) { .lx-close-sub { font-size: 19px; line-height: 29px; } }
.lx-form { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 500px; }
@media (min-width: 640px) { .lx-form { flex-direction: row; } }
.lx-input { flex: none; width: 100%; min-width: 0; height: 44px; padding: 0 14px; border-radius: 8px; background: rgb(255 255 255 / .06); color: #fff; font-size: 16px; border: 0; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); }
@media (min-width: 640px) { .lx-input { flex: 1 1 0%; width: auto; } }
.lx-input::placeholder { color: rgb(247 246 244 / .6); }
.lx-input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lx-close-note { margin-top: 12px; font-size: 13px; line-height: 18px; color: rgb(247 246 244 / .7); }

/* ===================================================================================================================
   Illustration library (tile grammar of main.css, docs/review-paul/fynk-analyse.md 4.4). The image is a container:
   the main object is --w wide (300 px, 380 px when the tile is at least 560 px wide), so the same drawing works in the
   2 x 2 grid, the three-column hubs and the hero. Heights per context below. Floating objects are centred with the
   separate translate property, so their own animations (transform) never fight the centring.
   =================================================================================================================== */
.lx-img { position: relative; overflow: hidden; border-radius: 12px; background-color: rgb(50 33 0 / .03); container-type: inline-size; height: 260px; }
.lx-stage { position: absolute; inset: 0; --w: min(300px, calc(100cqw - 56px)); }
@container (min-width: 560px) { .lx-stage { --w: 380px; } }
/* phones: the tiles of a page ("Wie Klausar hilft", product blocks) get a flatter 16:9 stage; the drawing keeps its
   260 px layout and is scaled down as a whole (.lx-stage), so nothing is cut */
@media (max-width: 639px) {
  .lx-feat .lx-img { height: auto; aspect-ratio: 16 / 9; }
  .lx-feat .lx-stage { inset: auto; left: 50%; top: 50%; width: calc(100% / .74); height: 260px; transform: translate(-50%, -50%) scale(.74); }
}
@media (min-width: 768px) { .lx-g2 .lx-img { height: 300px; } .lx-g3 .lx-img { height: 280px; } .lx-hero-img { height: 320px; } }
@media (min-width: 1280px) { .lx-g2 .lx-img { height: 320px; } }
/* desktop intro: the drawing carries the page like the product shots of the references, so it is drawn 1.2 times the tile
   size in a taller stage (scaled as a whole, the tile layout stays the same) */
@media (min-width: 1024px) { .lx-hero-img { height: 400px; } .lx-hero-img .lx-stage { scale: 1.2; } }
/* product intro (build-content.mjs hero app): the core image inside a quiet app window, cut off at the bottom edge like a
   screen shot; title bar with three dots, a side rail (from 480 px image width) with the page's menu icon as active entry */
.lx-hero-img.is-app { height: 300px; }
@media (min-width: 768px) { .lx-hero-img.is-app { height: 360px; } }
@media (min-width: 1024px) { .lx-hero-img.is-app { height: 400px; } .lx-hero-img.is-app .lx-stage { scale: 1.08; } }
.lx-app { position: absolute; inset: 16px 16px -1px; border-radius: 10px 10px 0 0; background: rgb(255 255 255 / .5); box-shadow: inset 0 0 0 1px var(--color-line); }
.lx-app-bar { display: flex; align-items: center; gap: 14px; height: 36px; padding-inline: 14px; box-shadow: inset 0 -1px 0 var(--color-line); }
.lx-app-dots { display: flex; gap: 6px; }
.lx-app-dots i { width: 8px; height: 8px; border-radius: 9999px; background: var(--color-sunk-2); }
.lx-app-rail { display: none; }
.is-app .lx-stage { inset: 52px 16px 0; }
@container (min-width: 480px) {
  .lx-app { inset: 20px 20px -1px; }
  .lx-app-rail { position: absolute; left: 0; top: 36px; bottom: 0; width: 52px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 14px; box-shadow: inset -1px 0 0 var(--color-line); }
  .lx-app-ic { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--color-sunk); }
  .lx-app-ic.is-on { display: grid; place-items: center; background: #fff; color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-line-strong), 0 2px 6px -2px rgb(50 33 0 / .14); }
  .is-app .lx-stage { inset: 56px 20px 0 72px; }
}
.lx-img .sk.fl { flex: 0 1 auto; min-width: 24px; }
.lx-st { position: absolute; left: calc(50% - var(--w) / 2); width: var(--w); top: 50%; height: var(--sh, 180px); translate: 0 -50%; }
.lx-av { flex: none; width: 24px; height: 24px; border-radius: 9999px; background: var(--color-sunk); box-shadow: inset 0 0 0 1px var(--color-line); }

/* assistant (home tile a): sheet anchored at the bottom, one clause marked, its source chip; the question floats above */
.lx-a-sheet { left: calc(50% - var(--w) / 2); width: var(--w); top: 88px; bottom: -40px; padding: 28px 28px 0; display: flex; flex-direction: column; gap: 12px; }
.lx-a-sheet > .sk-h { margin-bottom: 8px; }
.lx-a-row { display: flex; align-items: center; gap: 8px; margin-inline: -8px; padding: 6px 8px; border-radius: 3px; position: relative; }
.lx-a-mark { position: absolute; inset: 0; border-radius: 3px; background: rgb(162 73 129 / .14); box-shadow: inset 2px 0 0 #a24981; transform-origin: left center; }
.lx-a-row .sk { position: relative; background: rgb(162 73 129 / .30); }
.lx-a-chip { position: relative; flex: none; height: 22px; padding-inline: 7px; font-size: 13px; }
.lx-a-bub { position: absolute; top: 36px; left: calc(50% + var(--w) / 2 - 150px); padding: 8px 12px; border-radius: 12px 12px 4px 12px; background: #fff; }
@container (min-width: 560px) { .lx-a-sheet { top: 76px; left: calc(50% - var(--w) / 2 - 24px); } .lx-a-bub { top: 24px; left: calc(50% + var(--w) / 2 - 160px); } }

/* signature (home tile b): a sheet with a signature line; the seal lands beside it */
.lx-b-sheet { left: calc(50% - var(--w) / 2); width: var(--w); top: 56px; bottom: -40px; padding: 28px 28px 0; display: flex; flex-direction: column; gap: 12px; }
.lx-b-sheet > .sk-h { margin-bottom: 8px; }
.lx-b-sig { position: relative; margin-top: 18px; width: 176px; max-width: 100%; }
.lx-b-pen { display: block; width: 150px; height: 44px; margin-left: 6px; overflow: visible; }
.lx-b-pen path { fill: none; stroke: var(--color-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.lx-b-line { display: block; height: 1px; margin-top: 2px; background: var(--color-ink-2); }
.lx-b-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.lx-b-meta .tile-word { font-weight: 400; color: var(--color-ink-2); }
.lx-b-seal { position: absolute; left: calc(50% + var(--w) / 2 - 92px); top: 158px; width: 44px; height: 44px; border-radius: 9999px; display: grid; place-items: center; color: #fff;
  background: #1a1917; box-shadow: var(--sh-schwebend); transform: rotate(-8deg); }

/* deadlines (home tile c): a month sheet, the deadline circled in ink, a bell on its corner */
.lx-c-cal { --w: min(256px, calc(100cqw - 112px)); left: calc(50% - var(--w) / 2); width: var(--w); top: calc(50% + 10px); translate: 0 -50%; padding: 16px 16px 12px; }
@container (min-width: 560px) { .lx-c-cal { --w: 340px; padding: 20px 20px 16px; } }
.lx-c-hd { display: flex; align-items: center; justify-content: space-between; height: 24px; padding-inline: 4px; }
.lx-c-nav { display: flex; gap: 6px; }
.lx-c-nav i { width: 16px; height: 8px; border-radius: 4px; background: var(--color-sunk-2); }
.lx-c-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 10px; }
.lx-c-grid > span { height: 26px; display: grid; place-items: center; }
.lx-c-grid[data-rows="6"] > span { height: 22px; }
@container (min-width: 560px) { .lx-c-grid > span { height: 32px; } .lx-c-grid[data-rows="6"] > span { height: 28px; } }
.lx-c-grid > span.d::before { content: ""; width: 14px; height: 8px; border-radius: 4px; background: var(--color-sunk); }
.lx-c-grid > span.on { position: relative; }
.lx-c-grid > span.on b { position: relative; z-index: 1; font-size: 13px; line-height: 16px; font-weight: 600; color: var(--color-ink); font-variant-numeric: tabular-nums lining-nums; }
.lx-c-ring { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; overflow: visible; }
.lx-c-grid[data-rows="6"] .lx-c-ring { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
@container (min-width: 560px) { .lx-c-ring { width: 30px; height: 30px; margin: -15px 0 0 -15px; } .lx-c-grid[data-rows="6"] .lx-c-ring { width: 26px; height: 26px; margin: -13px 0 0 -13px; } }
.lx-c-ring circle { fill: none; stroke: var(--color-ink); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; }
.lx-c-bell { position: absolute; right: -22px; top: -20px; width: 44px; height: 44px; border-radius: 9999px; background: #fff; display: grid; place-items: center; color: var(--color-ink); }
.lx-c-bell svg { transform-origin: 50% 3px; }

/* dashboards (home tile d): one list, each row a phase mark of the app; the last one turns into a check */
.lx-d-list { left: calc(50% - var(--w) / 2); width: var(--w); top: 50%; translate: 0 -50%; }
.lx-d-hd { display: flex; align-items: center; justify-content: space-between; height: 44px; padding-inline: 16px; box-shadow: inset 0 -1px 0 var(--color-line); }
.lx-d-row { display: flex; align-items: center; gap: 12px; height: 40px; padding-inline: 16px; }
.lx-d-row + .lx-d-row { box-shadow: inset 0 1px 0 var(--color-line); }
.lx-d-row .sk:last-child, .lx-d-row .lx-d-st { margin-left: auto; }
.lx-d-ph { position: relative; flex: none; width: 18px; height: 18px; color: var(--color-ink-2); }
.lx-d-ph svg { position: absolute; inset: 0; width: 18px; height: 18px; }
.lx-d-ph .was { opacity: 0; }
.lx-d-st { position: relative; flex: none; height: 22px; }
.lx-d-st .sk { position: absolute; right: 0; top: 7px; opacity: 0; }
@container (min-width: 560px) { .lx-d-row { height: 48px; } }

/* templates: a sheet with two field slots (one filled in ink) and the template's field list floating beside it */
.lx-t-sheet { left: calc(50% - var(--w) / 2); width: calc(var(--w) - 48px); top: 56px; bottom: -40px; padding: 28px 24px 0; display: flex; flex-direction: column; gap: 14px; }
.lx-t-sheet > .sk-h { margin-bottom: 6px; }
.lx-t-ln { display: flex; align-items: center; gap: 8px; }
.lx-t-fld { flex: none; width: 64px; height: 20px; border-radius: 4px; border: 1px dashed rgb(26 25 23 / .28); background: var(--color-sunk); }
.lx-t-fld.is-on { display: flex; align-items: center; padding: 0 7px; border: 1.5px solid var(--color-ink); background: #fff; }
.lx-t-fld.is-on i { display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--color-ink); opacity: .8; transform-origin: left center; }
.lx-t-card { position: absolute; right: calc(50% - var(--w) / 2 - 8px); top: 112px; width: 132px; padding: 14px 12px; display: flex; flex-direction: column; gap: 12px; }
.lx-t-r { display: flex; align-items: center; gap: 8px; }
.lx-t-r i { flex: none; width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1.25px var(--color-ink-4); }
.lx-t-r.is-on i { background: var(--color-ink); box-shadow: none; }
@container (min-width: 560px) { .lx-t-card { top: 124px; width: 150px; } }

/* approvals: one card, three approvers, the ink button as companion */
.lx-p-st { --sh: 200px; }
.lx-p-card { position: absolute; inset: 0 0 auto; }
.lx-p-hd { display: flex; align-items: center; justify-content: space-between; height: 44px; padding-inline: 16px; box-shadow: inset 0 -1px 0 var(--color-line); }
.lx-p-row { display: flex; align-items: center; gap: 12px; height: 44px; padding-inline: 16px; }
.lx-p-row + .lx-p-row { box-shadow: inset 0 1px 0 var(--color-line); }
.lx-p-mk { position: relative; flex: none; width: 18px; height: 18px; margin-left: auto; color: var(--color-ink-3); }
.lx-p-mk svg, .lx-p-mk > span { position: absolute; inset: 0; display: block; }
.lx-p-last .was { opacity: 0; }
.lx-p-btn { position: absolute; right: 16px; bottom: 0; display: inline-flex; align-items: center; height: 32px; padding-inline: 12px; border-radius: 6px; font-size: 13px; line-height: 16px; font-weight: 500; color: #fff;
  background: #1a1917; box-shadow: var(--sh-schwebend); }

/* import: a dashed drop zone, a small stack of files on its edge, the bar fills in ink */
.lx-i-st { --sh: 188px; }
.lx-i-zone { position: absolute; inset: 36px 0 0; border-radius: 12px; border: 1.5px dashed rgb(26 25 23 / .22); background: rgb(255 255 255 / .6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding-top: 12px; }
.lx-i-ic { color: var(--color-ink-3); }
.lx-i-bar { display: block; width: 55%; height: 6px; border-radius: 3px; background: var(--color-sunk-2); overflow: hidden; }
.lx-i-bar i { display: block; height: 100%; background: var(--color-ink); transform-origin: left center; }
.lx-i-files { position: absolute; top: 0; right: 28px; width: 60px; height: 76px; }
.lx-i-f { position: absolute; inset: 0; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px var(--color-line), 0 1px 2px rgb(50 33 0 / .05); }
.lx-i-f.f1 { transform: rotate(-9deg) translate(-6px, 4px); }
.lx-i-f.f2 { transform: rotate(5deg) translate(4px, 2px); }
.lx-i-f.f3 { display: flex; flex-direction: column; gap: 6px; padding: 12px 8px 8px; box-shadow: var(--sh-schwebend); }
.lx-i-f.f3 .sk { width: 36px; }
.lx-i-tag { margin-top: auto; align-self: flex-start; padding: 0 5px; border-radius: 3px; background: var(--color-sunk); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--color-ink-2); }

/* automations: rows on the left, a fan of generated contracts on the right, a check on the front one */
.lx-m-st { --sh: 176px; }
.lx-m-list { position: absolute; left: 0; top: 24px; width: 40%; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.lx-m-hd { display: flex; padding-bottom: 8px; box-shadow: inset 0 -1px 0 var(--color-line); }
.lx-m-r { display: flex; align-items: center; gap: 8px; }
.lx-m-r i { flex: none; width: 8px; height: 8px; border-radius: 9999px; box-shadow: inset 0 0 0 1.25px var(--color-ink-3); }
.lx-m-arrow { position: absolute; left: calc(40% + 4px); top: 79px; width: calc(12% - 6px); height: 18px; overflow: visible; }
.lx-m-arrow path { fill: none; stroke: var(--color-ink-2); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.lx-m-stack { position: absolute; right: 0; top: 0; width: 46%; height: 176px; }
.lx-m-doc { position: absolute; left: 0; top: 0; width: calc(100% - 28px); height: 136px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px var(--color-line), 0 1px 2px rgb(50 33 0 / .04); }
.lx-m-doc.d2 { left: 14px; top: 14px; }
.lx-m-doc.d3 { left: 28px; top: 28px; display: flex; flex-direction: column; gap: 10px; padding: 16px 14px; box-shadow: var(--sh-schwebend); }
.lx-m-doc.d3 > .sk-h { margin-bottom: 4px; }
.lx-m-ok { position: absolute; right: -10px; bottom: 0; width: 24px; height: 24px; }
.lx-m-ok svg { display: block; }

/* api: a small window with three calls, success dots, a code badge on its corner */
.lx-x-st { --sh: 184px; }
.lx-x-win { position: absolute; inset: 20px 0 auto; }
.lx-x-hd { display: flex; align-items: center; height: 40px; padding-inline: 16px; box-shadow: inset 0 -1px 0 var(--color-line); }
.lx-x-row { display: flex; align-items: center; gap: 12px; height: 40px; padding-inline: 16px; }
.lx-x-row + .lx-x-row { box-shadow: inset 0 1px 0 var(--color-line); }
.lx-x-m { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 22px; border-radius: 4px; background: var(--color-sunk); }
.lx-x-m.tile-word { font-weight: 600; }
.lx-x-dot { flex: none; width: 8px; height: 8px; margin-left: auto; border-radius: 9999px; background: var(--color-success, #1a8f5c); }
.lx-x-badge { position: absolute; right: -14px; top: 0; width: 40px; height: 40px; border-radius: 9999px; display: grid; place-items: center; background: #fff; color: var(--color-ink); }

/* mcp: the chat window of an AI program; question right, the tool call chip "klausar" (ink ring) arrives, answer below */
.lx-k-st { --sh: 204px; }
.lx-k-win { position: absolute; inset: 0 0 auto; }
.lx-k-hd { display: flex; align-items: center; gap: 12px; height: 36px; padding-inline: 14px; box-shadow: inset 0 -1px 0 var(--color-line); }
.lx-k-dots { display: flex; gap: 5px; }
.lx-k-dots i { width: 7px; height: 7px; border-radius: 9999px; background: var(--color-sunk-2); }
.lx-k-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; }
.lx-k-q { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; padding: 10px 12px; border-radius: 10px 10px 3px 10px; background: var(--color-sunk); }
.lx-k-q .sk { background: var(--color-sunk-2); }
.lx-k-call { display: flex; margin-left: -30px; }
.lx-k-tool { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; background: #fff; color: var(--color-ink);
  box-shadow: inset 0 0 0 1.5px var(--color-ink), var(--sh-schwebend); }
.lx-k-a { display: flex; flex-direction: column; gap: 8px; }

/* kpi (Überblick): three number tiles, the third lifted with its figure in ink; a quiet chart card below */
.lx-o-st { --sh: 200px; }
.lx-o-row { position: absolute; inset: 0 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lx-o-t { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 78px; padding: 14px 12px 12px; }
.lx-o-n { display: block; width: 40px; height: 16px; border-radius: 4px; background: var(--color-sunk-2); }
.lx-o-t.is-on { top: -6px; }
.lx-o-fig { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 36; font-size: 28px; line-height: 28px; color: var(--color-ink); font-variant-numeric: tabular-nums lining-nums; }
.lx-o-chart { position: absolute; left: 0; right: 0; top: 94px; height: 106px; display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 0; }
.lx-o-bars { display: flex; align-items: flex-end; gap: 8px; flex: 1; box-shadow: inset 0 -1px 0 var(--color-line); }
.lx-o-bars i { flex: 1; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--color-sunk) 40%, var(--color-sunk-2)); transform-origin: bottom center; }

/* analysis (KI-Analyse): a summary card with two key-data rows; the risk card floats in, "Hoch" in ink */
.lx-n-st { --sh: 196px; }
.lx-n-card { position: absolute; left: 0; top: 0; width: calc(100% - 24px); }
.lx-n-hd { display: flex; align-items: center; height: 40px; padding-inline: 16px; box-shadow: inset 0 -1px 0 var(--color-line); }
.lx-n-sum { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.lx-n-kv { display: flex; align-items: center; gap: 16px; height: 36px; padding-inline: 16px; box-shadow: inset 0 1px 0 var(--color-line); }
.lx-n-kv .sk:first-child { opacity: .7; }
.lx-n-risk { position: absolute; right: -8px; top: 152px; display: flex; gap: 6px; padding: 8px; }
.lx-n-m { display: inline-flex; align-items: center; height: 24px; padding-inline: 9px; border-radius: 9999px; font-size: 13px; line-height: 16px; font-weight: 500; color: var(--color-ink-2); box-shadow: inset 0 0 0 1px var(--color-line-strong); white-space: nowrap; }
.lx-n-m.is-on { background: var(--color-ink); color: #fff; box-shadow: none; }

/* review (KI-Prüfung): playbook rules, "erfüllt" in grey, one "auffällig" row marked in ink, its source chip floats */
.lx-v-st { --sh: 204px; }
.lx-v-card { position: absolute; inset: 0 0 auto; }
.lx-v-hd { display: flex; align-items: center; justify-content: space-between; height: 40px; padding-inline: 16px; box-shadow: inset 0 -1px 0 var(--color-line); }
.lx-v-row { position: relative; display: flex; align-items: center; gap: 10px; height: 40px; padding-inline: 16px; }
.lx-v-row + .lx-v-row { box-shadow: inset 0 1px 0 var(--color-line); }
.lx-v-ok { flex: none; display: grid; width: 16px; color: var(--color-ink-3); }
.lx-v-w { flex: none; margin-left: auto; font-size: 13px; line-height: 16px; font-weight: 500; color: var(--color-ink-3); white-space: nowrap; }
.lx-v-mk { flex: none; width: 14px; height: 14px; margin-inline: 1px; border-radius: 9999px; box-shadow: inset 0 0 0 1.5px var(--color-ink); display: grid; place-items: center; }
.lx-v-mk::after { content: ""; width: 4px; height: 4px; border-radius: 9999px; background: var(--color-ink); }
.lx-v-row.is-flag::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 1px; background: var(--color-ink); transform-origin: center; }
.lx-v-row.is-flag .lx-v-w { color: var(--color-ink); font-weight: 600; }
.lx-v-chip { position: absolute; right: -14px; top: 146px; height: 26px; padding-inline: 9px; font-size: 13px; }

/* roles: three members with a role selector, the last one active; a lock floats on the corner */
.lx-r-st { --sh: 176px; }
.lx-r-card { position: absolute; inset: 16px 0 auto; }
.lx-r-row { display: flex; align-items: center; gap: 12px; height: 52px; padding-inline: 16px; }
.lx-r-row + .lx-r-row { box-shadow: inset 0 1px 0 var(--color-line); }
.lx-r-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 0 1 auto; }
.lx-r-sub { opacity: .6; }
.lx-r-role { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; margin-left: auto; padding: 0 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--color-line-strong); color: var(--color-ink-3); }
.lx-r-role.is-on { box-shadow: inset 0 0 0 1.5px var(--color-ink); color: var(--color-ink); }
.lx-r-lock { position: absolute; right: -14px; top: -4px; width: 40px; height: 40px; border-radius: 9999px; display: grid; place-items: center; background: #fff; color: var(--color-ink); }

/* search: a search field with one word and the one hit below it */
.lx-s-st { --sh: 150px; }
.lx-s-field { position: absolute; left: 0; right: 0; top: 0; height: 44px; display: flex; align-items: center; gap: 10px; padding-inline: 14px; }
.lx-s-ic { flex: none; display: grid; color: var(--color-ink-3); }
.lx-s-caret { flex: none; width: 1.5px; height: 18px; background: var(--color-ink); }
.lx-s-res { position: absolute; left: 16px; right: 16px; top: 76px; }
.lx-s-row { display: flex; align-items: center; gap: 12px; height: 60px; padding-inline: 16px; }
.lx-s-fi { flex: none; width: 14px; height: 18px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--color-ink-3); }
.lx-s-t { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 0 1 auto; }
.lx-s-row .sk:last-child { margin-left: auto; }
.lx-s-row.is-hit .lx-s-t > .sk:first-child { background: var(--color-ink); opacity: .75; }

/* audit: a timeline card, four entries, the newest one arrives with an ink dot */
.lx-u-st { --sh: 196px; }
.lx-u-card { position: absolute; inset: 0 0 auto; padding: 14px 16px 16px; }
.lx-u-hd { display: flex; align-items: center; justify-content: space-between; height: 24px; margin-bottom: 8px; }
.lx-u-tl { position: relative; }
.lx-u-tl::before { content: ""; position: absolute; left: 4px; top: 16px; bottom: 16px; width: 1px; background: var(--color-line-strong); }
.lx-u-tl li { position: relative; display: flex; align-items: center; gap: 14px; height: 36px; }
.lx-u-tl li i { flex: none; width: 9px; height: 9px; border-radius: 9999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--color-ink-3); }
.lx-u-tl li .sk:last-child { margin-left: auto; }
.lx-u-tl li.is-new i { background: var(--color-ink); box-shadow: none; }

/* hosting: a rack of three white units (vent slits, label, two status lights), the region chip "EU" on its corner */
.lx-h-st { --sh: 184px; }
.lx-h-rack { position: absolute; inset: 20px 0 auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; border-radius: 10px; }
.lx-h-u { display: flex; align-items: center; gap: 12px; height: 42px; padding-inline: 12px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--color-line-strong), 0 1px 0 rgb(50 33 0 / .04); }
.lx-h-vent { flex: none; display: flex; gap: 3px; }
.lx-h-vent i { width: 2px; height: 16px; border-radius: 1px; background: var(--color-sunk-2); }
.lx-h-u .sk.fl { margin-right: auto; }
.lx-h-led { flex: none; width: 6px; height: 6px; border-radius: 9999px; background: var(--color-sunk-2); }
.lx-h-u .lx-h-led:first-of-type { background: var(--color-success, #14764d); }
.lx-h-eu { position: absolute; right: -12px; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; background: #fff; color: var(--color-ink-2); }

/* ---- loops: the home page's 8 s beat (action in the first 4 s, hold until 7.2 s, soft fade back), only while the
   image is in view (.is-play from js/lx.js); without it the end state stands still ---- */
.lx-img { --o: 0ms; }
.lx-g2 > :nth-child(2) .lx-img, .lx-g3 > :nth-child(3n+2) .lx-img { --o: 400ms; }
.lx-g2 > :nth-child(3) .lx-img, .lx-g3 > :nth-child(3n) .lx-img { --o: 800ms; }
.lx-g2 > :nth-child(4) .lx-img { --o: 1200ms; }
.is-play .lx-a-bub { animation: lxA-bub 8s cubic-bezier(.23, 1, .32, 1) var(--o) infinite both; }
.is-play .lx-a-mark { animation: lxA-mark 8s cubic-bezier(.23, 1, .32, 1) var(--o) infinite both; }
.is-play .lx-a-chip { animation: lxA-chip 8s cubic-bezier(.23, 1, .32, 1) var(--o) infinite both; }
@keyframes lxA-bub { 0% { opacity: 0; transform: translateY(8px); } 8%, 90% { opacity: 1; transform: none; } 97.5%, 100% { opacity: 0; transform: none; } }
@keyframes lxA-mark { 0%, 14% { transform: scaleX(0); opacity: 1; } 28%, 90% { transform: scaleX(1); opacity: 1; } 97.5%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes lxA-chip { 0%, 30% { opacity: 0; transform: scale(.9); } 36%, 90% { opacity: 1; transform: none; } 97.5%, 100% { opacity: 0; transform: none; } }
.is-play .lx-b-pen path { animation: lxB-pen 8s cubic-bezier(.45, .05, .35, 1) var(--o) infinite both; }
.is-play .lx-b-seal { animation: lxB-seal 8s cubic-bezier(.23, 1, .32, 1) var(--o) infinite both; }
@keyframes lxB-pen { 0%, 4% { stroke-dashoffset: 1; opacity: 1; } 30%, 90% { stroke-dashoffset: 0; opacity: 1; } 97.5%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes lxB-seal { 0%, 34% { opacity: 0; transform: rotate(-8deg) scale(.6); } 40% { opacity: 1; transform: rotate(-8deg) scale(1.06); } 44%, 90% { opacity: 1; transform: rotate(-8deg) scale(1); } 97.5%, 100% { opacity: 0; transform: rotate(-8deg) scale(1); } }
.is-play .lx-c-ring circle { animation: lxC-ring 8s cubic-bezier(.45, .05, .35, 1) var(--o) infinite both; }
.is-play .lx-c-bell svg { animation: lxC-bell 8s ease-in-out var(--o) infinite both; }
@keyframes lxC-ring { 0%, 6% { stroke-dashoffset: 1; opacity: 1; } 24%, 90% { stroke-dashoffset: 0; opacity: 1; } 97.5%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes lxC-bell { 0%, 28% { transform: rotate(0); } 32% { transform: rotate(12deg); } 37% { transform: rotate(-10deg); } 42%, 100% { transform: rotate(0); } }
.is-play :is(.lx-d-ph, .lx-p-last) .was { animation: lxD-was 8s linear var(--o) infinite both; }
.is-play :is(.lx-d-ph, .lx-p-last) .now { animation: lxD-now 8s cubic-bezier(.23, 1, .32, 1) var(--o) infinite both; }
.is-play .lx-d-st .status { animation: lxD-st 8s cubic-bezier(.23, 1, .32, 1) var(--o) infinite both; }
.is-play .lx-d-st .sk { animation: lxD-sk 8s linear var(--o) infinite both; }
@keyframes lxD-was { 0%, 30% { opacity: 1; } 32%, 90% { opacity: 0; } 97.5%, 100% { opacity: 1; } }
@keyframes lxD-now { 0%, 30% { opacity: 0; transform: scale(.6); } 36% { opacity: 1; transform: scale(1.12); } 40%, 90% { opacity: 1; transform: none; } 97.5%, 100% { opacity: 0; transform: none; } }
@keyframes lxD-st { 0%, 38% { opacity: 0; transform: translateX(-6px); } 44%, 90% { opacity: 1; transform: none; } 97.5%, 100% { opacity: 0; transform: none; } }
@keyframes lxD-sk { 0%, 36% { opacity: 1; } 40%, 92% { opacity: 0; } 97.5%, 100% { opacity: 1; } }
/* new images: one element fills or arrives per image, same beat */
.is-play :is(.lx-t-fld.is-on i, .lx-i-bar i) { animation: lx-fill 8s cubic-bezier(.45, .05, .35, 1) var(--o) infinite both; }
@keyframes lx-fill { 0%, 8% { transform: scaleX(0); opacity: 1; } 34%, 90% { transform: scaleX(1); opacity: 1; } 97.5%, 100% { transform: scaleX(1); opacity: 0; } }
.is-play :is(.lx-t-r.is-on i, .lx-p-btn, .lx-m-ok, .lx-x-badge, .lx-r-lock, .lx-s-res, .lx-u-tl li.is-new, .lx-h-eu, .lx-i-f.f3, .lx-k-tool, .lx-n-risk, .lx-v-chip) { animation: lx-pop 8s cubic-bezier(.23, 1, .32, 1) var(--o) infinite both; }
@keyframes lx-pop { 0%, 30% { opacity: 0; translate: 0 6px; } 38%, 90% { opacity: 1; translate: 0 0; } 97.5%, 100% { opacity: 0; translate: 0 0; } }
.is-play .lx-x-row:nth-child(3) .lx-x-dot, .is-play .lx-x-row:nth-child(4) .lx-x-dot { animation: lx-dot 8s linear var(--o) infinite both; }
@keyframes lx-dot { 0%, 44% { opacity: 0; } 46%, 92% { opacity: 1; } 97.5%, 100% { opacity: 0; } }
.is-play .lx-s-caret { animation: lx-caret 1s steps(1) infinite; }
/* mcp: the answer lines follow the tool call; kpi: the lifted tile arrives, the bars grow; review: the flag bar draws */
.is-play .lx-k-a .sk { animation: lx-dot 8s linear var(--o) infinite both; }
.is-play .lx-o-t.is-on { animation: lx-pop 8s cubic-bezier(.23, 1, .32, 1) var(--o) infinite both; }
.is-play .lx-o-bars i { animation: lx-grow 8s cubic-bezier(.45, .05, .35, 1) var(--o) infinite both; }
@keyframes lx-grow { 0%, 6% { transform: scaleY(.15); opacity: 1; } 32%, 90% { transform: scaleY(1); opacity: 1; } 97.5%, 100% { transform: scaleY(1); opacity: .4; } }
.is-play .lx-v-row.is-flag::before { animation: lx-flag 8s cubic-bezier(.23, 1, .32, 1) var(--o) infinite both; }
@keyframes lx-flag { 0%, 16% { transform: scaleY(0); } 26%, 90% { transform: scaleY(1); } 97.5%, 100% { transform: scaleY(1); opacity: 0; } }
@keyframes lx-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lx-img *, .lx-img *::before, .lx-img *::after { animation: none !important; } }

/* German compounds in headings ("Vertragsmanagement", "Mitteilungspflichten"): hyphenate long words only, so a heading
   on a narrow card or phone breaks inside a compound instead of leaving it alone on the last line */
:is(.lx-pain h3, .lx-step h3, .lx-fq-btn > span, .lx-feat .tile-cap h3, .lx-tile .tile-cap h3, .lx-det dt) { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 5 5; }