/* © 2024 UNFINISHED e.U. | Author: UNFINISHED e.U. | unfinished.at | Alle Rechte vorbehalten. */
body.page-leistung { --l-achse: 1.4rem; --l-einzug: calc(var(--l-achse) + 2.4rem); }

.page-leistung .l-riese {
  font-size: clamp(3.4rem, 11.5vw, 9.5rem); font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight); line-height: .97; text-transform: uppercase;
  text-align: left; margin: 0;
}

.page-leistung .l-riese .l-fill {
  display: inline-block; position: relative;
  color: color-mix(in srgb, var(--color-text) 30%, transparent);
}
.page-leistung .l-riese .l-fill::after {
  content: attr(data-wort); position: absolute; inset: 0;
  color: var(--color-text);
  clip-path: inset(-5% 100% -5% 0);
  animation: l-fuellen 1.3s cubic-bezier(.22, 1, .36, 1) .3s forwards;
}
.page-leistung .l-riese .l-fill--2::after { animation-delay: 1.4s; }
.page-leistung .l-riese .l-fill--3::after { animation-delay: 2.5s; }
@keyframes l-fuellen { to { clip-path: inset(-5% -6% -5% -2%); } }
.page-leistung .l-riese .l-punkt {
  display: inline-block; width: .14em; height: .14em; border-radius: 50%;
  vertical-align: -.015em;
  background: var(--color-danger); margin-left: .06em;
  opacity: 0; transform: scale(0);
  animation: l-punkt-auf .45s cubic-bezier(.34, 1.56, .64, 1) 2.75s forwards;
}

.page-leistung .l-riese .l-punkt--spaet { animation-delay: 3.85s; }
@keyframes l-punkt-auf { to { opacity: 1; transform: scale(1); } }
.page-leistung .l-hero-unter { margin-top: clamp(1.6rem, 3vw, 2.6rem); text-align: left; }
.page-leistung .l-hero-unter p {
  max-width: 46ch; margin: 0; color: var(--color-text-muted);
  font-size: var(--text-body); line-height: var(--leading-body);
}
/* Hero-Reihe (Buttons + Eckdaten), Eckdaten-Chips und das Bausteine-Laufband stehen
   seit 2026-07-28 ungescoped in 13-pages.css, weil die Leistungs-Übersicht /leistungen
   dieselben Bausteine nutzt (Inhaber: "damit alles gleich ausschaut"). Hier nichts doppeln. */

.page-leistung .l-warum { text-align: left; }

.page-leistung .section-title { text-wrap: balance; }
.page-leistung .l-warum__karte {
  background: var(--card-bg); border: var(--card-border);
  border-radius: var(--card-radius); overflow: hidden;
}
.page-leistung .l-warum__inhalt {
  display: grid; grid-template-columns: .85fr 1.15fr;
  gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start;
  padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.3rem, 3vw, 2.2rem);
}
.page-leistung .l-warum__inhalt .section-badge { text-align: left; margin-bottom: var(--sp-s); }
.page-leistung .l-warum h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight); margin: 0; max-width: 20ch; text-wrap: balance;
}
.page-leistung .l-warum__inhalt > div:last-child { display: flex; flex-direction: column; gap: var(--sp-l); }
.page-leistung .l-warum__inhalt p { margin: 0; color: var(--color-text-muted); max-width: 56ch; }

.page-leistung .l-mock-warum { }

.page-leistung .l-mock-bkst { position: relative; overflow: hidden; }

.page-leistung .l-mock-bkst .l-bahn {
  position: absolute; top: 0; left: 0; right: 0; bottom: var(--sp-2xl);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-s);
  padding: 0 clamp(1.2rem, 4vw, 2.6rem);
}
.page-leistung .l-mock-bkst .l-linie {
  position: absolute; left: clamp(1.2rem, 4vw, 2.6rem); right: clamp(1.2rem, 4vw, 2.6rem);
  top: 50%; height: 1px; background: var(--color-border-strong);
}

.page-leistung .l-mock-bkst .l-halt {
  position: relative; z-index: 1; display: flex; align-items: center;
  justify-content: center; width: clamp(72px, 9vw, 100px); height: clamp(72px, 9vw, 100px);
  background: var(--card-bg); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md); padding: 0;
}
.page-leistung .l-mock-bkst .l-halt small {
  position: absolute; top: calc(100% + var(--sp-2xs)); left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-text-subtle); white-space: nowrap;
}

.page-leistung .l-mock-bkst .l-zeichen {
  position: relative; font-weight: var(--weight-extrabold); font-size: 1.9rem;
  letter-spacing: var(--tracking-tight); line-height: 1; color: var(--color-text);
}
.page-leistung .l-mock-bkst .l-zeichen::after {
  content: ""; position: absolute; right: -.3em; bottom: .08em; width: .16em; height: .16em;
  border-radius: 50%; background: var(--color-danger);
}

.page-leistung .l-mock-bkst .l-swatches { display: flex; gap: 5px; }
.page-leistung .l-mock-bkst .l-swatches i {
  display: block; width: 17px; height: 28px; border-radius: var(--radius-xs);
  border: 1px solid var(--color-border-strong);
}
.page-leistung .l-mock-bkst .l-swatches i:nth-child(1) { background: #101014; }
.page-leistung .l-mock-bkst .l-swatches i:nth-child(2) { background: var(--color-danger); border-color: var(--color-danger); }
.page-leistung .l-mock-bkst .l-swatches i:nth-child(3) { background: #e6e5d9; }

.page-leistung .l-mock-bkst .l-schrift { display: flex; align-items: baseline; gap: 4px; color: var(--color-text); }
.page-leistung .l-mock-bkst .l-schrift b { font-size: 1.5rem; font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tight); }
.page-leistung .l-mock-bkst .l-schrift i { font-style: normal; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-subtle); }

.page-leistung .l-mock-bkst .l-blatt {
  width: 30px; height: 38px; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xs); padding: 5px 4px; display: flex; flex-direction: column; gap: 3px;
}
.page-leistung .l-mock-bkst .l-blatt i { display: block; height: 2px; border-radius: 1px; background: var(--color-border-strong); }
.page-leistung .l-mock-bkst .l-blatt i:nth-child(1) { width: 60%; background: var(--color-danger); }
.page-leistung .l-mock-bkst .l-blatt i:nth-child(3) { width: 80%; }
.page-leistung .l-mock-bkst .l-blatt i:nth-child(4) { width: 55%; }

  .page-leistung .l-mock-bkst.l-bereit .l-linie { transform: scaleX(0); transform-origin: left center; }
  .page-leistung .l-mock-bkst.l-bereit .l-halt { opacity: 0; transform: translateY(10px) scale(.92); }

  .page-leistung .l-mock-bkst.l-bereit.is-an .l-linie {
    animation: l-bkst-linie 3.6s cubic-bezier(.22, 1, .36, 1) .2s forwards; }
  .page-leistung .l-mock-bkst.l-bereit.is-an .l-halt {
    animation: l-bkst-halt .6s cubic-bezier(.34, 1.56, .64, 1) forwards; }
  .page-leistung .l-mock-bkst.l-bereit.is-an .l-halt:nth-of-type(1) { animation-delay: .3s; }
  .page-leistung .l-mock-bkst.l-bereit.is-an .l-halt:nth-of-type(2) { animation-delay: 1.1s; }
  .page-leistung .l-mock-bkst.l-bereit.is-an .l-halt:nth-of-type(3) { animation-delay: 1.9s; }
  .page-leistung .l-mock-bkst.l-bereit.is-an .l-halt:nth-of-type(4) { animation-delay: 2.7s; }
@keyframes l-bkst-linie { to { transform: scaleX(1); } }
@keyframes l-bkst-halt  { to { opacity: 1; transform: none; } }

.page-leistung .l-mock-uhr { position: relative; overflow: hidden; }

.page-leistung .l-mock-uhr .l-nz {
  position: absolute; top: 0; bottom: 0; width: 25%;
  background: rgba(96, 110, 255, .09);
}
.page-leistung .l-mock-uhr .l-nz--l { left: 0; border-right: 1px dashed var(--color-border-strong); }
.page-leistung .l-mock-uhr .l-nz--r { right: 0; border-left: 1px dashed var(--color-border-strong); }

.page-leistung .l-mock-uhr .l-mond {
  position: absolute; top: 12px; left: 14px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--color-text-subtle);
  -webkit-mask: radial-gradient(circle at 68% 32%, transparent 54%, #000 56%);
  mask: radial-gradient(circle at 68% 32%, transparent 54%, #000 56%);
}
.page-leistung .l-mock-uhr .l-sonne {
  position: absolute; top: 13px; left: 50%; width: 12px; height: 12px;
  margin-left: -6px; border-radius: 50%; border: 1.5px solid var(--color-text-subtle);
}
.page-leistung .l-mock-uhr .l-stern {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--color-text-subtle); opacity: .45;
  animation: l-uhr-blinken 3s ease-in-out infinite;
}
.page-leistung .l-mock-uhr .l-nz--l .l-stern:nth-of-type(1) { top: 34px; left: 46px; }
.page-leistung .l-mock-uhr .l-nz--l .l-stern:nth-of-type(2) { top: 18px; left: 66px; animation-delay: 1.4s; }
.page-leistung .l-mock-uhr .l-nz--r .l-stern:nth-of-type(1) { top: 16px; right: 22px; animation-delay: .7s; }
.page-leistung .l-mock-uhr .l-nz--r .l-stern:nth-of-type(2) { top: 36px; right: 48px; animation-delay: 2.1s; }
@keyframes l-uhr-blinken { 0%, 100% { opacity: .2; } 50% { opacity: .7; } }

.page-leistung .l-mock-uhr .l-tagfeld {
  position: absolute; left: clamp(1.4rem, 3vw, 2.6rem); right: clamp(1.4rem, 3vw, 2.6rem);
  top: 0; bottom: var(--sp-2xl);
}
.page-leistung .l-mock-uhr .l-24achse {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--color-border-strong);
}
.page-leistung .l-mock-uhr .l-tick {
  position: absolute; top: 50%; width: 1px; height: 7px;
  background: var(--color-border-strong);
}
.page-leistung .l-mock-uhr .l-tick:nth-of-type(2) { left: 0; }
.page-leistung .l-mock-uhr .l-tick:nth-of-type(3) { left: 25%; }
.page-leistung .l-mock-uhr .l-tick:nth-of-type(4) { left: 50%; }
.page-leistung .l-mock-uhr .l-tick:nth-of-type(5) { left: 75%; }
.page-leistung .l-mock-uhr .l-tick:nth-of-type(6) { left: 100%; }
.page-leistung .l-mock-uhr .l-tick i {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%); font-style: normal;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); color: var(--color-text-subtle);
}

.page-leistung .l-mock-uhr .l-bsr {
  position: absolute; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--color-text-muted); opacity: .55;
}
.page-leistung .l-mock-uhr .l-bsr:nth-of-type(7)  { left: 8%; }
.page-leistung .l-mock-uhr .l-bsr:nth-of-type(8)  { left: 19%; }
.page-leistung .l-mock-uhr .l-bsr:nth-of-type(9)  { left: 33%; }
.page-leistung .l-mock-uhr .l-bsr:nth-of-type(10) { left: 46%; }
.page-leistung .l-mock-uhr .l-bsr:nth-of-type(11) { left: 62%; }
.page-leistung .l-mock-uhr .l-bsr:nth-of-type(12) { left: 68%; }
.page-leistung .l-mock-uhr .l-bsr:nth-of-type(13) { left: 83%; }
.page-leistung .l-mock-uhr .l-bsr:nth-of-type(14) { left: 93%; }

.page-leistung .l-mock-uhr .l-treffer {
  position: absolute; left: 56%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
}
.page-leistung .l-mock-uhr .l-treffer i {
  display: block; width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-success) 22%, transparent);
}
.page-leistung .l-mock-uhr .l-treffer b {
  position: absolute; bottom: calc(100% + 6px);
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-success); white-space: nowrap;
}
.page-leistung .l-mock-uhr .l-uhrfuss {
  position: absolute; left: clamp(1.4rem, 3vw, 2.6rem); bottom: 16px;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-subtle);
}

  .page-leistung .l-mock-uhr.l-bereit .l-bsr { opacity: 0; transform: translateY(6px) scale(.4); }
  .page-leistung .l-mock-uhr.l-bereit .l-treffer { opacity: 0; transform: translate(-50%, -50%) scale(.4); }

  .page-leistung .l-mock-uhr.l-bereit.is-an .l-bsr { animation: l-uhr-bsr .5s ease-out forwards; }
  .page-leistung .l-mock-uhr.l-bereit.is-an .l-bsr:nth-of-type(7)  { animation-delay: .3s; }
  .page-leistung .l-mock-uhr.l-bereit.is-an .l-bsr:nth-of-type(8)  { animation-delay: 1.2s; }
  .page-leistung .l-mock-uhr.l-bereit.is-an .l-bsr:nth-of-type(9)  { animation-delay: .7s; }
  .page-leistung .l-mock-uhr.l-bereit.is-an .l-bsr:nth-of-type(10) { animation-delay: 1.8s; }
  .page-leistung .l-mock-uhr.l-bereit.is-an .l-bsr:nth-of-type(11) { animation-delay: 1.4s; }
  .page-leistung .l-mock-uhr.l-bereit.is-an .l-bsr:nth-of-type(12) { animation-delay: 2.3s; }
  .page-leistung .l-mock-uhr.l-bereit.is-an .l-bsr:nth-of-type(13) { animation-delay: 1s; }
  .page-leistung .l-mock-uhr.l-bereit.is-an .l-bsr:nth-of-type(14) { animation-delay: 2s; }
  .page-leistung .l-mock-uhr.l-bereit.is-an .l-treffer {
    animation: l-uhr-treffer .5s cubic-bezier(.34, 1.56, .64, 1) 2.8s forwards; }
@keyframes l-uhr-bsr     { to { opacity: .55; transform: translateY(0) scale(1); } }
@keyframes l-uhr-treffer { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.page-leistung .l-mock-schau { position: relative; overflow: hidden; }
.page-leistung .l-mock-schau .l-szone { position: absolute; top: 0; bottom: 0; width: 50%; }
.page-leistung .l-mock-schau .l-szone--l {
  left: 0; background: rgba(110, 110, 110, .10);
  border-right: 1px dashed var(--color-border-strong);
}
.page-leistung .l-mock-schau .l-szone--r { right: 0; }

.page-leistung .l-mock-schau .l-skopf {
  position: absolute; top: 0; left: 0; right: 0; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; white-space: nowrap;
}
.page-leistung .l-mock-schau .l-szone--l .l-skopf {
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  color: var(--color-text-subtle); border-bottom: 1px solid var(--color-border-strong);
}
.page-leistung .l-mock-schau .l-szone--r .l-skopf {
  background: var(--color-text); color: var(--color-bg);
}
.page-leistung .l-mock-schau .l-sfelder {
  position: absolute; top: 30px; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.page-leistung .l-mock-schau .l-sfeld { display: flex; flex-direction: column; min-width: 0; }
.page-leistung .l-mock-schau .l-sfeld + .l-sfeld { border-left: 1px solid var(--color-border-strong); }
.page-leistung .l-mock-schau .l-szone--l .l-sfeld + .l-sfeld { border-left-style: dashed; }
.page-leistung .l-mock-schau .l-szone--l .l-sfeld { opacity: .45; }

.page-leistung .l-mock-schau .l-splan {
  flex: 1; display: flex; flex-direction: column; gap: var(--sp-s);
  padding: var(--sp-m) var(--sp-m) var(--sp-s); overflow: hidden;
}
.page-leistung .l-mock-schau .l-spz {
  display: flex; align-items: center; gap: .5em;
  font-family: var(--font-mono); font-size: var(--text-2xs); line-height: 1;
  color: var(--color-text-muted); white-space: nowrap; min-width: 0;
}
.page-leistung .l-mock-schau .l-spz b { font-weight: var(--weight-regular); color: var(--color-text-subtle); width: 5ch; flex: none; }
.page-leistung .l-mock-schau .l-spkt { margin-left: auto; flex: none;
  width: 7px; height: 7px; border-radius: 50%; }
.page-leistung .l-mock-schau .l-szone--l .l-spkt { background: var(--color-danger); opacity: .8; }
.page-leistung .l-mock-schau .l-szone--r .l-spkt { background: var(--color-success); }

.page-leistung .l-mock-schau .l-spkt.l-spkt--plan { background: transparent;
  border: 1px dashed var(--color-text-subtle); opacity: .8; }

.page-leistung .l-mock-schau .l-smeta {
  border-top: 1px solid var(--color-border); padding: var(--sp-xs) var(--sp-s);
  display: flex; justify-content: center;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--color-text-subtle); white-space: nowrap;
}

  .page-leistung .l-mock-schau.l-bereit .l-szone--r .l-spkt { opacity: 0; transform: scale(.4); }

  .page-leistung .l-mock-schau.l-bereit.is-an .l-szone--r .l-spkt {
    animation: l-schau-pkt .35s cubic-bezier(.34, 1.56, .64, 1) forwards; }
  .page-leistung .l-mock-schau.l-bereit.is-an .l-szone--r .l-sfeld:nth-child(1) .l-spz:nth-child(1) .l-spkt { animation-delay: .4s; }
  .page-leistung .l-mock-schau.l-bereit.is-an .l-szone--r .l-sfeld:nth-child(1) .l-spz:nth-child(2) .l-spkt { animation-delay: .9s; }
  .page-leistung .l-mock-schau.l-bereit.is-an .l-szone--r .l-sfeld:nth-child(1) .l-spz:nth-child(3) .l-spkt { animation-delay: 1.4s; }
  .page-leistung .l-mock-schau.l-bereit.is-an .l-szone--r .l-sfeld:nth-child(2) .l-spz:nth-child(1) .l-spkt { animation-delay: 1.9s; }
  .page-leistung .l-mock-schau.l-bereit.is-an .l-szone--r .l-sfeld:nth-child(2) .l-spz:nth-child(2) .l-spkt { animation-delay: 2.4s; }
  .page-leistung .l-mock-schau.l-bereit.is-an .l-szone--r .l-sfeld:nth-child(2) .l-spz:nth-child(3) .l-spkt { animation-delay: 2.9s; }
  .page-leistung .l-mock-schau.l-bereit.is-an .l-szone--r .l-sfeld:nth-child(3) .l-spz:nth-child(1) .l-spkt { animation-delay: 3.4s; }
  .page-leistung .l-mock-schau.l-bereit.is-an .l-szone--r .l-sfeld:nth-child(3) .l-spz:nth-child(2) .l-spkt { animation-delay: 3.9s; }
  .page-leistung .l-mock-schau.l-bereit.is-an .l-szone--r .l-sfeld:nth-child(3) .l-spz:nth-child(3) .l-spkt { animation-delay: 4.4s; }
@keyframes l-schau-pkt { to { opacity: 1; transform: scale(1); } }

.page-leistung .l-mock-radar { position: relative; overflow: hidden; }
.page-leistung .l-mock-radar .l-rkreuz { position: absolute; background: var(--color-border); }
.page-leistung .l-mock-radar .l-rkreuz--h { left: 0; right: 0; top: 50%; height: 1px; }
.page-leistung .l-mock-radar .l-rkreuz--v { top: 0; bottom: 0; left: 50%; width: 1px; }
.page-leistung .l-mock-radar .l-rring {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border: 1px solid var(--color-border); border-radius: 50%;
}

.page-leistung .l-mock-radar .l-rring:nth-of-type(3)  { width: 60px;   height: 60px; }
.page-leistung .l-mock-radar .l-rring:nth-of-type(4)  { width: 130px;  height: 130px; }
.page-leistung .l-mock-radar .l-rring:nth-of-type(5)  { width: 210px;  height: 210px; }
.page-leistung .l-mock-radar .l-rring:nth-of-type(6)  { width: 300px;  height: 300px; }
.page-leistung .l-mock-radar .l-rring:nth-of-type(7)  { width: 400px;  height: 400px; }
.page-leistung .l-mock-radar .l-rring:nth-of-type(8)  { width: 510px;  height: 510px; }
.page-leistung .l-mock-radar .l-rring:nth-of-type(9)  { width: 660px;  height: 660px; }
.page-leistung .l-mock-radar .l-rring:nth-of-type(10) { width: 900px;  height: 900px; }
.page-leistung .l-mock-radar .l-rring:nth-of-type(11) { width: 1200px; height: 1200px; }

.page-leistung .l-mock-radar .l-rdu {
  position: absolute; left: 50%; top: 50%; width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--color-danger); z-index: 1;
}

