/* =====================================================================
 * RailTime – page-spezifisches Redesign fuer Leistungen / Services.
 *
 * Das native LMZ-Markup bleibt die Inhaltsquelle. Diese Schicht uebernimmt nur
 * Darstellung und Seitenrhythmus. Sie wird nach rt-system.css geladen und
 * ist deshalb vollstaendig auf body.is-services begrenzt.
 * ===================================================================== */

.is-services {
  background: #080b10;
}

/* -------------------------------------------------------------------------
 * Gespeicherter Deutschlandkarten-Block auf der Leistungsseite.
 * Eigene "Operations Atlas"-Fassung: dunkle Dokumentflaeche, helle technische
 * Kartenbuehne. Die Home-Karte behaelt ihr helles Split-Design unveraendert.
 * ---------------------------------------------------------------------- */

.is-services .rt-services-network {
  --rt-services-network-progress: 100%;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(310px, .72fr) minmax(520px, 1.28fr);
  align-items: stretch;
  min-height: clamp(650px, 66vw, 920px);
  overflow: hidden;
  color: #f5f7fa;
  background:
    radial-gradient(72% 78% at 100% 0, rgba(228, 0, 43, .2), transparent 65%),
    linear-gradient(132deg, #0d1722 0%, #071019 58%, #05090e 100%);
  border-top: 1px solid rgba(255, 255, 255, .09);
  border-bottom: 1px solid rgba(228, 0, 43, .35);
}

.is-services .rt-services-network::before {
  content: "RT / DE";
  position: absolute;
  z-index: 3;
  top: 24px;
  left: max(22px, 7vw);
  color: rgba(255, 255, 255, .4);
  font: 700 9px/1.2 "Space Mono", monospace;
  letter-spacing: .18em;
  pointer-events: none;
}

.is-services .rt-services-network::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #9e001e, #e4002b var(--rt-services-network-progress), rgba(255, 255, 255, .08) var(--rt-services-network-progress));
  box-shadow: 0 0 24px rgba(228, 0, 43, .35);
  pointer-events: none;
}

.is-services .rt-services-network__copy {
  position: relative;
  z-index: 2;
  order: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(92px, 9vw, 146px) clamp(34px, 6vw, 92px) clamp(72px, 8vw, 120px) max(22px, 7vw);
  background: transparent;
}

