/* Leistungen v2: vier kleine Szenen im Stil der restlichen Seite
   (weisse Karten, Skelett-Balken, Blau als einziger Akzent).
   Alter Stand liegt in backups/leistungen-v1-2026-10-02. */

.p-services--v2 .lx-layout {
  display: grid;
  grid-template-columns: minmax(340px, .9fr) minmax(420px, 1.1fr);
  gap: clamp(56px, 7vw, 120px);
  align-items: start;
}

/* ---------- Buehne ---------- */
.lx-stage-wrap { position: sticky; top: 96px; }
.lx-stage {
  --lx-blue: var(--p-blue, #1466ff);
  --lx-ink: #0b0c10;
  --lx-muted: #8a8f99;
  --lx-skel: #c9ced8;
  --lx-soft: #eceef3;
  --lx-ease: cubic-bezier(.22, 1, .36, 1);
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1 / 1;
  border-radius: 28px;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(20, 102, 255, .12), transparent 60%),
    radial-gradient(90% 80% at 0% 100%, rgba(20, 102, 255, .08), transparent 60%),
    #f3f5fa;
  overflow: hidden;
}
.lx-stage > * { font-size: 2.55cqw; }

/* Szenen blenden ueber */
.lx-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(.97);
  transition: opacity 500ms ease, transform 800ms var(--lx-ease), visibility 0s linear 500ms;
}
.lx-stage[data-step="1"] .lx-scene--web,
.lx-stage[data-step="2"] .lx-scene--brand,
.lx-stage[data-step="3"] .lx-scene--seo,
.lx-stage[data-step="4"] .lx-scene--flow {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 500ms ease 120ms, transform 800ms var(--lx-ease) 120ms, visibility 0s;
}