.page-leistung .l-mock-radar .l-rpuls {
  position: absolute; left: 50%; top: 50%; width: 1200px; height: 1200px;
  margin: -600px 0 0 -600px; border: 1.5px solid var(--color-danger);
  border-radius: 50%; opacity: 0;
}
.page-leistung .l-mock-radar.is-an .l-rpuls { animation: l-radar-puls 3s linear infinite; }
.page-leistung .l-mock-radar.is-an .l-rpuls:nth-of-type(2) { animation-delay: 1.5s; }
@keyframes l-radar-puls {
  0%   { transform: scale(.05); opacity: .85; }
  100% { transform: scale(1); opacity: 0; }
}

.page-leistung .l-mock-radar .l-rblip {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-text-muted); opacity: .5;
}
.page-leistung .l-mock-radar .l-rblip--s { width: 5px;  height: 5px; }
.page-leistung .l-mock-radar .l-rblip--l { width: 12px; height: 12px; }
.page-leistung .l-mock-radar .l-rblip--gruen { background: var(--color-success); opacity: 1; }
.page-leistung .l-mock-radar .l-rblip--rot { background: var(--color-danger); opacity: .85; }

.page-leistung .l-mock-radar .l-rblip:nth-of-type(1)  { left: 41%; top: 25%; }
.page-leistung .l-mock-radar .l-rblip:nth-of-type(2)  { left: 55%; top: 15%; }
.page-leistung .l-mock-radar .l-rblip:nth-of-type(3)  { left: 30%; top: 65%; }
.page-leistung .l-mock-radar .l-rblip:nth-of-type(4)  { left: 66%; top: 45%; }
.page-leistung .l-mock-radar .l-rblip:nth-of-type(5)  { left: 78%; top: 20%; }
.page-leistung .l-mock-radar .l-rblip:nth-of-type(6)  { left: 18%; top: 40%; }
.page-leistung .l-mock-radar .l-rblip:nth-of-type(7)  { left: 8%;  top: 75%; }
.page-leistung .l-mock-radar .l-rblip:nth-of-type(8)  { left: 88%; top: 70%; }
.page-leistung .l-mock-radar .l-rblip:nth-of-type(9)  { left: 13%; top: 15%; }
.page-leistung .l-mock-radar .l-rblip:nth-of-type(10) { left: 93%; top: 30%; }
.page-leistung .l-mock-radar .l-rblip:nth-of-type(11) { left: 48%; top: 85%; }
.page-leistung .l-mock-radar .l-rblip:nth-of-type(12) { left: 72%; top: 88%; }

.page-leistung .l-mock-radar.is-an .l-rblip { opacity: 0; animation: l-radar-blip 3s ease-out infinite; }
.page-leistung .l-mock-radar.is-an .l-rblip--gruen { animation-name: l-radar-blip-gruen; }

.page-leistung .l-mock-radar.is-an .l-rblip:nth-of-type(1)  { animation-delay: .6s; }
.page-leistung .l-mock-radar.is-an .l-rblip:nth-of-type(2)  { animation-delay: .55s; }
.page-leistung .l-mock-radar.is-an .l-rblip:nth-of-type(3)  { animation-delay: 1.15s; }
.page-leistung .l-mock-radar.is-an .l-rblip:nth-of-type(4)  { animation-delay: .9s; }
.page-leistung .l-mock-radar.is-an .l-rblip:nth-of-type(5)  { animation-delay: 1.6s; }
.page-leistung .l-mock-radar.is-an .l-rblip:nth-of-type(6)  { animation-delay: 1.8s; }
.page-leistung .l-mock-radar.is-an .l-rblip:nth-of-type(7)  { animation-delay: 2.4s; }
.page-leistung .l-mock-radar.is-an .l-rblip:nth-of-type(8)  { animation-delay: 2.2s; }
.page-leistung .l-mock-radar.is-an .l-rblip:nth-of-type(9)  { animation-delay: 2.15s; }
.page-leistung .l-mock-radar.is-an .l-rblip:nth-of-type(10) { animation-delay: 2.45s; }
.page-leistung .l-mock-radar.is-an .l-rblip:nth-of-type(11) { animation-delay: .5s; }
.page-leistung .l-mock-radar.is-an .l-rblip:nth-of-type(12) { animation-delay: 1.35s; }
@keyframes l-radar-blip {
  0%        { opacity: 0; transform: scale(.3); }
  6%, 30%   { opacity: 1; transform: scale(1.2); }
  80%, 100% { opacity: .12; transform: scale(1); }
}
@keyframes l-radar-blip-gruen {
  0%        { opacity: 0; transform: scale(.3); box-shadow: none; }
  6%, 34%   { opacity: 1; transform: scale(1.3);
              box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-success) 22%, transparent); }
  80%, 100% { opacity: .35; transform: scale(1); box-shadow: none; }
}
.page-leistung .l-mock-radar .l-rfuss {
  position: absolute; bottom: 10px; left: clamp(1.2rem, 3vw, 2.4rem);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-subtle); white-space: nowrap;
}

.page-leistung .l-mock-strasse { position: relative; overflow: hidden; }
.page-leistung .l-mock-strasse .l-skyline {
  position: absolute; left: 0; right: 0; bottom: 38px; height: 84px;
  display: flex; align-items: flex-end; gap: 7px;
  padding: 0 clamp(1rem, 2.5vw, 2rem); opacity: .35;
}
.page-leistung .l-mock-strasse .l-skyline i {
  display: block; background: var(--color-border-strong);
  border-radius: 2px 2px 0 0; flex: 1;
}
.page-leistung .l-mock-strasse .l-skyline i:nth-of-type(1) { height: 52%; }
.page-leistung .l-mock-strasse .l-skyline i:nth-of-type(2) { height: 78%; }
.page-leistung .l-mock-strasse .l-skyline i:nth-of-type(3) { height: 40%; }
.page-leistung .l-mock-strasse .l-skyline i:nth-of-type(4) { height: 64%; }
.page-leistung .l-mock-strasse .l-skyline i:nth-of-type(5) { height: 88%; }
.page-leistung .l-mock-strasse .l-skyline i:nth-of-type(6) { height: 48%; }
.page-leistung .l-mock-strasse .l-skyline i:nth-of-type(7) { height: 70%; }
.page-leistung .l-mock-strasse .l-skyline i:nth-of-type(8) { height: 36%; }
.page-leistung .l-mock-strasse .l-skyline i:nth-of-type(9) { height: 58%; }
.page-leistung .l-mock-strasse .l-strboden {
  position: absolute; left: 0; right: 0; bottom: 38px; height: 1px;
  background: var(--color-border-strong);
}

.page-leistung .l-mock-strasse .l-strpunkt {
  position: absolute; bottom: 39px; border: 1px solid var(--color-border-strong);
  background: var(--card-bg); z-index: 1;
}
.page-leistung .l-mock-strasse .l-strpunkt::before {
  content: ""; position: absolute; left: 3px; top: 3px; right: 3px; height: 4px;
  border-radius: 2px; background: var(--color-danger); opacity: .85;
}
.page-leistung .l-mock-strasse .l-strpunkt--plakat { left: 18%; width: 28px; height: 42px; border-radius: 2px; }
.page-leistung .l-mock-strasse .l-strpunkt--cl { left: 48%; width: 22px; height: 34px; border-radius: 3px; bottom: 51px; }
.page-leistung .l-mock-strasse .l-strpunkt--cl::after {
  content: ""; position: absolute; top: 100%; left: 50%; width: 2px; height: 13px;
  background: var(--color-border-strong);
}
.page-leistung .l-mock-strasse .l-strpunkt--flyer { left: 76%; width: 17px; height: 24px; border-radius: 2px; }

.page-leistung .l-mock-strasse .l-strgast {
  position: absolute; bottom: 42px; left: 92%; width: 8px; height: 8px;
  border-radius: 50%; background: var(--color-success); opacity: 1;
  transform: scale(1.25); z-index: 2;
}
.page-leistung .l-mock-strasse .l-strfuss {
  position: absolute; bottom: 12px; left: clamp(1.2rem, 3vw, 2.4rem);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-subtle); white-space: nowrap;
}

  .page-leistung .l-mock-strasse.l-bereit .l-strgast {
    opacity: 0; left: 2%; background: var(--color-text-muted); transform: scale(1); }

  .page-leistung .l-mock-strasse.l-bereit.is-an .l-strgast {
    animation: l-str-geht 9s ease-in-out forwards; }
  .page-leistung .l-mock-strasse.l-bereit.is-an .l-strpunkt--plakat {
    animation: l-str-leuchtet 1.6s ease-in-out 1.1s; }
  .page-leistung .l-mock-strasse.l-bereit.is-an .l-strpunkt--cl {
    animation: l-str-leuchtet 1.6s ease-in-out 2.7s; }
  .page-leistung .l-mock-strasse.l-bereit.is-an .l-strpunkt--flyer {
    animation: l-str-leuchtet 1.6s ease-in-out 4.7s; }
@keyframes l-str-geht {
  0%        { opacity: 0;  left: 2%;  background: var(--color-text-muted); transform: scale(1); }
  4%        { opacity: .8; left: 4%; }
  12%, 20%  { opacity: .8; left: 20%; }
  30%, 38%  { opacity: .8; left: 50%; }
  52%, 60%  { opacity: .8; left: 78%; }
  70%, 100% { opacity: 1;  left: 92%; background: var(--color-success); transform: scale(1.25); }
}
@keyframes l-str-leuchtet {
  0%, 100% { box-shadow: none; border-color: var(--color-border-strong); }
  35%, 65% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-danger) 16%, transparent);
             border-color: var(--color-danger); }
}

.page-leistung .l-mock-2sf { position: relative; display: flex; }
.page-leistung .l-mock-2sf .l-2sf { position: relative; flex: 1; display: block; }
.page-leistung .l-mock-2sf .l-2sf--r { border-left: 1px dashed var(--color-border-strong); }
.page-leistung .l-mock-2sf .l-2sfkopf { display: flex; align-items: center; justify-content: center;
  height: 30px; font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.page-leistung .l-mock-2sf .l-2sf--l .l-2sfkopf {
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  color: var(--color-text-subtle); }
.page-leistung .l-mock-2sf .l-2sf--r .l-2sfkopf {
  background: var(--color-text); color: var(--color-bg); }
.page-leistung .l-mock-2sf .l-2sfsatz { position: absolute; left: 24px; right: 24px; top: 52px; }
.page-leistung .l-mock-2sf .l-2sf--l .l-2sfsatz { color: var(--color-text-subtle);
  font-size: var(--text-sm); line-height: 1.5; font-style: italic; }
.page-leistung .l-mock-2sf .l-2sf--r .l-2sfsatz { font-weight: var(--weight-extrabold);
  font-size: clamp(1.05rem, 1.9vw, 1.4rem); letter-spacing: var(--tracking-snug); line-height: 1.3; }
.page-leistung .l-mock-2sf .l-2sfpkt { display: inline-block; width: .28em; height: .28em;
  border-radius: 50%; background: var(--color-danger); margin-left: .1em;

  vertical-align: -.05em; }
.page-leistung .l-mock-2sf .l-2sfre { position: absolute; left: 24px; bottom: 16px;
  display: flex; align-items: center; gap: .6em; font-family: var(--font-mono);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.page-leistung .l-mock-2sf .l-2sf--l .l-2sfre { color: var(--color-danger); }
.page-leistung .l-mock-2sf .l-2sf--r .l-2sfre { color: var(--color-success); }
.page-leistung .l-mock-2sf .l-2sfre b { width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; }

  .page-leistung .l-mock-2sf.l-bereit .l-2sfre { opacity: 0; transform: translateY(6px); }
  .page-leistung .l-mock-2sf.l-bereit.is-an .l-2sf--l .l-2sfre {
    animation: l-2sf-re .45s ease-out 1s forwards; }
  .page-leistung .l-mock-2sf.l-bereit.is-an .l-2sf--r .l-2sfre {
    animation: l-2sf-re .45s ease-out 2s forwards; }
@keyframes l-2sf-re { to { opacity: 1; transform: none; } }

.page-leistung .l-mock-dash { position: relative; overflow: hidden; }
.page-leistung .l-mock-dash .l-dmini {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-subtle); white-space: nowrap; line-height: 1;
}

.page-leistung .l-mock-dash .l-dside {
  position: absolute; left: 0; top: 0; bottom: 0; width: 38px;
  border-right: 1px solid var(--color-border);
}

.page-leistung .l-mock-dash .l-dside::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 24px;
  border-bottom: 1px solid var(--color-border);
}
.page-leistung .l-mock-dash .l-dside b {
  position: absolute; left: 50%; top: 7px; width: 9px; height: 9px;
  margin-left: -4.5px; border-radius: 50%; background: var(--color-danger);
}

.page-leistung .l-mock-dash .l-dnav {
  position: absolute; left: 50%; width: 12px; height: 12px; margin-left: -6px;
  color: var(--color-text-muted); opacity: .45; --deck: .45;
}
.page-leistung .l-mock-dash .l-dnav--aktiv { opacity: 1; --deck: 1; }
.page-leistung .l-mock-dash .l-dnav:nth-of-type(1) { top: 40px; }
.page-leistung .l-mock-dash .l-dnav:nth-of-type(2) { top: 62px; }
.page-leistung .l-mock-dash .l-dnav:nth-of-type(3) { top: 84px; }
.page-leistung .l-mock-dash .l-dnav:nth-of-type(4) { top: 106px; }

.page-leistung .l-mock-dash .l-dnav svg { width: 100%; height: 100%;
  fill: currentColor; display: block; }

.page-leistung .l-mock-dash .l-dtop {
  position: absolute; left: 38px; right: 0; top: 0; height: 24px;
  border-bottom: 1px solid var(--color-border);
}
.page-leistung .l-mock-dash .l-dtop > .l-dmini {
  position: absolute; left: 12px; top: 8px; color: var(--color-text-muted);
}

.page-leistung .l-mock-dash .l-dkpis {
  position: absolute; left: 48px; right: 10px; top: 34px; height: 40px;
  display: flex; gap: 10px;
}
.page-leistung .l-mock-dash .l-dkpi {
  flex: 1; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 6px 9px; position: relative;
}

.page-leistung .l-mock-dash .l-dkpi .l-dmini { display: block; margin-bottom: 4px; line-height: 1; }
.page-leistung .l-mock-dash .l-dkpi b {
  display: block; font-family: var(--font-mono); font-size: var(--text-sm);
  font-weight: var(--weight-bold); color: var(--color-text); line-height: 1;
}
.page-leistung .l-mock-dash .l-dkpi em {
  position: absolute; right: 7px; bottom: 6px; font-style: normal;
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-success);
}

.page-leistung .l-mock-dash .l-dchart {
  position: absolute; left: 48px; top: 84px; width: 44%; bottom: 10px;
  border-bottom: 1px solid var(--color-border-strong);
  display: flex; align-items: flex-end; gap: 6px; padding: 0 4px;
}
.page-leistung .l-mock-dash .l-dbalken {
  flex: 1; border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--color-border-strong) 80%, transparent);
  transform-origin: bottom;
}
.page-leistung .l-mock-dash .l-dbalken--rot { background: var(--color-danger); }
.page-leistung .l-mock-dash .l-dbalken:nth-of-type(1) { height: 26%; }
.page-leistung .l-mock-dash .l-dbalken:nth-of-type(2) { height: 42%; }
.page-leistung .l-mock-dash .l-dbalken:nth-of-type(3) { height: 34%; }
.page-leistung .l-mock-dash .l-dbalken:nth-of-type(4) { height: 58%; }
.page-leistung .l-mock-dash .l-dbalken:nth-of-type(5) { height: 48%; }
.page-leistung .l-mock-dash .l-dbalken:nth-of-type(6) { height: 72%; }
.page-leistung .l-mock-dash .l-dbalken:nth-of-type(7) { height: 88%; }

.page-leistung .l-mock-dash .l-dfeed {
  position: absolute; left: calc(48px + 44% + 10px); right: 10px; top: 84px; bottom: 10px;
}
.page-leistung .l-mock-dash .l-dfeedtitel { display: block; margin-bottom: 6px; }

.page-leistung .l-mock-dash .l-dlauf {
  position: absolute; top: 20px; left: 0; right: 0; bottom: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.page-leistung .l-mock-dash .l-dstrom { display: block;
  animation: l-dash-strom 16s linear infinite; }
@keyframes l-dash-strom { to { transform: translateY(-50%); } }
.page-leistung .l-mock-dash .l-dzeile {
  position: relative; display: flex; align-items: center; gap: 7px;
  padding: 7px 9px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  margin-bottom: 6px;
  background: color-mix(in srgb, var(--card-bg) 70%, transparent);
}
.page-leistung .l-mock-dash .l-dzeile i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-border-strong); flex: none;
}
.page-leistung .l-mock-dash .l-dzeile--gruen i { background: var(--color-success); }
.page-leistung .l-mock-dash .l-dzeile--gruen .l-dmini { color: var(--color-success); }

  .page-leistung .l-mock-dash.l-bereit .l-dnav { opacity: 0; transform: translateX(-8px); }
  .page-leistung .l-mock-dash.l-bereit .l-dkpi { opacity: 0; transform: translateY(8px) scale(.94); }
  .page-leistung .l-mock-dash.l-bereit .l-dbalken { transform: scaleY(0); }
  .page-leistung .l-mock-dash.l-bereit .l-dfeed { opacity: 0; transform: translateY(12px); }

  .page-leistung .l-mock-dash.l-bereit.is-an .l-dnav {
    animation: l-dash-nav .45s ease-out forwards; }
  .page-leistung .l-mock-dash.l-bereit.is-an .l-dnav:nth-of-type(1) { animation-delay: .2s; }
  .page-leistung .l-mock-dash.l-bereit.is-an .l-dnav:nth-of-type(2) { animation-delay: .35s; }
  .page-leistung .l-mock-dash.l-bereit.is-an .l-dnav:nth-of-type(3) { animation-delay: .5s; }
  .page-leistung .l-mock-dash.l-bereit.is-an .l-dnav:nth-of-type(4) { animation-delay: .65s; }
  .page-leistung .l-mock-dash.l-bereit.is-an .l-dkpi {
    animation: l-dash-kpi .5s cubic-bezier(.34, 1.56, .64, 1) forwards; }
  .page-leistung .l-mock-dash.l-bereit.is-an .l-dkpi:nth-of-type(1) { animation-delay: .5s; }
  .page-leistung .l-mock-dash.l-bereit.is-an .l-dkpi:nth-of-type(2) { animation-delay: .75s; }
  .page-leistung .l-mock-dash.l-bereit.is-an .l-dkpi:nth-of-type(3) { animation-delay: 1s; }
  .page-leistung .l-mock-dash.l-bereit.is-an .l-dbalken {
    animation: l-dash-balken .6s cubic-bezier(.22, 1, .36, 1) forwards; }
  .page-leistung .l-mock-dash.l-bereit.is-an .l-dbalken:nth-of-type(1) { animation-delay: 1.2s; }
  .page-leistung .l-mock-dash.l-bereit.is-an .l-dbalken:nth-of-type(2) { animation-delay: 1.35s; }
  .page-leistung .l-mock-dash.l-bereit.is-an .l-dbalken:nth-of-type(3) { animation-delay: 1.5s; }
  .page-leistung .l-mock-dash.l-bereit.is-an .l-dbalken:nth-of-type(4) { animation-delay: 1.65s; }
  .page-leistung .l-mock-dash.l-bereit.is-an .l-dbalken:nth-of-type(5) { animation-delay: 1.8s; }
  .page-leistung .l-mock-dash.l-bereit.is-an .l-dbalken:nth-of-type(6) { animation-delay: 1.95s; }
  .page-leistung .l-mock-dash.l-bereit.is-an .l-dbalken:nth-of-type(7) { animation-delay: 2.1s; }
  .page-leistung .l-mock-dash.l-bereit.is-an .l-dfeed {
    animation: l-dash-zeile .5s 2.5s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes l-dash-nav    { to { opacity: var(--deck, .45); transform: none; } }
@keyframes l-dash-kpi    { to { opacity: 1; transform: none; } }
@keyframes l-dash-balken { to { transform: scaleY(1); } }
@keyframes l-dash-zeile  { to { opacity: 1; transform: none; } }

@media (max-width: 480px) {
  .page-leistung .l-mock-dash .l-dfeed { display: none; }
  .page-leistung .l-mock-dash .l-dchart { width: auto; right: 12px; }
}

.page-leistung .l-mock-puzzle { position: relative; overflow: hidden; }
.page-leistung .l-mock-puzzle .l-pzgitter {
  position: absolute; inset: 14px; display: grid;
  grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4px;
}
.page-leistung .l-mock-puzzle .l-pz {
  border: 1px solid var(--color-border-strong); border-radius: 4px;
  background: color-mix(in srgb, var(--card-bg) 70%, transparent); position: relative;
}

.page-leistung .l-mock-puzzle .l-pzgitter > :nth-child(1)  { border-top-left-radius: 12px; }
.page-leistung .l-mock-puzzle .l-pzgitter > :nth-child(10) { border-top-right-radius: 12px; }

.page-leistung .l-mock-puzzle .l-pzb {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold);
  letter-spacing: 0; color: var(--color-text); text-transform: uppercase;
}
.page-leistung .l-mock-puzzle .l-pzloch {
  border: 1px dashed var(--color-border-strong); border-radius: 4px; position: relative;
}
.page-leistung .l-mock-puzzle .l-pzfehlt {
  position: absolute; inset: -1px; border: 1px solid var(--color-border-strong);
  border-radius: 4px; background: var(--card-bg);
}