.is-services .rt-services-network__copy::before {
  content: "";
  width: 2px;
  height: 72px;
  margin-bottom: 32px;
  background: linear-gradient(transparent, #e4002b 28%, #e4002b 72%, transparent);
  box-shadow: 0 0 20px rgba(228, 0, 43, .45);
}

.is-services .rt-services-network .sa-eyebrow {
  margin-bottom: 18px;
  color: #ff607a !important;
}

.is-services .rt-services-network .sa-eyebrow > span {
  background: currentColor;
}

.is-services .rt-x .rt-services-network h2 {
  max-width: 560px;
  margin: 0;
  color: #fff;
  font-size: clamp(36px, 4.15vw, 64px);
  font-weight: 650;
  line-height: .98;
  letter-spacing: -.052em;
  text-wrap: balance;
}

.is-services .rt-services-network__copy > p:not(.sa-eyebrow) {
  max-width: 590px;
  margin: 26px 0 0;
  color: #aeb8c5;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.76;
}

.is-services .rt-services-network .sa-arrow-link {
  width: fit-content;
  margin-top: 30px;
  padding-bottom: 8px;
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}

.is-services .rt-services-network .sa-arrow-link:hover,
.is-services .rt-services-network .sa-arrow-link:focus-visible {
  border-color: #e4002b;
}

.is-services .rt-services-network__map {
  position: relative;
  z-index: 2;
  order: 2;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: clamp(54px, 6vw, 92px) max(22px, 5vw);
  overflow: hidden;
  color: #10151b;
  background:
    linear-gradient(rgba(16, 21, 27, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 21, 27, .045) 1px, transparent 1px),
    radial-gradient(circle at 50% 44%, #fff 0, #f8f8f4 54%, #e8eae5 100%);
  background-size: 54px 54px, 54px 54px, auto;
  clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%, 0 9%);
  transform-origin: 54% 58%;
}

.is-services .rt-services-network__map::before {
  content: "RT";
  position: absolute;
  z-index: 3;
  top: 26px;
  right: 28px;
  color: rgba(16, 21, 27, .5);
  font: 700 9px/1.2 "Space Mono", monospace;
  letter-spacing: .15em;
  pointer-events: none;
}

.is-services .rt-services-network__map .lmz-germany-map,
.is-services .rt-services-network__map .rt-germany-module {
  width: min(100%, 790px);
  margin: 0 auto;
  padding: 0 !important;
  background: transparent !important;
}

.is-services .rt-services-network__map .lmz-germany-map__title--standalone {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 980px) {
  .is-services .rt-services-network {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .is-services .rt-services-network__copy {
    padding: 86px max(22px, 7vw) 58px;
  }

  .is-services .rt-services-network__copy::before {
    height: 52px;
    margin-bottom: 24px;
  }

  .is-services .rt-services-network__map {
    order: 2;
    min-height: 640px;
    clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%, 0 6%);
  }
}

@media (max-width: 560px) {
  .is-services .rt-services-network::before {
    top: 18px;
    left: 20px;
  }

  .is-services .rt-services-network__copy {
    padding: 72px 20px 48px;
  }

  .is-services .rt-x .rt-services-network h2 {
    font-size: clamp(36px, 11.5vw, 49px);
  }

  .is-services .rt-services-network__map {
    min-height: 500px;
    padding: 46px 12px 34px;
  }

  .is-services .rt-services-network__map::before {
    top: 15px;
    right: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-services .rt-services-network {
    --rt-services-network-progress: 100% !important;
  }

  .is-services .rt-services-network__copy,
  .is-services .rt-services-network__map,
  .is-services .rt-services-network__map .rt-location {
    transform: none !important;
  }
}

.is-services .rt-l3-component {
  background: #090c11;
}

.is-services .rt-x {
  --services-ink: #10151b;
  --services-ink-soft: #59636d;
  --services-paper: #f3f2ed;
  --services-paper-soft: #e9ece8;
  --services-night: #090c11;
  --services-panel: #121820;
  --services-red: #e4002b;
  --services-red-dark: #b90d2b;
  --services-line: rgba(16, 21, 27, .16);
  --services-line-strong: rgba(16, 21, 27, .28);
  --services-line-light: rgba(255, 255, 255, .16);
  --services-edge: max(24px, calc((100vw - 1280px) / 2));

  overflow: clip;
  background: var(--services-night);
  color: #f2f4f6;
}

.is-services .rt-x__vorhang,
.is-services .rt-x__blob {
  display: none !important;
}

.is-services .rt-x__bg {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 calc(8.333vw - 1px),
      rgba(255, 255, 255, .025) calc(8.333vw - 1px) 8.333vw
    ),
    linear-gradient(180deg, #090c11 0%, #111820 62%, #17070d 100%);
  pointer-events: none;
}

.is-services .rt-x__korn {
  position: absolute;
  inset: -25%;
  opacity: .03;
  mix-blend-mode: multiply;
}

.is-services .rt-x h1,
.is-services .rt-x h2,
.is-services .rt-x h3 {
  color: inherit;
  font-weight: 600;
  text-wrap: balance;
}

.is-services .rt-x h1 {
  max-width: 18ch;
  font-size: clamp(2.3rem, 3.4vw, 3.15rem);
  font-weight: 500;
  line-height: .99;
  letter-spacing: -.056em;
}

.is-services .rt-x h2 {
  font-size: clamp(1.9rem, 3vw, 3.25rem);
  line-height: 1;
  letter-spacing: -.052em;
}

.is-services .rt-x h3 {
  font-size: clamp(1.12rem, 1.45vw, 1.5rem);
  line-height: 1.08;
  letter-spacing: -.034em;
}

.is-services .rt-x__eyebrow {
  gap: 14px;
  margin-bottom: 26px;
  color: var(--services-red-dark);
  font: 700 .66rem/1.2 "Space Mono", ui-monospace, monospace;
  letter-spacing: .18em;
}

.is-services .rt-x__eyebrow::before {
  width: 38px;
  height: 2px;
  background: currentColor;
}

.is-services .rt-x__lead {
  max-width: 62ch;
  color: var(--services-ink-soft);
  font-size: clamp(1rem, 1.15vw, 1.13rem);
  line-height: 1.75;
}

/* --- Hero ------------------------------------------------------------- */

.is-services .rt-x__hero {
  --services-hero-edge: max(28px, calc((100vw - 1180px) / 2));

  position: relative;
  display: grid;
  width: 100%;
  max-width: none;
  min-height: clamp(720px, 82svh, 960px);
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  grid-template-areas:
    "copy visual"
    "facts visual";
  gap: 26px clamp(40px, 5.4vw, 72px);
  align-items: center;
  margin: 0 auto;
  padding: clamp(70px, 7vw, 104px) var(--services-hero-edge);
  overflow: clip;
  border-bottom: 1px solid var(--services-line);
  isolation: isolate;
  background:
    radial-gradient(circle at 88% 14%, rgba(228, 0, 43, .075), transparent 30%),
    linear-gradient(132deg, #fbfaf6 0%, #f4f3ef 58%, #ecefeb 100%);
  color: var(--services-ink);
}

.is-services .rt-x__hero::before {
  position: absolute;
  top: 76px;
  right: var(--services-hero-edge);
  left: var(--services-hero-edge);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--services-red) 0 8%, var(--services-line) 8% 100%);
}

.is-services .rt-x__hero::after {
  position: absolute;
  right: var(--services-hero-edge);
  bottom: 28px;
  content: "RT / 01";
  color: rgba(16, 21, 27, .42);
  font: 700 .54rem/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: .18em;
}

.is-services .rt-x__hero-text {
  position: relative;
  z-index: 2;
  grid-area: copy;
  align-self: end;
  min-width: 0;
  max-width: 680px;
  padding-left: clamp(18px, 2vw, 28px);
}

.is-services .rt-x__hero-text::before {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 0;
  width: 3px;
  content: "";
  background: linear-gradient(180deg, var(--services-red) 0 24%, transparent 24% 100%);
}

.is-services .rt-x__hero .rt-x__lead {
  max-width: 58ch;
  margin-top: 28px;
}

.is-services .rt-x__hero-figur {
  position: relative;
  z-index: 2;
  grid-area: visual;
  align-self: stretch;
  width: 100%;
  min-height: clamp(420px, 50vh, 560px);
  margin: 0;
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
}

.is-services .rt-x__hero-figur::before {
  position: absolute;
  z-index: -1;
  top: -18px;
  right: -18px;
  width: 58%;
  height: 42%;
  border-top: 2px solid var(--services-red);
  border-right: 2px solid var(--services-red);
  content: "";
}

.is-services .rt-x__hero-figur::after {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 13px 16px;
  content: attr(data-services-label);
  background: var(--services-red);
  color: #fff;
  font: 700 .58rem/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: .15em;
}

.is-services .rt-x__hero-figur img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  filter: none;
}

