@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   Product illustrations for /de/ki-fuer-kmu — the app's own look, scoped.

   EVERYTHING here lives under .lkmu-app. The marketing site and the product
   use different greens (site --accent #1B4332, app --brand-800 #264233) and
   different neutral ramps, so unscoped app CSS on this page would quietly
   restyle the surrounding sections. The scope is the whole point; do not lift
   a rule out of it.

   Values are transcribed from the product's own app-design-tokens.css and from
   screenshots of the running demo tenant, not invented. The same goes for the
   strings: "KI bereit", "FIRMENWISSEN", "Integrität bestätigt", "Gebucht" and
   the sidebar groups are what the app actually renders.

   ⚠ Sample data only. Never put a real customer, person or account in here.
   ═══════════════════════════════════════════════════════════════════════════ */

.lkmu-app {
  /* The product's palette, copied from app-design-tokens.css. */
  --a-brand:      #264233;
  --a-brand-500:  #35735A;
  --a-brand-50:   #EDF3EF;
  --a-white:      #FFFFFF;
  --a-body:       #FCFCFD;
  --a-inset:      #F6F7F9;
  --a-rail:       #EEF0F3;
  --a-line:       #DDE1E6;
  --a-line-soft:  rgba(20, 24, 30, 0.07);
  --a-input:      #C7CCD3;
  --a-muted:      #6B7178;
  --a-second:     #4B535E;
  --a-ink:        #14181E;
  --a-success:    #1E6B47;
  --a-success-bg: #E9F4EE;
  --a-warn:       #8A5A00;
  --a-warn-bg:    #FBF1DC;

  display: grid;
  grid-template-columns: 186px 1fr;
  background: var(--a-body);
  border: 1px solid var(--a-line);
  border-radius: 12px;
  overflow: hidden;
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--a-ink);
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 14px 40px rgba(20, 24, 30, 0.08);
  /* Stops a long value (an IBAN, a hash) from widening the whole illustration. */
  min-width: 0;
}
.lkmu-app * { min-width: 0; }

/* ── the rail ─────────────────────────────────────────────────────────── */
.lkmu-rail {
  background: var(--a-rail);
  border-right: 1px solid var(--a-line);
  padding: 12px 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.lkmu-rail-brand {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 6px 12px;
  font-weight: 800; font-size: 13px; letter-spacing: -0.01em;
}
.lkmu-rail-brand img { display: block; border-radius: 4px; }
.lkmu-rail-new {
  background: var(--a-ink); color: #fff;
  border-radius: 7px; padding: 7px 9px;
  font-size: 11px; font-weight: 700; text-align: center;
  margin-bottom: 10px;
}
.lkmu-rail-group {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--a-muted);
  margin: 9px 0 3px 6px;
}
.lkmu-rail-item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 7px; border-radius: 7px;
  font-size: 11.5px; color: var(--a-second);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The tile around each icon. The product uses 26px outside with 5px padding and
   a 7px radius; scaled down here with the rest of the illustration. The five
   tones are the --ws-* values from app-design-tokens.css. */