.page-leistung .l-mock-puzzle .l-pzpunkt::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--color-danger);
}

.page-leistung .l-mock-puzzle .l-pztausch-a { transform: translateX(calc(100% + 4px)); opacity: .12; z-index: 1; }
.page-leistung .l-mock-puzzle .l-pztausch-b { transform: translateX(calc(-100% - 4px)); opacity: .12; z-index: 1; }
.page-leistung .l-mock-puzzle .l-pzfin { color: var(--color-success); }

  .page-leistung .l-mock-puzzle.l-bereit .l-pzfehlt { opacity: 0; transform: translateY(-70px) rotate(-6deg); }
  .page-leistung .l-mock-puzzle.l-bereit .l-pzpunkt::after { opacity: 0; transform: scale(.3); }
  .page-leistung .l-mock-puzzle.l-bereit .l-pztausch-a,
  .page-leistung .l-mock-puzzle.l-bereit .l-pztausch-b { transform: none; opacity: 1; }
  .page-leistung .l-mock-puzzle.l-bereit .l-pzfin { color: var(--color-text); }

  .page-leistung .l-mock-puzzle.l-bereit.is-an .l-pzfehlt.l-pzfin {
    animation: l-pz-fall .9s cubic-bezier(.34, 1.56, .64, 1) .3s forwards,
               l-pz-gruen .8s ease-out 7.8s forwards; }
  .page-leistung .l-mock-puzzle.l-bereit.is-an .l-pzfehlt--s.l-pzfin { animation-delay: 1.8s, 7.8s; }
  .page-leistung .l-mock-puzzle.l-bereit.is-an .l-pzfehlt--d.l-pzfin { animation-delay: 3.3s, 7.8s; }
  .page-leistung .l-mock-puzzle.l-bereit.is-an .l-pzpunkt::after {
    animation: l-pz-punkt .45s cubic-bezier(.34, 1.56, .64, 1) 4.6s forwards; }
  .page-leistung .l-mock-puzzle.l-bereit.is-an .l-pztausch-a {
    animation: l-pz-ta 3.2s ease-in-out 5.4s forwards; }
  .page-leistung .l-mock-puzzle.l-bereit.is-an .l-pztausch-b {
    animation: l-pz-tb 3.2s ease-in-out 5.4s forwards; }
  .page-leistung .l-mock-puzzle.l-bereit.is-an .l-pzfin {
    animation: l-pz-gruen .8s ease-out 7.8s forwards; }
@keyframes l-pz-fall {
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}
@keyframes l-pz-punkt { to { opacity: 1; transform: scale(1); } }
@keyframes l-pz-ta {
  0%        { transform: none; opacity: 1; }
  28%, 72%  { transform: translateX(calc(100% + 4px)); opacity: 1; }
  100%      { transform: translateX(calc(100% + 4px)); opacity: .12; }
}
@keyframes l-pz-tb {
  0%        { transform: none; opacity: 1; }
  28%, 72%  { transform: translateX(calc(-100% - 4px)); opacity: 1; }
  100%      { transform: translateX(calc(-100% - 4px)); opacity: .12; }
}
@keyframes l-pz-gruen { to { color: var(--color-success); } }

.page-leistung .l-bstn { padding: 0 0 clamp(1.6rem, 3vw, 2.4rem); text-align: left; }
.page-leistung .l-bstn__karte {
  background: var(--card-bg); border: var(--card-border);
  border-radius: var(--card-radius); overflow: hidden;
}
.page-leistung .l-bstn__inhalt {
  --l-achse: .5rem; --l-einzug: calc(var(--l-achse) + 1.2rem);
  padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.3rem, 3vw, 2.2rem);
}
.page-leistung .l-bstn__titel {
  font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: var(--tracking-tight);
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  position: relative; padding-left: var(--l-einzug);
}

.page-leistung .l-bstn__titel::before {
  content: ""; position: absolute; left: calc(var(--l-achse) - .15em); top: .38em;
  width: .3em; height: .3em; border-radius: 50%; background: var(--color-danger);
}

.page-leistung .l-bstn__fuss {
  border-top: 1px dashed var(--color-border-strong);
  padding: var(--sp-m) clamp(1.3rem, 3vw, 2.2rem);
}
.page-leistung .l-preis {
  font-family: var(--font-mono); font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  font-weight: var(--weight-bold); color: var(--color-text); white-space: nowrap;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-l); width: 100%; text-align: left;
  appearance: none; -webkit-appearance: none; background: transparent;
  border: 0; padding: 0; cursor: pointer;
}

.page-leistung .l-preis__status {
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  font-family: var(--font-body); font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight); color: var(--color-text);
  border: 1px solid currentColor; border-radius: var(--btn-radius);
  min-height: var(--btn-height); padding: var(--btn-pad-y) var(--btn-pad-x);
  transition: background var(--ease-fast), color var(--ease-fast);
}
.page-leistung .l-preis:hover .l-preis__status {
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
}
.page-leistung .l-preis__haken { width: 1.1em; height: 1.1em; display: none; }
.page-leistung .l-preis__status-an { display: none; }
.page-leistung .l-preis.is-gewaehlt .l-preis__status {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 8%, transparent);
}
.page-leistung .l-preis.is-gewaehlt .l-preis__haken { display: inline-block; }
.page-leistung .l-preis.is-gewaehlt .l-preis__status-aus { display: none; }
.page-leistung .l-preis.is-gewaehlt .l-preis__status-an { display: inline; }

.page-leistung .l-preishinweis {
  margin: var(--sp-xl) 0 clamp(1.6rem, 3vw, 2.4rem); text-align: right;
  font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--color-text-subtle); letter-spacing: var(--tracking-label);
}

.page-leistung .l-baum {
  display: grid; grid-template-columns: .85fr 1.15fr;
  gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start;
}
.page-leistung .l-bstn__intro {
  font-size: var(--text-xl); line-height: var(--leading-snug);
  font-weight: var(--weight-semibold); color: var(--color-text);
  max-width: 52ch; margin: 0;
}

.page-leistung .l-baum .l-bstn__intro { margin-left: var(--l-einzug); }
.page-leistung .l-schiene { display: flex; flex-direction: column; }
.page-leistung .l-station { position: relative; padding-left: var(--l-einzug); padding-bottom: var(--sp-xl); }
.page-leistung .l-station:last-child { padding-bottom: 0; }

.page-leistung .l-station h4 { position: relative; }

.page-leistung .l-station h4::before {
  content: ""; position: absolute; left: calc(var(--l-achse) - var(--l-einzug) - 6px); top: 50%;
  transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%; background: var(--color-danger); z-index: 1;
}
.page-leistung .l-station h4 {
  margin: 0 0 var(--sp-xs); font-family: var(--font-mono); font-size: var(--text-xs);
  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--color-danger);
}
.page-leistung .l-station p {
  margin: 0; color: var(--color-text-muted); font-size: var(--text-base);
  line-height: var(--leading-normal); max-width: 58ch;
}

.page-leistung .l-mock--buehne {
  display: flex; justify-content: center; align-items: center; position: relative;
  background: color-mix(in srgb, var(--color-text) 4%, var(--card-bg));
  border-bottom: 1px solid var(--color-border);
}
.page-leistung .l-mock--buehne > * { width: 100%; height: clamp(200px, 26vw, 260px); }

.page-leistung .l-mockkarte { background: transparent; border: 0; border-radius: 0; }

.page-leistung .l-mock-logo { display: grid; place-items: center;
  font-weight: var(--weight-extrabold); font-size: 3.2rem; letter-spacing: var(--tracking-tight); }
.page-leistung .l-mock-logo span { position: relative; }
.page-leistung .l-mock-logo span::after {
  content: ""; position: absolute; right: -.34em; bottom: .09em; width: .16em; height: .16em;
  border-radius: 50%; background: var(--color-danger); border: 1px solid var(--color-danger);
}

  .page-leistung .l-mock-logo.l-bereit span {
    color: var(--color-bg);
    -webkit-text-stroke: 1px color-mix(in srgb, var(--color-text) 55%, transparent);
    paint-order: stroke fill;
  }
  .page-leistung .l-mock-logo.l-bereit span::before {
    content: attr(data-wort); position: absolute; inset: 0;
    color: var(--color-text); -webkit-text-stroke: 1px var(--color-text);
    clip-path: inset(-5% 100% -5% 0);
  }
  .page-leistung .l-mock-logo.l-bereit span::after {
    background: transparent; border-color: var(--color-danger);
  }

  .page-leistung .l-mock-logo.l-bereit.is-an span::before {
    animation: l-fuellen 1.3s cubic-bezier(.22, 1, .36, 1) .5s forwards;
  }
  .page-leistung .l-mock-logo.l-bereit.is-an span::after {
    animation: l-logo-punkt .5s cubic-bezier(.34, 1.56, .64, 1) 1.9s forwards;
  }

@keyframes l-logo-punkt {
  60%  { transform: scale(1.3); background: var(--color-danger); }
  100% { transform: scale(1); background: var(--color-danger); border-color: var(--color-danger); }
}

.page-leistung .l-mock-cd { padding: var(--sp-xl); display: flex; flex-direction: column; gap: var(--sp-l); }
.page-leistung .l-mock-cd .l-typo { font-size: var(--text-xl); font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-snug); line-height: var(--leading-snug); }
.page-leistung .l-mock-cd .l-typo small { display: block; font-family: var(--font-mono);
  font-weight: var(--weight-regular); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-subtle); margin-top: var(--sp-xs); }
.page-leistung .l-mock-cd .l-reihe { display: flex; gap: var(--sp-s); flex: 1; }
.page-leistung .l-farbe { flex: 1; border-radius: var(--radius-sm); position: relative; }
.page-leistung .l-farbe i { position: absolute; bottom: .3rem; left: .4rem; font-style: normal;
  font-family: var(--font-mono); font-size: var(--text-2xs); opacity: .75; }