.is-services .rt-x__aktionen {
  gap: 12px;
  margin-top: 38px;
}

.is-services .rt-x__btn {
  min-height: 50px;
  justify-content: center;
  padding: 0 24px;
  border-radius: 2px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.is-services .rt-x__btn--voll {
  background: var(--services-red);
  box-shadow: 0 16px 34px rgba(228, 0, 43, .18);
}

.is-services .rt-x__btn--voll:hover {
  background: #c91432;
}

.is-services .rt-x__btn--rand {
  border: 0;
  border-bottom: 1px solid rgba(16, 21, 27, .42);
  color: var(--services-ink);
}

.is-services .rt-x__btn--rand:hover {
  border-color: var(--services-red);
  background: transparent;
  color: var(--services-red-dark);
}

.is-services .rt-x__btn:focus-visible,
.is-services .rt-x a:focus-visible,
.is-services .rt-x button:focus-visible {
  outline: 3px solid #ff6b83;
  outline-offset: 4px;
}

/* --- Kennzahlen: gleiche leichte Faktenleiste wie Home und About ------ */

.is-services .rt-x__zahlen {
  position: relative;
  z-index: 3;
  display: grid;
  width: min(calc(100% - 48px), 1180px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 auto;
  border-top: 1px solid var(--services-line);
  border-bottom: 1px solid var(--services-line);
  background: rgba(255, 255, 255, .38);
  color: var(--services-ink);
}

.is-services .rt-x__hero > .rt-x__zahlen {
  grid-area: facts;
  align-self: start;
  width: 100%;
  margin: 0;
}

.is-services .rt-x__zahlen::after {
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 1px;
  content: "";
  background: var(--services-red);
}

.is-services .rt-x__zahl {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 112px;
  gap: 7px;
  align-content: center;
  padding: 23px 18px;
  border: 0;
  border-right: 1px solid rgba(16, 21, 27, .13);
}

.is-services .rt-x__zahl:first-child {
  padding-left: 0;
}

.is-services .rt-x__zahl:last-child {
  border-right: 0;
}

.is-services .rt-x__zahl::before {
  position: static;
  content: attr(data-services-code);
  color: rgba(16, 21, 27, .42);
  font: 700 .48rem/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: .12em;
}

.is-services .rt-x__zahl:nth-child(1):not([data-services-code])::before { content: "01"; }
.is-services .rt-x__zahl:nth-child(2):not([data-services-code])::before { content: "02"; }
.is-services .rt-x__zahl:nth-child(3):not([data-services-code])::before { content: "03"; }

.is-services .rt-x__zahl strong,
.is-services .rt-x__zahl:first-child strong {
  color: var(--services-ink);
  font: 800 clamp(1.55rem, 2.3vw, 2.2rem)/.9 "Space Mono", ui-monospace, monospace;
  letter-spacing: -.06em;
}

.is-services .rt-x__zahl span {
  max-width: 24ch;
  margin: 0;
  color: #5f6871;
  font-size: .54rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Die doppelte Kacheluebersicht bleibt bereits vor dem JS-Start unsichtbar.
   Der Services-Owner entfernt das Segment anschliessend vollstaendig aus DOM
   und Accessibility-Tree. */
.is-services .rt-x__section:has(.rt-x__kacheln) {
  display: none !important;
}

/* --- Leistungsdetails ohne Pin-/Scrub-Strecke ----------------------- */

.is-services .rt-services-detail {
  position: relative;
  padding: clamp(60px, 6vw, 96px) var(--services-edge) clamp(66px, 6.5vw, 104px);
  background:
    linear-gradient(90deg, rgba(9, 12, 17, .2), rgba(9, 12, 17, .92)),
    var(--services-night);
  color: #f2f4f6;
}

.is-services .rt-services-detail::before {
  position: absolute;
  top: 0;
  right: var(--services-edge);
  left: var(--services-edge);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--services-red) 0 10%, var(--services-line-light) 10% 100%);
}

.is-services .rt-services-detail > header {
  max-width: 1280px;
  margin: 0 auto clamp(58px, 7vw, 96px);
}

.is-services .rt-services-detail > header h2 {
  max-width: 16ch;
}

.is-services .rt-services-detail .rt-x__eyebrow {
  color: #ff526f;
}

.is-services .rt-services-detail .rt-x__buehne {
  display: grid;
  max-width: 1280px;
  grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr);
  gap: clamp(42px, 7vw, 112px);
  align-items: start;
  margin: 0 auto;
}

