/* ==========================================================================
   Dashboard mock (.lp-dash): a reporting app rebuilt in HTML instead of a screenshot.
   Sits inside .lp-showcase__frame. Colors come from the site tokens, so light and dark work on their own.
   Layout follows its own width (container query): wide = desktop app with sidebar,
   narrow (under 40rem) = phone app with top bar, logo row and bottom tab bar.
   The whole mock is role="img" with one aria-label; inner text is decoration.
   ========================================================================== */

.lp-dash { --dash-ok: #34b26e; --dash-pad: 1.5em; position: relative; container: lp-dash / inline-size; overflow: hidden; background: var(--surface-mist); color: var(--ink); font-size: 0.8125rem; line-height: 1.35; text-align: left; font-variant-numeric: tabular-nums; }
.lp-dash * { box-sizing: border-box; }
.lp-dash__app { display: grid; grid-template-columns: 15em minmax(0, 1fr); }

/* ---------- Sidebar ---------- */
.lp-dash__side { display: flex; flex-direction: column; gap: 0.25em; padding: 1.25em 0.875em; border-right: 1px solid var(--line); background: var(--surface); }
.lp-dash__brand { display: flex; align-items: center; gap: 0.625em; margin-bottom: 1.5em; padding-inline: 0.375em; }
.lp-dash__mark { display: grid; flex: none; place-items: center; width: 2.25em; height: 2.25em; border-radius: 0.5em; background: linear-gradient(135deg, var(--brand-soft), var(--brand)); color: var(--brand-deep); font-size: 0.8125em; font-weight: 700; letter-spacing: 0.02em; }
.lp-dash__brand b { display: block; font-size: 1em; font-weight: 700; letter-spacing: -0.02em; }
.lp-dash__brand small { display: block; color: var(--ink-muted); font-size: 0.6875em; letter-spacing: 0.08em; text-transform: uppercase; }
.lp-dash__menu-label { margin: 0 0 0.5em; padding-inline: 0.5em; color: var(--ink-muted); font-size: 0.6875em; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.lp-dash__nav { display: flex; align-items: center; gap: 0.625em; padding: 0.6em 0.625em; border-radius: 0.625em; color: var(--ink-muted); font-weight: 500; white-space: nowrap; }
.lp-dash__nav svg { flex: none; width: 1.1em; height: 1.1em; }
.lp-dash__nav i { margin-left: auto; font-size: 0.8em; font-style: normal; opacity: 0.7; }
.lp-dash__nav.is-on { background: var(--brand-10); box-shadow: inset 0 0 0 1px var(--brand-20); color: var(--brand-text); }

/* ---------- Top bar + page head ---------- */
.lp-dash__main { min-width: 0; }
.lp-dash__top { display: flex; align-items: center; justify-content: flex-end; gap: 0.5em; padding: 0.75em var(--dash-pad) 0; }
.lp-dash__top-title, .lp-dash__burger { display: none; }
.lp-dash__pill { display: inline-flex; gap: 0.125em; padding: 0.1875em; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 0.75em; font-weight: 600; }
.lp-dash__pill span { padding: 0.2em 0.55em; border-radius: 999px; color: var(--ink-muted); }
.lp-dash__pill .is-on { background: var(--brand); color: var(--on-brand, #fff); }
.lp-dash__avatar { display: grid; place-items: center; width: 2.125em; height: 2.125em; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink-muted); font-size: 0.75em; font-weight: 600; }
.lp-dash__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1em 1.5em; padding: 0.5em var(--dash-pad) 1.25em; border-bottom: 1px solid var(--line); }
.lp-dash__title { margin: 0; font-size: 2.125em; font-weight: 700; line-height: 1.05; letter-spacing: -0.035em; }
.lp-dash__subtitle { margin: 0.35em 0 0; color: var(--ink-muted); }
.lp-dash__filters { display: flex; flex-wrap: wrap; gap: 0.5em; }
.lp-dash__select { display: inline-flex; align-items: center; justify-content: space-between; gap: 2.5em; padding: 0.5em 0.75em; border: 1px solid var(--line); border-radius: 0.5em; background: var(--surface); font-weight: 500; }
.lp-dash__select::after { content: ""; width: 0.4em; height: 0.4em; border-right: 1.5px solid var(--ink-muted); border-bottom: 1.5px solid var(--ink-muted); transform: translateY(-25%) rotate(45deg); }
.lp-dash__seg { display: inline-flex; gap: 0.125em; padding: 0.25em; border: 1px solid var(--line); border-radius: 0.5em; background: var(--surface); }
.lp-dash__seg span { padding: 0.3em 0.6em; border-radius: 0.375em; color: var(--ink-muted); font-size: 0.875em; white-space: nowrap; }
.lp-dash__seg .is-on { background: var(--brand-10); color: var(--brand-text); font-weight: 600; }

/* ---------- Body and section labels ("01 INTEGRATIONEN") ---------- */
.lp-dash__body { display: flex; flex-direction: column; gap: 1.375em; padding: 1.25em var(--dash-pad) 1.75em; }
.lp-dash__sec { display: flex; align-items: baseline; gap: 0.5em; margin: 0 0 0.625em; color: var(--ink-muted); font-size: 0.6875em; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.lp-dash__sec b { font-size: 1.6em; font-weight: 600; letter-spacing: -0.02em; opacity: 0.75; }
.lp-dash__card { position: relative; border: 1px solid var(--line); border-radius: 0.875em; background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / 0.04); }
.lp-dash__card.is-hot { border-color: var(--brand-40); background: linear-gradient(180deg, var(--brand-4), transparent 45%), var(--surface); }

/* ---------- 01 integrations ---------- */
.lp-dash__intg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.625em; }
.lp-dash__tile { display: flex; align-items: center; gap: 0.625em; padding: 0.625em 0.75em; }
.lp-dash__logo { display: grid; flex: none; place-items: center; width: 2.25em; height: 2.25em; border: 1px solid var(--line); border-radius: 0.5em; background: #fff; }
.lp-dash__logo img { width: 1.5em; height: 1.5em; object-fit: contain; }
.lp-dash__tile small { display: block; color: var(--ink-muted); font-size: 0.75em; letter-spacing: 0.08em; text-transform: uppercase; }
.lp-dash__tile strong { display: block; font-weight: 600; }
.lp-dash__dot { flex: none; width: 0.5em; height: 0.5em; margin-left: auto; border-radius: 50%; background: var(--dash-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dash-ok) 18%, transparent); }

/* ---------- 02 KPI cards ---------- */
.lp-dash__kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.625em; }
.lp-dash__kpi { display: flex; flex-direction: column; gap: 0.5em; padding: 0.875em 1em 1em; }
.lp-dash__kpi-label { display: flex; align-items: center; gap: 0.5em; color: var(--ink-muted); font-size: 0.75em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.lp-dash__kpi-label svg { flex: none; width: 1.15em; height: 1.15em; }
.lp-dash__kpi.is-hot .lp-dash__kpi-label { color: var(--brand-text); }
.lp-dash__split { display: grid; grid-template-columns: 1fr 1fr; }
.lp-dash__split > div + div { padding-left: 0.75em; border-left: 1px solid var(--line); }
.lp-dash__split .lp-dash__value { font-size: 1.375em; }
.lp-dash__value { display: block; font-size: 1.625em; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; white-space: nowrap; }
.lp-dash__sub { display: block; color: var(--ink-muted); font-size: 0.75em; }

/* ---------- 03 funnel: stage numbers, wave, rate pills ---------- */
.lp-dash__funnel { padding: 1em; }
.lp-dash__chip { display: inline-flex; align-items: center; gap: 0.4em; margin-bottom: 0.875em; padding: 0.4em 0.75em; border: 1px solid var(--line); border-radius: 0.5em; font-weight: 600; }
.lp-dash__stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 0.75em; }
.lp-dash__stages > div { padding: 0.75em 0.875em; }
.lp-dash__stages > div + div { border-left: 1px solid var(--line); }
.lp-dash__stages small { display: block; color: var(--ink-muted); font-size: 0.75em; letter-spacing: 0.08em; text-transform: uppercase; }
.lp-dash__stages strong { font-size: 1.5em; font-weight: 700; letter-spacing: -0.03em; }
.lp-dash__wave { position: relative; height: 5.5em; margin-top: 0.25em; color: var(--brand); background: linear-gradient(var(--line), var(--line)) 25% 0 / 1px 100% no-repeat, linear-gradient(var(--line), var(--line)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--line), var(--line)) 75% 0 / 1px 100% no-repeat; }
.lp-dash__wave svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lp-dash__wave .area { fill: url(#lp-dash-fade); }
.lp-dash__wave .line { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.lp-dash__rate { position: absolute; top: 34%; display: inline-flex; align-items: center; gap: 0.3em; padding: 0.2em 0.55em; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / 0.08); font-size: 0.8125em; font-weight: 600; transform: translateX(-50%); white-space: nowrap; }
.lp-dash__rate i { width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--dash-ok); }
.lp-dash__foot { display: flex; flex-wrap: wrap; gap: 0.5em 1.5em; margin-top: 0.75em; padding-top: 0.75em; border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 0.875em; }
.lp-dash__foot b { color: var(--ink); }
.lp-dash__pulse { display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.4em; border-radius: 50%; background: var(--dash-ok); vertical-align: 0.05em; animation: lp-dash-pulse 2.4s ease-out infinite; }
@keyframes lp-dash-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dash-ok) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 0.5em transparent; } }