.page-leistung .l-farbe--1 { background: #101014; } .page-leistung .l-farbe--1 .l-hex { color: #f2ede1; }
.page-leistung .l-farbe--2 { background: #ff2b2b; } .page-leistung .l-farbe--2 .l-hex { color: #ffffff; }
.page-leistung .l-farbe--3 { background: #e6e5d9; } .page-leistung .l-farbe--3 .l-hex { color: #101014; }
.page-leistung .l-farbe--4 { background: #a2a29b; } .page-leistung .l-farbe--4 .l-hex { color: #101014; }

  .page-leistung .l-mock-cd.l-bereit .l-farbe { background: transparent;
    border: 1px dashed var(--color-border-strong); }
  .page-leistung .l-mock-cd.l-bereit .l-hex { color: var(--color-text-subtle);
    display: inline-block; overflow: hidden; white-space: nowrap; width: 0; }

  .page-leistung .l-mock-cd.l-bereit.is-an .l-farbe--1 .l-hex { animation: l-cd-tippen .9s steps(7, end) .5s forwards,  l-cd-hex1 .9s step-end .5s forwards; }
  .page-leistung .l-mock-cd.l-bereit.is-an .l-farbe--1        { animation: l-cd-f1 .9s step-end .5s forwards; }
  .page-leistung .l-mock-cd.l-bereit.is-an .l-farbe--2 .l-hex { animation: l-cd-tippen .9s steps(7, end) 1.7s forwards, l-cd-hex2 .9s step-end 1.7s forwards; }
  .page-leistung .l-mock-cd.l-bereit.is-an .l-farbe--2        { animation: l-cd-f2 .9s step-end 1.7s forwards; }
  .page-leistung .l-mock-cd.l-bereit.is-an .l-farbe--3 .l-hex { animation: l-cd-tippen .9s steps(7, end) 2.9s forwards, l-cd-hex3 .9s step-end 2.9s forwards; }
  .page-leistung .l-mock-cd.l-bereit.is-an .l-farbe--3        { animation: l-cd-f3 .9s step-end 2.9s forwards; }
  .page-leistung .l-mock-cd.l-bereit.is-an .l-farbe--4 .l-hex { animation: l-cd-tippen .9s steps(7, end) 4.1s forwards, l-cd-hex4 .9s step-end 4.1s forwards; }
  .page-leistung .l-mock-cd.l-bereit.is-an .l-farbe--4        { animation: l-cd-f4 .9s step-end 4.1s forwards; }
@keyframes l-cd-tippen { to { width: 7ch; } }

@keyframes l-cd-f1 { 0% { background: transparent; } 33% { background: #333340; }
                     66% { background: #16161c; } 100% { background: #101014; border-color: #101014; } }
@keyframes l-cd-f2 { 0% { background: transparent; } 33% { background: #ff8866; }
                     66% { background: #ff4433; } 100% { background: #ff2b2b; border-color: #ff2b2b; } }
@keyframes l-cd-f3 { 0% { background: transparent; } 33% { background: #fff8e0; }
                     66% { background: #ece9dd; } 100% { background: #e6e5d9; border-color: #e6e5d9; } }
@keyframes l-cd-f4 { 0% { background: transparent; } 33% { background: #c9c9c0; }
                     66% { background: #adada5; } 100% { background: #a2a29b; border-color: #a2a29b; } }

@keyframes l-cd-hex1 { 66% { color: var(--color-text-subtle); } 100% { color: #f2ede1; } }
@keyframes l-cd-hex2 { 66% { color: var(--color-text-subtle); } 100% { color: #ffffff; } }
@keyframes l-cd-hex3 { 66% { color: var(--color-text-subtle); } 100% { color: #101014; } }
@keyframes l-cd-hex4 { 66% { color: var(--color-text-subtle); } 100% { color: #101014; } }

.page-leistung .l-mock-sg { padding: var(--sp-xl); display: flex; flex-direction: column; gap: var(--sp-m); }
.page-leistung .l-mock-sg .l-kopfzeile { font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-subtle);
  display: flex; justify-content: space-between; }
.page-leistung .l-mock-sg .l-schutzzone { border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm); flex: 1; display: grid; place-items: center;
  position: relative; }
.page-leistung .l-mock-sg .l-schutzzone b { font-size: 2rem; font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight); position: relative; }
.page-leistung .l-mock-sg .l-schutzzone b::after { content: ""; position: absolute; right: -.3em;
  bottom: .12em; width: .14em; height: .14em; border-radius: 50%; background: var(--color-danger); }

.page-leistung .l-mock-sg .l-schutzzone::before { content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background-image:
    repeating-linear-gradient(to right, var(--color-border) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(to bottom, var(--color-border) 0 1px, transparent 1px 28px);
  -webkit-mask-image: repeating-linear-gradient(45deg, #000 0 4px, transparent 4px 8px);
  mask-image: repeating-linear-gradient(45deg, #000 0 4px, transparent 4px 8px); }

.page-leistung .l-mock-sg .l-mass { position: absolute; background: var(--color-text-subtle); }
.page-leistung .l-mock-sg .l-mass::before,
.page-leistung .l-mock-sg .l-mass::after { content: ""; position: absolute;
  background: var(--color-text-subtle); }
.page-leistung .l-mock-sg .l-mass--links { top: 50%; left: 0; height: 1px;
  width: calc(50% - 1.15rem); }
.page-leistung .l-mock-sg .l-mass--links::before { left: 0; top: -4px; width: 1px; height: 9px; }
.page-leistung .l-mock-sg .l-mass--links::after  { right: 0; top: -4px; width: 1px; height: 9px; }
.page-leistung .l-mock-sg .l-mass--links .l-wert { left: 50%; top: -1.35rem; transform: translateX(-50%); }
.page-leistung .l-mock-sg .l-mass--oben { left: 50%; top: 0; width: 1px;
  height: calc(50% - 1.35rem); }
.page-leistung .l-mock-sg .l-mass--oben::before { top: 0; left: -4px; width: 9px; height: 1px; }
.page-leistung .l-mock-sg .l-mass--oben::after  { bottom: 0; left: -4px; width: 9px; height: 1px; }
.page-leistung .l-mock-sg .l-mass--oben .l-wert { left: .55rem; top: 50%; transform: translateY(-50%); }

.page-leistung .l-mock-sg .l-wert { position: absolute; font-style: normal;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); color: var(--color-text-subtle);
  display: inline-grid; grid-auto-flow: column; white-space: nowrap; }
.page-leistung .l-mock-sg .l-wert i { grid-area: 1 / 1; justify-self: end;
  font-style: normal; opacity: 0; }
.page-leistung .l-mock-sg .l-wert i:nth-of-type(4) { opacity: 1; }

  .page-leistung .l-mock-sg.l-bereit .l-schutzzone b { transform: translate(-2.2rem, -1.1rem); }
  .page-leistung .l-mock-sg.l-bereit .l-mass--links { top: calc(50% - 1.1rem);
    width: calc(50% - 1.15rem - 2.2rem); }
  .page-leistung .l-mock-sg.l-bereit .l-mass--oben { left: calc(50% - 2.2rem);
    height: calc(50% - 1.35rem - 1.1rem); }
  .page-leistung .l-mock-sg.l-bereit .l-wert i { opacity: 0; }
  .page-leistung .l-mock-sg.l-bereit .l-wert i:nth-of-type(1) { opacity: 1; }

  .page-leistung .l-mock-sg.l-bereit.is-an .l-schutzzone b {
    animation: l-sg-fahrt 5s cubic-bezier(.45, .05, .25, 1) .5s forwards; }
  .page-leistung .l-mock-sg.l-bereit.is-an .l-mass--links {
    animation: l-sg-mess-x 5s cubic-bezier(.45, .05, .25, 1) .5s forwards; }
  .page-leistung .l-mock-sg.l-bereit.is-an .l-mass--oben {
    animation: l-sg-mess-y 5s cubic-bezier(.45, .05, .25, 1) .5s forwards; }
  .page-leistung .l-mock-sg.l-bereit.is-an .l-wert i:nth-of-type(1) { animation: l-sg-s1 5s linear .5s forwards; }
  .page-leistung .l-mock-sg.l-bereit.is-an .l-wert i:nth-of-type(2) { animation: l-sg-s2 5s linear .5s forwards; }
  .page-leistung .l-mock-sg.l-bereit.is-an .l-wert i:nth-of-type(3) { animation: l-sg-s3 5s linear .5s forwards; }
  .page-leistung .l-mock-sg.l-bereit.is-an .l-wert i:nth-of-type(4) { animation: l-sg-s4 5s linear .5s forwards; }

@keyframes l-sg-fahrt {
  0%, 18%   { transform: translate(-2.2rem, -1.1rem); }
  38%, 56%  { transform: translate(-1rem, 1.4rem); }
  80%, 100% { transform: none; }
}

@keyframes l-sg-mess-x {
  0%, 18%   { top: calc(50% - 1.1rem); width: calc(50% - 1.15rem - 2.2rem); }
  38%, 56%  { top: calc(50% + 1.4rem); width: calc(50% - 1.15rem - 1rem); }
  80%, 100% { top: 50%; width: calc(50% - 1.15rem); }
}
@keyframes l-sg-mess-y {
  0%, 18%   { left: calc(50% - 2.2rem); height: calc(50% - 1.35rem - 1.1rem); }
  38%, 56%  { left: calc(50% - 1rem); height: calc(50% - 1.35rem + 1.4rem); }
  80%, 100% { left: 50%; height: calc(50% - 1.35rem); }
}

@keyframes l-sg-s1 { 0%, 20% { opacity: 1; } 23%, 100% { opacity: 0; } }
@keyframes l-sg-s2 { 0%, 23% { opacity: 0; } 26%, 36% { opacity: 1; } 39%, 100% { opacity: 0; } }
@keyframes l-sg-s3 { 0%, 39% { opacity: 0; } 42%, 62% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes l-sg-s4 { 0%, 66% { opacity: 0; } 70%, 100% { opacity: 1; } }
.page-leistung .l-mock-sg .l-zeilen { display: flex; flex-direction: column; gap: var(--sp-xs); }
.page-leistung .l-mock-sg .l-zeilen i { height: 6px; border-radius: 3px;
  background: var(--color-border-strong); display: block; }
.page-leistung .l-mock-sg .l-zeilen i:nth-child(2) { width: 72%; }
.page-leistung .l-mock-sg .l-zeilen i:nth-child(3) { width: 48%; }

.page-leistung .l-mock-ga { padding: var(--sp-l) var(--sp-xl); display: flex;
  flex-direction: column; justify-content: space-between; }
.page-leistung .l-mock-ga .l-wm { font-weight: var(--weight-extrabold); font-size: var(--text-body);
  letter-spacing: var(--tracking-snug); }
.page-leistung .l-mock-ga .l-wm::after { content: ""; display: inline-block; width: .32em; height: .32em;
  border-radius: 50%; background: var(--color-danger); margin-left: .15em; }
.page-leistung .l-mock-ga .l-zeile { font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: .08em; color: var(--color-text-subtle); line-height: 1.7; }

.page-leistung .l-mock-ga { position: relative; overflow: hidden; }
.page-leistung .l-mock-ga .l-vkdaten { display: flex; flex-direction: column; gap: var(--sp-m); }
.page-leistung .l-mock-ga .l-vkperson { display: flex; flex-direction: column; gap: .18rem; }

.page-leistung .l-mock-ga .l-vkname { font-size: var(--text-body);
  font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-snug);
  text-transform: uppercase; line-height: 1.1; margin-bottom: .15rem; }
.page-leistung .l-mock-ga .l-vkperson i { font-style: normal; font-family: var(--font-mono);
  font-size: var(--text-2xs); letter-spacing: .05em; color: var(--color-text-subtle); }
.page-leistung .l-mock-ga .l-kontaktzeile { display: flex; align-items: center; gap: var(--sp-m);
  font-family: var(--font-mono); font-size: .56rem; letter-spacing: .03em;
  color: var(--color-text-subtle); white-space: nowrap; }
.page-leistung .l-mock-ga .l-kontaktzeile > span { display: inline-flex; align-items: center; gap: .3rem; }
.page-leistung .l-mock-ga .l-kontaktzeile svg { flex: none; color: var(--color-danger); }

.page-leistung .l-mock-ga .l-vk1 { position: absolute; inset: 0;
  background: var(--card-bg); border-radius: inherit;
  display: grid; place-items: center; opacity: 0; visibility: hidden; }
.page-leistung .l-mock-ga .l-vk1logo { font-size: 2.6rem; font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight); position: relative; }
.page-leistung .l-mock-ga .l-vk1logo::after { content: ""; position: absolute; right: -.34em;
  bottom: .09em; width: .16em; height: .16em; border-radius: 50%; background: var(--color-danger); }

  .page-leistung .l-mock-ga.l-bereit .l-vk1 { opacity: 1; visibility: visible; }
  .page-leistung .l-mock-ga.l-bereit .l-wm { clip-path: inset(-5% 100% -5% 0); }
  .page-leistung .l-mock-ga.l-bereit .l-vkname { clip-path: inset(-5% 100% -5% 0); }
  .page-leistung .l-mock-ga.l-bereit .l-vkperson i { display: inline-block; overflow: hidden;
    white-space: nowrap; width: 0; }
  .page-leistung .l-mock-ga.l-bereit .l-kontaktzeile > span { opacity: 0; }

  .page-leistung .l-mock-ga.l-bereit.is-an .l-vk1 {
    animation: l-ga-weg .8s cubic-bezier(.5, 0, .7, .4) 1.7s forwards; }

  .page-leistung .l-mock-ga.l-bereit.is-an .l-wm {
    animation: l-ga-wisch 1s steps(10, end) 2.7s forwards; }
  .page-leistung .l-mock-ga.l-bereit.is-an .l-vkname {
    animation: l-ga-wisch 1.3s steps(13, end) 3.9s forwards; }
  .page-leistung .l-mock-ga.l-bereit.is-an .l-vkperson i:nth-of-type(1) {
    animation: l-ga-tipp13 .9s steps(13, end) 5.4s forwards; }
  .page-leistung .l-mock-ga.l-bereit.is-an .l-vkperson i:nth-of-type(2) {
    animation: l-ga-tipp16 1.05s steps(16, end) 6.5s forwards; }
  .page-leistung .l-mock-ga.l-bereit.is-an .l-vkperson i:nth-of-type(3) {
    animation: l-ga-tipp9 .6s steps(9, end) 7.7s forwards; }
  .page-leistung .l-mock-ga.l-bereit.is-an .l-kontaktzeile > span:nth-of-type(1) {
    animation: l-os-auf .3s linear 8.5s forwards; }
  .page-leistung .l-mock-ga.l-bereit.is-an .l-kontaktzeile > span:nth-of-type(2) {
    animation: l-os-auf .3s linear 8.8s forwards; }
  .page-leistung .l-mock-ga.l-bereit.is-an .l-kontaktzeile > span:nth-of-type(3) {
    animation: l-os-auf .3s linear 9.1s forwards; }
@keyframes l-ga-weg { to { transform: translateX(115%); opacity: 0; visibility: hidden; } }
@keyframes l-ga-wisch { to { clip-path: inset(-5% -6% -5% -2%); } }

@keyframes l-ga-tipp13 { to { width: calc(15ch + 13 * 0.05em); } }
@keyframes l-ga-tipp16 { to { width: calc(18ch + 16 * 0.05em); } }
@keyframes l-ga-tipp9  { to { width: calc(11ch + 9 * 0.05em); } }

.page-leistung .l-mock-nm { padding: var(--sp-xl); display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: var(--sp-l);
  font-weight: var(--weight-extrabold); font-size: var(--text-xl); letter-spacing: var(--tracking-snug); }
.page-leistung .l-mock-nm .l-final { position: relative; width: max-content; }
.page-leistung .l-mock-nm .l-final::after { content: ""; position: absolute; right: -.5em; bottom: .16em;
  width: .18em; height: .18em; border-radius: 50%; background: var(--color-danger); }

.page-leistung .l-mock-nm .l-slogans { display: inline-flex; align-items: baseline;
  font-family: var(--font-mono); font-weight: var(--weight-regular);
  font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--color-text-muted); }
.page-leistung .l-mock-nm .l-slogstapel { display: inline-grid; justify-items: start; }
.page-leistung .l-mock-nm .l-slog { grid-area: 1 / 1; display: block; overflow: hidden;
  white-space: nowrap; font-style: normal; width: 0;
  border-right: 2px solid transparent;

  --slogw: 0ch; }
.page-leistung .l-mock-nm .l-slog--1 { --slogw: calc(17.5ch + 17 * 0.12em); }
.page-leistung .l-mock-nm .l-slog--2 { --slogw: calc(32.5ch + 32 * 0.12em); }
.page-leistung .l-mock-nm .l-slog--3 { --slogw: calc(27.5ch + 27 * 0.12em); width: var(--slogw); }

:lang(en) .page-leistung .l-mock-nm .l-slog--1,
html[lang="en"] .page-leistung .l-mock-nm .l-slog--1 { --slogw: calc(18.5ch + 18 * 0.12em); }
html[lang="en"] .page-leistung .l-mock-nm .l-slog--2 { --slogw: calc(29.5ch + 29 * 0.12em); }
html[lang="en"] .page-leistung .l-mock-nm .l-slog--3 { --slogw: calc(27.5ch + 27 * 0.12em); }
.page-leistung .l-mock-nm .l-nm-punkt { width: .35em; height: .35em; border-radius: 50%;
  background: var(--color-danger); margin-left: .35em; align-self: center; }

  .page-leistung .l-mock-nm.l-bereit .l-slog--3 { width: 0; }
  .page-leistung .l-mock-nm.l-bereit .l-nm-punkt { opacity: 0; }

  .page-leistung .l-mock-nm.l-bereit.is-an .l-slog--1 {
    animation: l-nm-tipp 1.3s steps(17, end) .6s forwards,
               l-nm-loesch .9s steps(17, end) 3.4s forwards,
               l-nm-blink .8s linear .4s 5; }
  .page-leistung .l-mock-nm.l-bereit.is-an .l-slog--2 {
    animation: l-nm-tipp 1.9s steps(32, end) 4.6s forwards,
               l-nm-loesch 1.1s steps(32, end) 8s forwards,
               l-nm-blink .8s linear 4.5s 6; }
  .page-leistung .l-mock-nm.l-bereit.is-an .l-slog--3 {
    animation: l-nm-tipp 1.8s steps(27, end) 9.4s forwards,
               l-nm-blink .8s linear 9.3s 6; }
  .page-leistung .l-mock-nm.l-bereit.is-an .l-nm-punkt {
    animation: l-os-auf .35s cubic-bezier(.34, 1.56, .64, 1) 11.6s forwards; }
@keyframes l-nm-tipp   { from { width: 0; } to { width: var(--slogw); } }
@keyframes l-nm-loesch { from { width: var(--slogw); } to { width: 0; } }
@keyframes l-nm-blink  { 0%, 49% { border-right-color: currentColor; }
                         50%, 100% { border-right-color: transparent; } }

.page-leistung .l-mock-korr { position: relative; display: grid; place-items: center; }
.page-leistung .l-mock-korr .l-korrzeile { display: flex; align-items: baseline;
  font-weight: var(--weight-extrabold); font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  letter-spacing: var(--tracking-snug); white-space: nowrap;

  width: var(--korr-zeile-b, auto); justify-content: flex-start; }
.page-leistung .l-mock-korr .l-korralt,
.page-leistung .l-mock-korr .l-korrneu { display: inline-block; overflow: hidden;
  white-space: nowrap; font-style: normal; }

.page-leistung .l-mock-korr .l-korralt { width: 0; }
.page-leistung .l-mock-korr .l-korrneu { color: var(--color-success); }
.page-leistung .l-mock-korr .l-korrcursor { width: 3px; height: 1em;
  align-self: center; margin-left: .12em; background: var(--color-text);
  animation: l-korr-blink 1s steps(1, end) infinite; }
.page-leistung .l-mock-korr .l-korrfuss { position: absolute; bottom: 12px; left: 50%;
  transform: translateX(-50%); font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-subtle); white-space: nowrap;

  text-indent: var(--tracking-label); }

  .page-leistung .l-mock-korr.l-bereit .l-korralt { width: 0; }
  .page-leistung .l-mock-korr.l-bereit .l-korrneu { width: 0; }
  .page-leistung .l-mock-korr.l-bereit .l-korrfuss { opacity: 0; }

  .page-leistung .l-mock-korr.l-bereit.is-an .l-korralt {
    animation: l-korr-tipp-alt 1s steps(11, end) .6s forwards,
               l-korr-loesch .7s steps(11, end) 2.8s forwards; }
  .page-leistung .l-mock-korr.l-bereit.is-an .l-korrneu {
    animation: l-korr-tipp-neu 1.2s steps(15, end) 3.7s forwards; }

  .page-leistung .l-mock-korr.l-bereit.is-an .l-korrfuss {
    animation: l-korr-fuss .45s ease-out 5.4s forwards; }
@keyframes l-korr-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes l-korr-fuss {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes l-korr-tipp-alt { from { width: 0; } to { width: var(--korr-alt-b, 5.6em); } }
@keyframes l-korr-loesch { from { width: var(--korr-alt-b, 5.6em); } to { width: 0; } }
@keyframes l-korr-tipp-neu { from { width: 0; } to { width: var(--korr-neu-b, 7.6em); } }

.page-leistung .l-mock-fo { padding: var(--sp-xl); display: flex; flex-direction: column; gap: var(--sp-m); }
.page-leistung .l-mock-fo .l-sucher { flex: 1; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); display: grid; place-items: center;
  position: relative; overflow: hidden; }

.page-leistung .l-mock-fo .l-motiv { font-weight: var(--weight-extrabold);
  font-size: var(--text-lg); letter-spacing: var(--tracking-snug); position: relative; }
.page-leistung .l-mock-fo .l-motiv::after { content: ""; position: absolute; right: -.42em;
  bottom: .14em; width: .16em; height: .16em; border-radius: 50%; background: var(--color-danger); }
.page-leistung .l-mock-fo .l-fokus { width: 2.2rem; height: 2.2rem;
  border: 2px solid var(--color-danger); border-radius: var(--radius-sm);
  position: absolute; inset: 0; margin: auto; opacity: 0; }
.page-leistung .l-mock-fo .l-fokus::after { content: ""; position: absolute; inset: 0; margin: auto;
  width: .3rem; height: .3rem; border-radius: 50%; background: currentColor;
  color: var(--color-danger); }
.page-leistung .l-mock-fo .l-blitz { position: absolute; inset: 0;
  background: var(--color-on-accent); opacity: 0; pointer-events: none; }
.page-leistung .l-mock-fo .l-exif { font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-subtle);
  display: flex; justify-content: space-between; }
.page-leistung .l-mock-fo .l-ex { display: inline-grid; }
.page-leistung .l-mock-fo .l-ex i { grid-area: 1 / 1; font-style: normal;
  white-space: nowrap; opacity: 0; }
.page-leistung .l-mock-fo .l-ex i:nth-of-type(3) { opacity: 1; }

  .page-leistung .l-mock-fo.l-bereit .l-sucher { border-style: dashed; }
  .page-leistung .l-mock-fo.l-bereit .l-motiv { filter: blur(5px) brightness(.55); }
  .page-leistung .l-mock-fo.l-bereit .l-fokus { opacity: 1; border-color: var(--color-danger); }
  .page-leistung .l-mock-fo.l-bereit .l-ex i { opacity: 0; }
  .page-leistung .l-mock-fo.l-bereit .l-ex i:nth-of-type(1) { opacity: 1; }

  .page-leistung .l-mock-fo.l-bereit.is-an .l-motiv {
    animation: l-fo-fokus 2.7s ease-in-out .5s forwards; }
  .page-leistung .l-mock-fo.l-bereit.is-an .l-fokus {
    animation: l-fo-puls .9s ease-in-out .5s 3,
               l-fo-rast 1ms linear 3.2s forwards,
               l-os-zu .25s linear 3.9s forwards; }
  .page-leistung .l-mock-fo.l-bereit.is-an .l-ex i:nth-of-type(1) {
    animation: l-os-zu .15s linear 1.4s forwards; }
  .page-leistung .l-mock-fo.l-bereit.is-an .l-ex i:nth-of-type(2) {
    animation: l-os-auf .15s linear 1.45s forwards, l-os-zu .15s linear 2.5s forwards; }
  .page-leistung .l-mock-fo.l-bereit.is-an .l-ex i:nth-of-type(3) {
    animation: l-os-auf .15s linear 2.55s forwards; }
  .page-leistung .l-mock-fo.l-bereit.is-an .l-blitz {
    animation: l-fo-blitz .4s ease-out 3.5s; }
  .page-leistung .l-mock-fo.l-bereit.is-an .l-sucher {
    animation: l-fo-rahmen 1ms linear 3.8s forwards; }

@keyframes l-fo-fokus {
  0%   { filter: blur(5px) brightness(.55); }
  35%  { filter: blur(1.2px) brightness(.7); }
  55%  { filter: blur(2.8px) brightness(.8); }
  80%  { filter: blur(.4px) brightness(.95); }
  100% { filter: blur(0) brightness(1); }
}
@keyframes l-fo-puls { 50% { transform: scale(.9); } }
@keyframes l-fo-rast { to { border-color: var(--color-success); color: var(--color-success); } }
@keyframes l-fo-blitz { 0% { opacity: 0; } 25% { opacity: .95; } 100% { opacity: 0; } }
@keyframes l-fo-rahmen { to { border-style: solid; } }

.page-leistung .l-mock-vd { padding: var(--sp-xl); display: flex; flex-direction: column; gap: var(--sp-m); }
.page-leistung .l-mock-vd .l-buehne { flex: 1; position: relative; }
.page-leistung .l-mock-vd .l-szene { position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-l);
  opacity: 0; }
.page-leistung .l-mock-vd .l-szene--1 { flex-direction: column; gap: var(--sp-xs); }
.page-leistung .l-mock-vd .l-szene--1 b { font-size: 2.1rem; font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight); line-height: 1; }
.page-leistung .l-mock-vd .l-szene--1 i { font-style: normal; font-family: var(--font-mono);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-text-subtle); }
.page-leistung .l-mock-vd .l-szene--2 svg { width: 1.7rem; height: 1.7rem;
  color: var(--color-text-muted); }
.page-leistung .l-mock-vd .l-szene--3 { opacity: 1; }
.page-leistung .l-mock-vd .l-endcard { font-weight: var(--weight-extrabold);
  font-size: var(--text-lg); letter-spacing: var(--tracking-snug); position: relative; }
.page-leistung .l-mock-vd .l-endcard::after { content: ""; position: absolute; right: -.42em;
  bottom: .14em; width: .16em; height: .16em; border-radius: 50%; background: var(--color-danger); }
.page-leistung .l-mock-vd .l-play { position: absolute; inset: 0;
  display: grid; place-items: center; opacity: 0; }
.page-leistung .l-mock-vd .l-play::after { content: ""; width: 0; height: 0;
  border-left: 1.4rem solid var(--color-text); border-top: .9rem solid transparent;
  border-bottom: .9rem solid transparent; margin-left: .3rem; }
.page-leistung .l-mock-vd .l-spur { height: 6px; border-radius: 3px;
  background: var(--color-border-strong); overflow: hidden; }
.page-leistung .l-mock-vd .l-spur i { display: block; height: 100%; width: 100%;
  border-radius: 3px; background: var(--color-danger); }
.page-leistung .l-mock-vd .l-zeitcode { font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); color: var(--color-text-subtle);
  display: flex; justify-content: space-between; }
.page-leistung .l-mock-vd .l-tc { display: inline-grid; }
.page-leistung .l-mock-vd .l-tc i { grid-area: 1 / 1; font-style: normal;
  white-space: nowrap; opacity: 0; }
.page-leistung .l-mock-vd .l-tc i:nth-of-type(5) { opacity: 1; }

  .page-leistung .l-mock-vd.l-bereit .l-play { opacity: 1; }
  .page-leistung .l-mock-vd.l-bereit .l-szene--3 { opacity: 0; }
  .page-leistung .l-mock-vd.l-bereit .l-spur i { width: 0; }
  .page-leistung .l-mock-vd.l-bereit .l-tc i { opacity: 0; }
  .page-leistung .l-mock-vd.l-bereit .l-tc i:nth-of-type(1) { opacity: 1; }
  .page-leistung .l-mock-vd.l-bereit .l-szene--2 svg { opacity: 0; }

  .page-leistung .l-mock-vd.l-bereit.is-an .l-play {
    animation: l-vd-klick .4s ease .5s, l-os-zu .2s linear .9s forwards; }
  .page-leistung .l-mock-vd.l-bereit.is-an .l-spur i {
    animation: l-vd-spur 9s linear 1.1s forwards; }
  .page-leistung .l-mock-vd.l-bereit.is-an .l-tc i:nth-of-type(1) { animation: l-os-zu .1s linear 3.35s forwards; }
  .page-leistung .l-mock-vd.l-bereit.is-an .l-tc i:nth-of-type(2) {
    animation: l-os-auf .1s linear 3.4s forwards, l-os-zu .1s linear 5.6s forwards; }
  .page-leistung .l-mock-vd.l-bereit.is-an .l-tc i:nth-of-type(3) {
    animation: l-os-auf .1s linear 5.65s forwards, l-os-zu .1s linear 7.85s forwards; }
  .page-leistung .l-mock-vd.l-bereit.is-an .l-tc i:nth-of-type(4) {
    animation: l-os-auf .1s linear 7.9s forwards, l-os-zu .1s linear 10s forwards; }
  .page-leistung .l-mock-vd.l-bereit.is-an .l-tc i:nth-of-type(5) { animation: l-os-auf .1s linear 10.05s forwards; }
  .page-leistung .l-mock-vd.l-bereit.is-an .l-szene--1 {
    animation: l-os-auf .15s linear 1.1s forwards, l-os-zu .1s linear 4.1s forwards; }
  .page-leistung .l-mock-vd.l-bereit.is-an .l-szene--1 b {
    animation: l-vd-zoom 3s ease-out 1.1s forwards; }
  .page-leistung .l-mock-vd.l-bereit.is-an .l-szene--2 {
    animation: l-os-auf .1s linear 4.2s forwards, l-os-zu .1s linear 7.1s forwards; }
  .page-leistung .l-mock-vd.l-bereit.is-an .l-szene--2 svg:nth-of-type(1) {
    animation: l-vd-pop .4s cubic-bezier(.34, 1.56, .64, 1) 4.4s forwards; }
  .page-leistung .l-mock-vd.l-bereit.is-an .l-szene--2 svg:nth-of-type(2) {
    animation: l-vd-pop .4s cubic-bezier(.34, 1.56, .64, 1) 5s forwards; }
  .page-leistung .l-mock-vd.l-bereit.is-an .l-szene--2 svg:nth-of-type(3) {
    animation: l-vd-pop .4s cubic-bezier(.34, 1.56, .64, 1) 5.6s forwards; }
  .page-leistung .l-mock-vd.l-bereit.is-an .l-szene--3 {
    animation: l-vd-endcard .5s cubic-bezier(.22, 1, .36, 1) 7.2s forwards; }
@keyframes l-vd-klick { 50% { transform: scale(.85); } }
@keyframes l-vd-spur { from { width: 0; } to { width: 100%; } }
@keyframes l-vd-zoom { from { transform: scale(.88); } to { transform: scale(1); } }
@keyframes l-vd-pop { from { opacity: 0; transform: scale(.5); }
  to { opacity: 1; transform: scale(1); } }
@keyframes l-vd-endcard { from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: scale(1); } }

.page-leistung .l-mock-sm { position: relative; overflow: hidden; }
.page-leistung .l-mock-sm .l-smhaelfte { position: absolute; top: 0; bottom: 0; width: 50%; }
.page-leistung .l-mock-sm .l-smhaelfte--l { left: 0; }
.page-leistung .l-mock-sm .l-smhaelfte--r { right: 0; border-left: 1px dashed var(--color-border-strong); }

.page-leistung .l-mock-sm .l-smstapel { position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -58%); width: 130px; height: 104px; }
.page-leistung .l-mock-sm .l-smstapel i { position: absolute; inset: 0;
  border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--card-bg); }
.page-leistung .l-mock-sm .l-smstapel i:nth-child(1) { transform: translate(12px, 12px); opacity: .35; }
.page-leistung .l-mock-sm .l-smstapel i:nth-child(2) { transform: translate(6px, 6px); opacity: .65; }
.page-leistung .l-mock-sm .l-smu { position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: var(--weight-extrabold); font-size: 1.2rem; letter-spacing: var(--tracking-tight);
  color: var(--color-text); }
.page-leistung .l-mock-sm .l-smu em { position: absolute; left: calc(50% + .45em); bottom: 38%;
  width: .16em; height: .16em; border-radius: 50%; background: var(--color-danger); }
.page-leistung .l-mock-sm .l-smlabel { position: absolute; left: 0; right: 0; bottom: 18px;
  text-align: center; font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-subtle); }

.page-leistung .l-mock-sm .l-smkopf { position: absolute; top: 0; left: 0; right: 0; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-text); color: var(--color-bg);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.page-leistung .l-mock-sm .l-smfeed { position: absolute; top: 30px; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; }
.page-leistung .l-mock-sm .l-smz { flex: 1; display: flex; align-items: center; gap: .7em;
  padding: 0 var(--sp-l); min-width: 0;
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--color-text-muted);
  white-space: nowrap; }
.page-leistung .l-mock-sm .l-smz + .l-smz { border-top: 1px solid var(--color-border); }
.page-leistung .l-mock-sm .l-smz > svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.page-leistung .l-mock-sm .l-smz b { font-weight: var(--weight-regular);
  color: var(--color-text-subtle); width: 5ch; flex: none; }
.page-leistung .l-mock-sm .l-smok { margin-left: auto; flex: none; display: grid; place-items: center; }
.page-leistung .l-mock-sm .l-smok svg { width: 15px; height: 15px; fill: var(--color-success); }

.page-leistung .l-mock-sm .l-smz--plan { opacity: .45; }
.page-leistung .l-mock-sm .l-smok--plan { width: 14px; height: 14px; border-radius: 50%;
  border: 1px dashed var(--color-text-subtle); }

  .page-leistung .l-mock-sm.l-bereit .l-smz { opacity: 0; transform: translateY(6px); }

  .page-leistung .l-mock-sm.l-bereit.is-an .l-smz { animation: l-sm-zeile .45s ease forwards; }
  .page-leistung .l-mock-sm.l-bereit.is-an .l-smz:nth-child(1) { animation-delay: .3s; }
  .page-leistung .l-mock-sm.l-bereit.is-an .l-smz:nth-child(2) { animation-delay: .65s; }
  .page-leistung .l-mock-sm.l-bereit.is-an .l-smz:nth-child(3) { animation-delay: 1s; }
  .page-leistung .l-mock-sm.l-bereit.is-an .l-smz:nth-child(4) { animation-delay: 1.35s; }
  .page-leistung .l-mock-sm.l-bereit.is-an .l-smz:nth-child(5) { animation-delay: 1.7s; }
  .page-leistung .l-mock-sm.l-bereit.is-an .l-smz:nth-child(6) { animation-delay: 2.05s; }

  .page-leistung .l-mock-sm.l-bereit.is-an .l-smz--plan { animation-name: l-sm-zeile-plan; }
@keyframes l-sm-zeile { from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; } }
@keyframes l-sm-zeile-plan { from { opacity: 0; transform: translateY(6px); }
  to { opacity: .45; transform: none; } }

.page-leistung .l-mock-ct { position: relative; overflow: visible; }
.page-leistung .l-mock-ct .l-ctkarte { position: absolute; top: 26px; height: 130px;
  left: calc(96% - 150px); width: 150px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--card-bg); }
.page-leistung .l-mock-ct .l-ctlupe { position: absolute; inset: 0; margin: auto;
  width: 22px; height: 22px; border: 2px solid var(--color-text-subtle);
  border-radius: 50%; box-shadow: 8px 8px 0 -6px var(--color-text-subtle); opacity: 0; }
.page-leistung .l-mock-ct .l-ctu { position: absolute; inset: 0;
  display: grid; place-items: center;
  font-weight: var(--weight-extrabold); font-size: 1.5rem; letter-spacing: var(--tracking-tight); }
.page-leistung .l-mock-ct .l-ctu i { font-style: normal; position: relative; }
.page-leistung .l-mock-ct .l-ctu i::after { content: ""; position: absolute;
  right: -.32em; bottom: .09em; width: .15em; height: .15em;
  border-radius: 50%; background: var(--color-danger); }
.page-leistung .l-mock-ct .l-ctlasche { position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%); background: var(--color-text); color: var(--color-bg);
  border-radius: 999px; padding: 3px 10px;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); white-space: nowrap; }
.page-leistung .l-mock-ct .l-ctpuls { position: absolute; right: 8px; bottom: 8px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); }
.page-leistung .l-mock-ct .l-ctstationen { position: absolute; left: 0; right: 0; bottom: 0;
  height: 34px; border-top: 1px solid var(--color-border);
  display: grid; grid-template-columns: repeat(5, 1fr); }
.page-leistung .l-mock-ct .l-ctst { display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-subtle); white-space: nowrap; min-width: 0; overflow: hidden; }
.page-leistung .l-mock-ct .l-ctst + .l-ctst { border-left: 1px solid var(--color-border); }

.page-leistung .l-mock-ct .l-ctst:nth-child(5) { color: var(--color-success); font-weight: var(--weight-bold); }

  .page-leistung .l-mock-ct.l-bereit .l-ctkarte { left: 4%; border-style: dashed; background: transparent; }
  .page-leistung .l-mock-ct.l-bereit .l-ctlupe { opacity: .8; }
  .page-leistung .l-mock-ct.l-bereit .l-ctu { opacity: 0; }
  .page-leistung .l-mock-ct.l-bereit .l-ctlasche { opacity: 0; transform: translate(-50%, 4px); }
  .page-leistung .l-mock-ct.l-bereit .l-ctpuls { opacity: 0; transform: scale(.4); }
  .page-leistung .l-mock-ct.l-bereit .l-ctst:nth-child(5) { color: var(--color-text-subtle); font-weight: var(--weight-regular); }

  .page-leistung .l-mock-ct.l-bereit.is-an .l-ctkarte { animation: l-ct-fahrt 11s cubic-bezier(.45, .05, .25, 1) forwards; }
  .page-leistung .l-mock-ct.l-bereit.is-an .l-ctlupe { animation: l-ct-lupe 11s ease forwards; }
  .page-leistung .l-mock-ct.l-bereit.is-an .l-ctu { animation: l-ct-u 11s ease forwards; }
  .page-leistung .l-mock-ct.l-bereit.is-an .l-ctlasche { animation: l-ct-lasche 11s ease forwards; }
  .page-leistung .l-mock-ct.l-bereit.is-an .l-ctpuls { animation: l-ct-online 11s ease forwards; }
  .page-leistung .l-mock-ct.l-bereit.is-an .l-ctst:nth-child(1) { animation: l-ct-st1 11s step-end forwards; }
  .page-leistung .l-mock-ct.l-bereit.is-an .l-ctst:nth-child(2) { animation: l-ct-st2 11s step-end forwards; }
  .page-leistung .l-mock-ct.l-bereit.is-an .l-ctst:nth-child(3) { animation: l-ct-st3 11s step-end forwards; }
  .page-leistung .l-mock-ct.l-bereit.is-an .l-ctst:nth-child(4) { animation: l-ct-st4 11s step-end forwards; }
  .page-leistung .l-mock-ct.l-bereit.is-an .l-ctst:nth-child(5) { animation: l-ct-st5 11s step-end forwards; }
@keyframes l-ct-fahrt {
  0%, 5%   { left: 4%;  border-style: dashed; background: transparent; }
  16%, 24% { left: 23%; border-style: dashed; background: transparent; }
  34%, 42% { left: 42%; border-style: solid; background: var(--card-bg); }
  52%, 60% { left: 61%; border-style: solid; background: var(--card-bg); }
  72%, 100% { left: calc(96% - 150px); border-style: solid; background: var(--card-bg); }
}
@keyframes l-ct-lupe { 0%, 26% { opacity: .8; } 32%, 100% { opacity: 0; } }
@keyframes l-ct-u { 0%, 30% { opacity: 0; } 38%, 100% { opacity: 1; } }
@keyframes l-ct-lasche { 0%, 50% { opacity: 0; transform: translate(-50%, 4px); }
  58%, 100% { opacity: 1; transform: translate(-50%, 0); } }
@keyframes l-ct-online { 0%, 68% { opacity: 0; transform: scale(.4); }
  74% { opacity: 1; transform: scale(1.4); } 78%, 100% { opacity: 1; transform: scale(1); } }
@keyframes l-ct-st1 { 0% { color: var(--color-text); font-weight: var(--weight-bold); }
  14%, 100% { color: var(--color-text-subtle); font-weight: var(--weight-regular); } }
@keyframes l-ct-st2 { 0%, 14% { color: var(--color-text-subtle); }
  15% { color: var(--color-text); font-weight: var(--weight-bold); }
  32%, 100% { color: var(--color-text-subtle); font-weight: var(--weight-regular); } }
@keyframes l-ct-st3 { 0%, 32% { color: var(--color-text-subtle); }
  33% { color: var(--color-text); font-weight: var(--weight-bold); }
  50%, 100% { color: var(--color-text-subtle); font-weight: var(--weight-regular); } }
@keyframes l-ct-st4 { 0%, 50% { color: var(--color-text-subtle); }
  51% { color: var(--color-text); font-weight: var(--weight-bold); }
  68%, 100% { color: var(--color-text-subtle); font-weight: var(--weight-regular); } }
@keyframes l-ct-st5 { 0%, 68% { color: var(--color-text-subtle); }
  69%, 100% { color: var(--color-success); font-weight: var(--weight-bold); } }

.page-leistung .l-mock-cm { display: flex; flex-direction: column; }
.page-leistung .l-mock-cm .l-cmkopf { flex: none; height: 30px; padding: 0 var(--sp-l);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--color-text); color: var(--color-bg);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.page-leistung .l-mock-cm .l-cmon { display: inline-flex; align-items: center; gap: var(--sp-xs); }
.page-leistung .l-mock-cm .l-cmon::before { content: ""; width: 7px; height: 7px;
  border-radius: 50%; background: var(--color-success); }
.page-leistung .l-mock-cm .l-cmchat { flex: 1; display: flex; flex-direction: column;
  justify-content: flex-end; padding: var(--sp-s) var(--sp-l) var(--sp-m); overflow: hidden; }
.page-leistung .l-mock-cm .l-cmblase { position: relative; max-width: 55%; align-self: flex-start;
  margin-top: var(--sp-xs); padding: var(--sp-xs) var(--sp-s);
  background: var(--color-surface); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md); border-bottom-left-radius: 4px;
  font-size: var(--text-sm); line-height: 1.35; color: var(--color-text-muted); }
.page-leistung .l-mock-cm .l-cmblase small { margin-left: .6em; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); color: var(--color-text-subtle); }
.page-leistung .l-mock-cm .l-cmblase--wir { align-self: flex-end;
  background: var(--color-text); border-color: var(--color-text); color: var(--color-bg);
  border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: 4px; }
.page-leistung .l-mock-cm .l-cmblase--wir small { color: color-mix(in srgb, var(--color-bg) 55%, transparent); }
.page-leistung .l-mock-cm .l-cmtipp { position: absolute; inset: 0; display: none;
  align-items: center; gap: 4px; padding-left: var(--sp-s); }
.page-leistung .l-mock-cm .l-cmtipp b { width: 5px; height: 5px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-bg) 70%, transparent); }
.page-leistung .l-mock-cm .l-cmchip { align-self: center; margin-top: var(--sp-s);
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  padding: 4px var(--sp-s); border-radius: 999px;
  background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.page-leistung .l-mock-cm .l-cmchip svg { width: 13px; height: 13px; fill: currentColor; flex: none; }

  .page-leistung .l-mock-cm.l-bereit .l-cmblase,
  .page-leistung .l-mock-cm.l-bereit .l-cmchip { opacity: 0; transform: translateY(10px); }

  .page-leistung .l-mock-cm.l-bereit.is-an .l-cmblase,
  .page-leistung .l-mock-cm.l-bereit.is-an .l-cmchip {
    animation: l-cm-zeile .45s cubic-bezier(.22, 1, .36, 1) forwards; }
  .page-leistung .l-mock-cm.l-bereit.is-an .l-cmblase:nth-of-type(1) { animation-delay: .5s; }
  .page-leistung .l-mock-cm.l-bereit.is-an .l-cmblase:nth-of-type(2) { animation-delay: 1.7s; }
  .page-leistung .l-mock-cm.l-bereit.is-an .l-cmblase:nth-of-type(3) { animation-delay: 4.1s; }
  .page-leistung .l-mock-cm.l-bereit.is-an .l-cmblase:nth-of-type(4) { animation-delay: 5.3s; }
  .page-leistung .l-mock-cm.l-bereit.is-an .l-cmchip { animation-delay: 7.6s; }

  .page-leistung .l-mock-cm.l-bereit.is-an .l-cmblase--wir .l-cmtxt,
  .page-leistung .l-mock-cm.l-bereit.is-an .l-cmblase--wir small {
    opacity: 0; animation: l-cm-zeig .3s forwards; }
  .page-leistung .l-mock-cm.l-bereit.is-an .l-cmblase:nth-of-type(2) .l-cmtxt,
  .page-leistung .l-mock-cm.l-bereit.is-an .l-cmblase:nth-of-type(2) small { animation-delay: 3.1s; }
  .page-leistung .l-mock-cm.l-bereit.is-an .l-cmblase:nth-of-type(4) .l-cmtxt,
  .page-leistung .l-mock-cm.l-bereit.is-an .l-cmblase:nth-of-type(4) small { animation-delay: 6.7s; }
  .page-leistung .l-mock-cm.l-bereit.is-an .l-cmtipp { display: flex; opacity: 0;
    animation: l-cm-tipp 1.4s forwards; }
  .page-leistung .l-mock-cm.l-bereit.is-an .l-cmblase:nth-of-type(2) .l-cmtipp { animation-delay: 1.7s; }
  .page-leistung .l-mock-cm.l-bereit.is-an .l-cmblase:nth-of-type(4) .l-cmtipp { animation-delay: 5.3s; }
  .page-leistung .l-mock-cm.l-bereit.is-an .l-cmtipp b { animation: l-cm-hop .9s ease-in-out infinite; }
  .page-leistung .l-mock-cm.l-bereit.is-an .l-cmtipp b:nth-child(2) { animation-delay: .15s; }
  .page-leistung .l-mock-cm.l-bereit.is-an .l-cmtipp b:nth-child(3) { animation-delay: .3s; }
@keyframes l-cm-zeile { to { opacity: 1; transform: none; } }
@keyframes l-cm-zeig { to { opacity: 1; } }
@keyframes l-cm-tipp { 0% { opacity: 0; } 10%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes l-cm-hop { 0%, 100% { transform: none; opacity: .5; }
  50% { transform: translateY(-3px); opacity: 1; } }
@media (max-width: 720px) {
  .page-leistung .l-mock-cm .l-cmblase { max-width: 80%; }
}

.page-leistung .l-mock-fl { padding: var(--sp-xl); display: flex; gap: var(--sp-s);
  perspective: 900px; }
.page-leistung .l-mock-fl .l-panel { flex: 1; border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm); padding: var(--sp-m) var(--sp-s);
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-xs); }
.page-leistung .l-mock-fl .l-panel:first-child { border-style: solid; justify-content: center; align-items: center; }
.page-leistung .l-mock-fl .l-panel b { font-size: 2rem; font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight); position: relative; }
.page-leistung .l-mock-fl .l-panel b::after { content: ""; position: absolute; right: -.3em;
  bottom: .12em; width: .14em; height: .14em; border-radius: 50%; background: var(--color-danger); }