.is-services .rt-services-detail .rt-x__vitrine {
  position: sticky;
  top: 112px;
  overflow: hidden;
  border: 1px solid var(--services-line-light);
  border-radius: 0;
  aspect-ratio: 4 / 5;
  background: #10151c;
  isolation: isolate;
  /* Die Vitrine hat in jedem Zustand eine feste Groesse. Layout- und
     Paint-Containment kapseln clip-path-, Skalierungs- und Wischerarbeit
     der Bildwechsel vollstaendig in dieser Box - der Rest der Seite wird
     davon weder neu vermessen noch neu gezeichnet. */
  contain: layout paint;
}

@media (min-width: 1001px) {
  /* ScrollTrigger bewegt bereits die gesamte Buehne. Das Bild bleibt darin
     relativ verankert, damit nicht zwei Sticky-Systeme gegeneinander laufen. */
  .is-services .rt-services-detail .rt-x__buehne.is-services-scroll-stage .rt-x__vitrine {
    position: relative;
    top: 0;
  }

  /* Die angeheftete Buehne bleibt auch bei 720 px hohen Laptop-Viewports
     vollstaendig sichtbar. Der normale Akkordeonmodus behaelt ausserhalb der
     Scroll-Buehne seine grosszuegigeren Abstaende. */
  .is-services .rt-services-detail .rt-x__buehne.is-services-scroll-stage .rt-x__kopf {
    min-height: 68px;
    grid-template-columns: 42px minmax(0, 1fr) 24px;
    gap: 16px;
    padding: 10px 0;
  }

  .is-services .rt-services-detail .rt-x__buehne.is-services-scroll-stage .rt-x__feld-inner {
    padding: 0 0 20px 58px;
  }

  .is-services .rt-services-detail .rt-x__buehne.is-services-scroll-stage .rt-x__feld p {
    line-height: 1.58;
  }

  .is-services .rt-services-detail .rt-x__buehne.is-services-scroll-stage .rt-x__chips {
    margin: 12px 0 14px;
  }

  .is-services .rt-services-detail .rt-x__buehne.is-services-scroll-stage .rt-x__chips li {
    min-height: 40px;
    padding-top: 9px;
    padding-bottom: 8px;
  }

  .is-services .rt-services-detail .rt-x__buehne.is-services-scroll-stage .rt-x__chips li::before {
    top: 10px;
  }

  .is-services .rt-services-detail .rt-x__buehne.is-services-scroll-stage .rt-x__textlink {
    min-height: 36px;
  }

  .is-services .rt-services-detail .rt-x__buehne.is-services-scroll-stage .rt-x__fortschritt {
    margin-top: 16px;
  }
}