.lkmu-ico {
  width: 22px; height: 22px; padding: 4px; box-sizing: border-box;
  border-radius: 6px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--tint); color: var(--hue);
}
.lkmu-ico svg { width: 100%; height: 100%; stroke-width: 2; }
.lkmu-rail-item[data-ws="komm"] { --hue: #2E4A63; --tint: #E7ECF1; }
.lkmu-rail-item[data-ws="prod"] { --hue: #8A5A00; --tint: #F7EFE0; }
.lkmu-rail-item[data-ws="vert"] { --hue: #1F5F5B; --tint: #E4EFEE; }
.lkmu-rail-item[data-ws="betr"] { --hue: #7A4038; --tint: #F3E9E7; }
.lkmu-rail-item[data-ws="wiss"] { --hue: #5C4370; --tint: #EDE8F1; }
.lkmu-rail-item.is-active { background: var(--a-ink); color: #fff; font-weight: 600; }
/* Active turns the row into a dark pill; the tint underneath would sit there as
   a bright patch, so it becomes a white transparency instead — same trick the
   product uses. */
.lkmu-rail-item.is-active .lkmu-ico { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* ── the ERP panel header, for the non-chat illustrations ────────────── */
.lkmu-panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 13px; background: var(--a-white);
  border-bottom: 1px solid var(--a-line-soft);
}
.lkmu-panel-ico { width: 15px; height: 15px; color: var(--a-second); display: grid; place-items: center; }
.lkmu-panel-ico svg { width: 100%; height: 100%; }
.lkmu-panel-title { font-size: 12.5px; font-weight: 800; letter-spacing: -0.01em; }
/* The tab strip runs off the edge in the product too; fade rather than wrap. */
.lkmu-tabs { position: relative; }
.lkmu-tabs::after {
  content: ""; position: absolute; inset: 0 0 0 auto; width: 46px;
  background: linear-gradient(to right, rgba(255,255,255,0), #fff 78%);
  pointer-events: none;
}

/* ── the top bar ──────────────────────────────────────────────────────── */
.lkmu-main {
  display: flex; flex-direction: column; min-width: 0;
  /* The tab strip lives here, not in .lkmu-body, so it needs its own
     container to ask how much room the panel column actually has. */
  container-type: inline-size; container-name: panel;
}
.lkmu-top {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--a-line-soft);
  background: var(--a-white);
}
.lkmu-model {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--a-white); border: 1px solid var(--a-line);
  border-radius: 100px; padding: 4px 11px;
  font-size: 11px; font-weight: 700;
}
.lkmu-model::after {
  content: ""; width: 0; height: 0; margin-left: 2px;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 4px solid var(--a-muted);
}
.lkmu-ready {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--a-inset); border-radius: 100px; padding: 4px 11px;
  font-size: 11px; font-weight: 600; color: var(--a-second);
}
.lkmu-ready::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--a-success);
}
.lkmu-tabs {
  display: flex; gap: 2px; padding: 0 13px;
  border-bottom: 1px solid var(--a-line-soft);
  background: var(--a-white);
  overflow: hidden;
}
.lkmu-tab {
  padding: 8px 10px; font-size: 11px; font-weight: 600; color: var(--a-muted);
  white-space: nowrap; border-bottom: 2px solid transparent;
}
.lkmu-tab.is-active { color: var(--a-ink); border-bottom-color: var(--a-ink); }

.lkmu-body { padding: 14px; min-width: 0; }
.lkmu-h {
  font-size: 14px; font-weight: 800; letter-spacing: -0.015em;
  margin-bottom: 2px;
}
.lkmu-sub2 { font-size: 10.5px; color: var(--a-muted); margin-bottom: 12px; }

/* ── tables, shared by the invoice and audit illustrations ───────────── */
.lkmu-tbl { width: 100%; border-collapse: collapse; }
.lkmu-tbl th {
  text-align: left; font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--a-muted);
  padding: 0 8px 7px; border-bottom: 1px solid var(--a-line);
}
.lkmu-tbl td {
  padding: 9px 8px; font-size: 11.5px;
  border-bottom: 1px solid var(--a-line-soft);
  font-variant-numeric: tabular-nums;
}
.lkmu-tbl td.r, .lkmu-tbl th.r { text-align: right; }
.lkmu-strong { font-weight: 700; }

.lkmu-pill {
  display: inline-block; border-radius: 100px;
  padding: 3px 9px; font-size: 10px; font-weight: 700;
  background: var(--a-inset); color: var(--a-second);
}
.lkmu-pill-warn    { background: var(--a-warn-bg);    color: var(--a-warn); }
.lkmu-pill-ok      { background: var(--a-success-bg); color: var(--a-success); }
.lkmu-pill-brand   { background: var(--a-brand-50);   color: var(--a-brand); }

/* ── the chat illustration ───────────────────────────────────────────── */
.lkmu-ask2 {
  background: var(--a-inset); border-radius: 12px;
  padding: 10px 13px; font-size: 11.5px; font-weight: 600;
  margin: 0 0 12px auto; max-width: 78%;
}
.lkmu-answer2 { font-size: 11.5px; line-height: 1.62; color: var(--a-ink); }
.lkmu-answer2 b { font-weight: 800; }
.lkmu-kb {
  margin-top: 12px; border: 1px solid var(--a-line-soft);
  border-radius: 10px; background: var(--a-white);
  padding: 9px 11px;
}
.lkmu-kb-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--a-muted); margin-bottom: 8px;
}
.lkmu-kb-list { display: flex; gap: 7px; flex-wrap: wrap; }
.lkmu-kb-item {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--a-inset); border-radius: 7px;
  padding: 5px 9px; font-size: 10.5px; font-weight: 600;
  max-width: 100%;
}
.lkmu-kb-item span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lkmu-kb-score { color: var(--a-brand-500); font-weight: 800; flex: 0 0 auto; }
.lkmu-input {
  margin-top: 13px; border: 1px solid var(--a-input); border-radius: 100px;
  padding: 8px 14px; font-size: 11.5px; color: var(--a-muted);
  display: flex; align-items: center; justify-content: space-between;
}
.lkmu-input::after {
  content: "↑"; width: 20px; height: 20px; border-radius: 50%;
  background: var(--a-ink); color: #fff;
  display: grid; place-items: center; font-size: 11px;
}