.page-leistung .l-mock-fl .l-panel i { height: 5px; border-radius: 3px;
  background: var(--color-border-strong); display: block; }
.page-leistung .l-mock-fl .l-panel i:nth-child(2) { width: 72%; }
.page-leistung .l-mock-fl .l-panel i:nth-child(3) { width: 48%; }

  .page-leistung .l-mock-fl.l-bereit .l-panel:nth-of-type(2),
  .page-leistung .l-mock-fl.l-bereit .l-panel:nth-of-type(3) {
    transform-origin: left center; transform: rotateY(-160deg); opacity: 0; }

  .page-leistung .l-mock-fl.l-bereit.is-an .l-panel:nth-of-type(2) {
    animation: l-fl-klapp 1s cubic-bezier(.22, 1, .36, 1) .8s forwards; }
  .page-leistung .l-mock-fl.l-bereit.is-an .l-panel:nth-of-type(3) {
    animation: l-fl-klapp 1s cubic-bezier(.22, 1, .36, 1) 2s forwards; }
@keyframes l-fl-klapp {
  0%   { transform: rotateY(-160deg); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: rotateY(0); opacity: 1; }
}

.page-leistung .l-mock-pl { padding: var(--sp-l) var(--sp-xl); display: flex;
  align-items: center; justify-content: center; }