.is-services .rt-services-detail .rt-x__vitrine::after {
  position: absolute;
  z-index: 6;
  top: 0;
  right: 0;
  padding: 12px 14px;
  content: attr(data-services-stage-label);
  background: rgba(9, 12, 17, .86);
  color: rgba(255, 255, 255, .76);
  font: 700 .52rem/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: .15em;
}

.is-services .rt-services-detail .rt-services-image-scan {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: 0;
  width: 38%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(228, 0, 43, .12) 28%,
    rgba(255, 255, 255, .38) 51%,
    rgba(228, 0, 43, .08) 72%,
    transparent 100%
  );
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-150%, 0, 0);
}

/*
 * will-change nur waehrend des Wechsels.
 *
 * Vorher stand es dauerhaft auf allen fuenf Figuren, allen fuenf Bildern und
 * dem Wischer. Das sind elf permanent auf die GPU gehobene Ebenen, die
 * Speicher belegen und auf Telefonen selbst beim reinen Scrollen Frames
 * kosten - obwohl 99 % der Zeit gar nichts animiert. Der Services-Owner
 * setzt is-wechselt nur fuer die Dauer der Bildtimeline.
 */
.is-services .rt-services-detail .rt-x__vitrine.is-wechselt .rt-services-image-scan {
  will-change: transform, opacity;
}

.is-services .rt-services-detail .rt-x__vitrine figure {
  opacity: 0;
  visibility: hidden;
}

.is-services .rt-services-detail .rt-x__vitrine.is-wechselt figure {
  will-change: transform, opacity, clip-path;
}

.is-services .rt-services-detail .rt-x__vitrine.is-wechselt img {
  will-change: transform;
}

.is-services .rt-services-detail .rt-x__vitrine figure.is-aktiv {
  opacity: 1;
  visibility: visible;
}

.is-services .rt-x:not([data-services-enhanced="true"]) .rt-services-detail .rt-x__vitrine figure:first-child {
  opacity: 1;
  visibility: visible;
}

.is-services .rt-services-detail .rt-x__vitrine img {
  object-position: center;
  filter: none;
  transform-origin: center;
}

.is-services .rt-services-detail .rt-x__vitrine-nr {
  z-index: 5;
  right: 22px;
  bottom: 17px;
  left: auto;
  color: #fff;
  font-size: clamp(3.5rem, 6vw, 6.5rem);
  mix-blend-mode: normal;
  opacity: .9;
}

.is-services .rt-services-detail .rt-x__eintrag {
  border-top: 1px solid var(--services-line-light);
  scroll-margin-top: 116px;
}

.is-services .rt-services-detail .rt-x__eintrag:last-of-type {
  border-bottom: 1px solid var(--services-line-light);
}

.is-services .rt-services-detail .rt-x__kopf {
  min-height: 88px;
  grid-template-columns: 50px minmax(0, 1fr) 28px;
  gap: 20px;
  padding: 18px 0;
  color: #f2f4f6;
}

.is-services .rt-services-detail .rt-x__kopf:hover {
  color: #fff;
}

.is-services .rt-services-detail .rt-x__kopf b {
  color: rgba(255, 255, 255, .36);
  font-size: .68rem;
}

.is-services .rt-services-detail .rt-x__kopf strong {
  font-size: clamp(1.04rem, 1.45vw, 1.32rem);
}

.is-services .rt-services-detail .rt-x__eintrag.is-offen .rt-x__kopf {
  padding-left: 0;
  color: #fff;
}

.is-services .rt-services-detail .rt-x__eintrag.is-offen .rt-x__kopf b {
  color: #ff526f;
}