/* ---------- 04 donut cards ---------- */
.lp-dash__quad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.625em; }
.lp-dash__donut-card { display: flex; flex-direction: column; gap: 0.25em; padding: 1em; }
.lp-dash__donut-card > small { color: var(--ink-muted); font-weight: 500; }
.lp-dash__big { font-size: 1.75em; font-weight: 700; letter-spacing: -0.03em; }
.lp-dash__big small { margin-left: 0.3em; color: var(--ink-muted); font-size: 0.5em; font-weight: 500; letter-spacing: 0; }
.lp-dash__rings { display: flex; flex: 1; align-items: center; justify-content: center; gap: 1.25em; padding-block: 0.75em; }
.lp-dash__ring { position: relative; display: grid; place-items: center; width: 6.5em; aspect-ratio: 1; }
.lp-dash__ring--l { width: 10em; }
.lp-dash__ring svg { position: absolute; inset: 0; overflow: visible; transform: rotate(-90deg); }
.lp-dash__ring circle { fill: none; stroke-width: 3.2; }
.lp-dash__ring .track { stroke: var(--line); }
.lp-dash__ring .v { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: var(--v) 100; transition: stroke-dasharray 1.4s var(--ease-out) 0.2s; }
.lp-dash__ring .v.is-muted { stroke: var(--ink-muted); }
.lp-dash__ring .v.is-deep { stroke: var(--brand-text); stroke-linecap: butt; }
.lp-dash__ring--thick circle { stroke-width: 4.2; }
.lp-dash__ring span { position: relative; display: grid; justify-items: center; text-align: center; }
.lp-dash__ring strong { font-size: 1.5em; font-weight: 700; letter-spacing: -0.03em; }
.lp-dash__ring em { color: var(--ink-muted); font-size: 0.625em; font-style: normal; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.lp-dash__ring-label { display: block; margin-top: 0.4em; color: var(--ink-muted); font-size: 0.6875em; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }
.lp-dash__rows { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 0.375em; padding-block: 0.5em; }
.lp-dash__rows div { display: flex; justify-content: space-between; padding: 0.45em 0.625em; border: 1px solid var(--line); border-radius: 0.5em; }
.lp-dash__rows span { color: var(--ink-muted); font-size: 0.8125em; letter-spacing: 0.08em; }
.lp-dash__rows b { font-weight: 700; }
.lp-dash__card-foot { color: var(--ink-muted); font-size: 0.8125em; text-align: center; }
.lp-dash__legend i { display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.3em; border-radius: 50%; background: var(--brand); }
.lp-dash__legend i.is-deep { background: var(--brand-text); }

/* Rings fill in when the showcase is revealed (lp-core sets .is-in) */
.lp-js [data-lp-reveal]:not(.is-in) .lp-dash__ring .v { stroke-dasharray: 0 100; }

.lp-dash__tabbar { display: none; }

/* ---------- Medium width: fewer columns ---------- */
@container lp-dash (max-width: 62rem) {
  .lp-dash__app { grid-template-columns: 14.5em minmax(0, 1fr); }
  .lp-dash__intg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-dash__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-dash__quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Phone app view (narrow mock), mirrors the OS mobile layout ---------- */
@container lp-dash (max-width: 40rem) {
  /* a container cannot query itself: height cap and fade sit on the children */
  .lp-dash__app { --dash-pad: 1em; display: block; max-height: 64em; overflow: hidden; }
  .lp-dash__side, .lp-dash__top .lp-dash__pill { display: none; }
  .lp-dash__top { justify-content: space-between; min-height: 3.75em; padding: 0.5em var(--dash-pad); border-bottom: 1px solid var(--line); background: var(--surface); }
  .lp-dash__burger { display: grid; place-items: center; width: 2.25em; height: 2.25em; border: 1px solid var(--line); border-radius: 50%; }
  .lp-dash__burger svg { width: 1.1em; height: 1.1em; }
  .lp-dash__top-title { display: block; flex: 1; font-size: 1.25em; font-weight: 700; letter-spacing: -0.02em; }
  .lp-dash__head { flex-direction: column; align-items: stretch; gap: 0.75em; padding-block: 1em; }
  .lp-dash__filters { order: -1; }
  .lp-dash__select { flex: 1 1 100%; }
  .lp-dash__title { font-size: 1.75em; }
  .lp-dash__subtitle { font-size: 0.95em; }
  .lp-dash__body { gap: 1.125em; padding-top: 1em; padding-bottom: 6em; }
  .lp-dash__intg { display: flex; flex-wrap: wrap; gap: 0.5em; }
  .lp-dash__tile { position: relative; padding: 0.375em; border-radius: 0.75em; }
  .lp-dash__tile > span:not(.lp-dash__logo), .lp-dash__tile small, .lp-dash__tile strong { display: none; }
  .lp-dash__tile .lp-dash__logo { width: 2.5em; height: 2.5em; border: 0; }
  .lp-dash__tile .lp-dash__logo img { width: 1.875em; height: 1.875em; }
  .lp-dash__tile .lp-dash__dot { position: absolute; right: 0.25em; bottom: 0.25em; box-shadow: 0 0 0 2px var(--surface); }
  .lp-dash__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625em; }
  .lp-dash__kpi:nth-child(-n+3) { grid-column: 1 / -1; }
  .lp-dash__value { font-size: 1.5em; }
  .lp-dash__stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-dash__stages > div + div { border-left: 0; }
  .lp-dash__stages > div:nth-child(even) { border-left: 1px solid var(--line); }
  .lp-dash__stages > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .lp-dash__quad { grid-template-columns: minmax(0, 1fr); }
  .lp-dash__ring--l { width: 13em; }
  .lp-dash__foot { font-size: 0.8125em; }
  /* the app scrolls on below the fold: soft fade above the tab bar */
  .lp-dash__tabbar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 5em; background: linear-gradient(transparent, var(--surface-mist)); pointer-events: none; }
  /* OS phone rule: no text under 11px */
  .lp-dash__sec, .lp-dash__kpi-label, .lp-dash__sub, .lp-dash__stages small, .lp-dash__ring-label, .lp-dash__ring em, .lp-dash__rows span, .lp-dash__avatar, .lp-dash__tabbar span, .lp-dash__seg span, .lp-dash__card-foot, .lp-dash__foot, .lp-dash__rate { font-size: 0.6875rem; }
  .lp-dash__tabbar { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); padding: 0.5em 0.5em 0.625em; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .lp-dash__tabbar span { display: grid; justify-items: center; gap: 0.25em; color: var(--ink-muted); font-size: 0.75em; font-weight: 500; }
  .lp-dash__tabbar svg { width: 1.5em; height: 1.5em; }
  .lp-dash__tabbar .is-on { color: var(--brand-text); font-weight: 600; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-dash__ring .v { transition: none; }
  .lp-js [data-lp-reveal]:not(.is-in) .lp-dash__ring .v { stroke-dasharray: var(--v) 100; }
  .lp-dash__pulse { animation: none; }
}