.page-leistung .l-mock-pl .l-plobj { display: flex; flex-direction: column;
  align-items: center; gap: .45rem; }
.page-leistung .l-mock-pl .l-rollup { width: 6rem; height: 9.2rem;
  transform-origin: bottom center; overflow: hidden;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: var(--sp-s); padding: var(--sp-s); }
.page-leistung .l-mock-pl .l-rollup b { font-size: 2rem; font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight); position: relative; }
.page-leistung .l-mock-pl .l-rollup b::after { content: ""; position: absolute; right: -.3em;
  bottom: .12em; width: .14em; height: .14em; border-radius: 50%; background: var(--color-danger); }
.page-leistung .l-mock-pl .l-zeilen { display: flex; flex-direction: column; gap: var(--sp-xs);
  width: 70%; align-items: center; }
.page-leistung .l-mock-pl .l-zeilen i { height: 5px; border-radius: 3px; width: 100%;
  background: var(--color-border-strong); display: block; }
.page-leistung .l-mock-pl .l-zeilen i:nth-child(2) { width: 60%; }
.page-leistung .l-mock-pl .l-rollfuss { width: 7.4rem; height: .5rem;
  border-radius: var(--radius-sm); background: var(--color-border-strong); }
.page-leistung .l-mock-pl .l-format { font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-text-subtle); white-space: nowrap; }

  .page-leistung .l-mock-pl.l-bereit .l-rollup { transform: scaleY(0); }
  .page-leistung .l-mock-pl.l-bereit .l-rollup b,
  .page-leistung .l-mock-pl.l-bereit .l-rollup .l-zeilen { opacity: 0; }
  .page-leistung .l-mock-pl.l-bereit .l-format { opacity: 0; }

  .page-leistung .l-mock-pl.l-bereit.is-an .l-rollup {
    animation: l-pl-roll .9s cubic-bezier(.22, 1, .36, 1) .6s forwards; }
  .page-leistung .l-mock-pl.l-bereit.is-an .l-rollup b,
  .page-leistung .l-mock-pl.l-bereit.is-an .l-rollup .l-zeilen {
    animation: l-os-auf .35s linear 1.4s forwards; }
  .page-leistung .l-mock-pl.l-bereit.is-an .l-format {
    animation: l-os-auf .3s linear 1.7s forwards; }
@keyframes l-pl-roll { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.page-leistung .l-mock-ws { display: flex; flex-direction: column; overflow: hidden; }
.page-leistung .l-mock-ws .l-browserleiste { display: flex; align-items: center; gap: var(--sp-m);
  padding: var(--sp-s) var(--sp-m); border-bottom: 1px solid var(--color-border-strong); }
.page-leistung .l-mock-ws .l-ampel { display: flex; gap: .3rem; }
.page-leistung .l-mock-ws .l-ampel i { width: .5rem; height: .5rem; border-radius: 50%;
  display: block; }

.page-leistung .l-mock-ws .l-ampel i:nth-child(1) { background: var(--color-danger); }
.page-leistung .l-mock-ws .l-ampel i:nth-child(2) { background: var(--color-orange); }
.page-leistung .l-mock-ws .l-ampel i:nth-child(3) { background: var(--color-success); }
.page-leistung .l-mock-ws .l-url { flex: 1; text-align: center; font-family: var(--font-mono);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); color: var(--color-text-subtle);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  padding: .15rem var(--sp-m); }
.page-leistung .l-mock-ws .l-viewport { flex: 1; display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: var(--sp-m); padding: var(--sp-l); }
.page-leistung .l-mock-ws .l-viewport b { font-size: 2.4rem; font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight); position: relative; }
.page-leistung .l-mock-ws .l-viewport b::after { content: ""; position: absolute; right: -.3em;
  bottom: .12em; width: .14em; height: .14em; border-radius: 50%; background: var(--color-danger); }
.page-leistung .l-mock-ws .l-zeilen { display: flex; flex-direction: column; gap: var(--sp-xs);
  align-items: center; width: 55%; }
.page-leistung .l-mock-ws .l-zeilen i { height: 5px; border-radius: 3px; width: 100%;
  background: var(--color-border-strong); display: block; }
.page-leistung .l-mock-ws .l-zeilen i:nth-child(2) { width: 65%; }

.page-leistung .l-mock-ws .l-tipp { font-style: normal; }

  .page-leistung .l-mock-ws.l-bereit .l-url { text-align: left; }
  .page-leistung .l-mock-ws.l-bereit .l-tipp { display: inline-block; overflow: hidden;
    white-space: nowrap; width: 0; vertical-align: bottom;
    border-right: 1px solid transparent; }
  .page-leistung .l-mock-ws.l-bereit .l-viewport b,
  .page-leistung .l-mock-ws.l-bereit .l-viewport .l-zeilen { opacity: 0; }
  .page-leistung .l-mock-ws.l-bereit .l-browserleiste { position: relative; }
  .page-leistung .l-mock-ws.l-bereit .l-browserleiste::after { content: "";
    position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; opacity: 0;
    background: var(--color-danger); }

  .page-leistung .l-mock-ws.l-bereit.is-an .l-tipp {
    animation: l-ws-tippen 1.6s steps(13, end) .4s forwards,
               l-ws-cursor .7s steps(2, jump-none) .4s 4,
               l-ws-cursoraus 1ms linear 3.2s forwards; }
  .page-leistung .l-mock-ws.l-bereit.is-an .l-browserleiste::after {
    animation: l-ws-laden .9s ease-out 2.3s forwards; }
  .page-leistung .l-mock-ws.l-bereit.is-an .l-viewport b {
    animation: l-ws-auf .6s cubic-bezier(.22, 1, .36, 1) 3.2s forwards; }
  .page-leistung .l-mock-ws.l-bereit.is-an .l-viewport .l-zeilen {
    animation: l-ws-auf .6s cubic-bezier(.22, 1, .36, 1) 3.45s forwards; }

@keyframes l-ws-tippen    { to { width: calc(13ch + 13 * 0.12em); } }
@keyframes l-ws-cursor    { 0% { border-right-color: var(--color-text-subtle); }
                            50%, 100% { border-right-color: transparent; } }
@keyframes l-ws-cursoraus { to { border-right-color: transparent; } }
@keyframes l-ws-laden     { 0% { width: 0; opacity: 1; } 85% { width: 100%; opacity: 1; }
                            100% { width: 100%; opacity: 0; } }
@keyframes l-ws-auf       { from { opacity: 0; transform: translateY(8px); }
                            to { opacity: 1; transform: none; } }

.page-leistung .l-mock-lp { padding: var(--sp-xl); display: flex; flex-direction: column; gap: var(--sp-m); }
.page-leistung .l-mock-lp .l-kopfzeile { font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-subtle);
  display: flex; justify-content: space-between; }
.page-leistung .l-mock-lp .l-schacht { flex: 1; position: relative; overflow: hidden; }
.page-leistung .l-mock-lp .l-scrollseite { position: absolute; left: 0; right: 0;
  top: 100%; transform: translateY(-100%);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-s); }
.page-leistung .l-mock-lp .l-held { height: 1rem; width: 62%; border-radius: 4px;
  background: var(--color-text-subtle); display: block; }
.page-leistung .l-mock-lp .l-zl { height: 6px; border-radius: 3px; width: 100%;
  background: var(--color-border-strong); display: block; }
.page-leistung .l-mock-lp .l-zl--kurz { width: 55%; }
.page-leistung .l-mock-lp .l-flaeche { width: 100%; height: 5.5rem;
  border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm);
  margin: var(--sp-l) 0; display: block; }
.page-leistung .l-mock-lp .l-cta { align-self: flex-start; margin-top: var(--sp-l);
  font-family: var(--font-mono);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-on-accent); background: var(--color-danger);
  border-radius: var(--radius-sm); padding: var(--sp-s) var(--sp-l); }

  .page-leistung .l-mock-lp.l-bereit .l-scrollseite { top: 0; transform: none; }

  .page-leistung .l-mock-lp.l-bereit.is-an .l-scrollseite {
    animation: l-lp-scroll 4.4s ease-in-out .6s forwards; }
  .page-leistung .l-mock-lp.l-bereit.is-an .l-cta {
    animation: l-lp-pop .5s cubic-bezier(.34, 1.56, .64, 1) 5.2s; }
@keyframes l-lp-scroll {
  0%, 20%  { top: 0; transform: translateY(0); }
  45%, 60% { top: 50%; transform: translateY(-50%); }
  85%, 100% { top: 100%; transform: translateY(-100%); }
}
@keyframes l-lp-pop { 0% { transform: scale(1); } 50% { transform: scale(1.14); }
                      100% { transform: scale(1); } }

.page-leistung .l-mock-os { padding: var(--sp-xl); display: flex; flex-direction: column; gap: var(--sp-m); }
.page-leistung .l-mock-os .l-produkte { flex: 1; display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-s); }
.page-leistung .l-mock-os .l-produkt { border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm); padding: var(--sp-s);
  display: flex; flex-direction: column; gap: var(--sp-xs); }
.page-leistung .l-mock-os .l-produkt .l-pbild { flex: 1; border-radius: var(--radius-sm);
  background: var(--color-border-strong); display: block; }
.page-leistung .l-mock-os .l-produkt .l-pzeile { height: 5px; width: 70%; border-radius: 3px;
  background: var(--color-border-strong); display: block; }
.page-leistung .l-mock-os .l-produkt em { font-style: normal; font-family: var(--font-mono);
  font-size: var(--text-2xs); color: var(--color-text-subtle); }
.page-leistung .l-mock-os .l-pfuss { display: flex; justify-content: space-between;
  align-items: center; }

.page-leistung .l-mock-os .l-kaufen { width: 1.35rem; height: 1.35rem; border-radius: 50%;
  display: inline-grid; place-items: center; font-family: var(--font-mono);
  font-size: var(--text-2xs); line-height: 1;
  background: var(--color-success); border: 1px solid var(--color-success);
  color: var(--color-on-accent); }
.page-leistung .l-mock-os .l-kaufen i { grid-area: 1 / 1; font-style: normal; }
.page-leistung .l-mock-os .l-kaufen .l-plus { opacity: 0; }

.page-leistung .l-mock-os .l-warenkorb { display: flex; justify-content: space-between;
  align-items: center; font-family: var(--font-mono);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
  color: var(--color-text-subtle); background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); padding: var(--sp-s) var(--sp-m); }
.page-leistung .l-mock-os .l-wkorb { position: relative; display: inline-flex; }
.page-leistung .l-mock-os .l-wkorb svg { display: block; }

.page-leistung .l-mock-os .l-anz { position: absolute; top: -.5rem; right: -.55rem;
  width: .95rem; height: .95rem; border-radius: 50%;
  background: var(--color-danger); color: var(--color-on-accent);
  display: inline-grid; place-items: center;
  font-size: .55rem; font-style: normal; letter-spacing: 0; line-height: 1; }
.page-leistung .l-mock-os .l-anz i,
.page-leistung .l-mock-os .l-summe i { display: block; grid-area: 1 / 1;
  font-style: normal; opacity: 0; white-space: nowrap; }
.page-leistung .l-mock-os .l-summe { display: inline-grid; justify-items: end;
  font-size: var(--text-xs); color: var(--color-text-muted); }
.page-leistung .l-mock-os .l-wk--2 { opacity: 1; }

  .page-leistung .l-mock-os.l-bereit .l-kaufen { background: transparent;
    border-color: var(--color-border-strong); color: var(--color-text-subtle); }
  .page-leistung .l-mock-os.l-bereit .l-kaufen .l-plus { opacity: 1; }
  .page-leistung .l-mock-os.l-bereit .l-kaufen .l-hak { opacity: 0; }
  .page-leistung .l-mock-os.l-bereit .l-anz { background: var(--color-border-strong);
    color: var(--color-text-muted); }
  .page-leistung .l-mock-os.l-bereit .l-wk--0 { opacity: 1; }
  .page-leistung .l-mock-os.l-bereit .l-wk--1,
  .page-leistung .l-mock-os.l-bereit .l-wk--2 { opacity: 0; }

  .page-leistung .l-mock-os.l-bereit.is-an .l-kaufen--1 {
    animation: l-os-klick .5s ease 2.2s forwards; }
  .page-leistung .l-mock-os.l-bereit.is-an .l-kaufen--1 .l-plus {
    animation: l-os-zu .15s linear 2.4s forwards; }
  .page-leistung .l-mock-os.l-bereit.is-an .l-kaufen--1 .l-hak {
    animation: l-os-auf .15s linear 2.45s forwards; }
  .page-leistung .l-mock-os.l-bereit.is-an .l-kaufen--2 {
    animation: l-os-klick .5s ease 3.8s forwards; }
  .page-leistung .l-mock-os.l-bereit.is-an .l-kaufen--2 .l-plus {
    animation: l-os-zu .15s linear 4s forwards; }
  .page-leistung .l-mock-os.l-bereit.is-an .l-kaufen--2 .l-hak {
    animation: l-os-auf .15s linear 4.05s forwards; }
  .page-leistung .l-mock-os.l-bereit.is-an .l-wk--0 { animation: l-os-zu .2s linear 2.5s forwards; }
  .page-leistung .l-mock-os.l-bereit.is-an .l-wk--1 {
    animation: l-os-auf .2s linear 2.55s forwards, l-os-zu .2s linear 4.1s forwards; }
  .page-leistung .l-mock-os.l-bereit.is-an .l-wk--2 { animation: l-os-auf .2s linear 4.15s forwards; }

  .page-leistung .l-mock-os.l-bereit.is-an .l-warenkorb {
    animation: l-os-pop .4s cubic-bezier(.34, 1.56, .64, 1) 2.55s,
               l-lp-pop .4s cubic-bezier(.34, 1.56, .64, 1) 4.15s; }

  .page-leistung .l-mock-os.l-bereit.is-an .l-anz {
    animation: l-os-badge .3s linear 2.55s forwards; }
@keyframes l-os-klick {
  0%   { transform: scale(1); background: transparent; border-color: var(--color-border-strong); color: var(--color-text-subtle); }
  35%  { transform: scale(.78); }
  70%  { transform: scale(1.12); background: var(--color-success); border-color: var(--color-success); color: var(--color-on-accent); }
  100% { transform: scale(1); background: var(--color-success); border-color: var(--color-success); color: var(--color-on-accent); }
}
@keyframes l-os-zu  { to { opacity: 0; } }
@keyframes l-os-auf { to { opacity: 1; } }
@keyframes l-os-pop { 0% { transform: scale(1); } 50% { transform: scale(1.14); }
                      100% { transform: scale(1); } }
@keyframes l-os-badge { to { background: var(--color-danger); color: var(--color-on-accent); } }

.page-leistung .l-mock-wh { padding: var(--sp-xl); display: flex; flex-direction: column; gap: var(--sp-m); }
.page-leistung .l-mock-wh .l-kopfzeile { font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-subtle);
  display: flex; justify-content: space-between; }
.page-leistung .l-mock-wh .l-status { flex: 1; display: flex; flex-direction: column;
  justify-content: center; gap: var(--sp-m); }
.page-leistung .l-mock-wh .l-status span { display: flex; align-items: center; gap: var(--sp-s);
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-subtle); }
.page-leistung .l-mock-wh .l-ok { width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--color-success); display: inline-block; flex: none; }

.page-leistung .l-swz { position: relative; }
.page-leistung .l-swz .l-lauf { display: none; }
.page-leistung .l-up { display: inline-grid; text-align: right; }
.page-leistung .l-up > span { grid-area: 1 / 1; white-space: nowrap; }
.page-leistung .l-up .l-up99 { opacity: 0; }
.page-leistung .l-up .l-up100 { color: var(--color-success); }

  .page-leistung .l-bereit .l-swz .l-fertig { white-space: nowrap; opacity: 0; }
  .page-leistung .l-bereit .l-swz .l-lauf { display: inline; position: absolute;
    left: calc(.55rem + var(--sp-s)); white-space: nowrap; }
  .page-leistung .l-bereit .l-swz .l-ok { background: var(--color-danger); }
  .page-leistung .l-bereit .l-up .l-up99 { opacity: 1; }
  .page-leistung .l-bereit .l-up .l-up100 { opacity: 0; }

  .page-leistung .l-bereit.is-an .l-swz--1 .l-lauf   { animation: l-wh-lauf   2.5s linear forwards; }
  .page-leistung .l-bereit.is-an .l-swz--1 .l-fertig { animation: l-wh-fertig 2.5s linear forwards; }
  .page-leistung .l-bereit.is-an .l-swz--1 .l-ok     { animation: l-wh-licht  2.5s linear forwards; }
  .page-leistung .l-bereit.is-an .l-swz--2 .l-lauf   { animation: l-wh-lauf   4.5s linear forwards; }
  .page-leistung .l-bereit.is-an .l-swz--2 .l-fertig { animation: l-wh-fertig 4.5s linear forwards; }
  .page-leistung .l-bereit.is-an .l-swz--2 .l-ok     { animation: l-wh-licht  4.5s linear forwards; }
  .page-leistung .l-bereit.is-an .l-swz--3 .l-lauf   { animation: l-wh-lauf   6.5s linear forwards; }
  .page-leistung .l-bereit.is-an .l-swz--3 .l-fertig { animation: l-wh-fertig 6.5s linear forwards; }
  .page-leistung .l-bereit.is-an .l-swz--3 .l-ok     { animation: l-wh-licht  6.5s linear forwards; }
  .page-leistung .l-bereit.is-an .l-up .l-up99  { animation: l-wh-lauf   7.4s linear forwards; }
  .page-leistung .l-bereit.is-an .l-up .l-up100 { animation: l-wh-fertig 7.4s linear forwards; }

  .page-leistung .l-bereit.is-an .l-dots i { animation: l-wh-punkt 1.2s steps(1) infinite; font-style: normal; }
  .page-leistung .l-bereit.is-an .l-dots i:nth-child(2) { animation-delay: .4s; }
  .page-leistung .l-bereit.is-an .l-dots i:nth-child(3) { animation-delay: .8s; }

@keyframes l-wh-lauf   { 0%, 93% { opacity: 1; } 100% { opacity: 0; } }
@keyframes l-wh-fertig { 0%, 93% { opacity: 0; } 100% { opacity: 1; } }
@keyframes l-wh-licht  { 0%, 93% { background: var(--color-danger); }
                         100% { background: var(--color-success); } }
@keyframes l-wh-punkt  { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }

.page-leistung .l-mock-se, .page-leistung .l-mock-gads, .page-leistung .l-mock-sads,
.page-leistung .l-mock-nl, .page-leistung .l-mock-crm, .page-leistung .l-mock-app,
.page-leistung .l-mock-kp, .page-leistung .l-mock-auto, .page-leistung .l-mock-rel {
  padding: var(--sp-xl); display: flex; flex-direction: column; gap: var(--sp-m);
}
.page-leistung .l-mock-gads .l-kopfzeile, .page-leistung .l-mock-nl .l-kopfzeile,
.page-leistung .l-mock-crm .l-kopfzeile, .page-leistung .l-mock-app .l-kopfzeile,
.page-leistung .l-mock-kp .l-kopfzeile, .page-leistung .l-mock-auto .l-kopfzeile,
.page-leistung .l-mock-rel .l-kopfzeile {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-subtle);
  display: flex; justify-content: space-between; align-items: center;
}
.page-leistung .l-mock-nl .l-fusszeile, .page-leistung .l-mock-auto .l-fusszeile,
.page-leistung .l-mock-rel .l-fusszeile {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); color: var(--color-text-subtle);
  display: flex; justify-content: space-between;
}