/* Ohne JavaScript bleibt der vollstaendige Inhalt lesbar. Der Services-
   Owner setzt erst nach der Initialisierung gezielt Inline-Hoehen. */
.is-services .rt-services-detail .rt-x__feld {
  height: auto;
  overflow: visible;
}

.is-services .rt-x[data-services-enhanced="true"] .rt-services-detail .rt-x__feld {
  overflow: hidden;
}

.is-services .rt-services-detail .rt-x__feld-inner {
  padding: 0 0 38px 70px;
}

.is-services .rt-services-detail .rt-x__feld p {
  max-width: 58ch;
  color: #aeb7c0;
  font-size: .94rem;
  line-height: 1.75;
}

.is-services .rt-services-detail .rt-x__chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 26px;
  margin: 24px 0 26px;
  counter-reset: services-step;
}

.is-services .rt-services-detail .rt-x__chips li {
  position: relative;
  min-height: 52px;
  padding: 14px 4px 12px 34px;
  border: 0;
  border-top: 1px solid var(--services-line-light);
  border-radius: 0;
  color: #aeb7c0;
  font-size: .75rem;
  line-height: 1.45;
  counter-increment: services-step;
}

.is-services .rt-services-detail .rt-x__chips li::before {
  position: absolute;
  top: 15px;
  left: 0;
  content: counter(services-step, decimal-leading-zero);
  color: #ff526f;
  font: 700 .58rem/1.4 "Space Mono", ui-monospace, monospace;
}

.is-services .rt-services-detail .rt-x__textlink {
  min-height: 44px;
  color: #fff;
  font-size: .76rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.is-services .rt-services-detail .rt-x__fortschritt {
  gap: 18px;
  margin-top: 30px;
}

.is-services .rt-services-detail .rt-x__fortschritt-spur {
  background: var(--services-line-light);
}

/*
 * Fortschrittsbalken ausserhalb der angehefteten Buehne.
 *
 * Im gepinnten Desktop-Bereich folgt der Balken pro Frame dem echten
 * Scrollfortschritt - dort darf keine Transition dazwischenliegen. Ueberall
 * sonst (mobil und im normalen Akkordeonmodus) genuegt eine CSS-Transition:
 * das ersetzt einen GSAP-Tween pro Wechsel und laeuft rein auf dem
 * Compositor.
 */
.is-services .rt-services-detail .rt-x__fortschritt-spur i.is-weich {
  transition: transform .34s cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .is-services .rt-services-detail .rt-x__fortschritt-spur i.is-weich {
    transition: none;
  }
}

.is-services .rt-services-detail .rt-x__fortschritt span {
  color: #aeb7c0;
}

/* --- Ablauf -----------------------------------------------------------
 * Das seitenuebergreifende Ablaufsegment liegt in rt-process.css. So sind
 * Leistungen, Ueber uns und die dunkle Startseitenvariante pixelgleich.
 */

/* --- Notfall-Abschluss ------------------------------------------------ */

.is-services .rt-x__cta {
  position: relative;
  display: grid;
  width: min(calc(100% - 48px), 1280px);
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  gap: clamp(34px, 5vw, 78px);
  align-items: stretch;
  margin: clamp(82px, 9vw, 132px) auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: var(--services-night);
  color: #fff;
  box-shadow: 0 32px 80px rgba(7, 10, 14, .18);
}

.is-services .rt-x__cta::before {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  content: "";
  background: var(--services-red);
}

.is-services .rt-x__cta > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(46px, 6vw, 82px);
}

.is-services .rt-x__cta .rt-x__eyebrow {
  color: #ff526f;
}

.is-services .rt-x__cta h2 {
  max-width: 12ch;
  color: #fff;
}

.is-services .rt-x__cta .rt-x__lead {
  margin-top: 24px;
  color: #aeb7c0;
}

.is-services .rt-x__cta figure {
  min-height: 460px;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
}

.is-services .rt-x__cta img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  filter: none;
}

/* --- Responsive ------------------------------------------------------- */

@media (max-width: 1100px) {
  .is-services .rt-x__hero {
    min-height: auto;
    grid-template-columns: minmax(0, 1.04fr) minmax(300px, .96fr);
    padding-top: 138px;
  }

  .is-services .rt-x__hero-text { grid-column: auto; }
  .is-services .rt-x__hero-figur { grid-column: auto; min-height: 510px; }

  .is-services .rt-services-detail .rt-x__buehne {
    grid-template-columns: minmax(270px, .68fr) minmax(0, 1.32fr);
    gap: 42px;
  }
}