/* ── the QR bill ─────────────────────────────────────────────────────── */
.lkmu-qr-wrap { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.lkmu-qr-box { position: relative; width: 132px; height: 132px; flex: 0 0 auto; }
.lkmu-qr-svg { display: block; width: 100%; height: 100%; }
/* The Swiss cross sits on the code exactly as it does on a real QR-bill.
   Error correction M carries it; verified by decoding with the app's own jsQR
   at 160/240/320 px, with and without the cross. */
.lkmu-qr-cross2 {
  position: absolute; inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 14%; height: 14%;
  background: #000; display: grid; place-items: center;
}
.lkmu-qr-cross2::before,
.lkmu-qr-cross2::after { content: ""; position: absolute; background: #fff; }
.lkmu-qr-cross2::before { width: 62%; height: 20%; }
.lkmu-qr-cross2::after  { width: 20%; height: 62%; }
.lkmu-qr-rows { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.lkmu-qr-row { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lkmu-qr-row span {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--a-muted);
}
.lkmu-qr-row b {
  font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.lkmu-qr-note {
  margin-top: 11px; padding-top: 9px;
  border-top: 1px solid var(--a-line-soft);
  font-size: 10px; color: var(--a-muted);
}

/* ── the audit card ──────────────────────────────────────────────────── */
.lkmu-meta-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 7px 0;
  border-bottom: 1px solid var(--a-line-soft);
  font-size: 11.5px;
}
.lkmu-meta-row > span:first-child { color: var(--a-muted); flex: 0 0 auto; }
.lkmu-meta-val { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.lkmu-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px; color: var(--a-second);
}
.lkmu-btn-row { display: flex; gap: 7px; margin-top: 12px; }
.lkmu-btn-a {
  background: var(--a-ink); color: #fff; border-radius: 8px;
  padding: 7px 13px; font-size: 11px; font-weight: 700;
}
.lkmu-btn-b {
  background: var(--a-white); color: var(--a-second);
  border: 1px solid var(--a-line); border-radius: 8px;
  padding: 7px 13px; font-size: 11px; font-weight: 700;
}

/* ── the guardrail table ─────────────────────────────────────────────── */
.lkmu-gr-tbl td { font-size: 10.5px; padding: 7px 8px; }
.lkmu-gr-tbl th { font-size: 8px; }
.lkmu-chainhash {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px; color: var(--a-success);
  background: var(--a-success-bg); border-radius: 5px; padding: 2px 6px;
}

/* ── the play/pause control (WCAG 2.2.2) ─────────────────────────────── */
.lkmu-anim-ctl {
  position: absolute; top: 9px; right: 9px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--gray-200, #D2D2D7);
  border-radius: 100px; padding: 4px 10px 4px 8px;
  font: 600 10.5px/1 'Satoshi', sans-serif; color: #3A3A3C;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.lkmu-anim-ctl:hover { background: #fff; }
.lkmu-anim-ctl:focus-visible { outline: 2px solid var(--accent, #1B4332); outline-offset: 2px; }
.lkmu-anim-ctl .lkmu-ctl-icon { font-size: 9px; line-height: 1; }
.lkmu-mock-visual { position: relative; }

/* Paused: freeze every looping animation at its current frame. */
.lkmu-mock-visual.is-paused *,
.lkmu-mock-visual.is-paused *::before,
.lkmu-mock-visual.is-paused *::after { animation-play-state: paused !important; }

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .lkmu-app { grid-template-columns: 160px 1fr; }
}
@media (max-width: 768px) {
  /* The product hides the rail on a phone; so does the illustration. */
  .lkmu-app { grid-template-columns: 1fr; }
  .lkmu-rail { display: none; }
  .lkmu-qr-wrap { grid-template-columns: 1fr; }
  .lkmu-qr-box { width: 118px; height: 118px; }
  .lkmu-tabs { overflow-x: auto; }
}

/* ── reduced motion: hold the finished frame, hide the control ──────────
   EVERY state pair in the illustrations belongs here. The half that is on
   screen BEFORE goes in the first rule, the half that is on screen AFTER in
   the second. A pair that is missing keeps the opacity it was authored with,
   and since the "after" halves are authored at 0 (the animation fades them
   in), forgetting one shows a reader with reduced motion a screen frozen
   half-way: that is how the audit chain came to read "Noch nicht geprüft"
   while the invoice list next to it already read "Gebucht". */
@media (prefers-reduced-motion: reduce) {
  .lkmu-app *, .lkmu-app *::before, .lkmu-app *::after { animation: none !important; }
  .lkmu-anim-ctl { display: none; }

  /* before → away */
  .lkmu-step-a,
  .lkmu-step-b,
  .lkmu-badge-pending,
  .lkmu-verify-busy { opacity: 0 !important; }

  /* after → on screen */
  .lkmu-step-c,
  .lkmu-badge-ok,
  .lkmu-verify-idle,
  .lkmu-stamp2,
  .lkmu-reveal { opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Motion.

   Two rules shape all of it:
   - The FIRST frame is never empty. Every illustration opens on a populated
     state, because it may scroll into view at any point in the cycle and an
     empty card reads as a broken feature.
   - The finished state is HELD. A 14 s cycle spends more than half of itself
     on the end state, so a reader who glances at it sees the result rather
     than a transition.

   Anything that loops must also be listed in the prefers-reduced-motion block
   above, and must sit inside .lkmu-mock-visual so the pause button reaches it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Three states stacked in one grid cell, crossfading a -> b -> c. */
.lkmu-steps { display: inline-grid; }
.lkmu-steps > .lkmu-step-a,
.lkmu-steps > .lkmu-step-b,
.lkmu-steps > .lkmu-step-c { grid-area: 1 / 1; }

.lkmu-step-a { animation: lkmu-s-a 14s ease-in-out infinite; }
.lkmu-step-b { animation: lkmu-s-b 14s ease-in-out infinite; opacity: 0; }
.lkmu-step-c { animation: lkmu-s-c 14s ease-in-out infinite; opacity: 0; }

@keyframes lkmu-s-a {            /* draft: on screen from the very first frame */
  0%, 20%   { opacity: 1; }
  26%, 94%  { opacity: 0; }
  100%      { opacity: 1; }
}
@keyframes lkmu-s-b {            /* waiting for approval */
  0%, 20%   { opacity: 0; }
  26%, 40%  { opacity: 1; }
  46%, 100% { opacity: 0; }
}
@keyframes lkmu-s-c {            /* booked — held for roughly 7 s */
  0%, 40%   { opacity: 0; }
  46%, 94%  { opacity: 1; }
  100%      { opacity: 0; }
}

/* Something that appears once the state above has settled. */
.lkmu-reveal { opacity: 0; animation: lkmu-rv 14s ease-out infinite; }
.lkmu-d1 { animation-delay: 0.20s; }
.lkmu-d2 { animation-delay: 0.40s; }
.lkmu-d3 { animation-delay: 0.60s; }
@keyframes lkmu-rv {
  0%, 48%   { opacity: 0; transform: translateY(4px); }
  56%, 94%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; transform: translateY(4px); }
}

/* The verify button's own little cycle: idle -> working -> confirmed. */
.lkmu-verify-idle { animation: lkmu-verify 14s ease-in-out infinite; }
@keyframes lkmu-verify {         /* the label is only away while it works */
  0%, 20%   { opacity: 1; }
  26%, 40%  { opacity: 0; }
  46%, 100% { opacity: 1; }
}
.lkmu-verify-busy { animation: lkmu-s-b 14s ease-in-out infinite; opacity: 0; }
.lkmu-badge-pending { animation: lkmu-s-a 14s ease-in-out infinite; }
.lkmu-badge-ok      { animation: lkmu-s-c 14s ease-in-out infinite; opacity: 0; }

/* The CAMT match stamp. */
.lkmu-stamp2 { opacity: 0; animation: lkmu-rv 14s ease-out infinite 0.3s; }

/* ── body header with actions (Kreditoren, Rechnungen) ───────────────── */
.lkmu-body-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.lkmu-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.lkmu-actions .lkmu-btn-a,
.lkmu-actions .lkmu-btn-b { padding: 5px 10px; font-size: 10px; }

/* ── the Swiss QR-bill payment part ──────────────────────────────────── */
/* Proportions follow the real slip: the Empfangsschein is the narrow left
   third, the Zahlteil the wider right two thirds, divided by the perforation. */
.lkmu-bill {
  display: grid; grid-template-columns: 0.42fr 1fr;
  border: 1px solid var(--a-line); border-radius: 8px;
  background: var(--a-white); overflow: hidden;
}
.lkmu-bill-rcpt { padding: 11px 12px; }
.lkmu-bill-pay  { padding: 11px 12px; border-left: 1px dashed var(--a-input); }
.lkmu-bill-title {
  font-size: 11px; font-weight: 800; margin-bottom: 9px;
  padding-bottom: 6px; border-bottom: 1px solid var(--a-line-soft);
}
.lkmu-bill-sec { margin-bottom: 8px; display: flex; flex-direction: column; gap: 1px; }
.lkmu-bill-sec > span {
  font-size: 7.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--a-muted);
}
.lkmu-bill-sec > b {
  font-size: 9.5px; font-weight: 600; line-height: 1.35;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.lkmu-bill-amt { display: flex; gap: 16px; margin: 9px 0; }
.lkmu-bill-amt > div { display: flex; flex-direction: column; gap: 1px; }
.lkmu-bill-amt span {
  font-size: 7.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--a-muted);
}
.lkmu-bill-amt b { font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lkmu-bill-accept {
  margin-top: 10px; text-align: right;
  font-size: 7.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--a-muted);
}
.lkmu-bill-paycols { display: grid; grid-template-columns: auto 1fr; gap: 14px; }
.lkmu-bill-qrcol { display: flex; flex-direction: column; }
.lkmu-bill-info { min-width: 0; }

@media (max-width: 768px) {
  /* The real slip stacks on a phone too. */
  .lkmu-bill { grid-template-columns: 1fr; }
  .lkmu-bill-pay { border-left: 0; border-top: 1px dashed var(--a-input); }
  .lkmu-bill-paycols { grid-template-columns: 1fr; }

}
/* ═══════════════════════════════════════════════════════════════════════════
   Container queries.

   These illustrations sit in a two-column grid, so their own width is about
   half the viewport. A viewport media query therefore says "desktop" while the
   component has ~480px — which is what let the Zahlteil's detail column
   collapse to one character per line at 1280px. Everything that depends on how
   much room the ILLUSTRATION has is asked of the container, not the window.
   ═══════════════════════════════════════════════════════════════════════════ */
.lkmu-body { container-type: inline-size; container-name: mock; }

@container mock (max-width: 470px) {
  /* Stack the slip exactly as the phone layout does. */
  .lkmu-bill { grid-template-columns: 1fr; }
  .lkmu-bill-pay { border-left: 0; border-top: 1px dashed var(--a-input); }
  .lkmu-bill-paycols { grid-template-columns: 1fr; }
  .lkmu-bill-qrcol { align-items: flex-start; }
}

@container mock (max-width: 470px) /*cols*/ {
  /* The six columns the frame keeps: ER-Nr., Datum, Fällig, Lieferant,
     Status, Total. Matching, Bezahlt and Beleg-Nr. fall away. */
  .lkmu-kred .lkmu-col-match,
  .lkmu-kred .lkmu-col-doc,
  .lkmu-kred .lkmu-col-paid { display: none; }
}

@container mock (max-width: 360px) {
  .lkmu-kred .lkmu-col-date { display: none; }
  .lkmu-body-head .lkmu-actions { display: none; }
}

@container mock (max-width: 290px) {
  .lkmu-kred .lkmu-col-due { display: none; }
}

/* Tab labels must never sit on top of one another: no wrapping, a real gap,
   and the strip scrolls under the fade rather than reflowing. */
.lkmu-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  overflow: hidden;
}
.lkmu-tab {
  white-space: nowrap;
  flex: 0 0 auto;
}

.lkmu-body { overflow: hidden; }
/* A strip scrolled to reach a later tab fades on BOTH edges, so it reads as
   scrolled rather than as a list that simply starts at "Produkte". */
.lkmu-tabs.is-scrolled::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 26px; z-index: 1;
  background: linear-gradient(to left, rgba(255,255,255,0), #fff 78%);
  pointer-events: none;
}

/* The cells wrap, exactly as the panel's own table does at this width:
   "ER-/2026-/0001" over three lines, the supplier over two, the status pill
   over three. Wrapping is what keeps the table inside the frame — forcing
   nowrap here is what pushed it out. */
.lkmu-tbl { table-layout: auto; width: 100%; }

/* ── The tab strip against the panel column's own width ──────────────────────
   Narrow enough and the active tab (Kreditoren is the 5th label, Einstellungen
   the 9th) falls outside the strip, so the mockup would highlight a tab nobody
   can see. The panel handles this by scrolling until the active tab is at the
   left edge; `:has(~ .is-active)` matches exactly the tabs such a scroll pushes
   off — every tab that still has the active one after it — and the left fade
   says why they are gone. */
@container panel (max-width: 420px) {
  .lkmu-tab:has(~ .is-active) { display: none; }
  .lkmu-tabs::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 18px; z-index: 1;
    background: linear-gradient(to left, rgba(255,255,255,0), #fff 78%);
    pointer-events: none;
  }
}