.page-leistung .l-mock-se .l-suchfeld { display: flex; align-items: center; gap: var(--sp-s);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide); color: var(--color-text-subtle);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  padding: var(--sp-s) var(--sp-m); white-space: nowrap; overflow: hidden; }
.page-leistung .l-mock-se .l-suchfeld svg { width: 14px; height: 14px;
  fill: currentColor; flex: none; }
.page-leistung .l-such-tipp { font-style: normal; display: inline-block;
  vertical-align: bottom; white-space: nowrap; }
.page-leistung .l-mock-se .l-treffer-liste { flex: 1;
  display: flex; flex-direction: column; gap: var(--sp-s);

  --se-schritt: calc(3.2rem + var(--sp-s)); }
.page-leistung .l-mock-se .l-treffer { border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm); padding: var(--sp-s) var(--sp-m); height: 3.2rem;
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-xs); }

.page-leistung .l-mock-se .l-treffer i { height: 5px; border-radius: 3px; width: 70%;
  background: var(--color-border-strong); display: block; }
.page-leistung .l-mock-se .l-treffer i:nth-child(2) { width: 45%; }

.page-leistung .l-mock-se .l-treffer--wir { border: 1px solid var(--color-success);
  border-radius: var(--radius-sm); background: var(--card-bg);
  padding: var(--sp-s) var(--sp-m); height: 3.2rem; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-m);
  transform: translateY(calc(-1 * var(--se-schritt))); }
.page-leistung .l-mock-se .l-treffer:nth-of-type(1) {
  transform: translateY(var(--se-schritt)); }
.page-leistung .l-mock-se .l-sekopf { display: flex; flex-direction: column;
  gap: .15rem; min-width: 0; }
.page-leistung .l-mock-se .l-treffer--wir b { font-size: var(--text-xs);
  font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-snug);
  display: block; line-height: 1.1; }
.page-leistung .l-mock-se .l-treffer--wir small { font-family: var(--font-mono);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); color: var(--color-text-subtle); }

.page-leistung .l-mock-se .l-sewerte { display: flex; gap: var(--sp-xs); flex: none; }
.page-leistung .l-mock-se .l-sewerte em { font-style: normal; font-family: var(--font-mono);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); color: var(--color-success);
  border: 1px solid color-mix(in srgb, var(--color-success) 45%, transparent);
  border-radius: var(--radius-pill); padding: 2px var(--sp-s); white-space: nowrap; }

.page-leistung .l-mock-gads .l-suchfeld { display: flex; align-items: center; gap: var(--sp-s);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide); color: var(--color-text-subtle);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  padding: var(--sp-s) var(--sp-m); white-space: nowrap; overflow: hidden; }
.page-leistung .l-mock-gads .l-suchfeld svg { width: 14px; height: 14px;
  fill: currentColor; flex: none; }
.page-leistung .l-mock-gads .l-anzeige { flex: 1; border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm); padding: var(--sp-m) var(--sp-l);
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-s); }
.page-leistung .l-mock-gads .l-adbadge { align-self: flex-start; font-family: var(--font-mono);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-sm); color: var(--color-danger); padding: .1rem .45rem; }
.page-leistung .l-mock-gads .l-adtitel { font-size: var(--text-lg);
  font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-snug);
  line-height: var(--leading-tight); }
.page-leistung .l-mock-gads .l-zeilen { display: flex; flex-direction: column; gap: var(--sp-xs); }
.page-leistung .l-mock-gads .l-zeilen i { height: 5px; border-radius: 3px;
  background: var(--color-border-strong); display: block; }
.page-leistung .l-mock-gads .l-zeilen i:nth-child(2) { width: 60%; }

.page-leistung .l-mock-sads { padding: var(--sp-l) var(--sp-xl); display: flex;
  overflow: hidden; }
.page-leistung .l-mock-sads .l-sapost { flex: 1; display: flex; flex-direction: column; gap: var(--sp-s); }
.page-leistung .l-mock-sads .l-postkopf { display: flex; align-items: center; gap: var(--sp-s); }
.page-leistung .l-mock-sads .l-avatar { width: 1.4rem; height: 1.4rem; border-radius: 50%;
  border: 1px solid var(--color-border-strong); background: var(--color-border-strong); }
.page-leistung .l-mock-sads .l-name { font-weight: var(--weight-extrabold); font-size: var(--text-xs);
  letter-spacing: var(--tracking-snug); }
.page-leistung .l-mock-sads .l-gesponsert { margin-left: auto; font-family: var(--font-mono);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-text-subtle); }
.page-leistung .l-mock-sads .l-bild { flex: 1; border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm); display: grid; place-items: center; }
.page-leistung .l-mock-sads .l-bild b { font-size: 2rem; font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight); position: relative; }
.page-leistung .l-mock-sads .l-bild b::after { content: ""; position: absolute; right: -.3em;
  bottom: .12em; width: .14em; height: .14em; border-radius: 50%; background: var(--color-danger); }

.page-leistung .l-mock-sads .l-adcta { text-align: center; font-family: var(--font-mono);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-bg); background: var(--color-text);
  border-radius: var(--radius-sm); padding: var(--sp-s) var(--sp-l); }

.page-leistung .l-mock-nl { overflow: hidden; display: flex; }
.page-leistung .l-mock-nl .l-nlmail { flex: 1; display: flex; flex-direction: column; gap: var(--sp-m); }
.page-leistung .l-mock-nl .l-betreff { font-size: var(--text-lg); font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-snug); white-space: nowrap; overflow: hidden; }
.page-leistung .l-mock-nl .l-zeilen { flex: 1; display: flex; flex-direction: column;
  justify-content: center; gap: var(--sp-xs); }
.page-leistung .l-mock-nl .l-zeilen i { height: 5px; border-radius: 3px;
  background: var(--color-border-strong); display: block; }
.page-leistung .l-mock-nl .l-zeilen i:nth-child(2) { width: 72%; }
.page-leistung .l-mock-nl .l-zeilen i:nth-child(3) { width: 48%; }
.page-leistung .l-mock-nl .l-rate { display: inline-grid; justify-items: end; }
.page-leistung .l-mock-nl .l-rate i { grid-area: 1 / 1; font-style: normal;
  white-space: nowrap; opacity: 0; }
.page-leistung .l-mock-nl .l-rate i:nth-of-type(4) { opacity: 1; color: var(--color-success); }

  .page-leistung .l-mock-se.l-bereit .l-such-tipp,
  .page-leistung .l-mock-gads.l-bereit .l-such-tipp { width: 0; overflow: hidden; }

  .page-leistung .l-mock-se.l-bereit .l-treffer { opacity: 0; transform: none; }
  .page-leistung .l-mock-se.l-bereit .l-treffer--wir { opacity: 0; transform: none; }
  .page-leistung .l-mock-se.l-bereit.is-an .l-such-tipp {
    animation: l-such-tippen 1.4s steps(17, end) .8s forwards; }

  .page-leistung .l-mock-se.l-bereit.is-an .l-treffer:nth-of-type(1) {
    animation: l-os-auf .3s ease 2.4s forwards, l-se-runter1 2.6s ease-in-out 3.6s forwards; }
  .page-leistung .l-mock-se.l-bereit.is-an .l-treffer:nth-of-type(3) {
    animation: l-os-auf .3s ease 2.7s forwards; }
  .page-leistung .l-mock-se.l-bereit.is-an .l-treffer--wir {
    animation: l-os-auf .3s ease 3s forwards, l-se-rauf 2.6s ease-in-out 3.6s forwards; }

  .page-leistung .l-mock-gads.l-bereit .l-anzeige { opacity: 0; transform: translateY(10px); }
  .page-leistung .l-mock-gads.l-bereit.is-an .l-such-tipp {
    animation: l-such-tippen 1.2s steps(17, end) .8s forwards; }
  .page-leistung .l-mock-gads.l-bereit.is-an .l-anzeige {
    animation: l-gads-auf .45s cubic-bezier(.34, 1.56, .64, 1) 2.3s forwards; }

  .page-leistung .l-mock-sads.l-bereit .l-sapost { opacity: 0; transform: translateY(26px); }
  .page-leistung .l-mock-sads.l-bereit .l-gesponsert { opacity: 0; }
  .page-leistung .l-mock-sads.l-bereit.is-an .l-sapost {
    animation: l-gads-auf .6s cubic-bezier(.22, 1, .36, 1) .9s forwards; }
  .page-leistung .l-mock-sads.l-bereit.is-an .l-gesponsert {
    animation: l-os-auf .4s linear 1.8s forwards; }

  .page-leistung .l-mock-nl.l-bereit .l-nlmail { transform: translateX(115%); }
  .page-leistung .l-mock-nl.l-bereit .l-betreff { width: 0; }
  .page-leistung .l-mock-nl.l-bereit .l-rate i { opacity: 0; }
  .page-leistung .l-mock-nl.l-bereit.is-an .l-nlmail {
    animation: l-nl-rein .7s cubic-bezier(.22, 1, .36, 1) .9s forwards; }
  .page-leistung .l-mock-nl.l-bereit.is-an .l-betreff {
    animation: l-nl-tipp 1.4s steps(22, end) 1.9s forwards; }
  .page-leistung .l-mock-nl.l-bereit.is-an .l-rate i:nth-of-type(1) {
    animation: l-os-auf .15s linear 2s forwards, l-os-zu .1s linear 3.5s forwards; }
  .page-leistung .l-mock-nl.l-bereit.is-an .l-rate i:nth-of-type(2) {
    animation: l-os-auf .1s linear 3.55s forwards, l-os-zu .1s linear 4.2s forwards; }
  .page-leistung .l-mock-nl.l-bereit.is-an .l-rate i:nth-of-type(3) {
    animation: l-os-auf .1s linear 4.25s forwards, l-os-zu .1s linear 4.9s forwards; }
  .page-leistung .l-mock-nl.l-bereit.is-an .l-rate i:nth-of-type(4) {
    animation: l-os-auf .15s linear 4.95s forwards; }
@keyframes l-such-tippen { to { width: calc(18ch + 17 * 0.12em); } }

@keyframes l-se-rauf {
  0%, 30%   { transform: translateY(0); }
  60%, 100% { transform: translateY(calc(-1 * var(--se-schritt))); }
}
@keyframes l-se-runter1 {
  0%, 30%   { transform: translateY(0); }
  60%, 100% { transform: translateY(var(--se-schritt)); }
}
@keyframes l-gads-auf { to { opacity: 1; transform: none; } }
@keyframes l-nl-rein { to { transform: none; } }
@keyframes l-nl-tipp { to { width: 100%; } }

.page-leistung .l-mock-bp { padding: var(--sp-l) var(--sp-xl) 0;
  display: flex; justify-content: center; position: relative; overflow: hidden; }
.page-leistung .l-mock-bp .l-bpschacht { display: flex; justify-content: center;
  overflow: hidden; }
.page-leistung .l-mock-bp .l-bpblatt { width: 165px; height: 100%;
  border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-surface-muted); padding: var(--sp-m);
  display: flex; flex-direction: column; gap: var(--sp-s); }
.page-leistung .l-mock-bp .l-bplogo { font-weight: var(--weight-extrabold);
  font-size: var(--text-xs); letter-spacing: var(--tracking-snug); white-space: nowrap;
  margin-bottom: var(--sp-xs); }
.page-leistung .l-mock-bp .l-bplogo::after { content: ""; display: inline-block;
  width: .22em; height: .22em; border-radius: 50%; background: var(--color-danger);
  margin-left: .06em; }
.page-leistung .l-mock-bp .l-bpzeile { display: block; height: 4px; border-radius: 2px;
  background: var(--color-border-strong); }
.page-leistung .l-mock-bp .l-bpzeile:nth-of-type(2) { width: 92%; }
.page-leistung .l-mock-bp .l-bpzeile:nth-of-type(3) { width: 97%; }
.page-leistung .l-mock-bp .l-bpzeile:nth-of-type(4) { width: 55%; }
.page-leistung .l-mock-bp .l-bpumschlag { position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%); width: 210px; height: 64px;
  background: var(--card-bg); border: 1px solid var(--color-border-strong);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; overflow: hidden; }
.page-leistung .l-mock-bp .l-bpumschlag::before { content: ""; position: absolute;
  inset: 0; background: var(--color-surface-muted);
  clip-path: polygon(0 0, 50% 62%, 100% 0); }
.page-leistung .l-mock-bp .l-bpumschlag::after { content: ""; position: absolute;
  left: 50%; top: 22px; transform: translateX(-50%); width: .34rem; height: .34rem;
  border-radius: 50%; background: var(--color-danger); }
  .page-leistung .l-mock-bp.l-bereit .l-bpblatt { transform: translateY(105%); }
  .page-leistung .l-mock-bp.is-an .l-bpblatt {
    animation: l-bp-raus 3.4s cubic-bezier(.22, 1, .36, 1) forwards; }
@keyframes l-bp-raus { 0%, 22% { transform: translateY(105%); }
  100% { transform: translateY(0); } }

.page-leistung .l-mock-crm .l-liste { flex: 1; display: flex; flex-direction: column;
  justify-content: center; gap: var(--sp-s); }
.page-leistung .l-mock-crm .l-eintrag { display: flex; align-items: center; gap: var(--sp-s);
  border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm);
  padding: var(--sp-s) var(--sp-m); }
.page-leistung .l-mock-crm .l-punkt-a { width: .9rem; height: .9rem; border-radius: 50%;
  background: var(--color-success); flex: none; }
.page-leistung .l-mock-crm .l-balken { flex: 1; height: 5px; border-radius: 3px;
  background: var(--color-border-strong); }
.page-leistung .l-mock-crm .l-eintrag em { font-style: normal; font-family: var(--font-mono);
  font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--color-text-subtle); }
.page-leistung .l-mock-crm .l-zstapel em:first-child { color: var(--color-danger); }

.page-leistung .l-mock-app .l-module { flex: 1; display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-s); }
.page-leistung .l-mock-app .l-modul { border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm); display: flex; flex-direction: column;
  justify-content: center; gap: var(--sp-xs); padding: var(--sp-s) var(--sp-m); }
.page-leistung .l-mock-app .l-modul i { display: block; height: 4px; border-radius: 2px;
  background: var(--color-border-strong); }
.page-leistung .l-mock-app .l-modul i:nth-child(2) { width: 60%; }
.page-leistung .l-mock-app .l-modul--aktiv { border-color: var(--color-danger); }

.page-leistung .l-mock-kp .l-kpmitte { flex: 1; display: grid; }
.page-leistung .l-mock-kp .l-kplogin, .page-leistung .l-mock-kp .l-kpdrin {
  grid-area: 1/1; display: flex; flex-direction: column; justify-content: center;
  gap: var(--sp-s); }
.page-leistung .l-mock-kp .l-kplogin { opacity: 0; }
.page-leistung .l-mock-kp .l-feld { height: 2rem; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); display: flex; align-items: center; padding: 0 var(--sp-m);
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .3em;
  color: var(--color-text-subtle); }
.page-leistung .l-mock-kp .l-feld i { font-style: normal; overflow: hidden; white-space: nowrap; }
.page-leistung .l-mock-kp .l-anmelden { text-align: center; font-family: var(--font-mono);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-on-accent); background: var(--color-danger);
  border-radius: var(--radius-sm); padding: var(--sp-s) var(--sp-l); }
.page-leistung .l-mock-kp .l-kpdrin { align-items: center; }
.page-leistung .l-mock-kp .l-kpdrin span:last-child { font-family: var(--font-mono);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-success); }
.page-leistung .l-mock-kp .l-kpkreis { width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid var(--color-success); display: grid; place-items: center; }

.page-leistung .l-mock-kp .l-kpkreis::after { content: ""; width: .95rem; height: .95rem;
  background: var(--color-success);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.5 12.5l5 5 10-11" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.5 12.5l5 5 10-11" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
  transform: rotate(-45deg) translate(1px, -2px); }

.page-leistung .l-mock-auto .l-kette { flex: 1; display: flex; align-items: center; gap: var(--sp-s); }

.page-leistung .l-mock-auto .l-knoten { width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 1px solid var(--color-text); flex: none; display: block; position: relative; }
.page-leistung .l-mock-auto .l-kette i { flex: 1; height: 1px; background: var(--color-border-strong);
  display: block; position: relative; overflow: hidden; }
.page-leistung .l-mock-auto .l-kette i::after { content: ""; position: absolute; inset: 0;
  background: var(--color-text); transform-origin: left; }
.page-leistung .l-mock-auto .l-knoten--fertig { border-color: var(--color-success); background: var(--color-success); }

.page-leistung .l-mock-auto .l-knoten--fertig::after { content: ""; position: absolute; inset: 0;
  margin: auto; width: .6rem; height: .6rem; background: var(--color-on-accent);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.5 12.5l5 5 10-11" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.5 12.5l5 5 10-11" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat; }
.page-leistung .l-mock-auto .l-fz-neu { opacity: 0; }

  .page-leistung .l-mock-crm.l-bereit .l-eintrag--neu { opacity: 0; transform: translateY(-14px); }

  .page-leistung .l-mock-crm.is-an .l-eintrag--neu { animation: l-crm-rein 5s cubic-bezier(.22, 1, .36, 1) forwards; }
  .page-leistung .l-mock-crm.is-an .l-eintrag--neu .l-punkt-a { animation: l-crm-dot 5s linear forwards; }
  .page-leistung .l-mock-crm.is-an .l-zstapel em:nth-child(1) { animation: l-crm-s1 5s linear forwards; }
  .page-leistung .l-mock-crm.is-an .l-zstapel em:nth-child(2) { animation: l-crm-s2 5s linear forwards; }

  .page-leistung .l-mock-app.l-bereit .l-modul { opacity: 0; transform: scale(.7); }
  .page-leistung .l-mock-app.l-bereit .l-modul--aktiv { border-color: var(--color-border-strong); }

  .page-leistung .l-mock-app.is-an .l-modul { animation: l-app-pop .6s cubic-bezier(.34, 1.56, .64, 1) forwards; }
  .page-leistung .l-mock-app.is-an .l-modul:nth-child(2) { animation-delay: .5s; }
  .page-leistung .l-mock-app.is-an .l-modul:nth-child(3) { animation-delay: 1s; }
  .page-leistung .l-mock-app.is-an .l-modul:nth-child(4) { animation-delay: 1.5s; }
  .page-leistung .l-mock-app.is-an .l-modul--aktiv { animation: l-app-aktiv 4.5s cubic-bezier(.34, 1.56, .64, 1) forwards; }

  .page-leistung .l-mock-kp.l-bereit .l-kplogin { opacity: 1; }
  .page-leistung .l-mock-kp.l-bereit .l-kpdrin { opacity: 0; }
  .page-leistung .l-mock-kp.l-bereit .l-feld i { width: 0; }
  .page-leistung .l-mock-kp.l-bereit .l-zstapel em:first-child { opacity: 1; }
  .page-leistung .l-mock-kp.l-bereit .l-zstapel em:last-child { opacity: 0; }

  .page-leistung .l-mock-kp.is-an .l-feld:nth-of-type(1) i { animation: l-kp-tipp1 6s steps(6, end) forwards; }
  .page-leistung .l-mock-kp.is-an .l-feld:nth-of-type(2) i { animation: l-kp-tipp2 6s steps(8, end) forwards; }
  .page-leistung .l-mock-kp.is-an .l-anmelden { animation: l-kp-druck 6s ease-in-out forwards; }
  .page-leistung .l-mock-kp.is-an .l-kplogin { animation: l-kp-weg 6s linear forwards; }
  .page-leistung .l-mock-kp.is-an .l-kpdrin { animation: l-kp-da 6s linear forwards; }
  .page-leistung .l-mock-kp.is-an .l-zstapel em:nth-child(1) { animation: l-kp-weg 6s linear forwards; }
  .page-leistung .l-mock-kp.is-an .l-zstapel em:nth-child(2) { animation: l-kp-da 6s linear forwards; }

  .page-leistung .l-mock-auto.l-bereit .l-knoten { border-color: var(--color-border-strong); }
  .page-leistung .l-mock-auto.l-bereit .l-knoten--fertig { background: transparent; }
  .page-leistung .l-mock-auto.l-bereit .l-knoten--fertig::after { transform: scale(0); }
  .page-leistung .l-mock-auto.l-bereit .l-kette i::after { transform: scaleX(0); }
  .page-leistung .l-mock-auto.l-bereit .l-fz-fertig { opacity: 0; }

  .page-leistung .l-mock-auto.is-an .l-fz-neu { animation: l-auto-neu 6s linear forwards; }
  .page-leistung .l-mock-auto.is-an .l-knoten:nth-of-type(1) { animation: l-auto-k1 6s linear forwards; }
  .page-leistung .l-mock-auto.is-an .l-kette i:nth-of-type(1)::after { animation: l-auto-l1 6s ease-in-out forwards; }
  .page-leistung .l-mock-auto.is-an .l-knoten:nth-of-type(2) { animation: l-auto-k2 6s linear forwards; }
  .page-leistung .l-mock-auto.is-an .l-kette i:nth-of-type(2)::after { animation: l-auto-l2 6s ease-in-out forwards; }
  .page-leistung .l-mock-auto.is-an .l-knoten--fertig { animation: l-auto-k3 6s linear forwards; }
  .page-leistung .l-mock-auto.is-an .l-knoten--fertig::after { animation: l-auto-hak 6s linear forwards; }
  .page-leistung .l-mock-auto.is-an .l-fz-fertig { animation: l-auto-fertig 6s linear forwards; }