@media (max-width: 1000px) {
  .is-services .rt-services-detail .rt-x__buehne.is-services-mobile-scroll-stage {
    overflow-anchor: none;
    /* Wird vom Owner je nach Scrollgeschwindigkeit auf 1 bis 1,8 gesetzt. */
    --services-tempo: 1;
  }

  .is-services .rt-services-detail .rt-x__buehne.is-services-mobile-scroll-stage .rt-x__eintrag {
    min-height: var(--services-mobile-entry-height, auto);
    /* Die Hoehe des Eintrags steht fest. Damit bleibt jede Bewegung im
       Inneren fuer die Nachbarn folgenlos - Layout- und Malarbeit werden
       auf diese Box begrenzt. */
    contain: layout paint;
  }

  /*
   * Bild- und Akkordeonwechsel laufen mobil vollstaendig ueber CSS.
   *
   * Der Zustand steht bereits in den Klassen is-aktiv und is-offen, die der
   * Owner ohnehin umschaltet. Auf dem Telefon war die reine Erzeugung der
   * GSAP-Objekte der teuerste Posten des Wechsels (gemessene 53 ms
   * Skriptzeit in einem Frame bei vierfach gedrosseltem Prozessor). CSS
   * braucht dafuer keinen einzigen Frame Javascript: Deckkraft und
   * Transform laufen auf dem Compositor, die Dauern skalieren ueber
   * --services-tempo mit der Scrollgeschwindigkeit.
   */
  /*
   * Reine Deckkraft-Kreuzblende, ohne jede Transformation.
   *
   * Ein gleichzeitig laufendes scale() auf Figur UND Bild sah zwar edler aus,
   * zwang den Browser aber, die beiden beteiligten Bildebenen in jedem Frame
   * neu zu rastern - gemessen vier lange Frames mit zusammen 255 ms allein
   * beim ruhigen Durchscrollen. Deckkraft dagegen bearbeitet der Compositor
   * ohne neues Rastern. Die Bewegung steckt hier ohnehin im Scrollen selbst;
   * eine zusaetzliche Skalierung ist auf einem Telefonbildschirm kaum
   * wahrnehmbar und ihren Preis nicht wert.
   */
  .is-services .rt-services-detail .is-services-mobile-scroll-stage .rt-x__vitrine figure {
    transform: none;
    transition:
      opacity calc(.34s / var(--services-tempo, 1)) cubic-bezier(.16, 1, .3, 1),
      visibility 0s linear calc(.34s / var(--services-tempo, 1));
  }

  .is-services .rt-services-detail .is-services-mobile-scroll-stage .rt-x__vitrine figure.is-aktiv {
    transition:
      opacity calc(.34s / var(--services-tempo, 1)) cubic-bezier(.16, 1, .3, 1),
      visibility 0s;
  }

  .is-services .rt-services-detail .is-services-mobile-scroll-stage .rt-x__vitrine figure img {
    transform: none;
    transition: none;
  }

  /* Der Lichtwischer bleibt der Desktop-Buehne vorbehalten. */
  .is-services .rt-services-detail .is-services-mobile-scroll-stage .rt-services-image-scan {
    display: none;
  }

  /* Das Feld behaelt seine Hoehe; nur der Inhalt blendet ein und aus. */
  .is-services .rt-services-detail .is-services-mobile-scroll-stage .rt-x__feld-inner {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition:
      opacity calc(.3s / var(--services-tempo, 1)) cubic-bezier(.16, 1, .3, 1),
      transform calc(.42s / var(--services-tempo, 1)) cubic-bezier(.16, 1, .3, 1);
  }

  .is-services .rt-services-detail .is-services-mobile-scroll-stage .rt-x__eintrag.is-offen .rt-x__feld-inner {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  @media (prefers-reduced-motion: reduce) {
    .is-services .rt-services-detail .is-services-mobile-scroll-stage .rt-x__vitrine figure,
    .is-services .rt-services-detail .is-services-mobile-scroll-stage .rt-x__vitrine figure img,
    .is-services .rt-services-detail .is-services-mobile-scroll-stage .rt-x__feld-inner {
      transition: none;
      transform: none;
    }
  }

  .is-services .rt-services-detail .rt-x__buehne.is-services-mobile-scroll-stage .rt-x__vitrine {
    position: sticky;
    z-index: 5;
    top: calc(env(safe-area-inset-top, 0px) + 86px);
    align-self: start;
    box-shadow: 0 22px 48px rgba(0, 0, 0, .32);
  }
}

@media (max-width: 900px) {
  .is-services .rt-x {
    --services-edge: clamp(22px, 6vw, 54px);
  }

  .is-services .rt-x__hero {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "visual" "facts";
    gap: 56px;
    padding-top: 142px;
  }

  .is-services .rt-x__hero-text,
  .is-services .rt-x__hero-figur {
    grid-column: auto;
  }

  .is-services .rt-x__hero-figur {
    width: min(100%, 720px);
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .is-services .rt-x__hero-figur img {
    min-height: 0;
  }

  .is-services .rt-services-detail .rt-x__buehne {
    grid-template-columns: 1fr;
  }

  .is-services .rt-services-detail .rt-x__vitrine {
    position: relative;
    top: auto;
    width: min(100%, 720px);
    aspect-ratio: 16 / 10;
  }

  .is-services .rt-services-detail .rt-x__buehne.is-services-mobile-scroll-stage {
    gap: clamp(26px, 6vw, 42px);
  }

  .is-services .rt-services-detail .rt-x__buehne.is-services-mobile-scroll-stage .rt-x__vitrine {
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + 78px);
    width: 100%;
    height: clamp(210px, 36svh, 330px);
    aspect-ratio: auto;
  }

  .is-services .rt-x__cta {
    grid-template-columns: 1fr;
  }

  .is-services .rt-x__cta figure {
    min-height: 340px;
  }
}

@media (max-width: 640px) {
  .is-services .rt-x h1 {
    max-width: 13ch;
    font-size: clamp(2.1rem, 8.6vw, 2.7rem);
    line-height: 1;
    hyphens: auto;
    overflow-wrap: anywhere;
  }

  .is-services .rt-x h2 {
    font-size: clamp(1.7rem, 7.8vw, 2.3rem);
  }

  .is-services .rt-x__hero {
    gap: 44px;
    padding: 126px 22px 68px;
  }

  .is-services .rt-x__hero::before {
    top: 88px;
    right: 22px;
    left: 22px;
  }

  .is-services .rt-x__hero::after {
    right: 22px;
    bottom: 20px;
    font-size: .46rem;
  }

  .is-services .rt-x__hero-text::before {
    display: none;
  }

  .is-services .rt-x__hero .rt-x__lead {
    margin-top: 22px;
    font-size: .98rem;
  }

  .is-services .rt-x__hero-figur {
    aspect-ratio: 4 / 3;
  }

  .is-services .rt-x__aktionen {
    display: grid;
    grid-template-columns: 1fr;
  }

  .is-services .rt-x__btn {
    width: 100%;
    min-height: 48px;
  }

  .is-services .rt-x__hero > .rt-x__zahlen,
  .is-services .rt-x__zahlen {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .is-services .rt-x__zahl,
  .is-services .rt-x__zahl:first-child {
    min-height: 92px;
    padding: 18px 8px;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(16, 21, 27, .13);
  }

  .is-services .rt-x__zahl:last-child {
    border-bottom: 0;
  }

  .is-services .rt-x__zahl::before {
    font-size: .42rem;
  }

  .is-services .rt-x__zahl strong,
  .is-services .rt-x__zahl:first-child strong {
    font-size: 1.48rem;
  }

  .is-services .rt-x__zahl span {
    margin: 0;
    font-size: .49rem;
  }

  .is-services .rt-services-detail {
    padding-right: 22px;
    padding-left: 22px;
  }

  .is-services .rt-services-detail .rt-x__vitrine {
    aspect-ratio: 4 / 3;
  }

  .is-services .rt-services-detail .rt-x__kopf {
    min-height: 76px;
    grid-template-columns: 38px minmax(0, 1fr) 24px;
    gap: 12px;
  }

  .is-services .rt-services-detail .rt-x__feld-inner {
    padding-left: 0;
  }

  .is-services .rt-services-detail .rt-x__chips {
    grid-template-columns: 1fr;
  }

  .is-services .rt-x__cta {
    width: calc(100% - 28px);
    margin: 70px auto;
  }

  .is-services .rt-x__cta > div {
    padding: 42px 24px;
  }

  .is-services .rt-x__cta figure {
    min-height: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-services .rt-x *,
  .is-services .rt-x *::before,
  .is-services .rt-x *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

}