/* Gemeinsamer Browser */
.lx-browser {
  position: absolute;
  inset: 11% 8% 17% 8%;
  display: flex;
  flex-direction: column;
  border-radius: 1.1em;
  background: #fff;
  box-shadow: 0 2.4em 5em rgba(18, 28, 60, .14), 0 0 0 1px rgba(11, 12, 16, .06);
  overflow: hidden;
}
.lx-bar {
  height: 2.6em;
  flex: none;
  display: flex;
  align-items: center;
  gap: .45em;
  padding: 0 1em;
  border-bottom: 1px solid #eef0f4;
}
.lx-bar > i { width: .62em; height: .62em; border-radius: 50%; background: #e2e5ec; }
.lx-url {
  margin: 0 auto;
  min-width: 46%;
  padding: .25em 1em;
  border-radius: 1em;
  background: #f3f5f8;
  color: var(--lx-muted);
  font-size: .8em;
  text-align: center;
}

/* Schwebende Karten */
.lx-float {
  position: absolute;
  z-index: 3;
  padding: .9em 1.1em;
  border-radius: 1em;
  background: #fff;
  box-shadow: 0 1.4em 3em rgba(18, 28, 60, .16), 0 0 0 1px rgba(11, 12, 16, .05);
  color: var(--lx-ink);
  opacity: 0;
  transform: translateY(1em) scale(.94);
  transition: opacity 400ms ease, transform 700ms var(--lx-ease);
}
.lx-float small { display: block; color: var(--lx-muted); font-size: .72em; font-weight: 600; letter-spacing: .02em; }

/* ---------- 01 Website: Bausteine fuegen sich zusammen ---------- */
.lx-page { flex: 1; display: flex; flex-direction: column; gap: .8em; padding: 1.2em 1.4em; }
.lx-block {
  border-radius: .7em;
  opacity: 0;
  transform: translateY(-1.4em);
  transition: opacity 400ms ease, transform 750ms var(--lx-ease), box-shadow 600ms ease;
}
.lx-block--nav { display: flex; align-items: center; justify-content: space-between; }
.lx-mark { width: 1.6em; height: 1.6em; border-radius: .45em; background: var(--lx-blue); }
.lx-lines { display: flex; gap: .6em; }
.lx-lines i { width: 2.4em; height: .45em; border-radius: 1em; background: var(--lx-soft); }
.lx-block--hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 9.5em;
  padding: 1.2em;
  background: linear-gradient(135deg, #6aa8ff, var(--lx-blue) 60%, #0e4fd6);
  overflow: hidden;
}
.lx-block--hero > span { display: flex; flex-direction: column; gap: .5em; width: 60%; }
.lx-block--hero > span i { height: .9em; border-radius: .3em; background: #fff; }
.lx-block--hero > span i + i { width: 70%; height: .5em; opacity: .7; }
.lx-block--hero > span b { margin-top: .4em; width: 6em; height: 1.7em; border-radius: 2em; background: #fff; }
.lx-block--hero em { color: rgba(255, 255, 255, .85); font-size: .7em; font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lx-block--cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; }
.lx-block--cards i { height: 3.6em; border-radius: .6em; border: 1px solid var(--lx-soft); background: #fff; }
.lx-block--contact {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  padding: .8em 1em;
  border: 1px solid #c7d7ff;
  background: #f2f6ff;
}
.lx-block--contact span { display: flex; flex-direction: column; gap: .4em; width: 45%; }
.lx-block--contact span i { height: .6em; border-radius: 1em; background: var(--lx-skel); }
.lx-block--contact span i + i { width: 70%; height: .45em; background: var(--lx-soft); }
.lx-block--contact b { padding: .55em 1.1em; border-radius: 2em; background: var(--lx-blue); color: #fff; font-size: .72em; }

.lx-stage.is-play .lx-block { opacity: 1; transform: none; }
.lx-stage.is-play .lx-block--nav { transition-delay: 150ms; }
.lx-stage.is-play .lx-block--hero { transition-delay: 350ms; }
.lx-stage.is-play .lx-block--cards { transition-delay: 550ms; }
.lx-stage.is-play .lx-block--contact { transition-delay: 750ms; box-shadow: 0 .8em 2em rgba(20, 102, 255, .14); }

.lx-phone {
  position: absolute;
  z-index: 2;
  right: 3%;
  bottom: 5%;
  width: 21%;
  aspect-ratio: 9 / 18;
  display: flex;
  flex-direction: column;
  gap: .4em;
  padding: 1.4em .6em .6em;
  border-radius: 1.4em;
  background: #fff;
  box-shadow: 0 1.6em 3.4em rgba(18, 28, 60, .2), 0 0 0 1px rgba(11, 12, 16, .08);
  opacity: 0;
  transform: translateX(2em) rotate(4deg);
  transition: opacity 450ms ease, transform 900ms var(--lx-ease);
}
.lx-phone__notch { position: absolute; top: .5em; left: 50%; width: 30%; height: .4em; border-radius: 1em; background: #e2e5ec; transform: translateX(-50%); }
.lx-phone i { display: block; height: 1.6em; border-radius: .4em; border: 1px solid var(--lx-soft); }
.lx-phone i.lx-phone__hero { height: 4.6em; border: 0; background: linear-gradient(135deg, #6aa8ff, var(--lx-blue)); }
.lx-phone b { margin-top: auto; height: 1.5em; border-radius: 2em; background: var(--lx-blue); }
.lx-stage.is-play .lx-phone { opacity: 1; transform: none; transition-delay: 1000ms; }

.lx-float--check { left: 4%; bottom: 5%; }
.lx-float--check ul { margin: .5em 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: auto auto; gap: .35em 1.1em; }
.lx-float--check li { display: flex; align-items: center; gap: .4em; font-size: .82em; font-weight: 700; }
.lx-float--check li::before {
  content:"";
  flex-shrink:0;
  width:1.2em;
  height:1.2em;
  background:var(--lx-blue);
  -webkit-mask:var(--lx-feature-icon) center / contain no-repeat;
  mask:var(--lx-feature-icon) center / contain no-repeat;
  opacity:.4;
  transition:opacity 300ms ease;
}
.lx-float--check li:nth-child(1) { --lx-feature-icon:url("icons/gys-layout.svg"); }
.lx-float--check li:nth-child(2) { --lx-feature-icon:url("icons/gys-file-text.svg"); }
.lx-float--check li:nth-child(3) { --lx-feature-icon:url("icons/gys-server.svg"); }
.lx-float--check li:nth-child(4) { --lx-feature-icon:url("icons/gys-refresh-cw.svg"); }
.lx-stage.is-play .lx-float--check { opacity:1; transform:none; transition-delay:1200ms; }
.lx-stage.is-play .lx-float--check li::before { opacity:1; }
.lx-stage.is-play .lx-float--check li:nth-child(1)::before { transition-delay: 1600ms; }
.lx-stage.is-play .lx-float--check li:nth-child(2)::before { transition-delay: 1800ms; }
.lx-stage.is-play .lx-float--check li:nth-child(3)::before { transition-delay: 2000ms; }
.lx-stage.is-play .lx-float--check li:nth-child(4)::before { transition-delay: 2200ms; }

/* ---------- 02 Marke: Bento ---------- */
.lx-bento {
  position: absolute;
  inset: 8%;
  display: grid;
  grid-template-columns: 1fr 1fr .9fr;
  grid-template-rows: 1fr 1fr .85fr;
  gap: .9em;
}
.lx-tile {
  position: relative;
  border-radius: 1.1em;
  background: #fff;
  box-shadow: 0 1.2em 2.6em rgba(18, 28, 60, .1), 0 0 0 1px rgba(11, 12, 16, .05);
  overflow: hidden;
  opacity: 0;
  transform: translateY(1.2em) scale(.96);
  transition: opacity 450ms ease, transform 800ms var(--lx-ease);
}
.lx-tile small { color: var(--lx-muted); font-size: .72em; font-weight: 600; }
.lx-stage.is-play .lx-tile { opacity: 1; transform: none; }
.lx-stage.is-play .lx-tile--logo { transition-delay: 100ms; }
.lx-stage.is-play .lx-tile--colors { transition-delay: 220ms; }
.lx-stage.is-play .lx-tile--type { transition-delay: 340ms; }
.lx-stage.is-play .lx-tile--card { transition-delay: 460ms; }
.lx-stage.is-play .lx-tile--icon { transition-delay: 580ms; }

.lx-tile--logo {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5em;
  background:
    linear-gradient(rgba(20, 102, 255, .05) 1px, transparent 1px) 0 0 / 2em 2em,
    linear-gradient(90deg, rgba(20, 102, 255, .05) 1px, transparent 1px) 0 0 / 2em 2em,
    #fff;
}
.lx-tile--logo svg { width: 30%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lx-logo__box { fill: var(--lx-blue); transform-box: fill-box; transform-origin: center; transform: scale(.4); opacity: 0; transition: transform 800ms var(--lx-ease), opacity 300ms ease; }
.lx-logo__path { stroke: #fff; stroke-width: 5; stroke-dasharray: 90; stroke-dashoffset: 90; transition: stroke-dashoffset 1000ms var(--lx-ease); }
.lx-stage.is-play .lx-logo__box { transform: none; opacity: 1; transition-delay: 500ms; }
.lx-stage.is-play .lx-logo__path { stroke-dashoffset: 0; transition-delay: 900ms; }
.lx-tile--logo strong { margin-top: .4em; font-size: 1.5em; font-weight: 800; letter-spacing: -.04em; color: var(--lx-ink); }

.lx-tile--colors { grid-column: 3; grid-row: 1 / 3; display: flex; flex-direction: column; gap: .4em; padding: .9em; }
.lx-tile--colors > span {
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding: .35em .5em;
  border-radius: .55em;
  background: var(--c);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 600ms var(--lx-ease);
}
.lx-tile--colors em { font-size: .62em; font-style: normal; font-weight: 700; color: #fff; }
.lx-tile--colors > span:nth-of-type(3) em, .lx-tile--colors > span:nth-of-type(4) em { color: var(--lx-ink); opacity: .7; }
.lx-stage.is-play .lx-tile--colors > span { transform: none; }
.lx-stage.is-play .lx-tile--colors > span:nth-of-type(1) { transition-delay: 700ms; }
.lx-stage.is-play .lx-tile--colors > span:nth-of-type(2) { transition-delay: 800ms; }
.lx-stage.is-play .lx-tile--colors > span:nth-of-type(3) { transition-delay: 900ms; }
.lx-stage.is-play .lx-tile--colors > span:nth-of-type(4) { transition-delay: 1000ms; }

.lx-tile--type { display: flex; flex-direction: column; justify-content: space-between; padding: .9em 1em; }
.lx-tile--type b { font-size: 2.6em; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--lx-ink); }

.lx-tile--card { display: flex; flex-direction: column; justify-content: flex-end; gap: .4em; padding: .9em 1em; background: var(--lx-ink); }
.lx-mini-mark { position: absolute; top: .9em; left: 1em; width: 1.5em; height: 1.5em; border-radius: .4em; background: var(--lx-blue); }
.lx-tile--card i { height: .5em; width: 70%; border-radius: 1em; background: rgba(255, 255, 255, .55); }
.lx-tile--card i + i { width: 45%; background: rgba(255, 255, 255, .25); }

.lx-tile--icon { display: grid; place-items: center; background: var(--p-blue-soft, #eaf0ff); }
.lx-tile--icon svg {
  width: 52%;
  padding: 12%;
  border-radius: 24%;
  background: var(--lx-blue);
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  box-shadow: 0 .8em 1.6em rgba(20, 102, 255, .3);
}

/* ---------- 03 Sichtbarkeit ---------- */
.lx-serp { flex: 1; padding: 1.3em 1.6em; }
.lx-search {
  display: flex;
  align-items: center;
  gap: .6em;
  height: 2.6em;
  padding: 0 1em;
  border-radius: 2em;
  background: #f3f5f8;
  color: var(--lx-ink);
  font-size: .95em;
}
.lx-search svg { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: var(--lx-muted); stroke-width: 2; stroke-linecap: round; }
.lx-caret { width: 1px; height: 1.1em; margin-left: -.45em; background: var(--lx-ink); animation: lx-blink 1s steps(1) infinite; }
@keyframes lx-blink { 50% { opacity: 0; } }
.lx-results { --gap: .55em; margin: 1.1em 0 0; padding: 0; list-style: none; display: grid; gap: var(--gap); }
.lx-result {
  position: relative;
  height: 4.6em;
  padding: .55em .9em;
  border: 1px solid var(--lx-soft);
  border-radius: .7em;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .3em;
  opacity: 0;
  transform: translateY(-100%);
  transition: transform 1100ms var(--lx-ease), opacity 400ms ease, background 600ms ease, border-color 600ms ease;
}
.lx-result small { color: var(--lx-muted); font-size: .66em; line-height: 1.2; }
.lx-result b { display: block; height: .7em; width: 62%; border-radius: 1em; background: var(--lx-skel); }
.lx-result > span { display: block; height: .5em; width: 82%; border-radius: 1em; background: var(--lx-soft); }
.lx-result--own { transform: translateY(calc(300% + 3 * var(--gap))); }
.lx-result--own small { color: var(--lx-blue); }
.lx-result--own b { height: auto; width: auto; background: none; color: var(--lx-blue); font-size: .82em; font-weight: 700; line-height: 1.2; }
.lx-result--own > span { height: auto; width: auto; background: none; color: #6b707a; font-size: .66em; line-height: 1.2; }
.lx-result--own em {
  position: absolute;
  right: .9em;
  top: 50%;
  padding: .3em .7em;
  border-radius: 2em;
  background: var(--lx-blue);
  color: #fff;
  font-size: .66em;
  font-style: normal;
  font-weight: 800;
  opacity: 0;
  transform: translateY(-50%) scale(.6);
  transition: opacity 300ms ease 900ms, transform 600ms var(--lx-ease) 900ms;
}
.lx-stage.is-typed .lx-result { opacity: 1; }
.lx-stage.is-typed .lx-result:nth-child(2) { transition-delay: 0ms, 80ms; }
.lx-stage.is-typed .lx-result:nth-child(3) { transition-delay: 0ms, 160ms; }
.lx-stage.is-typed .lx-result:nth-child(4) { transition-delay: 0ms, 240ms; }
.lx-stage.is-rank .lx-result { transform: none; }
.lx-stage.is-rank .lx-result--own { background: #f2f6ff; border-color: #c7d7ff; box-shadow: 0 .8em 2em rgba(20, 102, 255, .14); }
.lx-stage.is-rank .lx-result--own em { opacity: 1; transform: translateY(-50%) scale(1); }

.lx-float--stats { right: 4%; bottom: 4%; min-width: 34%; }
.lx-float--stats > b { display: flex; align-items: baseline; gap: .1em; margin-top: .2em; font-size: 2em; font-weight: 800; letter-spacing: -.04em; }
.lx-float--stats em { font-style: normal; color: var(--lx-blue); font-size: .6em; }
.lx-bars { display: flex; align-items: flex-end; gap: .3em; height: 2.2em; margin-top: .4em; }
.lx-bars i { flex: 1; height: 100%; border-radius: .2em .2em 0 0; background: var(--lx-blue); transform-origin: bottom; transform: scaleY(.08); transition: transform 900ms var(--lx-ease); }
.lx-stage.is-rank .lx-bars i:nth-child(1) { transform: scaleY(.14); }
.lx-stage.is-rank .lx-bars i:nth-child(2) { transform: scaleY(.22); transition-delay: 80ms; }
.lx-stage.is-rank .lx-bars i:nth-child(3) { transform: scaleY(.34); transition-delay: 160ms; }
.lx-stage.is-rank .lx-bars i:nth-child(4) { transform: scaleY(.52); transition-delay: 240ms; }
.lx-stage.is-rank .lx-bars i:nth-child(5) { transform: scaleY(.76); transition-delay: 320ms; }
.lx-stage.is-rank .lx-bars i:nth-child(6) { transform: scaleY(1); transition-delay: 400ms; }
.lx-stage.is-typed .lx-float--stats { opacity: 1; transform: none; }

/* ---------- 04 Funktionen: Anfrage laeuft von selbst durch ---------- */
.lx-flow { flex: 1; display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.4em; align-items: center; padding: 1.3em 1.4em; }
.lx-form {
  display: flex;
  flex-direction: column;
  gap: .55em;
  padding: .9em;
  border: 1px solid var(--lx-soft);
  border-radius: .9em;
  background: #fff;
  transition: border-color 500ms ease, box-shadow 500ms ease;
}
.lx-form__title { font-size: .8em; font-weight: 800; color: var(--lx-ink); }
.lx-form label { display: block; padding: .4em .6em; border-radius: .5em; background: #f4f5f8; }
.lx-form small { display: block; color: var(--lx-muted); font-size: .62em; }
.lx-form label span { display: block; min-height: 1.25em; color: var(--lx-ink); font-size: .76em; font-weight: 600; }
.lx-form__btn {
  margin-top: .3em;
  padding: .55em;
  border-radius: 2em;
  background: var(--lx-blue);
  color: #fff;
  text-align: center;
  font-size: .74em;
  font-weight: 700;
  transition: transform 160ms ease;
}
.lx-stage.is-pressing .lx-form__btn { transform: scale(.92); }
.lx-stage.is-f1 .lx-form { border-color: #c7d7ff; box-shadow: 0 .8em 2em rgba(20, 102, 255, .12); }

.lx-steps { position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: .7em; }
.lx-steps::before,
.lx-steps::after {
  content: "";
  position: absolute;
  left: 1.1em;
  top: 1.6em;
  bottom: 1.6em;
  width: 2px;
  background: var(--lx-soft);
}
.lx-steps::after { background: var(--lx-blue); transform-origin: top; transform: scaleY(0); transition: transform 1400ms linear; }
.lx-stage.is-f2 .lx-steps::after { transform: scaleY(.5); }
.lx-stage.is-f3 .lx-steps::after { transform: scaleY(1); }
.lx-steps li {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .7em;
  padding: .6em .8em .6em .45em;
  border: 1px solid var(--lx-soft);
  border-radius: .8em;
  background: #fff;
  opacity: .45;
  transition: opacity 400ms ease, border-color 400ms ease, background 400ms ease, transform 600ms var(--lx-ease);
}
.lx-steps li > i {
  flex: none;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  border: 2px solid var(--lx-soft);
  background: #fff center / 70% no-repeat;
  transition: background-color 300ms ease, border-color 300ms ease;
}
.lx-steps b { display: block; color: var(--lx-ink); font-size: .78em; }
.lx-steps small { display: block; color: var(--lx-muted); font-size: .64em; }
.lx-stage.is-f1 .lx-steps li:nth-child(1),
.lx-stage.is-f2 .lx-steps li:nth-child(2),
.lx-stage.is-f3 .lx-steps li:nth-child(3) { opacity: 1; border-color: #c7d7ff; background: #f2f6ff; }
.lx-stage.is-f1 .lx-steps li:nth-child(1) > i,
.lx-stage.is-f2 .lx-steps li:nth-child(2) > i,
.lx-stage.is-f3 .lx-steps li:nth-child(3) > i {
  border-color: var(--lx-blue);
  background-color: var(--lx-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.lx-float--toast { right: 4%; bottom: 5%; display: flex; align-items: center; gap: .7em; font-size: .9em; }
.lx-float--toast b { display: block; font-size: .95em; }
.lx-toast__icon { width: 2.2em; height: 2.2em; flex: none; display: grid; place-items: center; border-radius: .6em; background: var(--lx-blue); }
.lx-toast__icon svg { width: 60%; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lx-stage.is-sent .lx-float--toast { opacity: 1; transform: none; }

/* ---------- Fortschritt ---------- */
.lx-rail { margin: 18px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lx-rail li { color: #8a8f99; font-size: 11px; font-weight: 700; letter-spacing: .04em; transition: color 300ms ease; }
.lx-rail i { display: block; height: 3px; margin-bottom: 8px; border-radius: 3px; background: rgba(11, 12, 16, .1); position: relative; overflow: hidden; }
.lx-rail i::after { content: ""; position: absolute; inset: 0; background: var(--p-blue); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--p-ease); }
.lx-rail li.is-done, .lx-rail li.is-active { color: var(--p-ink); }
.lx-rail li.is-done i::after, .lx-rail li.is-active i::after { transform: scaleX(1); }

/* ---------- Kapitel ---------- */
.p-services--v2 .lx-chapters { border-top: 1px solid var(--p-line); }
.p-services--v2 .lx-chapter { min-height: 72vh; padding: 48px 0 56px; opacity: .32; transition: opacity 400ms ease; }
.p-services--v2 .lx-chapter.is-active { opacity: 1; }
.p-services--v2 .lx-chapter__kicker { margin: 0 0 16px; color: var(--p-blue); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.p-services--v2 .lx-chapter h3 {
  margin: 0;
  max-width: 760px;
  color: var(--p-ink);
  font-size: clamp(34px, 3.6vw, 54px);
  font-weight: 530;
  letter-spacing: -.06em;
  line-height: .98;
}
.p-services--v2 .lx-chapter__media { display: none; margin: 0; padding: 0; border: 0; }
.p-services--v2 .lx-chapter__lead { max-width: 560px; margin: 22px 0 0; color: #3f434b; font-size: 18px; line-height: 1.55; }
.lx-facts { margin: 28px 0 0; display: grid; border-top: 1px solid var(--p-line); max-width: 600px; }
.lx-facts > div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--p-line); }
.lx-facts dt { color: var(--p-blue); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding-top: 3px; }
.lx-facts dd { margin: 0; color: var(--p-ink); font-size: 15px; line-height: 1.5; }
.lx-facts strong { font-weight: 750; }
/* Link-Hover wie im Footer: ruhiger Farbwechsel, keine Bewegung. */
.lx-chapter__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; color: var(--p-ink); font-size: 14px; font-weight: 800; transition: color 180ms ease; }
.lx-chapter__link:hover { color: var(--p-blue); }

/* ---------- Leistungen-Seite: Szene ersetzt das Kartenbild ---------- */
.svc-card .lx-stage--card { aspect-ratio: 16 / 11; margin-bottom: 18px; border-radius: 10px; }
.svc-card .lx-stage--card > * { font-size: 2.2cqw; }
.svc-card .lx-stage--card .lx-browser { inset: 6% 9% 10% 9%; }
.svc-card .lx-stage--card .lx-bento { inset: 6% 9%; }
.svc-card .lx-stage--card .lx-phone { width: 18%; }
.svc-card .lx-stage--card .lx-block--hero { min-height: 7.5em; }
.svc-card .lx-stage--card .lx-block--cards i { height: 2.8em; }
.svc-card .lx-stage--card .lx-result { height: 4.2em; }
@media (max-width: 600px) {
  .svc-card .lx-stage--card { aspect-ratio: 1 / 1; }
  .svc-card .lx-stage--card > * { font-size: 2.55cqw; }
  .svc-card .lx-stage--card .lx-browser { inset: 11% 8% 17% 8%; }
  .svc-card .lx-stage--card .lx-bento { inset: 8%; }
  .svc-card .lx-stage--card .lx-phone { width: 21%; }
  .svc-card .lx-stage--card .lx-block--hero { min-height: 9.5em; }
  .svc-card .lx-stage--card .lx-block--cards i { height: 3.6em; }
  .svc-card .lx-stage--card .lx-result { height: 4.6em; }
}

@media (max-width: 1100px) {
  .p-services--v2 .lx-layout { grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr); gap: 48px; }
}

@media (max-width: 820px) {
  .p-services--v2 .lx-layout { display: block; }
  .lx-stage-wrap { display: none; }
  .p-services--v2 .lx-chapter { min-height: 0; padding: 32px 0 40px; opacity: 1; }
  .p-services--v2 .lx-chapter__media { display: block; margin: 22px 0 4px; }
  .lx-chapter__media .lx-stage { border-radius: 20px; }
  .p-services--v2 .lx-chapter__lead { font-size: 16px; }
  .p-services--v2 .lx-chapter h3 { font-size: 34px; }
  .lx-facts > div { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lx-stage *, .lx-stage { transition-duration: 0ms !important; transition-delay: 0ms !important; animation: none !important; }
}