@keyframes l-crm-rein { 0% { opacity: 0; transform: translateY(-14px); }
  14%, 100% { opacity: 1; transform: none; } }
@keyframes l-crm-dot { 0%, 58% { background: var(--color-danger); }
  68%, 100% { background: var(--color-success); } }

@keyframes l-crm-s1 { 0% { opacity: 0; } 14% { opacity: 1; } 58% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes l-crm-s2 { 0%, 58% { opacity: 0; } 68%, 100% { opacity: 1; } }
@keyframes l-app-pop { 0% { opacity: 0; transform: scale(.7); }
  100% { opacity: 1; transform: scale(1); } }
@keyframes l-app-aktiv { 0% { opacity: 0; transform: scale(.7); border-color: var(--color-border-strong); }
  9%, 62% { opacity: 1; transform: scale(1); border-color: var(--color-border-strong); }
  72%, 100% { opacity: 1; transform: scale(1); border-color: var(--color-danger); } }
@keyframes l-kp-tipp1 { 0%, 8% { width: 0; } 25%, 100% { width: calc(6ch + 6 * .3em); } }
@keyframes l-kp-tipp2 { 0%, 28% { width: 0; } 45%, 100% { width: calc(8ch + 8 * .3em); } }
@keyframes l-kp-druck { 0%, 50% { transform: scale(1); } 54% { transform: scale(.94); }
  58%, 100% { transform: scale(1); } }
@keyframes l-kp-weg { 0% { opacity: 1; } 60% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes l-kp-da { 0%, 64% { opacity: 0; } 70%, 100% { opacity: 1; } }
@keyframes l-auto-neu { 0% { opacity: 0; } 6% { opacity: 1; } 64% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes l-auto-k1 { 0%, 10% { border-color: var(--color-border-strong); }
  16%, 100% { border-color: var(--color-text); } }
@keyframes l-auto-l1 { 0%, 18% { transform: scaleX(0); } 36%, 100% { transform: scaleX(1); } }
@keyframes l-auto-k2 { 0%, 36% { border-color: var(--color-border-strong); }
  42%, 100% { border-color: var(--color-text); } }
@keyframes l-auto-l2 { 0%, 46% { transform: scaleX(0); } 64%, 100% { transform: scaleX(1); } }
@keyframes l-auto-k3 { 0%, 64% { border-color: var(--color-border-strong); background: transparent; }
  72%, 100% { border-color: var(--color-success); background: var(--color-success); } }
@keyframes l-auto-hak { 0%, 68% { transform: scale(0); }
  76%, 100% { transform: scale(1); } }
@keyframes l-auto-fertig { 0%, 72% { opacity: 0; } 80%, 100% { opacity: 1; } }

.page-leistung .l-mock-rel--boost { --rel0: 85%; --rel1: 90%; --rel2: 95%; }
.page-leistung .l-mock-rel--drive { --rel0: 60%; --rel1: 74%; --rel2: 87%; }
.page-leistung .l-mock-rel--focus { --rel0: 30%; --rel1: 54%; --rel2: 77%; }
.page-leistung .l-mock-rel .l-balkenbahn::before { content: none; }
.page-leistung .l-mock-rel .l-balkenbahn { border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-pill); padding: 3px; height: 1.1rem;
  display: flex; align-items: center; }
.page-leistung .l-mock-rel .l-stand { height: 100%; border-radius: var(--radius-pill);
  display: block; width: 100%; background: var(--color-success); }
.page-leistung .l-mock-rel .l-restliste { flex: 1; display: flex; flex-direction: column;
  justify-content: center; gap: var(--sp-s); }
.page-leistung .l-mock-rel .l-rest { display: flex; align-items: center; gap: var(--sp-s); }
.page-leistung .l-mock-rel .l-ring { width: 1rem; height: 1rem; border-radius: 50%;
  border: 1px solid var(--color-success); display: grid; place-items: center; flex: none; }

.page-leistung .l-mock-rel .l-ring::after { content: ""; width: .58rem; height: .58rem;
  background: var(--color-success);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.5 12.5l5 5 10-11" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.5 12.5l5 5 10-11" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat; }
.page-leistung .l-mock-rel .l-restbalken { height: 5px; border-radius: 3px;
  background: var(--color-border-strong); flex: 1; }
.page-leistung .l-mock-rel .l-rest:nth-child(2) .l-restbalken { max-width: 70%; }
.page-leistung .l-mock-rel .l-rest:nth-child(3) .l-restbalken { max-width: 45%; }

.page-leistung .l-zstapel { display: inline-grid; }
.page-leistung .l-zstapel > * { grid-area: 1/1; font-style: normal; opacity: 0; }
.page-leistung .l-zstapel > :last-child { opacity: 1; }
.page-leistung .l-zstapel--status { text-align: right; }
.page-leistung .l-mockkarte i.l-gruen, .page-leistung .l-mockkarte em.l-gruen,
.page-leistung .l-mockkarte span.l-gruen { color: var(--color-success); }

  .page-leistung .l-mock-rel.l-bereit .l-stand { width: var(--rel0);
    background: var(--color-border-strong); }
  .page-leistung .l-mock-rel.l-bereit .l-ring { border-color: var(--color-border-strong); }
  .page-leistung .l-mock-rel.l-bereit .l-ring::after { transform: scale(0); }
  .page-leistung .l-mock-rel.l-bereit .l-zstapel i { opacity: 0; }
  .page-leistung .l-mock-rel.l-bereit .l-zstapel i:first-child { opacity: 1; }

  .page-leistung .l-mock-rel.is-an .l-stand { animation: l-rel-stufen 6s ease-in-out forwards; }
  .page-leistung .l-mock-rel.is-an .l-rest:nth-child(1) .l-ring { animation: l-rel-ring1 6s linear forwards; }
  .page-leistung .l-mock-rel.is-an .l-rest:nth-child(1) .l-ring::after { animation: l-rel-hak1 6s linear forwards; }
  .page-leistung .l-mock-rel.is-an .l-rest:nth-child(2) .l-ring { animation: l-rel-ring2 6s linear forwards; }
  .page-leistung .l-mock-rel.is-an .l-rest:nth-child(2) .l-ring::after { animation: l-rel-hak2 6s linear forwards; }
  .page-leistung .l-mock-rel.is-an .l-rest:nth-child(3) .l-ring { animation: l-rel-ring3 6s linear forwards; }
  .page-leistung .l-mock-rel.is-an .l-rest:nth-child(3) .l-ring::after { animation: l-rel-hak3 6s linear forwards; }
  .page-leistung .l-mock-rel.is-an .l-zstapel i:nth-child(1) { animation: l-rel-z1 6s linear forwards; }
  .page-leistung .l-mock-rel.is-an .l-zstapel i:nth-child(2) { animation: l-rel-z2 6s linear forwards; }
  .page-leistung .l-mock-rel.is-an .l-zstapel i:nth-child(3) { animation: l-rel-z3 6s linear forwards; }
  .page-leistung .l-mock-rel.is-an .l-zstapel i:nth-child(4) { animation: l-rel-z4 6s linear forwards; }
  .page-leistung .l-mock-rel.is-an .l-zstapel--status i:nth-child(1) { animation: l-rel-s1 6s linear forwards; }
  .page-leistung .l-mock-rel.is-an .l-zstapel--status i:nth-child(2) { animation: l-rel-z4 6s linear forwards; }
@keyframes l-rel-stufen {
  0%, 30%   { width: var(--rel0); background: var(--color-border-strong); }
  40%, 50%  { width: var(--rel1); background: var(--color-border-strong); }
  60%, 70%  { width: var(--rel2); background: var(--color-border-strong); }
  80%       { width: 100%; background: var(--color-border-strong); }
  87%, 100% { width: 100%; background: var(--color-success); }
}
@keyframes l-rel-ring1 { 0%, 32% { border-color: var(--color-border-strong); }
  36%, 100% { border-color: var(--color-success); } }
@keyframes l-rel-hak1 { 0%, 32% { transform: scale(0); }
  36%, 100% { transform: scale(1); } }
@keyframes l-rel-ring2 { 0%, 52% { border-color: var(--color-border-strong); }
  56%, 100% { border-color: var(--color-success); } }
@keyframes l-rel-hak2 { 0%, 52% { transform: scale(0); }
  56%, 100% { transform: scale(1); } }
@keyframes l-rel-ring3 { 0%, 72% { border-color: var(--color-border-strong); }
  76%, 100% { border-color: var(--color-success); } }
@keyframes l-rel-hak3 { 0%, 72% { transform: scale(0); }
  76%, 100% { transform: scale(1); } }

@keyframes l-rel-z1 { 0% { opacity: 1; } 36% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes l-rel-z2 { 0%, 36% { opacity: 0; } 38%, 56% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes l-rel-z3 { 0%, 56% { opacity: 0; } 58%, 76% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes l-rel-z4 { 0%, 85% { opacity: 0; } 87%, 100% { opacity: 1; } }
@keyframes l-rel-s1 { 0%, 85% { opacity: 1; } 87%, 100% { opacity: 0; } }

.page-leistung .l-mock-br { padding: var(--sp-m) var(--sp-xl); display: flex;
  flex-direction: column; gap: .45rem; perspective: 1000px; }
.page-leistung .l-mock-br .l-buch { flex: 1; display: grid;
  grid-template-columns: 1fr 1fr; gap: 0 var(--sp-s); position: relative; }
.page-leistung .l-mock-br .l-seite { border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm); padding: var(--sp-m);
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-s);

  grid-area: 1 / 1; }
.page-leistung .l-mock-br .l-seite.l-seite--bild { grid-area: 1 / 2; }
.page-leistung .l-mock-br .l-seite i { height: 5px; border-radius: 3px;
  background: var(--color-border-strong); display: block; }
.page-leistung .l-mock-br .l-seite i:nth-child(2) { width: 82%; }
.page-leistung .l-mock-br .l-seite i:nth-child(4) { width: 55%; }
.page-leistung .l-mock-br .l-seite--bild { border-style: solid; align-items: center; }
.page-leistung .l-mock-br .l-seite--bild b,
.page-leistung .l-mock-br .l-blatt b { font-size: 2rem; font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight); position: relative; }
.page-leistung .l-mock-br .l-seite--bild b::after,
.page-leistung .l-mock-br .l-blatt b::after { content: ""; position: absolute; right: -.3em;
  bottom: .12em; width: .14em; height: .14em; border-radius: 50%; background: var(--color-danger); }

.page-leistung .l-mock-br .l-blatt { grid-area: 1 / 2;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--card-bg); padding: var(--sp-m);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: var(--sp-s); transform-origin: left center; backface-visibility: hidden;
  opacity: 0; }
.page-leistung .l-mock-br .l-blatt i { height: 5px; border-radius: 3px; width: 100%;
  background: var(--color-border-strong); display: block; }
.page-leistung .l-mock-br .l-blatt i:nth-child(2) { width: 70%; }
.page-leistung .l-mock-br .l-blatt i:nth-child(3) { width: 45%; }
.page-leistung .l-mock-br .l-blatt--1 { z-index: 3; }
.page-leistung .l-mock-br .l-blatt--2 { z-index: 2; align-items: stretch; }
.page-leistung .l-mock-br .l-seitenzahl { font-family: var(--font-mono);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
  color: var(--color-text-subtle); display: flex; justify-content: space-between; }
.page-leistung .l-mock-br .l-zstapel { display: inline-grid; }
.page-leistung .l-mock-br .l-zstapel i { grid-area: 1 / 1; font-style: normal; opacity: 0; }
.page-leistung .l-mock-br .l-zstapel i:nth-of-type(3) { opacity: 1; }

  .page-leistung .l-mock-br.l-bereit .l-seite:not(.l-seite--bild) {
    transform-origin: right center; backface-visibility: hidden;
    transform: rotateY(-180deg); }
  .page-leistung .l-mock-br.l-bereit .l-blatt { opacity: 1; }
  .page-leistung .l-mock-br.l-bereit .l-zstapel i { opacity: 0; }

  .page-leistung .l-mock-br.l-bereit.is-an .l-seite:not(.l-seite--bild) {
    animation: l-br-auf .9s cubic-bezier(.22, 1, .36, 1) .6s forwards; }
  .page-leistung .l-mock-br.l-bereit.is-an .l-zstapel i:nth-of-type(1) {
    animation: l-os-auf .2s linear 1.5s forwards, l-os-zu .1s linear 2.5s forwards; }
  .page-leistung .l-mock-br.l-bereit.is-an .l-blatt--1 {
    animation: l-br-flip .8s ease-in-out 2.1s forwards; }
  .page-leistung .l-mock-br.l-bereit.is-an .l-zstapel i:nth-of-type(2) {
    animation: l-os-auf .1s linear 2.55s forwards, l-os-zu .1s linear 3.7s forwards; }
  .page-leistung .l-mock-br.l-bereit.is-an .l-blatt--2 {
    animation: l-br-flip .8s ease-in-out 3.3s forwards; }
  .page-leistung .l-mock-br.l-bereit.is-an .l-zstapel i:nth-of-type(3) {
    animation: l-os-auf .1s linear 3.75s forwards; }
@keyframes l-br-auf  { from { transform: rotateY(-180deg); } to { transform: rotateY(0); } }
@keyframes l-br-flip { from { transform: rotateY(0); } to { transform: rotateY(-180deg); } }

.page-leistung .l-kopf { text-align: left; max-width: none; margin-inline: 0;
  margin-bottom: 2rem; }
.page-leistung .l-kopf .section-title { margin-inline: 0; margin-bottom: 0; }

.page-leistung .l-kopf .section-badge { text-align: left; }
.page-leistung .l-zeit {

  text-align: left;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-l);
}
.page-leistung .l-zr {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--card-gap); padding: var(--card-padding);
  background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius);
}
.page-leistung .l-zr h3 { font-size: var(--text-lg); letter-spacing: var(--tracking-snug); margin: 0; }
.page-leistung .l-zr p { margin: 0; color: var(--color-text-muted); font-size: var(--text-base); max-width: 70ch; }

.page-leistung .l-angebot {
  margin: 0 0 clamp(1.6rem, 3vw, 2.4rem); text-align: left;
  border: 2px dashed var(--color-success); border-radius: var(--card-radius);
  padding: var(--sp-xl); display: flex; flex-direction: column; gap: var(--sp-xl);
  background: color-mix(in srgb, var(--color-success) 5%, transparent);
}

.page-leistung .l-angebot[hidden] { display: none !important; }
.page-leistung .l-angebot__kopf h3 { margin: 0 0 var(--sp-xs); font-size: var(--text-xl); letter-spacing: var(--tracking-snug); }
.page-leistung .l-angebot__kopf p { margin: 0; color: var(--color-text-muted); font-size: var(--text-base); }

.page-leistung .l-angebot__liste { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-s) var(--sp-l); }
.page-leistung .l-angebot__liste li { grid-column: 1 / -1; display: grid;
  grid-template-columns: subgrid; align-items: baseline; font-size: var(--text-body); }

.page-leistung .l-angebot__liste li > span:first-child { position: relative; padding-left: 1.1em; }
.page-leistung .l-angebot__liste li > span:first-child::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: .45em; height: .45em; border-radius: 50%; background: var(--color-danger);
}
.page-leistung .l-angebot__preis { font-family: var(--font-mono); font-weight: var(--weight-bold); text-align: right; white-space: nowrap;
  display: grid; grid-template-columns: auto 1fr; gap: .45em; }
.page-leistung .l-angebot__preis i { font-style: normal; font-weight: var(--weight-regular); color: var(--color-text-subtle); text-align: left; }
.page-leistung .l-angebot__preis b { font-weight: inherit; text-align: right; }
.page-leistung .l-angebot__fuss {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-l);
  flex-wrap: wrap; border-top: 1px solid var(--color-border); padding-top: var(--sp-l);
}
.page-leistung .l-angebot__summe { margin: 0; display: flex; flex-direction: column; gap: var(--sp-2xs); font-size: var(--text-base); }
.page-leistung .l-angebot__summe strong { font-family: var(--font-mono); font-size: var(--text-xl); }
.page-leistung .l-angebot__summe small { color: var(--color-text-subtle); font-size: var(--text-sm); }

.page-leistung .l-angebot__formular { border-top: 1px solid var(--color-border); padding-top: var(--sp-xl); }
.page-leistung .l-angebot__formular[hidden] { display: none !important; }

.page-leistung .l-angebot__tipp { margin: 0 0 var(--sp-l); color: var(--color-text-muted); font-size: var(--text-base); max-width: 70ch; }
.page-leistung .l-angebot__tipp a { color: var(--color-text); font-weight: var(--weight-semibold); white-space: nowrap; }

.page-leistung .l-rv { opacity: 0; transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1); }
.page-leistung .l-rv.l-sichtbar { opacity: 1; transform: none; }

.page-leistung.no-js .l-rv { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .page-leistung .l-zeit { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {

  .page-leistung .l-warum__inhalt { grid-template-columns: 1fr; }
  .page-leistung .l-baum { grid-template-columns: 1fr; gap: var(--sp-xl); }
  .page-leistung .l-mock--buehne > * { height: 200px; }
  .page-leistung .l-zeit { grid-template-columns: 1fr; }

  .page-leistung .l-mock-bkst .l-bahn { padding-inline: var(--sp-s); gap: var(--sp-2xs); }
  .page-leistung .l-mock-bkst .l-halt { width: 60px; height: 60px; }
  .page-leistung .l-mock-bkst .l-zeichen { font-size: 1.6rem; }
  .page-leistung .l-mock-bkst .l-schrift b { font-size: 1.3rem; }
  .page-leistung .l-mock-bkst .l-swatches i { width: 15px; height: 25px; }
  .page-leistung .l-mock-bkst .l-blatt { width: 26px; height: 34px; }

  .page-leistung .l-mock-bkst .l-halt small { letter-spacing: var(--tracking-label); }

  .page-leistung .l-mock-bkst .l-halt:first-of-type small { left: 0; transform: none; }
  .page-leistung .l-mock-bkst .l-halt:last-of-type small { left: auto; right: 0; transform: none; }

  .page-leistung .l-mock-schau .l-spz b { display: none; }

  .page-leistung .l-mock-sm .l-woche span em { display: none; }
  .page-leistung .l-mock-sm .l-tag svg { width: 13px; height: 13px; }
  .page-leistung .l-mock-schau .l-splan { padding: var(--sp-s); gap: var(--sp-xs); }

  .page-leistung .l-preishinweis { text-align: center; }
  .page-leistung .l-angebot__fuss { flex-direction: column; align-items: stretch; }
  .page-leistung .l-angebot__fuss .btn { align-self: flex-end; }
}