@charset "UTF-8";

/*
 * Gemeinsames Raster fuer die beiden Kartenreihen.
 * Oben (3 Merkmale) und unten (4 Einstiege) folgen bewusst exakt derselben
 * Aussenkante. Die Einzelkarten teilen nur ihre jeweilige Reihe gleichmaessig.
 */

/* English copy uses the same typography, with natural line wrapping. */
html:lang(en) .card-design-recommended .premium-copy h2 .premium-title-accent,
html:lang(en) .card-design-recommended .premium-copy .eyebrow.eyebrow-symmetric {
  white-space: normal;
}

/* Weicher Uebergang der roten Notfallleiste in das Kopfbild. */
:root {
  --emergency-height: 40px;
}

.hero-concept-v1 .emergency-bar {
  --pv-emergency-band: linear-gradient(90deg, #b9231d 0%, #f44336 48%, #ff594c 100%);
  border-bottom: 0;
  background: var(--pv-emergency-band);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}

.hero-concept-v1 .emergency-bar::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 18px;
  pointer-events: none;
  background: var(--pv-emergency-band);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 8%, rgba(0, 0, 0, .88) 24%, rgba(0, 0, 0, .54) 54%, rgba(0, 0, 0, .18) 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 8%, rgba(0, 0, 0, .88) 24%, rgba(0, 0, 0, .54) 54%, rgba(0, 0, 0, .18) 80%, transparent 100%);
}

.hero-concept-v1 .emergency-inner {
  min-height: var(--emergency-height);
  gap: clamp(18px, 3vw, 40px);
}

/* V166: Der Anrufblock sitzt am rechten Seitenrand, weiterhin vertikal mittig. */
@media (min-width: 621px) {
  .hero-concept-v1 .emergency-inner {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-left: max(32px, calc((100vw - 1360px) / 2));
    padding-right: clamp(18px, 2vw, 32px);
  }
}

.hero-concept-v1 .emergency-message,
.hero-concept-v1 .emergency-call {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.hero-concept-v1 .emergency-copy,
.hero-concept-v1 .emergency-call-copy {
  display: grid;
  gap: 2px;
  line-height: 1.05;
}

.hero-concept-v1 .emergency-copy small,
.hero-concept-v1 .emergency-call-copy small {
  color: rgba(255, 255, 255, .76);
  font-size: .51rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero-concept-v1 .emergency-copy strong {
  color: #fff;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .025em;
}

.hero-concept-v1 .emergency-call {
  padding: 4px 10px;
  color: #fff;
  text-decoration: none;
}

.hero-concept-v1 .emergency-call:hover,
.hero-concept-v1 .emergency-call:focus-visible {
  color: #fff;
}

.hero-concept-v1 .emergency-phone-icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 50%;
  background: rgba(13, 15, 16, .12);
  font-size: .88rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.hero-concept-v1 .emergency-call-copy strong {
  color: #fff;
  font-size: .88rem;
  font-weight: 950;
  letter-spacing: .08em;
  white-space: nowrap;
}

.hero-concept-v1 .site-header {
  z-index: 33;
}

@media (max-width: 620px) {
  :root {
    --emergency-height: 36px;
  }

  .hero-concept-v1 .emergency-bar::after {
    height: 12px;
  }

  .hero-concept-v1 .emergency-inner {
    gap: 8px;
  }

  .hero-concept-v1 .emergency-message,
  .hero-concept-v1 .emergency-call {
    gap: 7px;
  }

  .hero-concept-v1 .emergency-inner i {
    width: 8px;
    height: 8px;
    flex-basis: 8px;
  }

  .hero-concept-v1 .emergency-copy small {
    font-size: .43rem;
    letter-spacing: .10em;
  }

  .hero-concept-v1 .emergency-copy strong,
  .hero-concept-v1 .emergency-call-copy strong {
    font-size: .61rem;
  }

  .hero-concept-v1 .emergency-call {
    padding-inline: 0;
  }

  .hero-concept-v1 .emergency-phone-icon,
  .hero-concept-v1 .emergency-call-copy small {
    display: none;
  }
}

@media (max-width: 360px) {
  .hero-concept-v1 .emergency-copy small {
    display: none;
  }
}

.hero-concept-v1 .hero-proof,
.hero-concept-v1 .route-grid {
  inline-size: var(--shell);
  max-inline-size: 1360px;
  margin-inline: auto;
  justify-self: center;
}

.hero-concept-v1 .hero-proof {
  grid-template-columns: repeat(3,minmax(0,1fr));
}

.hero-concept-v1 .route-grid {
  grid-template-columns: repeat(4,minmax(0,1fr));
}

.hero-concept-v1 .hero-proof > div,
.hero-concept-v1 .route-grid > a {
  min-inline-size: 0;
}

/* Gemeinsame Grundlage der drei vollstaendigen Website-Varianten. */
.card-design .hero-proof,
.card-design .route-grid {
  gap: clamp(8px,1vw,14px);
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.card-design .hero-proof > div,
.card-design .route-grid > a {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.13);
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease, background .3s ease;
}

.card-design .hero-proof > div {
  min-height: 132px;
}

.card-design .route-grid > a {
  min-height: 208px;
}

.card-design .hero-proof > div:hover,
.card-design .hero-proof > div:focus-within,
.card-design .route-grid > a:hover,
.card-design .route-grid > a:focus-visible {
  z-index: 2;
  transform: translateY(-5px);
}

.card-design .route-grid > a:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* A — EMPFEHLUNG: Signal / Spotlight */
.card-design-signal .hero-proof > div,
.card-design-signal .route-grid > a {
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 0%,rgba(var(--red-rgb),.12),transparent 34%),
    linear-gradient(145deg,rgba(27,29,31,.98),rgba(12,13,14,.98));
  box-shadow: 0 20px 55px rgba(0,0,0,.2);
}

.card-design-signal .hero-proof > div::before,
.card-design-signal .route-grid > a::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 38%;
  height: 2px;
  background: linear-gradient(90deg,var(--red),rgba(var(--red-rgb),0));
  transition: width .35s ease;
}

.card-design-signal .hero-proof > div::after,
.card-design-signal .route-grid > a::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 150px;
  height: 150px;
  right: -75px;
  bottom: -100px;
  border-radius: 50%;
  background: rgba(var(--red-rgb),.18);
  filter: blur(28px);
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
}

.card-design-signal .hero-proof > div:hover,
.card-design-signal .route-grid > a:hover,
.card-design-signal .route-grid > a:focus-visible {
  border-color: rgba(var(--red-rgb),.48);
  box-shadow: 0 24px 70px rgba(0,0,0,.34),0 0 0 1px rgba(var(--red-rgb),.08) inset;
}

.card-design-signal .hero-proof > div:hover::before,
.card-design-signal .route-grid > a:hover::before,
.card-design-signal .route-grid > a:focus-visible::before {
  width: 78%;
}

.card-design-signal .hero-proof > div:hover::after,
.card-design-signal .route-grid > a:hover::after,
.card-design-signal .route-grid > a:focus-visible::after {
  opacity: 1;
  transform: translate(-18px,-12px);
}

.card-design-signal .hero-proof span,
.card-design-signal .route-grid > a > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  align-self: start;
  padding: 0;
  border: 1px solid rgba(var(--red-rgb),.45);
  border-radius: 50%;
  background: rgba(var(--red-rgb),.08);
}

.card-design-signal .route-grid i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  align-self: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  color: #f5f4f0;
  background: rgba(255,255,255,.025);
  transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
}

.card-design-signal .route-grid > a:hover i,
.card-design-signal .route-grid > a:focus-visible i {
  color: #fff;
  border-color: var(--red);
  background: var(--red);
  transform: translate(2px,-2px);
}

/* B — Transportlinie: zusammenhaengender Ablauf mit roten Knoten. */
.card-design-rail .hero-proof,
.card-design-rail .route-grid {
  gap: 0;
  position: relative;
  padding-block: 16px;
}

.card-design-rail .hero-proof::before,
.card-design-rail .route-grid::before {
  content: "";
  position: absolute;
  top: 39px;
  right: 5%;
  left: 5%;
  height: 1px;
  background: linear-gradient(90deg,rgba(var(--red-rgb),0),var(--red) 12%,var(--red) 88%,rgba(var(--red-rgb),0));
}

.card-design-rail .hero-proof > div,
.card-design-rail .route-grid > a {
  overflow: visible;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.11);
  background: linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}

.card-design-rail .hero-proof > div:first-child,
.card-design-rail .route-grid > a:first-child {
  border-radius: 14px 0 0 14px;
}

.card-design-rail .hero-proof > div:last-child,
.card-design-rail .route-grid > a:last-child {
  border-right: 0;
  border-radius: 0 14px 14px 0;
}

.card-design-rail .hero-proof span,
.card-design-rail .route-grid > a > span {
  z-index: 1;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  align-self: start;
  padding: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--red);
  box-shadow: 0 0 0 7px rgba(var(--red-rgb),.12),0 0 30px rgba(var(--red-rgb),.24);
}

.card-design-rail .hero-proof > div:hover,
.card-design-rail .route-grid > a:hover,
.card-design-rail .route-grid > a:focus-visible {
  border-color: rgba(255,255,255,.15);
  background: linear-gradient(180deg,rgba(var(--red-rgb),.13),rgba(255,255,255,.02));
  box-shadow: none;
}

.card-design-rail .route-grid i {
  color: var(--red);
  font-size: 1.1rem;
}

/* C — Precision Frames: technische Rahmen und grosse Indexziffern. */
.card-design-frames .hero-proof > div,
.card-design-frames .route-grid > a {
  border-radius: 20px 4px 20px 4px;
  background:
    linear-gradient(135deg,rgba(var(--red-rgb),.14),transparent 28%),
    rgba(17,19,21,.97);
}

.card-design-frames .hero-proof > div::before,
.card-design-frames .route-grid > a::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 13px 2px 13px 2px;
  pointer-events: none;
}

.card-design-frames .hero-proof > div::after,
.card-design-frames .route-grid > a::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 58px;
  height: 58px;
  background: linear-gradient(225deg,var(--red) 0 12%,transparent 12% 100%);
  opacity: .75;
}

.card-design-frames .hero-proof span,
.card-design-frames .route-grid > a > span {
  grid-row: auto;
  align-self: start;
  padding: 0;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: -.06em;
  color: rgba(var(--red-rgb),.72);
}

.card-design-frames .route-grid > a,
.card-design-frames .hero-proof > div {
  grid-template-columns: 48px 1fr 20px;
}

.card-design-frames .hero-proof > div {
  grid-template-columns: 48px 1fr;
}

.card-design-frames .hero-proof > div:hover,
.card-design-frames .route-grid > a:hover,
.card-design-frames .route-grid > a:focus-visible {
  border-color: rgba(var(--red-rgb),.58);
  background:
    linear-gradient(135deg,rgba(var(--red-rgb),.2),transparent 35%),
    rgba(20,22,24,.99);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}

.card-design-frames .route-grid i {
  color: #fff;
  font-size: 1.05rem;
}

/*
 * D — Editorial Register
 * Typografisch, flach und bewusst ohne Glas-, Glow- oder Kartenoptik.
 */
.card-design-editorial .hero-proof,
.card-design-editorial .route-grid {
  gap: 1px;
  background: rgba(255,255,255,.16);
}

.card-design-editorial .hero-proof > div,
.card-design-editorial .route-grid > a {
  border: 0;
  border-radius: 0;
  background: #0e1011;
  box-shadow: none;
  transform: none;
}

.card-design-editorial .hero-proof > div {
  min-height: 126px;
}

.card-design-editorial .route-grid > a {
  min-height: 218px;
  align-content: end;
  padding-top: 58px;
}

.card-design-editorial .hero-proof > div::after,
.card-design-editorial .route-grid > a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s ease;
}

.card-design-editorial .hero-proof > div:hover,
.card-design-editorial .route-grid > a:hover,
.card-design-editorial .route-grid > a:focus-visible {
  border-color: transparent;
  background: #141617;
  box-shadow: none;
  transform: none;
}

.card-design-editorial .hero-proof > div:hover::after,
.card-design-editorial .route-grid > a:hover::after,
.card-design-editorial .route-grid > a:focus-visible::after {
  transform: scaleX(1);
}

.card-design-editorial .hero-proof span,
.card-design-editorial .route-grid > a > span {
  align-self: start;
  padding: 0;
  font-family: var(--body);
  font-size: .72rem;
  letter-spacing: .14em;
}

.card-design-editorial .route-grid b {
  max-width: 11ch;
  font-size: clamp(1.4rem,2vw,2rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.card-design-editorial .route-grid small {
  max-width: 24ch;
}

.card-design-editorial .route-grid i {
  align-self: end;
  color: rgba(255,255,255,.7);
  transition: color .25s ease, transform .25s ease;
}

.card-design-editorial .route-grid > a:hover i,
.card-design-editorial .route-grid > a:focus-visible i {
  color: var(--red);
  transform: translate(3px,-3px);
}

/*
 * E — OEM Spezifikation
 * Sachliche Moduloptik wie bei Hersteller-Konfiguratoren und Fahrzeugdaten.
 */
.card-design-oem .hero-proof,
.card-design-oem .route-grid {
  gap: 10px;
}

.card-design-oem .hero-proof > div,
.card-design-oem .route-grid > a {
  border: 1px solid #303335;
  border-radius: 0;
  background: #121415;
  box-shadow: none;
  transform: none;
}

.card-design-oem .hero-proof > div::before,
.card-design-oem .route-grid > a::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 4px;
  background: var(--red);
}

.card-design-oem .hero-proof > div:hover,
.card-design-oem .route-grid > a:hover,
.card-design-oem .route-grid > a:focus-visible {
  border-color: #606365;
  background: #181a1b;
  box-shadow: none;
  transform: none;
}

.card-design-oem .hero-proof span,
.card-design-oem .route-grid > a > span {
  align-self: start;
  padding: 0;
  font-family: var(--body);
  color: #aeb2b4;
}

.card-design-oem .hero-proof span::after,
.card-design-oem .route-grid > a > span::after {
  content: "/";
  padding-left: 2px;
  color: var(--red);
}

.card-design-oem .route-grid b {
  font-size: clamp(1.14rem,1.5vw,1.45rem);
}

.card-design-oem .route-grid i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  align-self: center;
  border: 1px solid #494c4e;
  color: #fff;
  font-style: normal;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

.card-design-oem .route-grid > a:hover i,
.card-design-oem .route-grid > a:focus-visible i {
  border-color: var(--red);
  background: var(--red);
  transform: translate(2px,-2px);
}

/*
 * Empfehlung — OEM Editorial
 * Klare technische Modulstruktur mit einer staerkeren, menschlicheren
 * Typografie. Bewusst ohne Rundungen, Glasflaechen oder kuenstlichen Glow.
 */
.card-design-recommended .hero-proof,
.card-design-recommended .route-grid {
  width: calc(100% - 40px);
  inline-size: calc(100% - 40px);
  max-width: 1360px;
  max-inline-size: 1360px;
  margin-right: auto;
  margin-left: auto;
  margin-inline: auto;
  box-sizing: border-box;
  gap: 8px;
}

.card-design-recommended .routes {
  overflow-x: hidden;
}

.card-design-recommended .hero-proof > div,
.card-design-recommended .route-grid > a {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  align-items: center;
  align-content: center;
  column-gap: 18px;
  row-gap: 7px;
  position: relative;
  height: 156px;
  min-height: 156px;
  padding: 28px 30px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #303335;
  border-radius: 0;
  background: #111314;
  box-shadow: none;
  transform: none;
  transition:
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease,
    transform .3s ease;
}

.card-design-recommended .hero-proof > div::before,
.card-design-recommended .route-grid > a::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 4px;
  background: var(--red);
}

.card-design-recommended .hero-proof > div::after,
.card-design-recommended .route-grid > a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--red);
  box-shadow: 0 0 0 rgba(var(--red-rgb),0);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s ease, box-shadow .3s ease;
}

.card-design-recommended .hero-proof > div:hover,
.card-design-recommended .hero-proof > div:focus-within,
.card-design-recommended .route-grid > a:hover,
.card-design-recommended .route-grid > a:focus-visible {
  border-color: #606365;
  background: linear-gradient(90deg,rgba(var(--red-rgb),.065),#17191a 36%,#17191a);
  box-shadow: 0 16px 38px rgba(0,0,0,.24);
  transform: translateY(-2px);
}

.card-design-recommended .hero-proof > div:hover::after,
.card-design-recommended .hero-proof > div:focus-within::after,
.card-design-recommended .route-grid > a:hover::after,
.card-design-recommended .route-grid > a:focus-visible::after {
  box-shadow: 0 0 22px rgba(var(--red-rgb),.32);
  transform: scaleX(1);
}

.card-design-recommended .hero-proof span,
.card-design-recommended .route-grid > a > span {
  align-self: center;
  padding: 0;
  font-family: var(--body);
  font-size: .72rem;
  color: #aeb2b4;
  letter-spacing: .14em;
}

.card-design-recommended .hero-proof > div > span {
  grid-column: 1;
  grid-row: 1;
}

.card-design-recommended .hero-proof > div > div,
.card-design-recommended .route-grid > a > div {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr;
  min-width: 0;
  min-height: 0;
  align-content: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  overflow: visible;
}

.card-design-recommended .route-grid > a > span {
  grid-column: 1;
  grid-row: 1;
}

.card-design-recommended .hero-proof span::after,
.card-design-recommended .route-grid > a > span::after {
  content: "/";
  padding-left: 2px;
  color: var(--red);
}

.card-design-recommended .hero-proof b,
.card-design-recommended .route-grid b {
  max-width: none;
  font-size: clamp(1rem,1.15vw,1.18rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.02em;
}

.card-design-recommended .hero-proof small,
.card-design-recommended .route-grid small {
  max-width: 30ch;
  margin-top: 0;
  color: #7f8588;
  font-size: .76rem;
  line-height: 1.45;
}

.card-design-recommended .route-grid i {
  display: none;
}

/*
 * F — Logistik-Leitsystem
 * Offene Wegfuehrung mit Knoten und Linien, nicht als dekorative Kartenwand.
 */
.card-design-wayfinding .hero-proof,
.card-design-wayfinding .route-grid {
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
}

.card-design-wayfinding .hero-proof > div,
.card-design-wayfinding .route-grid > a {
  overflow: visible;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.18);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.card-design-wayfinding .hero-proof > div:last-child,
.card-design-wayfinding .route-grid > a:last-child {
  border-right: 0;
}

.card-design-wayfinding .hero-proof > div::before,
.card-design-wayfinding .route-grid > a::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 28px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--red);
  background: #0d0f10;
}

.card-design-wayfinding .hero-proof > div::after,
.card-design-wayfinding .route-grid > a::after {
  content: "";
  position: absolute;
  top: 31px;
  left: 36px;
  width: calc(100% - 36px);
  height: 1px;
  background: rgba(var(--red-rgb),.65);
  pointer-events: none;
}

.card-design-wayfinding .hero-proof > div:hover,
.card-design-wayfinding .route-grid > a:hover,
.card-design-wayfinding .route-grid > a:focus-visible {
  background: rgba(255,255,255,.045);
  box-shadow: none;
  transform: none;
}

.card-design-wayfinding .hero-proof span,
.card-design-wayfinding .route-grid > a > span {
  align-self: start;
  padding-top: 18px;
  color: rgba(255,255,255,.7);
}

.card-design-wayfinding .route-grid b {
  font-size: clamp(1.2rem,1.7vw,1.55rem);
}

.card-design-wayfinding .route-grid i {
  align-self: end;
  color: var(--red);
  transition: transform .25s ease;
}

.card-design-wayfinding .route-grid > a:hover i,
.card-design-wayfinding .route-grid > a:focus-visible i {
  transform: translate(4px,-4px);
}

/*
 * G — Dispatch Board
 * Helle, robuste Einsatzkarten nach dem Vorbild realer Dispositionstafeln.
 */
.card-design-dispatch .hero-proof,
.card-design-dispatch .route-grid {
  gap: 6px;
}

.card-design-dispatch .hero-proof > div,
.card-design-dispatch .route-grid > a {
  border: 1px solid #c9c8c3;
  border-radius: 0;
  color: #111315;
  background: #e9e8e3;
  box-shadow: none;
  transform: none;
}

.card-design-dispatch .hero-proof > div::before,
.card-design-dispatch .route-grid > a::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  left: -1px;
  height: 5px;
  background: var(--red);
}

.card-design-dispatch .hero-proof > div:hover,
.card-design-dispatch .route-grid > a:hover,
.card-design-dispatch .route-grid > a:focus-visible {
  border-color: #fff;
  background: #f7f6f2;
  box-shadow: none;
  transform: none;
}

.card-design-dispatch .hero-proof span,
.card-design-dispatch .route-grid > a > span {
  align-self: start;
  padding: 0;
  font-family: var(--body);
  color: var(--red);
}

.card-design-dispatch .hero-proof b,
.card-design-dispatch .route-grid b {
  color: #111315;
}

.card-design-dispatch .hero-proof small,
.card-design-dispatch .route-grid small {
  color: #5d6062;
}

.card-design-dispatch .route-grid b {
  font-size: clamp(1.18rem,1.7vw,1.55rem);
}

.card-design-dispatch .route-grid i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  align-self: center;
  border: 1px solid #b3b2ad;
  color: #111315;
  font-style: normal;
  transition: color .25s ease, border-color .25s ease, transform .25s ease;
}

.card-design-dispatch .route-grid > a:hover i,
.card-design-dispatch .route-grid > a:focus-visible i {
  color: var(--red);
  border-color: var(--red);
  transform: translate(2px,-2px);
}

@media (max-width: 1120px) {
  .hero-concept-v1 .route-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .card-design-rail .route-grid > a:nth-child(2) {
    border-right: 0;
    border-radius: 0 14px 14px 0;
  }

  .card-design-rail .route-grid > a:nth-child(3) {
    border-radius: 14px 0 0 14px;
  }
}

@media (max-width: 860px) {
  .hero-concept-v1 .hero-proof {
    grid-template-columns: 1fr;
  }

  .card-design .hero-proof,
  .card-design .route-grid {
    gap: 9px;
  }

  .card-design .hero-proof > div {
    min-height: 104px;
  }

  .card-design-rail .hero-proof,
  .card-design-rail .route-grid {
    gap: 9px;
    padding-block: 0;
  }

  .card-design-rail .hero-proof::before,
  .card-design-rail .route-grid::before {
    top: 6%;
    bottom: 6%;
    left: 37px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg,rgba(var(--red-rgb),0),var(--red) 12%,var(--red) 88%,rgba(var(--red-rgb),0));
  }

  .card-design-rail .hero-proof > div,
  .card-design-rail .route-grid > a,
  .card-design-rail .hero-proof > div:first-child,
  .card-design-rail .hero-proof > div:last-child,
  .card-design-rail .route-grid > a:first-child,
  .card-design-rail .route-grid > a:last-child,
  .card-design-rail .route-grid > a:nth-child(2),
  .card-design-rail .route-grid > a:nth-child(3) {
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 14px;
  }

  .card-design-editorial .hero-proof,
  .card-design-editorial .route-grid,
  .card-design-recommended .hero-proof,
  .card-design-recommended .route-grid,
  .card-design-wayfinding .hero-proof,
  .card-design-wayfinding .route-grid {
    gap: 1px;
  }

  /*
   * Empfehlung: beide Reihen bleiben auch auf Tablet und schmalen Fenstern
   * dieselbe Kartenkomponente. Die spaeteren generischen Breakpoints duerfen
   * weder Kartenhoehe noch Aussenbreite wieder auseinanderziehen.
   */
  .card-design-recommended .hero-proof,
  .card-design-recommended .route-grid {
    grid-template-columns: 1fr;
    width: calc(100% - 40px);
    inline-size: calc(100% - 40px);
    max-width: calc(100% - 40px);
    max-inline-size: calc(100% - 40px);
    margin-right: auto;
    margin-left: auto;
    margin-inline: auto;
    gap: 8px;
  }

  .card-design-recommended .hero-proof > div,
  .card-design-recommended .route-grid > a {
    height: 156px;
    min-height: 156px;
  }

  .card-design-wayfinding .hero-proof > div,
  .card-design-wayfinding .route-grid > a {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.18);
  }

  .card-design-wayfinding .hero-proof > div:last-child,
  .card-design-wayfinding .route-grid > a:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 620px) {
  .hero-concept-v1 .hero-proof,
  .hero-concept-v1 .route-grid {
    inline-size: calc(100% - 32px);
  }

  .hero-concept-v1 .route-grid {
    grid-template-columns: 1fr;
  }

  .card-design .hero-proof > div,
  .card-design .route-grid > a {
    min-height: 116px;
    padding: 24px 22px;
  }

  .card-design-frames .route-grid > a,
  .card-design-frames .hero-proof > div {
    grid-template-columns: 43px 1fr 18px;
  }

  .card-design-frames .hero-proof > div {
    grid-template-columns: 43px 1fr;
  }

  .card-design-editorial .route-grid > a {
    min-height: 154px;
    align-content: center;
    padding-top: 34px;
  }

  .card-design-editorial .route-grid b {
    max-width: none;
    font-size: 1.45rem;
  }

  .card-design-recommended .hero-proof,
  .card-design-recommended .route-grid {
    width: calc(100% - 32px);
    inline-size: calc(100% - 32px);
    max-width: calc(100% - 32px);
    max-inline-size: calc(100% - 32px);
    margin-right: auto;
    margin-left: auto;
    margin-inline: auto;
    gap: 7px;
  }

  .card-design-recommended .hero-proof > div,
  .card-design-recommended .route-grid > a {
    grid-template-columns: 36px minmax(0,1fr);
    height: 132px;
    min-height: 132px;
    align-content: center;
    padding: 24px 22px;
    column-gap: 14px;
  }

  .card-design-recommended .hero-proof b,
  .card-design-recommended .route-grid b {
    max-width: none;
    font-size: 1.1rem;
  }

  .card-design-oem .hero-proof,
  .card-design-oem .route-grid,
  .card-design-dispatch .hero-proof,
  .card-design-dispatch .route-grid {
    gap: 7px;
  }

  .card-design-wayfinding .hero-proof > div::before,
  .card-design-wayfinding .route-grid > a::before {
    top: 22px;
    left: 22px;
  }

  .card-design-wayfinding .hero-proof > div::after,
  .card-design-wayfinding .route-grid > a::after {
    top: 25px;
    left: 30px;
    width: calc(100% - 30px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-design .hero-proof > div,
  .card-design .route-grid > a,
  .card-design-signal .hero-proof > div::before,
  .card-design-signal .route-grid > a::before,
  .card-design-signal .hero-proof > div::after,
  .card-design-signal .route-grid > a::after,
  .card-design-editorial .hero-proof > div::after,
  .card-design-editorial .route-grid > a::after,
  .card-design-recommended .hero-proof > div::after,
  .card-design-recommended .route-grid > a::after,
  .card-design-recommended .route-grid i,
  .card-design-editorial .route-grid i,
  .card-design-oem .route-grid i,
  .card-design-wayfinding .route-grid i,
  .card-design-dispatch .route-grid i {
    transition: none;
  }

  .card-design .hero-proof > div:hover,
  .card-design .route-grid > a:hover,
  .card-design .route-grid > a:focus-visible {
    transform: none;
  }
}

/* Premiumbereich v39: Variante 01 "Cinematic Editorial".
   Die vorhandene PV-Struktur bleibt erhalten, wird aber dichter, bildstaerker
   und mit dem dunkleren BMW-Nachtmotiv statt des hellen Rolls-Royce erzaehlt. */
.card-design-recommended .premium {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(96px, 8.4vw, 138px);
  padding-bottom: clamp(102px, 9vw, 148px);
  background:
    radial-gradient(circle at 73% 46%, rgba(45, 49, 52, .44) 0, rgba(18, 21, 23, .34) 31%, rgba(8, 9, 10, 0) 61%),
    linear-gradient(122deg, #070809 0%, #090b0c 48%, #0c0f11 100%);
}

.card-design-recommended .premium::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .16;
  background:
    repeating-linear-gradient(112deg, transparent 0 31px, rgba(255, 255, 255, .026) 32px, transparent 33px),
    linear-gradient(180deg, rgba(255, 255, 255, .026), transparent 22%, transparent 78%, rgba(0, 0, 0, .34));
  pointer-events: none;
}

.card-design-recommended .premium::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 110px;
  background: linear-gradient(to bottom, rgba(8, 9, 10, 0), #07090a 82%);
  pointer-events: none;
}

.card-design-recommended .premium-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(330px, .78fr) minmax(560px, 1.22fr);
  gap: clamp(42px, 5.2vw, 82px);
  align-items: center;
}

.card-design-recommended .premium-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.card-design-recommended .premium-copy .eyebrow {
  margin-bottom: 24px;
  color: #f25245;
  letter-spacing: .18em;
}

.card-design-recommended .premium-copy h2 {
  max-width: 7.25em;
  color: #f5f3ee;
  font-size: clamp(3.65rem, 5.45vw, 6.1rem);
  font-weight: 540;
  line-height: .91;
  letter-spacing: -.058em;
  text-wrap: balance;
}

.card-design-recommended .premium-copy > p:not(.eyebrow) {
  max-width: 540px;
  margin-top: 30px;
  color: #8e9396;
  font-size: clamp(.82rem, .92vw, .96rem);
  line-height: 1.75;
}

.card-design-recommended .premium-copy .chips {
  max-width: 540px;
  margin: 26px 0 30px;
  gap: 7px;
}

.card-design-recommended .premium-copy .chips li {
  padding: 8px 11px;
  color: #a9adaf;
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .015);
  font-size: .6rem;
}

.card-design-recommended .premium-copy .text-link {
  gap: 19px;
  padding-bottom: 10px;
  color: #efede8;
  border-color: rgba(255, 255, 255, .22);
  letter-spacing: .055em;
}

.card-design-recommended .premium-gallery {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: clamp(560px, 43vw, 690px);
  grid-template-columns: minmax(0, 1.72fr) minmax(190px, .78fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.card-design-recommended .premium-gallery figure {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 7px;
  background: #111416;
  box-shadow: 0 22px 46px rgba(0, 0, 0, .21);
}

.card-design-recommended .premium-gallery .premium-main {
  border-radius: 9px 3px 3px 9px;
}

.card-design-recommended .premium-gallery figure:not(.premium-main) {
  border-radius: 3px 9px 9px 3px;
}

.card-design-recommended .premium-gallery figure::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  opacity: .86;
  background: linear-gradient(90deg, var(--red), rgba(239, 70, 56, .08));
  pointer-events: none;
}

.card-design-recommended .premium-gallery figure::after {
  z-index: 1;
  background:
    linear-gradient(0deg, rgba(3, 4, 5, .78), transparent 48%),
    linear-gradient(90deg, rgba(3, 4, 5, .10), transparent 42%);
}

.card-design-recommended .premium-gallery img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.94) contrast(1.025);
  transform: scale(1.002);
  transition: transform .75s cubic-bezier(.2, .7, .2, 1), filter .75s ease;
}

.card-design-recommended .premium-gallery .premium-main img {
  object-position: center 58%;
}

.card-design-recommended .premium-gallery .premium-replacement img {
  object-position: 58% center;
}

.card-design-recommended .premium-gallery figcaption {
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #f5f3ee;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .74);
}

.card-design-recommended .premium-gallery figcaption::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(239, 70, 56, .16);
}

@media (hover: hover) and (pointer: fine) {
  .card-design-recommended .premium-gallery figure:hover img {
    filter: saturate(1.03) contrast(1.04);
    transform: scale(1.025);
  }
}

@media (max-width: 1120px) {
  .card-design-recommended .premium-grid {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .card-design-recommended .premium-copy {
    max-width: 830px;
  }

  .card-design-recommended .premium-copy h2 {
    max-width: 8.2em;
  }

  .card-design-recommended .premium-gallery {
    min-height: 620px;
  }

}

@media (max-width: 620px) {
  .card-design-recommended .premium {
    padding-top: 76px;
    padding-bottom: 88px;
  }

  .card-design-recommended .premium-grid {
    gap: 38px;
  }

  .card-design-recommended .premium-copy .eyebrow {
    margin-bottom: 18px;
  }

  .card-design-recommended .premium-copy h2 {
    max-width: 8.5em;
    font-size: clamp(2.7rem, 13.2vw, 4rem);
    line-height: .92;
  }

  .card-design-recommended .premium-copy > p:not(.eyebrow) {
    margin-top: 24px;
    font-size: .82rem;
    line-height: 1.68;
  }

  .card-design-recommended .premium-copy .chips {
    margin: 22px 0 26px;
  }

  .card-design-recommended .premium-gallery {
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: clamp(310px, 94vw, 390px) clamp(150px, 44vw, 190px);
    gap: 7px;
  }

  .card-design-recommended .premium-gallery .premium-main {
    grid-column: 1 / -1;
    grid-row: auto;
    border-radius: 7px 7px 3px 3px;
  }

  .card-design-recommended .premium-gallery figure:not(.premium-main) {
    border-radius: 3px 3px 7px 7px;
  }

  .card-design-recommended .premium-gallery figcaption {
    right: 12px;
    bottom: 12px;
    left: 12px;
    gap: 7px;
    font-size: .52rem;
    letter-spacing: .1em;
  }

  .card-design-recommended .premium-gallery figcaption::before {
    width: 5px;
    height: 5px;
    flex-basis: 5px;
    box-shadow: 0 0 0 3px rgba(239, 70, 56, .15);
  }

}

@media (forced-colors: active) {
  .card-design-recommended .premium-gallery figure {
    border-color: CanvasText;
    box-shadow: none;
  }

  .card-design-recommended .premium-gallery figure::before {
    display: none;
  }
}

/* V95: ruhiger Bildfokus, synchronisierte Technikfelder und dezenter Bereichswechsel. */
.card-design-recommended .fleet[data-fleet-stage] .fleet-gallery figure {
  filter: grayscale(.18) saturate(.72) brightness(.68);
  opacity: .78;
  transition:
    filter .72s ease,
    opacity .72s ease,
    border-color .72s ease,
    box-shadow .72s ease,
    transform .72s ease;
}

.card-design-recommended .fleet[data-fleet-stage] .fleet-gallery figure::before {
  animation: none;
}

.card-design-recommended .fleet[data-fleet-stage="1"] .fleet-gallery figure[data-fleet-image="1"],
.card-design-recommended .fleet[data-fleet-stage="2"] .fleet-gallery figure[data-fleet-image="2"],
.card-design-recommended .fleet[data-fleet-stage="3"] .fleet-gallery figure[data-fleet-image="3"] {
  z-index: 2;
  filter: grayscale(0) saturate(1) brightness(1.02);
  opacity: 1;
  border-color: rgba(255, 67, 58, .42);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
  transform: translateY(-2px);
}

.card-design-recommended .fleet[data-fleet-stage="1"] .fleet-gallery figure[data-fleet-image="1"] img,
.card-design-recommended .fleet[data-fleet-stage="2"] .fleet-gallery figure[data-fleet-image="2"] img,
.card-design-recommended .fleet[data-fleet-stage="3"] .fleet-gallery figure[data-fleet-image="3"] img {
  transform: scale(1.028);
}

.card-design-recommended .fleet[data-fleet-stage="1"] .fleet-gallery figure[data-fleet-image="1"]::before,
.card-design-recommended .fleet[data-fleet-stage="2"] .fleet-gallery figure[data-fleet-image="2"]::before,
.card-design-recommended .fleet[data-fleet-stage="3"] .fleet-gallery figure[data-fleet-image="3"]::before {
  animation: fleetScanV95 1.45s cubic-bezier(.2, .65, .3, 1) both;
}

.card-design-recommended .fleet[data-fleet-stage] .fleet-copy .spec-grid > div {
  transition:
    background .65s ease,
    border-color .65s ease,
    box-shadow .65s ease,
    transform .65s ease;
}

.card-design-recommended .fleet[data-fleet-stage] .fleet-copy .spec-grid > div::before {
  width: calc(100% - 36px);
  opacity: .18;
  transform: scaleX(.18);
  animation: none;
  transition: opacity .65s ease, transform .65s ease;
}

.card-design-recommended .fleet[data-fleet-stage="1"] .spec-grid > div[data-fleet-spec="1"],
.card-design-recommended .fleet[data-fleet-stage="1"] .spec-grid > div[data-fleet-spec="2"],
.card-design-recommended .fleet[data-fleet-stage="2"] .spec-grid > div[data-fleet-spec="3"],
.card-design-recommended .fleet[data-fleet-stage="2"] .spec-grid > div[data-fleet-spec="4"],
.card-design-recommended .fleet[data-fleet-stage="3"] .spec-grid > div[data-fleet-spec="5"],
.card-design-recommended .fleet[data-fleet-stage="3"] .spec-grid > div[data-fleet-spec="6"] {
  border-color: rgba(255, 67, 58, .4);
  background: linear-gradient(135deg, rgba(255, 67, 58, .09), rgba(255, 67, 58, .018));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
  transform: translateY(-2px);
}

.card-design-recommended .fleet[data-fleet-stage="1"] .spec-grid > div[data-fleet-spec="1"]::before,
.card-design-recommended .fleet[data-fleet-stage="1"] .spec-grid > div[data-fleet-spec="2"]::before,
.card-design-recommended .fleet[data-fleet-stage="2"] .spec-grid > div[data-fleet-spec="3"]::before,
.card-design-recommended .fleet[data-fleet-stage="2"] .spec-grid > div[data-fleet-spec="4"]::before,
.card-design-recommended .fleet[data-fleet-stage="3"] .spec-grid > div[data-fleet-spec="5"]::before,
.card-design-recommended .fleet[data-fleet-stage="3"] .spec-grid > div[data-fleet-spec="6"]::before {
  opacity: .95;
  transform: scaleX(1);
}

.card-design-recommended .fleet + .scope {
  background:
    radial-gradient(ellipse at 50% 0, rgba(255, 67, 58, .025), transparent 42%),
    linear-gradient(180deg, #090b0c 0, #0b0e0f 90px, #090b0c 210px);
}

.card-design-recommended .fleet + .scope .scope-grid {
  padding-top: 54px;
  border-top: 0;
}

@keyframes fleetScanV95 {
  0% { top: 0; opacity: 0; }
  12% { opacity: .78; }
  82% { top: 100%; opacity: .55; }
  100% { top: 100%; opacity: 0; }
}

@media (max-width: 620px) {
  .card-design-recommended .fleet[data-fleet-stage="1"] .fleet-gallery figure[data-fleet-image="1"],
  .card-design-recommended .fleet[data-fleet-stage="2"] .fleet-gallery figure[data-fleet-image="2"],
  .card-design-recommended .fleet[data-fleet-stage="3"] .fleet-gallery figure[data-fleet-image="3"],
  .card-design-recommended .fleet[data-fleet-stage="1"] .fleet-gallery figure[data-fleet-image="1"] img,
  .card-design-recommended .fleet[data-fleet-stage="2"] .fleet-gallery figure[data-fleet-image="2"] img,
  .card-design-recommended .fleet[data-fleet-stage="3"] .fleet-gallery figure[data-fleet-image="3"] img {
    transform: none;
  }

  .card-design-recommended .fleet[data-fleet-stage="1"] .fleet-gallery figure[data-fleet-image="1"]::before,
  .card-design-recommended .fleet[data-fleet-stage="2"] .fleet-gallery figure[data-fleet-image="2"]::before,
  .card-design-recommended .fleet[data-fleet-stage="3"] .fleet-gallery figure[data-fleet-image="3"]::before {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-design-recommended .fleet[data-fleet-stage] .fleet-gallery figure,
  .card-design-recommended .fleet[data-fleet-stage] .fleet-gallery img,
  .card-design-recommended .fleet[data-fleet-stage] .fleet-copy .spec-grid > div,
  .card-design-recommended .fleet[data-fleet-stage] .fleet-copy .spec-grid > div::before {
    animation: none;
    transition: none;
  }
}

/* V90: dokumentierte Übergabe als ruhige, filmische Beweisstrecke. */
.card-design-recommended .handover-film {
  --handover-transition-height: clamp(180px, 15vw, 235px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(225px, 18vw, 290px);
  padding-bottom: clamp(105px, 8vw, 135px);
  color: #f3f3ef;
  background:
    linear-gradient(
      180deg,
      #edede9 0%,
      #ddddda 9%,
      #acadaa 24%,
      #696b69 43%,
      #303233 66%,
      #17191a 84%,
      #0e1011 100%
    ) top / 100% var(--handover-transition-height) no-repeat,
    radial-gradient(circle at 10% 56%, rgba(255, 67, 58, .075), transparent 34%),
    repeating-linear-gradient(118deg, transparent 0 122px, rgba(255, 255, 255, .018) 122px 124px),
    #0e1011;
}

.card-design-recommended .handover-film-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(460px, .9fr) minmax(0, 1.1fr);
  gap: clamp(54px, 6vw, 94px);
  align-items: center;
}

.card-design-recommended .handover-film-copy h2 {
  max-width: 620px;
  font-size: clamp(3.15rem, 4.7vw, 5.35rem);
  line-height: .93;
  letter-spacing: -.035em;
}

.card-design-recommended .handover-film-copy h2 span {
  display: block;
}

.card-design-recommended .handover-film-copy > p:not(.eyebrow) {
  max-width: 560px;
  margin: 30px 0 0;
  color: #9da1a2;
  font-size: .94rem;
  line-height: 1.75;
}

.card-design-recommended .handover-film-proof {
  max-width: 590px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 30px 0 32px;
  padding: 0;
  list-style: none;
}

.card-design-recommended .handover-film-proof li {
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 13px 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .025);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

.card-design-recommended .handover-film-proof span {
  color: #ff5149;
  font-size: .54rem;
  font-weight: 850;
  letter-spacing: .12em;
}

.card-design-recommended .handover-film-proof b {
  color: #c8cbcb;
  font-size: .6rem;
  font-weight: 760;
  line-height: 1.35;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.card-design-recommended .handover-film-copy .text-link {
  width: min(100%, 320px);
  display: flex;
  justify-content: space-between;
  margin-top: 0;
  padding-bottom: 14px;
  border-bottom-color: rgba(255, 255, 255, .28);
}

.card-design-recommended .handover-film-copy .text-link span {
  color: #ff433a;
  transition: transform .3s ease;
}

.card-design-recommended .handover-film-image {
  height: clamp(550px, 50vw, 650px);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 17px 17px 0 17px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
  box-shadow: 0 32px 72px rgba(0, 0, 0, .24);
}

.card-design-recommended .handover-film-image::after {
  background:
    linear-gradient(0deg, rgba(4, 5, 6, .9), transparent 52%),
    linear-gradient(90deg, rgba(7, 8, 9, .18), transparent 40%);
}

.card-design-recommended .handover-film-image img {
  transition: transform 1.1s cubic-bezier(.2, .75, .2, 1), filter .7s ease;
}

.card-design-recommended .handover-film-image figcaption {
  right: 20px;
  bottom: 18px;
  left: 20px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(6, 7, 8, .5);
  backdrop-filter: blur(8px);
}

.card-design-recommended .handover-film-image figcaption::before {
  content: "";
  position: absolute;
  top: -11px;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, #ff433a, rgba(255, 67, 58, .6));
  box-shadow: 0 0 11px rgba(255, 67, 58, .35);
  transform: scaleX(.04);
  transform-origin: left center;
  animation: handoverProgress91 7.5s ease-in-out infinite;
}

.card-design-recommended .handover-film-image figcaption::after {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  width: 7px;
  height: 7px;
  border: 1px solid #ff433a;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(255, 67, 58, .1), 0 0 18px rgba(255, 67, 58, .7);
  animation: handoverSignal91 7.5s ease-in-out infinite;
}

.card-design-recommended .handover-film-image figcaption > span {
  color: rgba(255, 255, 255, .52);
  text-shadow: none;
  animation: handoverLabel91 7.5s ease-in-out infinite;
}

.card-design-recommended .handover-film-image figcaption > span:nth-of-type(2) {
  animation-delay: 3.15s;
}

.card-design-recommended .handover-film-image figcaption > span:nth-of-type(3) {
  animation-delay: 6.15s;
}

@media (hover: hover) and (pointer: fine) {
  .card-design-recommended .handover-film-image:hover img {
    filter: saturate(1.05) contrast(1.02);
    transform: scale(1.025);
  }

  .card-design-recommended .handover-film-copy .text-link:hover span {
    transform: translateX(5px);
  }
}

@keyframes handoverSignal91 {
  0%, 4%, 14%, 18% {
    left: 0;
  }
  4%, 14% {
    box-shadow: 0 0 0 9px rgba(255, 67, 58, .13), 0 0 25px rgba(255, 67, 58, .9);
    transform: scale(1.28);
  }
  42%, 46%, 54%, 58% {
    left: calc(50% - 3.5px);
  }
  46%, 54% {
    box-shadow: 0 0 0 9px rgba(255, 67, 58, .13), 0 0 25px rgba(255, 67, 58, .9);
    transform: scale(1.28);
  }
  82%, 86%, 94%, 100% {
    left: calc(100% - 7px);
  }
  86%, 94% {
    box-shadow: 0 0 0 9px rgba(255, 67, 58, .13), 0 0 25px rgba(255, 67, 58, .9);
    transform: scale(1.28);
  }
}

@keyframes handoverProgress91 {
  0%, 18% { transform: scaleX(.04); }
  42%, 58% { transform: scaleX(.5); }
  82%, 100% { transform: scaleX(1); }
}

@keyframes handoverLabel91 {
  0%, 18% {
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 67, 58, .58);
  }
  27%, 100% {
    color: rgba(255, 255, 255, .52);
    text-shadow: none;
  }
}

@media (max-width: 1100px) {
  .card-design-recommended .handover-film-grid {
    grid-template-columns: 1fr;
    gap: 58px;
  }

  .card-design-recommended .handover-film-copy {
    max-width: 760px;
  }

  .card-design-recommended .handover-film-copy h2 {
    max-width: 720px;
  }

  .card-design-recommended .handover-film-image {
    height: min(64vw, 610px);
  }
}

@media (max-width: 620px) {
  .card-design-recommended .handover-film {
    --handover-transition-height: 165px;
    padding-top: 215px;
    padding-bottom: 82px;
  }

  .card-design-recommended .handover-film-copy h2 {
    font-size: clamp(2.55rem, 12vw, 3.35rem);
    line-height: .96;
  }

  .card-design-recommended .handover-film-proof {
    grid-template-columns: 1fr;
  }

  .card-design-recommended .handover-film-proof li {
    min-height: 58px;
  }

  .card-design-recommended .handover-film-image {
    height: 440px;
  }

  .card-design-recommended .handover-film-image figcaption {
    right: 12px;
    bottom: 12px;
    left: 12px;
    gap: 7px;
    padding: 11px 10px;
    font-size: .45rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-design-recommended .handover-film-image img,
  .card-design-recommended .handover-film-copy .text-link span {
    transition: none;
  }

  .card-design-recommended .handover-film-image figcaption::after {
    left: 50%;
    animation: none;
  }

  .card-design-recommended .handover-film-image figcaption::before {
    transform: scaleX(1);
    animation: none;
  }

  .card-design-recommended .handover-film-image figcaption > span {
    color: #fff;
    text-shadow: none;
    animation: none;
  }
}

@media (forced-colors: active) {
  .card-design-recommended .handover-film-proof li,
  .card-design-recommended .handover-film-image,
  .card-design-recommended .handover-film-image figcaption {
    clip-path: none;
    border: 1px solid CanvasText;
  }

  .card-design-recommended .handover-film-image figcaption::before,
  .card-design-recommended .handover-film-image figcaption::after {
    display: none;
  }
}

/* V78: die vollständige Leistungsübersicht als zusammenhängendes Signal-System. */
.card-design-recommended .service-details {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 17%, rgba(255, 67, 58, .075), transparent 28%),
    radial-gradient(circle at 88% 58%, rgba(255, 67, 58, .035), transparent 25%),
    repeating-linear-gradient(118deg, transparent 0 104px, rgba(255, 255, 255, .012) 104px 106px),
    #0d0f10;
}

.card-design-recommended .service-details::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #0d0f10 0, transparent 13%, transparent 87%, #0d0f10 100%);
}

.card-design-recommended .service-details .section-heading,
.card-design-recommended .service-details .service-detail-grid {
  position: relative;
  z-index: 1;
}

.card-design-recommended .service-details .section-heading h2 {
  max-width: 990px;
  font-size: clamp(2.7rem, 5.35vw, 5.85rem);
  line-height: 1.02;
  letter-spacing: -.022em;
  word-spacing: .025em;
}

.card-design-recommended .service-details .section-heading.split {
  grid-template-columns: minmax(0, 1.42fr) minmax(300px, .72fr);
  gap: clamp(42px, 4.2vw, 66px);
}

.card-design-recommended .service-details .section-heading.split > p {
  margin-left: 0;
}

.card-design-recommended .service-detail-grid {
  gap: 16px;
  perspective: 1500px;
}

.card-design-recommended .service-detail-card {
  --service-accent: 255, 67, 58;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 510px;
  padding: clamp(32px, 3.45vw, 44px);
  border-color: rgba(255, 255, 255, .13);
  border-radius: 8px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  background:
    linear-gradient(145deg, rgba(var(--service-accent), .055), transparent 32%),
    linear-gradient(180deg, #151719 0%, #111315 100%);
  box-shadow: 0 24px 55px rgba(0, 0, 0, .16);
  transform: translateZ(0);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .55s ease, background .55s ease;
}

.card-design-recommended .service-detail-card.service-detail-emergency {
  background:
    radial-gradient(circle at 10% 5%, rgba(var(--service-accent), .18), transparent 38%),
    linear-gradient(180deg, #171719 0%, #111315 100%);
}

.card-design-recommended .service-detail-card::before {
  content: attr(data-service-index);
  position: absolute;
  z-index: 0;
  top: 30px;
  right: 38px;
  color: rgba(255, 255, 255, .065);
  font-size: clamp(4.4rem, 7.1vw, 8rem);
  font-weight: 950;
  line-height: .78;
  letter-spacing: -.085em;
  pointer-events: none;
  transition: color .45s ease, transform .65s cubic-bezier(.2, .8, .2, 1), text-shadow .45s ease;
}

.card-design-recommended .service-detail-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: -48%;
  width: 45%;
  height: 2px;
  pointer-events: none;
  opacity: .82;
  background: linear-gradient(90deg, transparent, rgba(var(--service-accent), .25), rgb(var(--service-accent)), #fff, transparent);
  box-shadow: 0 0 18px rgba(var(--service-accent), .58), 0 0 44px rgba(var(--service-accent), .2);
  animation: serviceDetailScan78 9.2s cubic-bezier(.45, 0, .25, 1) infinite;
}

.card-design-recommended .service-detail-card:nth-child(2)::after { animation-delay: -7.7s; }
.card-design-recommended .service-detail-card:nth-child(3)::after { animation-delay: -6.2s; }
.card-design-recommended .service-detail-card:nth-child(4)::after { animation-delay: -4.7s; }
.card-design-recommended .service-detail-card:nth-child(5)::after { animation-delay: -3.2s; }
.card-design-recommended .service-detail-card:nth-child(6)::after { animation-delay: -1.7s; }

.card-design-recommended .service-detail-card > * {
  position: relative;
  z-index: 1;
}

.card-design-recommended .service-detail-card > span {
  padding-left: 22px;
}

.card-design-recommended .service-detail-card > span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 1px;
  background: rgb(var(--service-accent));
  box-shadow: 0 0 9px rgba(var(--service-accent), .68);
}

.card-design-recommended .service-detail-card h3 {
  max-width: 80%;
  font-size: clamp(1.75rem, 2.25vw, 2.3rem);
  letter-spacing: -.045em;
  transition: color .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}

.card-design-recommended .service-detail-card > p {
  margin-top: 18px;
}

.card-design-recommended .service-detail-card ul {
  gap: 9px;
  margin: 24px 0 28px;
}

.card-design-recommended .service-detail-card > a {
  padding-top: 20px;
}

.card-design-recommended .service-detail-card li::before {
  box-shadow: 0 0 0 rgba(var(--service-accent), 0);
  transition: box-shadow .35s ease, transform .35s ease;
}

.card-design-recommended .service-detail-card > a {
  transition: color .35s ease, border-color .35s ease;
}

.card-design-recommended .service-detail-card > a span {
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), text-shadow .35s ease;
}

@media (hover: hover) and (pointer: fine) {
  .card-design-recommended .service-detail-card:hover {
    border-color: rgba(var(--service-accent), .46);
    background:
      linear-gradient(145deg, rgba(var(--service-accent), .105), transparent 38%),
      linear-gradient(180deg, #181a1c 0%, #111315 100%);
    box-shadow: 0 34px 72px rgba(0, 0, 0, .34), 0 0 0 1px rgba(var(--service-accent), .08) inset, 0 0 44px rgba(var(--service-accent), .07);
    transform: translateY(-7px) translateZ(0);
  }

  .card-design-recommended .service-detail-card:hover::before {
    color: rgba(var(--service-accent), .13);
    text-shadow: 0 0 35px rgba(var(--service-accent), .15);
    transform: translate3d(-8px, 7px, 0);
  }

  .card-design-recommended .service-detail-card:hover h3 {
    color: #fff;
    transform: translateX(5px);
  }

  .card-design-recommended .service-detail-card:hover li::before {
    box-shadow: 0 0 12px rgba(var(--service-accent), .78);
    transform: scale(1.25);
  }

  .card-design-recommended .service-detail-card:hover > a {
    border-color: rgba(var(--service-accent), .34);
    color: #fff;
  }

  .card-design-recommended .service-detail-card:hover > a span {
    text-shadow: 0 0 14px rgba(var(--service-accent), .8);
    transform: translateX(7px);
  }
}

@keyframes serviceDetailScan78 {
  0%, 15% { left: -48%; opacity: 0; }
  23% { opacity: .88; }
  58% { left: 108%; opacity: .88; }
  66%, 100% { left: 108%; opacity: 0; }
}

@media (max-width: 1080px) {
  .card-design-recommended .service-details .section-heading.split {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .card-design-recommended .service-detail-card {
    min-height: 0;
  }
}

@media (max-width: 700px) {
  .card-design-recommended .service-detail-card {
    min-height: 0;
    padding: 27px 22px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  }

  .card-design-recommended .service-detail-card::before {
    top: 25px;
    right: 24px;
    font-size: clamp(3.5rem, 19vw, 5.2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-design-recommended .service-detail-card::after {
    left: 0;
    width: 100%;
    opacity: .35;
    animation: none;
  }

  .card-design-recommended .service-detail-card,
  .card-design-recommended .service-detail-card::before,
  .card-design-recommended .service-detail-card h3,
  .card-design-recommended .service-detail-card > a span {
    transition: none;
  }
}

@media (forced-colors: active) {
  .card-design-recommended .service-detail-card {
    clip-path: none;
  }

  .card-design-recommended .service-detail-card::after {
    display: none;
  }
}

/* Headline-Zeichensetzung v56: Ein kleiner optischer Abstand verhindert,
   dass der Satzpunkt durch das enge Tracking am letzten "t" klebt. */
.card-design-recommended .night-stage-v46 .night-title-tail {
  white-space: nowrap;
}

.card-design-recommended .night-stage-v46 .night-title-period {
  display: inline-block;
  margin-left: .09em;
  letter-spacing: 0;
}

/* Route-Typografie v55: gewaehlte Variante 01 "PV Klar".
   Der bestehende Linien-, Kreis- und Lichtpunkteffekt bleibt unveraendert. */
.card-design-recommended .night-stage-v46.route-stage-v53.route-type-v55 .night-stage-route > div {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 9px;
  row-gap: 0;
  align-items: baseline;
}

.card-design-recommended .night-stage-v46.route-stage-v53.route-type-v55 .night-route-step {
  display: block;
  color: #ff5147;
  font-size: .68rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .08em;
}

.card-design-recommended .night-stage-v46.route-stage-v53.route-type-v55 .night-stage-route b {
  color: #f4f2ee;
  font-size: 1.15rem;
  font-weight: 760;
  line-height: 1.15;
  letter-spacing: -.025em;
  text-transform: none;
}

.card-design-recommended .night-stage-v46.route-stage-v53.route-type-v55 .night-stage-route small {
  grid-column: 2;
  margin-top: 4px;
  font-size: .72rem;
  line-height: 1.35;
}

@media (max-width: 620px) {
  .card-design-recommended .night-stage-v46.route-stage-v53.route-type-v55 .night-stage-route {
    --route-gap: 6px;
    gap: var(--route-gap);
  }

  .card-design-recommended .night-stage-v46.route-stage-v53.route-type-v55 .night-stage-route > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .card-design-recommended .night-stage-v46.route-stage-v53.route-type-v55 .night-route-step {
    font-size: .58rem;
  }

  .card-design-recommended .night-stage-v46.route-stage-v53.route-type-v55 .night-stage-route b {
    font-size: .82rem;
    letter-spacing: -.02em;
  }

  .card-design-recommended .night-stage-v46.route-stage-v53.route-type-v55 .night-stage-route small {
    grid-column: 1;
    display: block;
    margin-top: 3px;
    font-size: .57rem;
  }
}

/* Premium-Ambiente v45: Ein stark weichgezeichnetes Echo des vorhandenen
   Nachtmotivs und ein breiteres Grossbild-Raster fuellen grosse Ansichten,
   ohne einen weiteren sichtbaren Bildblock einzufuehren. */
.card-design-recommended .premium-ambient {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.card-design-recommended .premium-ambient::before {
  content: "";
  position: absolute;
  top: 4%;
  right: -8%;
  width: min(58vw, 1080px);
  height: 90%;
  opacity: .17;
  background:
    linear-gradient(90deg, #08090a 0, rgba(8, 9, 10, .28) 30%, rgba(8, 9, 10, .03) 72%),
    url("/assets/images/release-v168-active/bmw-m4-coupe-nachttransport-kennzeichen-entfernt-535c7deb.webp") 58% center / cover no-repeat;
  filter: blur(34px) saturate(1.2) contrast(1.08);
  transform: scale(1.09) translate3d(0, 0, 0);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 28%, #000 82%, transparent 100%);
  animation: premiumAmbientDrift 13s ease-in-out infinite alternate;
}

.card-design-recommended .premium-ambient::after {
  content: "";
  position: absolute;
  top: 10%;
  right: 4%;
  width: min(52vw, 920px);
  height: 76%;
  opacity: .72;
  background:
    radial-gradient(circle at 67% 43%, rgba(255, 64, 53, .16), rgba(239, 70, 56, .045) 24%, transparent 57%),
    linear-gradient(112deg, transparent 12%, rgba(255, 255, 255, .025) 48%, transparent 74%);
  filter: blur(8px);
}

.card-design-recommended .premium-grid {
  z-index: 2;
}

@keyframes premiumAmbientDrift {
  from { transform: scale(1.09) translate3d(-1.2%, -1%, 0); }
  to { transform: scale(1.14) translate3d(1.6%, 1.2%, 0); }
}

@media (min-width: 1500px) {
  .card-design-recommended .premium .shell {
    width: min(100% - 96px, 1600px);
  }

  .card-design-recommended .premium-grid {
    grid-template-columns: minmax(430px, .82fr) minmax(760px, 1.3fr);
    gap: clamp(72px, 5.4vw, 104px);
  }

  .card-design-recommended .premium-copy h2 {
    max-width: 7.5em;
    font-size: clamp(5.7rem, 5.25vw, 7rem);
  }

  .card-design-recommended .premium-gallery {
    min-height: clamp(680px, 39vw, 760px);
  }
}

@media (max-width: 1120px) {
  .card-design-recommended .premium-ambient::before {
    right: -18%;
    width: 78vw;
    opacity: .105;
    background-image:
      linear-gradient(90deg, #08090a 0, rgba(8, 9, 10, .28) 30%, rgba(8, 9, 10, .03) 72%),
      url("/assets/images/release-v168-active/bmw-m4-coupe-nachttransport-kennzeichen-entfernt-535c7deb-1200w.webp");
  }

  .card-design-recommended .premium-ambient::after {
    right: -10%;
    width: 76vw;
    opacity: .5;
  }
}

@media (max-width: 700px) {
  .card-design-recommended .premium-ambient::before {
    background-image:
      linear-gradient(90deg, #08090a 0, rgba(8, 9, 10, .28) 30%, rgba(8, 9, 10, .03) 72%),
      url("/assets/images/release-v168-active/bmw-m4-coupe-nachttransport-kennzeichen-entfernt-535c7deb-480w.webp");
  }
}

@media (max-width: 620px) {
  .card-design-recommended .premium-ambient {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-design-recommended .premium-ambient::before {
    animation: none;
  }
}

@media (forced-colors: active) {
  .card-design-recommended .premium-ambient {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-design-recommended .premium-gallery img {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Empfehlung: eine gemeinsame Karten-Komponente fuer beide Reihen
   -------------------------------------------------------------------------- */

body.card-design-recommended {
  max-width: 100%;
  overflow-x: hidden;
}

/* Beide Bildbereiche ueberlappen sich am Abschnittswechsel. Das Hero-Foto
   laeuft in den letzten 180px transparent aus, waehrend das zweite PV-Foto
   bereits darunterliegt. Die Karten bleiben als unmaskierter Inhalt obenauf. */
.card-design-recommended .hero {
  z-index: 1;
}

.card-design-recommended .hero-media,
.card-design-recommended .hero-shade {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - 180px),
    rgba(0, 0, 0, .72) calc(100% - 128px),
    rgba(0, 0, 0, .28) calc(100% - 54px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - 180px),
    rgba(0, 0, 0, .72) calc(100% - 128px),
    rgba(0, 0, 0, .28) calc(100% - 54px),
    transparent 100%
  );
}

.card-design-recommended .routes {
  position: relative;
  z-index: 0;
  isolation: isolate;
  margin-top: -181px;
  padding-top: 250px;
  padding-bottom: 160px;
  overflow: hidden;
  background: #0b0d0e;
}

/* Echtes PV-Motiv als sichtbare, filmische Buehne fuer die Direktwahl. Das
   Fahrzeug bleibt klar erkennbar; nur eine leichte Weichzeichnung trennt das
   Foto optisch von Ueberschrift und Karten im Vordergrund. */
.card-design-recommended .routes::before,
.card-design-recommended .routes::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.card-design-recommended .routes::before {
  inset: -14px;
  z-index: -3;
  background-image: url("/assets/images/original-selected/11-mercedes-g63-abschlepptransport-original.jpg");
  background-position: center 57%;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(3px) saturate(.90) contrast(1.05) brightness(1.02);
  opacity: 1;
  transform: scale(1.02);
}

/* Das erste Motiv bleibt nach der eigentlichen Abschnittsgrenze noch als
   zweite Bildebene erhalten und blendet erst unterhalb der oberen Karten aus.
   So bleibt der Crossfade sichtbar, statt vollstaendig hinter den Karten zu
   verschwinden. */
.card-design-recommended .routes > .routes-image-bridge {
  position: absolute;
  inset: -14px -14px auto;
  z-index: -2;
  height: 404px;
  pointer-events: none;
  background-image: url("/assets/images/user-uploaded/01-porsche-gt3-g63-person-entfernt-v2.jpg");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(3px) saturate(.88) contrast(1.03) brightness(.96);
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 154px,
    rgba(0, 0, 0, .74) 224px,
    rgba(0, 0, 0, .34) 310px,
    transparent 394px
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 154px,
    rgba(0, 0, 0, .74) 224px,
    rgba(0, 0, 0, .34) 310px,
    transparent 394px
  );
  transform: scale(1.02);
  transform-origin: center top;
}

.card-design-recommended .routes::after {
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(100% - 160px),
      rgba(238, 237, 232, .08) calc(100% - 136px),
      rgba(238, 237, 232, .32) calc(100% - 94px),
      rgba(238, 237, 232, .72) calc(100% - 42px),
      #eeede8 100%
    ),
    radial-gradient(circle at 52% 54%, rgba(247, 66, 54, .09), transparent 44%),
    linear-gradient(180deg, rgba(7, 9, 10, .48) 0%, rgba(7, 9, 10, .28) 52%, rgba(7, 9, 10, .58) 100%);
}

.card-design-recommended .routes + .cine-principle {
  margin-top: -160px;
}

.card-design-recommended .routes > *:not(.routes-image-bridge) {
  position: relative;
  z-index: 1;
}

.card-design-recommended .routes .section-heading h2 {
  text-shadow: 0 8px 30px rgba(0, 0, 0, .72);
}

/* Der Abschnittsmarker muss auf dem fotografischen Hintergrund sofort lesbar
   sein: etwas groesser, deutlich schwerer und mit kraeftigeren Seitenlinien. */
.card-design-recommended .routes .section-heading .eyebrow {
  color: #ff5147;
  font-size: .70rem;
  font-weight: 950;
  letter-spacing: .23em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .92), 0 0 18px rgba(247, 66, 54, .24);
}

.card-design-recommended .routes .section-heading .eyebrow::before,
.card-design-recommended .routes .section-heading .eyebrow::after {
  height: 2px;
  background: #ff5147;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .72), 0 0 10px rgba(247, 66, 54, .22);
}

/* Der helle Folgeabschnitt greift denselben symmetrischen, kraeftigen
   Linienmarker wie der direkte Einstieg auf. */
.card-design-recommended .cine-principle .eyebrow::before,
.card-design-recommended .cine-principle .eyebrow::after {
  width: 32px;
  height: 2px;
  flex: 0 0 32px;
  background: currentColor;
}

/* Empfohlene Endfassung fuer das PV-Transportprinzip: Der warme, helle
   Abschnitt nimmt den vorherigen Foto-Uebergang auf und laeuft weich in das
   Graphit der folgenden Premiumsektion. Die Karten ueberbruecken beide
   Farbwelten und bleiben als klare, helle Nutzflaechen im Vordergrund. */
.card-design-recommended .cine-principle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(clamp(88px, 8vw, 128px) + 160px);
  padding-bottom: clamp(80px, 6vw, 105px);
  color: #171819;
  background:
    linear-gradient(
      to bottom,
      rgba(238, 237, 232, 0) 0,
      rgba(238, 237, 232, .10) 28px,
      rgba(238, 237, 232, .34) 70px,
      rgba(238, 237, 232, .68) 116px,
      #eeede8 160px,
      #e6e1d9 220px,
      #d8d3c9 310px,
      #d8d3c9 34%,
      #ccc7be 43%,
      #918e88 53%,
      #4b4b4a 62%,
      #222425 72%,
      #0f1112 84%,
      #08090a 100%
  );
}

/* Der Abschnittshintergrund muss bereits vor dem Scroll-Reveal direkt an den
   vorherigen Verlauf anschliessen. Sonst legt die Reveal-Verschiebung eine
   sichtbare Zwischenkante frei. */
.card-design-recommended .cine-principle[data-reveal] {
  opacity: 1;
  transform: none;
}

.card-design-recommended .cine-principle::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 14%, rgba(255, 255, 255, .30), transparent 30%),
    repeating-linear-gradient(112deg, rgba(18, 20, 21, .022) 0 1px, transparent 1px 8px),
    radial-gradient(ellipse at 50% 58%, transparent 0 34%, rgba(0, 0, 0, .14) 78%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 120px, rgba(0, 0, 0, .40) 210px, #000 320px);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 120px, rgba(0, 0, 0, .40) 210px, #000 320px);
}

.card-design-recommended .cine-principle > *:not(.cine-principle-watermark) {
  position: relative;
  z-index: 2;
}

.card-design-recommended .cine-principle-watermark {
  position: absolute;
  z-index: 0;
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: baseline;
  column-gap: 0;
  white-space: nowrap;
  top: calc(clamp(105px, 10vw, 155px) + 160px);
  left: 62%;
  font-family: var(--body);
  font-size: clamp(14rem, 29vw, 29rem);
  font-weight: 950;
  line-height: .72;
  letter-spacing: 0;
  isolation: isolate;
  -webkit-perspective: 520px;
  perspective: 520px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
  pointer-events: none;
  user-select: none;
}

/* Variante 1: ein klarer Tiefen-Split, ohne die gemeinsame Kante von P und V
   aufzubrechen. Beide Buchstaben drehen um genau diese Innenkante; dadurch
   bleibt das Logo als zusammenhaengende Marke lesbar, obwohl das P nach
   hinten und das V nach vorne faehrt. */
.card-design-recommended .cine-principle-watermark-p {
  display: block;
  flex: 0 0 auto;
  color: rgba(239, 70, 56, .26);
  transform-origin: 100% 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, filter;
  animation: pv-watermark-depth-p 6s cubic-bezier(.45, 0, .25, 1) infinite;
}

.card-design-recommended .cine-principle-watermark-v {
  position: relative;
  z-index: 1;
  display: block;
  flex: 0 0 auto;
  margin-left: -.12em;
  color: rgba(255, 255, 255, .78);
  transform-origin: 0 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, filter;
  animation: pv-watermark-depth-v 6s cubic-bezier(.45, 0, .25, 1) infinite;
}

@keyframes pv-watermark-depth-p {
  0%, 100% {
    transform: translate3d(0, 0, -20px) rotateY(-3deg);
    filter: drop-shadow(10px 12px 14px rgba(82, 24, 18, .12));
  }
  50% {
    transform: translate3d(0, -5px, -78px) rotateY(-12deg);
    filter: drop-shadow(32px 28px 28px rgba(82, 24, 18, .32));
  }
}

@keyframes pv-watermark-depth-v {
  0%, 100% {
    transform: translate3d(-.012em, 0, 22px) rotateY(3deg);
    filter: drop-shadow(-8px 10px 14px rgba(255, 255, 255, .20));
  }
  50% {
    transform: translate3d(-.018em, 5px, 88px) rotateY(12deg);
    filter: drop-shadow(-30px 28px 30px rgba(255, 255, 255, .58));
  }
}

/* Auf kleinen Displays bleibt die Tiefe klar sichtbar, aber die Ausschlaege
   sind kuerzer. Das vermeidet abgeschnittene Schatten und haelt die
   zusammenlaufende Innenkante von P und V stabil. */
@keyframes pv-watermark-depth-p-mobile {
  0%, 100% {
    transform: translate3d(0, 0, -14px) rotateY(-3deg);
    filter: drop-shadow(7px 9px 11px rgba(82, 24, 18, .12));
  }
  50% {
    transform: translate3d(0, -3px, -56px) rotateY(-9deg);
    filter: drop-shadow(21px 19px 21px rgba(82, 24, 18, .28));
  }
}

@keyframes pv-watermark-depth-v-mobile {
  0%, 100% {
    transform: translate3d(-.012em, 0, 18px) rotateY(3deg);
    filter: drop-shadow(-6px 8px 11px rgba(255, 255, 255, .18));
  }
  50% {
    transform: translate3d(-.018em, 3px, 66px) rotateY(9deg);
    filter: drop-shadow(-20px 20px 22px rgba(255, 255, 255, .50));
  }
}

.card-design-recommended .cine-principle-head {
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .62fr);
  gap: clamp(36px, 5vw, 72px);
  margin-bottom: 32px;
}

.card-design-recommended .cine-principle-head h2 {
  max-width: 860px;
}

.card-design-recommended .cine-principle-head > p {
  max-width: 500px;
  color: #5c5c58;
}

.card-design-recommended .cine-principle-rail,
.card-design-recommended .cine-proof-grid {
  width: min(1460px, calc(100% - 48px));
  max-width: none;
}

.card-design-recommended .cine-principle-rail {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  min-height: 66px;
  margin-bottom: 6px;
}

.card-design-recommended .cine-principle > .cine-principle-rail {
  z-index: 4;
}

.card-design-recommended .cine-principle-rail::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 29px;
  right: calc(16.666% - 82px);
  left: calc(16.666% - 27px);
  height: 4px;
  background: linear-gradient(90deg, #ef4638 0%, #ef4638 78%, #c9362f 100%);
  box-shadow: 0 4px 16px rgba(239, 70, 56, .24);
}

.card-design-recommended .cine-principle-rail::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 37px;
  right: calc(16.666% - 82px);
  left: calc(16.666% - 27px);
  height: 1px;
  background: rgba(18, 20, 21, .34);
}

.card-design-recommended .cine-principle-rail > span {
  justify-self: center;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  color: #171819;
}

.card-design-recommended .cine-principle-step-number {
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  place-items: center;
  border: 3px solid #ef4638;
  border-radius: 50%;
  color: #f1ede5;
  background: #17191a;
  box-shadow: 0 0 0 5px #eeeae2, 0 10px 26px rgba(0, 0, 0, .22);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .10em;
}

.card-design-recommended .cine-principle-step-copy {
  display: grid;
  /* Separate the title and supporting copy across the two route lines. */
  gap: 21px;
  padding-top: 7px;
  min-width: 0;
}

.card-design-recommended .cine-principle-step-copy strong {
  color: #111314;
  font-size: .74rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}

.card-design-recommended .cine-principle-direction {
  position: absolute;
  z-index: 2;
  top: 30px;
  width: 10px;
  height: 10px;
  border-top: 3px solid #ef4638;
  border-right: 3px solid #ef4638;
  transform: translateY(-50%) rotate(45deg);
  filter: drop-shadow(0 2px 5px rgba(239, 70, 56, .28));
}

.card-design-recommended .cine-principle-direction-one {
  left: 29.2%;
}

.card-design-recommended .cine-principle-direction-two {
  left: 62.5%;
}

.card-design-recommended .cine-principle-step-copy small {
  color: #50514d;
  font-size: .64rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .035em;
  white-space: nowrap;
}

.card-design-recommended .cine-proof-grid {
  position: relative;
  z-index: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  align-items: stretch;
}

.card-design-recommended .cine-proof-grid article,
.card-design-recommended .cine-proof-grid article:nth-child(2) {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(18, 20, 21, .20);
  border-top: 4px solid #ef4638;
  background: #f1ede5;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .31);
  transform: none;
}

.card-design-recommended .cine-proof-grid article:nth-child(n) figure {
  height: clamp(390px, 31vw, 470px);
  background: #17191a;
}

.card-design-recommended .cine-proof-grid article > div {
  min-height: 218px;
  padding: 29px 30px 34px;
  background: #f1ede5;
}

.card-design-recommended .cine-proof-grid article > div > span {
  margin-bottom: 20px;
  color: #d13a31;
}

.card-design-recommended .cine-proof-grid p {
  color: #5f605c;
}

.card-design-recommended .cine-principle + .premium {
  margin-top: -1px;
  padding-top: clamp(88px, 7vw, 120px);
}

@media (max-width: 1120px) {
  .card-design-recommended .cine-principle {
    background:
      linear-gradient(to bottom, rgba(238, 237, 232, 0) 0, rgba(238, 237, 232, .10) 28px, rgba(238, 237, 232, .34) 70px, rgba(238, 237, 232, .68) 116px, #eeede8 160px, #e6e1d9 215px, #d8d3c9 300px, #d8d3c9 29%, #bbb6ae 39%, #676765 50%, #242627 62%, #08090a 80%, #08090a 100%);
  }

  .card-design-recommended .cine-principle-head {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 30px;
  }

  .card-design-recommended .cine-proof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .card-design-recommended .cine-proof-grid article:nth-child(3) {
    grid-column: auto;
    display: block;
  }

  .card-design-recommended .cine-proof-grid article:nth-child(n) figure,
  .card-design-recommended .cine-proof-grid article:nth-child(3) figure {
    height: clamp(300px, 35vw, 390px);
  }
}

@media (max-width: 860px) {
  .card-design-recommended .cine-principle {
    padding-top: 204px;
    padding-bottom: 78px;
    background:
      linear-gradient(to bottom, rgba(238, 237, 232, 0) 0, rgba(238, 237, 232, .12) 24px, rgba(238, 237, 232, .38) 58px, rgba(238, 237, 232, .72) 96px, #eeede8 130px, #e5e0d8 175px, #d8d3c9 240px, #d8d3c9 21%, #aaa69f 29%, #4d4e4d 38%, #17191a 47%, #08090a 64%, #08090a 100%);
  }

  .card-design-recommended .routes + .cine-principle {
    margin-top: -130px;
  }

  .card-design-recommended .cine-principle-watermark {
    top: 222px;
    left: 70%;
    font-size: clamp(10rem, 48vw, 18rem);
  }

  .card-design-recommended .cine-principle-head {
    margin-bottom: 24px;
  }

  .card-design-recommended .cine-principle::after {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 92px, rgba(0, 0, 0, .42) 160px, #000 245px);
    mask-image: linear-gradient(to bottom, transparent 0, transparent 92px, rgba(0, 0, 0, .42) 160px, #000 245px);
  }

  .card-design-recommended .cine-principle-rail,
  .card-design-recommended .cine-proof-grid {
    width: calc(100% - 32px);
  }

  .card-design-recommended .cine-principle-rail {
    min-height: 82px;
    margin-bottom: 0;
  }

  .card-design-recommended .cine-principle-rail > span {
    display: grid;
    justify-items: center;
    gap: 5px;
    text-align: center;
  }

  .card-design-recommended .cine-principle-rail::before {
    top: 24px;
    right: 16.666%;
    left: 16.666%;
  }

  .card-design-recommended .cine-principle-rail::after {
    top: 31px;
    right: 16.666%;
    left: 16.666%;
  }

  .card-design-recommended .cine-principle-direction {
    display: none;
  }

  .card-design-recommended .cine-principle-step-number {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-width: 2px;
    color: #f1ede5;
    background: #17191a;
    box-shadow: 0 0 0 4px #d9d4ca, 0 8px 20px rgba(0, 0, 0, .20);
    font-size: .61rem;
  }

  .card-design-recommended .cine-principle-step-copy {
    gap: 2px;
    padding-top: 0;
  }

  .card-design-recommended .cine-principle-step-copy strong {
    font-size: .60rem;
    letter-spacing: .08em;
  }

  .card-design-recommended .cine-principle-step-copy small {
    display: none;
  }

  .card-design-recommended .cine-proof-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .card-design-recommended .cine-proof-grid article:nth-child(n) figure,
  .card-design-recommended .cine-proof-grid article:nth-child(3) figure {
    height: 330px;
  }

  .card-design-recommended .cine-proof-grid article > div {
    min-height: 0;
    padding: 25px 24px 30px;
  }
}

/* Harte Neutralisierung der beiden alten Layout-Komponenten. Beide Reihen
   werden ab hier ausschliesslich von .pv-service-grid gesteuert. */
.card-design-recommended .hero-proof.pv-service-grid,
.card-design-recommended .route-grid.pv-service-grid {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  float: none !important;
  transform: none !important;
  margin-inline: auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

.card-design-recommended .pv-service-grid {
  display: grid !important;
  width: min(1360px, calc(100% - 40px)) !important;
  max-width: calc(100% - 40px) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  background: transparent !important;
}

.card-design-recommended .pv-service-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.card-design-recommended .pv-service-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.card-design-recommended .pv-service-grid > .pv-service-card {
  --card-light-x: 50%;
  --card-light-y: 50%;
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 156px !important;
  padding: 28px 30px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border: 1px solid #303335 !important;
  border-radius: 0 !important;
  background: #111314 !important;
  color: inherit !important;
  text-decoration: none !important;
  box-shadow: none;
  transform: none;
  transform-origin: center;
  isolation: isolate;
  transition: border-color .28s ease, background .28s ease, box-shadow .28s ease, transform .28s ease !important;
}

/* Nummer und Text bilden in beiden Reihen denselben zentrierten Innenblock.
   Die breiteren Dreier-Karten wirken dadurch nicht mehr linksbuendig, waehrend
   die Vierer-Reihe bei geringerer Kartenbreite weiterhin sauber umbrechen kann. */
.card-design-recommended .pv-service-card__inner {
  position: relative !important;
  z-index: 1;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 18px !important;
  width: min(100%, 330px) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
}

.card-design-recommended .hero-proof.pv-service-grid > .pv-service-card,
.card-design-recommended .route-grid.pv-service-grid > .pv-service-card {
  align-self: stretch !important;
  justify-self: stretch !important;
  margin: 0 !important;
}

.card-design-recommended .pv-service-grid > .pv-service-card::before,
.card-design-recommended .pv-service-grid > .pv-service-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.card-design-recommended .pv-service-grid > .pv-service-card::before {
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--red);
}

.card-design-recommended .pv-service-grid > .pv-service-card::after {
  left: 0;
  right: 100%;
  bottom: 0;
  height: 3px;
  background: var(--red);
  box-shadow: none;
  transition: right .32s ease !important;
}

.card-design-recommended .pv-service-grid > .pv-service-card:hover,
.card-design-recommended .pv-service-grid > .pv-service-card:focus-visible {
  border-color: #303335 !important;
  background:
    radial-gradient(circle 180px at var(--card-light-x) var(--card-light-y), rgba(247, 66, 54, .16), rgba(247, 66, 54, .055) 36%, transparent 70%),
    linear-gradient(100deg, rgba(247, 66, 54, .08), #151718 42%, #111314) !important;
  box-shadow: 0 15px 34px rgba(0, 0, 0, .30), inset 0 0 30px rgba(247, 66, 54, .04);
  transform: translateY(-3px) scale(1.008) !important;
  outline: none;
}

.card-design-recommended .pv-service-grid > .pv-service-card:hover::after,
.card-design-recommended .pv-service-grid > .pv-service-card:focus-visible::after {
  right: 0;
}

/* Die vier Direktwahl-Karten erhalten eine halbtransparente, leicht
   weichgezeichnete Flaeche. So bleibt das PV-Foto sichtbar, ohne die
   Lesbarkeit oder die klare Modulstruktur zu beeintraechtigen. */
.card-design-recommended .routes .pv-service-grid > .pv-service-card {
  border-color: rgba(255, 255, 255, .30) !important;
  background: rgba(11, 13, 14, .94) !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .045);
  -webkit-backdrop-filter: blur(5px) saturate(.88);
  backdrop-filter: blur(5px) saturate(.88);
}

.card-design-recommended .routes .pv-service-grid > .pv-service-card:hover,
.card-design-recommended .routes .pv-service-grid > .pv-service-card:focus-visible {
  border-color: rgba(247, 66, 54, .46) !important;
  background:
    radial-gradient(circle 210px at var(--card-light-x) var(--card-light-y), rgba(247, 66, 54, .20), rgba(247, 66, 54, .06) 42%, transparent 72%),
    rgba(14, 16, 17, .97) !important;
  box-shadow: 0 26px 54px rgba(0, 0, 0, .56), inset 0 0 34px rgba(247, 66, 54, .045);
}

.card-design-recommended .pv-service-card__inner > span {
  position: relative !important;
  z-index: 1;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #a9adaf !important;
  font-size: .72rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: .14em !important;
}

.card-design-recommended .pv-service-card__inner > span::after {
  content: "/";
  color: var(--red);
  font-weight: 900;
}

.card-design-recommended .pv-service-card__inner > .pv-service-card__content {
  position: relative !important;
  z-index: 1;
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 7px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: visible !important;
}

/* Alte Pfeil-/Badge-Regeln duerfen keine leeren Steuerelemente erzeugen. */
.card-design-recommended .route-grid.pv-service-grid .pv-service-card > i,
.card-design-recommended .hero-proof.pv-service-grid .pv-service-card > i {
  display: none !important;
}

.card-design-recommended .pv-service-card__content > b,
.card-design-recommended .pv-service-card__content > small {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.card-design-recommended .pv-service-card__content > b {
  color: #f4f2ed !important;
  font-size: clamp(.96rem, 1.08vw, 1.12rem) !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
  letter-spacing: -.018em !important;
}

.card-design-recommended .pv-service-card__content > small {
  color: #7c8184 !important;
  font-size: .72rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

@media (max-width: 1120px) {
  .card-design-recommended .pv-service-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  .card-design-recommended .pv-service-grid--three,
  .card-design-recommended .pv-service-grid--four {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 620px) {
  .card-design-recommended .pv-service-grid {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    gap: 6px !important;
  }

  .card-design-recommended .pv-service-grid > .pv-service-card {
    height: auto !important;
    min-height: 132px !important;
    padding: 22px 20px !important;
  }

  .card-design-recommended .pv-service-card__inner {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    width: min(100%, 330px) !important;
  }

  .card-design-recommended .pv-service-card__inner > span {
    font-size: .66rem !important;
  }

  .card-design-recommended .pv-service-card__content > b {
    font-size: .98rem !important;
  }

  .card-design-recommended .pv-service-card__content > small {
    font-size: .68rem !important;
  }
}

/* Responsive Endabstimmung: iPad/Tablet und breite Handy-Querformate nutzen
   die drei Prozesskarten wieder als zusammenhaengende Reihe. Die Direktwahl
   bleibt dabei zweispaltig und touchfreundlich. */
@media (min-width: 760px) and (max-width: 1024px),
       (min-width: 680px) and (max-width: 900px) and (orientation: landscape) {
  .card-design-recommended .cine-principle {
    background:
      linear-gradient(
        to bottom,
        rgba(238, 237, 232, 0) 0,
        rgba(238, 237, 232, .14) 30px,
        rgba(238, 237, 232, .44) 76px,
        rgba(238, 237, 232, .82) 122px,
        #eeede8 150px,
        #e5e0d8 215px,
        #d8d3c9 300px,
        #d8d3c9 34%,
        #b8b3ab 43%,
        #696966 51%,
        #292b2c 59%,
        #101213 68%,
        #08090a 78%,
        #08090a 100%
      );
  }

  .card-design-recommended .cine-principle-watermark {
    top: 232px;
    left: 64%;
    font-size: clamp(15rem, 39vw, 24rem);
  }

  .card-design-recommended .cine-proof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .card-design-recommended .cine-proof-grid article:nth-child(3) {
    grid-column: auto;
    display: block;
  }

  .card-design-recommended .cine-proof-grid article:nth-child(n) figure,
  .card-design-recommended .cine-proof-grid article:nth-child(3) figure {
    height: clamp(240px, 30vw, 310px);
  }

  .card-design-recommended .cine-proof-grid article > div {
    min-height: 210px;
    padding: 22px 20px 26px;
  }

  .card-design-recommended .cine-proof-grid article > div > span {
    margin-bottom: 15px;
  }

  .card-design-recommended .cine-proof-grid h3 {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  }

  .card-design-recommended .cine-proof-grid p {
    font-size: .79rem;
    line-height: 1.52;
  }

  .card-design-recommended .pv-service-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .card-design-recommended .pv-service-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .card-design-recommended .cine-principle-watermark {
    top: 214px;
    left: 66%;
    font-size: clamp(10rem, 50vw, 13rem);
    -webkit-perspective: 460px;
    perspective: 460px;
  }

  .card-design-recommended .cine-principle-watermark-p {
    animation-name: pv-watermark-depth-p-mobile;
  }

  .card-design-recommended .cine-principle-watermark-v {
    animation-name: pv-watermark-depth-v-mobile;
  }

  .card-design-recommended .cine-principle-head h2 {
    font-size: clamp(2.65rem, 13.4vw, 4rem);
    overflow-wrap: normal;
  }

  .card-design-recommended .cine-proof-grid article:nth-child(n) figure,
  .card-design-recommended .cine-proof-grid article:nth-child(3) figure {
    height: clamp(275px, 82vw, 320px);
  }

  body.card-design-recommended {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }

  .card-design-recommended .mobile-actions {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* Touchgeraete erhalten keinen klebenden Hover-Versatz. Tastaturfokus bleibt
   auf Convertibles und Desktop-Systemen weiterhin sichtbar. */
@media (hover: none) {
  .card-design-recommended .pv-service-grid > .pv-service-card:hover {
    transform: none !important;
  }
}

/* Windows-Hochkontrastmodus: Das dekorative Wasserzeichen tritt zurueck,
   waehrend Prozess und Inhalte in den Systemfarben voll lesbar bleiben. */
@media (forced-colors: active) {
  .card-design-recommended .cine-principle-watermark {
    display: none;
  }

  .card-design-recommended .cine-principle-step-number,
  .card-design-recommended .cine-proof-grid article {
    border-color: CanvasText;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-design-recommended .cine-principle-watermark-p,
  .card-design-recommended .cine-principle-watermark-v {
    animation: none !important;
  }

  .card-design-recommended .cine-principle-watermark-p {
    transform: translateZ(-34px) rotateY(-5deg);
    filter: drop-shadow(14px 14px 16px rgba(82, 24, 18, .16));
  }

  .card-design-recommended .cine-principle-watermark-v {
    transform: translate3d(-.012em, 0, 36px) rotateY(5deg);
    filter: drop-shadow(-12px 14px 16px rgba(255, 255, 255, .26));
  }

  .card-design-recommended .pv-service-grid > .pv-service-card,
  .card-design-recommended .pv-service-grid > .pv-service-card::after {
    transition: none !important;
  }
}

/* Die bestehende Hell-zu-Dunkel-Ueberblendung bleibt bestehen; diese letzte
   Regel setzt nur den gewaehlten Abstand der Premiumbuehne nach der Kaskade. */
.card-design-recommended .cine-principle + .premium {
  padding-top: clamp(96px, 8.4vw, 138px);
}

@media (max-width: 620px) {
  .card-design-recommended .cine-principle + .premium {
    padding-top: 76px;
  }
}

/* Premium-Uebergang v40: Die Bruecke liegt jeweils zur Haelfte ueber dem
   Prozessbereich und der Premiumbuehne. Dadurch verschwindet die horizontale
   Schnittkante, ohne zusaetzliche Leerflaeche zwischen den Sektionen. */
.card-design-recommended .premium-section-bridge {
  --premium-bridge-size: clamp(190px, 16vw, 270px);
  position: relative;
  z-index: 5;
  width: 100%;
  height: var(--premium-bridge-size);
  margin-top: calc(var(--premium-bridge-size) * -.5);
  margin-bottom: calc(var(--premium-bridge-size) * -.5);
  overflow: hidden;
  background:
    radial-gradient(ellipse 46% 66% at 73% 50%, rgba(239, 70, 56, .105), rgba(239, 70, 56, .035) 36%, transparent 72%),
    linear-gradient(
      to bottom,
      rgba(8, 9, 10, 0) 0%,
      rgba(8, 9, 10, .24) 18%,
      rgba(8, 9, 10, .70) 36%,
      #08090a 50%,
      rgba(8, 9, 10, .82) 64%,
      rgba(8, 9, 10, .38) 82%,
      rgba(8, 9, 10, 0) 100%
    );
  pointer-events: none;
}

.card-design-recommended .premium-section-bridge::before {
  content: "";
  position: absolute;
  inset: 17% -8%;
  opacity: .42;
  background:
    repeating-linear-gradient(112deg, transparent 0 38px, rgba(255, 255, 255, .024) 39px, transparent 40px),
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .026) 48%, transparent 100%);
  filter: blur(8px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 66%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 34%, #000 66%, transparent);
}

/* Am oberen Rand ist die Premiumflaeche exakt so dunkel wie das Ende des
   Prozessbereichs. Erst darunter werden Tiefe und Radiallicht eingeblendet. */
.card-design-recommended .premium {
  background:
    linear-gradient(to bottom, #08090a 0, rgba(8, 9, 10, .94) 72px, rgba(8, 9, 10, .58) 190px, transparent 360px),
    radial-gradient(circle at 73% 54%, rgba(45, 49, 52, .44) 0, rgba(18, 21, 23, .34) 31%, rgba(8, 9, 10, 0) 61%),
    linear-gradient(122deg, #08090a 0%, #090b0c 48%, #0c0f11 100%);
}

.card-design-recommended .premium::before {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 48px, rgba(0, 0, 0, .32) 160px, #000 330px);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 48px, rgba(0, 0, 0, .32) 160px, #000 330px);
}

.card-design-recommended .premium-section-bridge + .premium {
  margin-top: 0;
  padding-top: clamp(96px, 8.4vw, 138px);
}

@media (max-width: 620px) {
  .card-design-recommended .premium-section-bridge {
    --premium-bridge-size: 156px;
  }

  .card-design-recommended .premium-section-bridge + .premium {
    padding-top: 76px;
  }
}

@media (forced-colors: active) {
  .card-design-recommended .premium-section-bridge {
    display: none;
  }
}

/* Premium-Kennzeichnung v41: Die Linien rahmen die Aussage symmetrisch ein.
   Der Text benennt beide Transportarten, damit er zu den offenen Bildbeispielen
   und zur geschlossenen Premiumoption passt. */
.card-design-recommended .premium-copy .eyebrow.eyebrow-symmetric {
  width: max-content;
  max-width: 100%;
  gap: 13px;
  white-space: nowrap;
}

.card-design-recommended .premium-copy .eyebrow.eyebrow-symmetric::before,
.card-design-recommended .premium-copy .eyebrow.eyebrow-symmetric::after {
  width: 32px;
  height: 1px;
  flex: 0 0 32px;
  background: currentColor;
}

@media (max-width: 620px) {
  .card-design-recommended .premium-copy .eyebrow.eyebrow-symmetric {
    gap: 9px;
    font-size: .56rem;
    letter-spacing: .15em;
  }

  .card-design-recommended .premium-copy .eyebrow.eyebrow-symmetric::before,
  .card-design-recommended .premium-copy .eyebrow.eyebrow-symmetric::after {
    width: 24px;
    flex-basis: 24px;
  }
}

/* Premium-Cinematic v43: Die linke Textspalte erhaelt mehr Tiefe und Bewegung,
   ohne die klare Bilddominanz oder die bestehende Seitenstruktur zu veraendern. */
.card-design-recommended .premium-copy {
  isolation: isolate;
}

.card-design-recommended .premium-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 13%;
  left: -23%;
  width: min(430px, 92%);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .82;
  background: radial-gradient(circle, rgba(239, 70, 56, .12) 0, rgba(239, 70, 56, .045) 34%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}

.card-design-recommended .premium-title > span {
  display: block;
}

.card-design-recommended .premium-title-accent {
  position: relative;
  width: max-content;
  max-width: 100%;
  color: #f6f3ee;
  text-shadow: 0 12px 34px rgba(0, 0, 0, .48);
}

.card-design-recommended .premium-title-accent em {
  color: #ff5147;
  font-style: normal;
  text-shadow: 0 0 18px rgba(239, 70, 56, .22), 0 12px 34px rgba(0, 0, 0, .48);
}

.card-design-recommended .premium-brief {
  position: relative;
  max-width: 555px;
  margin-top: 30px;
  padding: 20px 22px 21px 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .105);
  border-left: 2px solid #f25245;
  border-radius: 0 9px 9px 0;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .014) 58%, rgba(239, 70, 56, .025)),
    rgba(10, 12, 13, .76);
  box-shadow: 0 22px 46px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .035);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.card-design-recommended .premium-brief::after {
  content: "";
  position: absolute;
  top: -72%;
  left: -45%;
  width: 22%;
  height: 250%;
  opacity: .42;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .30), rgba(239, 70, 56, .18), transparent);
  transform: rotate(16deg);
  animation: premiumBriefSweep 5.2s cubic-bezier(.25, .7, .2, 1) infinite;
  pointer-events: none;
}

.card-design-recommended .premium-brief-meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 11px;
  color: #f1eee9;
  font-size: .61rem;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.card-design-recommended .premium-brief-status {
  min-width: 98px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-right: 10px;
  color: #ff5147;
  border-right: 1px solid rgba(239, 70, 56, .55);
}

.card-design-recommended .premium-brief-status i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #ff5147;
  box-shadow: 0 0 0 0 rgba(239, 70, 56, .50), 0 0 12px rgba(239, 70, 56, .45);
  animation: premiumStatusPulse 1.9s ease-out infinite;
}

.card-design-recommended .premium-brief p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #989da0;
  font-size: clamp(.78rem, .86vw, .9rem);
  line-height: 1.72;
}

.card-design-recommended .premium-copy .chips li {
  transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .card-design-recommended .premium-brief:hover {
    border-color: rgba(239, 70, 56, .44);
    border-left-color: #ff5147;
    background:
      linear-gradient(115deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .018) 58%, rgba(239, 70, 56, .045)),
      rgba(10, 12, 13, .82);
    box-shadow: 0 25px 54px rgba(0, 0, 0, .28), 0 0 28px rgba(239, 70, 56, .10), inset 0 1px rgba(255, 255, 255, .045);
  }

  .card-design-recommended .premium-copy .chips li:hover {
    color: #f6f3ee;
    border-color: rgba(239, 70, 56, .55);
    background: rgba(239, 70, 56, .08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .24), 0 0 18px rgba(239, 70, 56, .08);
    transform: translateY(-2px);
  }

  .card-design-recommended .premium-copy .text-link:hover span {
    animation: premiumArrowPulse .85s ease-in-out infinite alternate;
  }
}

.card-design-recommended .premium-copy .eyebrow[data-reveal] { transition-delay: 0s; }
.card-design-recommended .premium-copy .premium-title[data-reveal] { transition-delay: .08s; }
.card-design-recommended .premium-copy .premium-brief[data-reveal] { transition-delay: .16s; }
.card-design-recommended .premium-copy .chips[data-reveal] { transition-delay: .24s; }
.card-design-recommended .premium-copy .text-link[data-reveal] { transition-delay: .32s; }

@keyframes premiumBriefSweep {
  0%, 42% { left: -45%; }
  76%, 100% { left: 128%; }
}

@keyframes premiumStatusPulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 70, 56, .50), 0 0 12px rgba(239, 70, 56, .45); }
  68%, 100% { box-shadow: 0 0 0 8px rgba(239, 70, 56, 0), 0 0 18px rgba(239, 70, 56, .16); }
}

@keyframes premiumArrowPulse {
  from { transform: translateX(0); }
  to { transform: translateX(5px); }
}

@media (max-width: 620px) {
  .card-design-recommended .premium-copy::before {
    top: 7%;
    left: -34%;
    opacity: .66;
  }

  .card-design-recommended .premium-brief {
    margin-top: 24px;
    padding: 17px 17px 18px 19px;
  }

  .card-design-recommended .premium-brief p {
    font-size: .78rem;
    line-height: 1.66;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-design-recommended .premium-brief::after,
  .card-design-recommended .premium-brief-status i,
  .card-design-recommended .premium-copy .text-link span {
    animation: none;
  }

  .card-design-recommended .premium-copy .chips li {
    transition: none;
  }
}

@media (forced-colors: active) {
  .card-design-recommended .premium-copy::before,
  .card-design-recommended .premium-brief::after {
    display: none;
  }

  .card-design-recommended .premium-title-accent em {
    color: LinkText;
    text-shadow: none;
  }

  .card-design-recommended .premium-brief {
    border-color: CanvasText;
    background: Canvas;
    box-shadow: none;
  }

  .card-design-recommended .premium-brief-status i {
    background: LinkText;
    box-shadow: none;
  }
}

/* Night-stage v46: Soforthilfe und planbaren Transport visuell trennen,
   das reale Nachtmotiv lesbarer machen und die Einsatzarten aufwerten. */
.card-design-recommended .night-stage-v46 {
  min-height: 890px;
  isolation: isolate;
  background: #07090a;
}

.card-design-recommended .night-stage-v46 .night-stage-media img {
  filter: brightness(1.12) contrast(1.08) saturate(.9);
  transform: scale(1.025);
  transition: filter .8s ease, transform 1.4s cubic-bezier(.2, .7, .2, 1);
}

.card-design-recommended .night-stage-v46 .night-stage-shade {
  background:
    linear-gradient(90deg, rgba(3, 5, 6, .96) 0%, rgba(3, 5, 6, .86) 32%, rgba(3, 5, 6, .38) 58%, rgba(3, 5, 6, .14) 78%, rgba(3, 5, 6, .36) 100%),
    linear-gradient(0deg, rgba(3, 5, 6, .96) 0%, rgba(3, 5, 6, .34) 30%, transparent 56%),
    linear-gradient(180deg, rgba(3, 5, 6, .22), transparent 28%);
}

.card-design-recommended .night-stage-v46 .night-stage-signal {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}

.card-design-recommended .night-stage-v46 .night-stage-signal span {
  position: absolute;
  width: clamp(240px, 25vw, 490px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .2;
  filter: blur(34px);
  will-change: transform, opacity;
}

.card-design-recommended .night-stage-v46 .night-signal-red {
  top: 10%;
  right: 26%;
  background: radial-gradient(circle, rgba(255, 59, 47, .78) 0, rgba(239, 70, 56, .24) 24%, transparent 69%);
  animation: nightSignalRed 4.8s ease-in-out infinite;
}

.card-design-recommended .night-stage-v46 .night-signal-blue {
  top: 18%;
  right: 3%;
  background: radial-gradient(circle, rgba(64, 128, 255, .7) 0, rgba(58, 101, 208, .2) 26%, transparent 70%);
  animation: nightSignalBlue 4.8s 1.1s ease-in-out infinite;
}

.card-design-recommended .night-stage-v46 .night-stage-copy,
.card-design-recommended .night-stage-v46 .night-stage-rail {
  position: relative;
  z-index: 2;
}

.card-design-recommended .night-stage-v46 .night-stage-copy {
  min-height: 740px;
  padding-top: 84px;
  padding-bottom: 72px;
}

.card-design-recommended .night-stage-v46 .eyebrow.eyebrow-symmetric {
  width: max-content;
  max-width: 100%;
  color: #ff5147;
}

.card-design-recommended .night-stage-v46 .night-stage-title {
  max-width: 980px;
  margin-top: 22px;
  font-size: clamp(4rem, 7.5vw, 8.2rem);
  line-height: .88;
  letter-spacing: -.065em;
  text-shadow: 0 16px 42px rgba(0, 0, 0, .5);
}

.card-design-recommended .night-stage-v46 .night-stage-title > span {
  display: block;
}

.card-design-recommended .night-stage-v46 .night-title-emergency em {
  position: relative;
  color: #ff5147;
  font-style: normal;
  text-shadow: 0 0 24px rgba(239, 70, 56, .2), 0 16px 42px rgba(0, 0, 0, .5);
}

.card-design-recommended .night-stage-v46 .night-title-emergency em::after {
  content: "";
  position: absolute;
  right: .02em;
  bottom: .03em;
  left: .02em;
  height: 3px;
  opacity: .88;
  background: linear-gradient(90deg, #ff5147, rgba(255, 81, 71, .2));
  transform-origin: left center;
  animation: nightUnderline 3.6s cubic-bezier(.2, .7, .2, 1) infinite;
}

.card-design-recommended .night-stage-v46 .night-stage-copy > p:not(.eyebrow) {
  max-width: 625px;
  margin-top: 28px;
  color: #c3c7c9;
  text-shadow: 0 2px 15px rgba(0, 0, 0, .7);
}

.card-design-recommended .night-stage-v46 .night-stage-actions .button {
  min-height: 52px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .24);
  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.card-design-recommended .night-stage-v46 .night-stage-actions .button.primary {
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28), 0 0 25px rgba(239, 70, 56, .14);
}

.card-design-recommended .night-stage-v46 .night-stage-rail {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .15);
  border-top-color: rgba(239, 70, 56, .72);
  border-radius: 10px 10px 0 0;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012) 55%, rgba(239, 70, 56, .035)),
    rgba(5, 7, 8, .8);
  box-shadow: 0 -14px 44px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .045);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
}

.card-design-recommended .night-stage-v46 .night-stage-rail > div {
  position: relative;
  min-height: 128px;
  grid-template-columns: 52px 1fr;
  padding: 24px 28px;
  border-right-color: rgba(255, 255, 255, .12);
  transition: background .3s ease, box-shadow .3s ease;
}

.card-design-recommended .night-stage-v46 .night-stage-rail > div::before {
  content: "";
  position: absolute;
  top: 0;
  right: 22px;
  left: 22px;
  height: 1px;
  opacity: .55;
  background: linear-gradient(90deg, #ff5147, transparent 72%);
}

.card-design-recommended .night-stage-v46 .night-stage-rail span {
  width: 34px;
  height: 34px;
  display: grid;
  grid-row: span 2;
  place-items: center;
  align-self: center;
  border: 1px solid rgba(239, 70, 56, .72);
  border-radius: 50%;
  color: #ff6258;
  background: rgba(239, 70, 56, .07);
  box-shadow: 0 0 18px rgba(239, 70, 56, .09);
}

.card-design-recommended .night-stage-v46 .night-stage-rail b {
  color: #f4f2ee;
  font-size: .82rem;
  letter-spacing: .02em;
}

.card-design-recommended .night-stage-v46 .night-stage-rail small {
  color: #8e9497;
  font-size: .64rem;
  line-height: 1.45;
}

.card-design-recommended .night-stage-v46 .night-rail-emergency {
  background: linear-gradient(100deg, rgba(239, 70, 56, .085), transparent 72%);
}

.card-design-recommended .night-stage-v46 .night-stage-copy .eyebrow[data-reveal] { transition-delay: 0s; }
.card-design-recommended .night-stage-v46 .night-stage-title[data-reveal] { transition-delay: .09s; }
.card-design-recommended .night-stage-v46 .night-stage-copy > p[data-reveal] { transition-delay: .18s; }
.card-design-recommended .night-stage-v46 .night-stage-actions[data-reveal] { transition-delay: .27s; }
.card-design-recommended .night-stage-v46 .night-stage-rail[data-reveal] { transition-delay: .12s; }

@media (hover: hover) and (pointer: fine) {
  .card-design-recommended .night-stage-v46:hover .night-stage-media img {
    filter: brightness(1.18) contrast(1.08) saturate(.94);
    transform: scale(1.035);
  }

  .card-design-recommended .night-stage-v46 .night-stage-actions .button:hover {
    transform: translateY(-2px);
  }

  .card-design-recommended .night-stage-v46 .night-stage-rail > div:hover {
    background: linear-gradient(105deg, rgba(239, 70, 56, .09), rgba(255, 255, 255, .025));
    box-shadow: inset 0 1px rgba(255, 255, 255, .055), inset 0 -2px rgba(239, 70, 56, .34);
  }
}

@keyframes nightSignalRed {
  0%, 100% { opacity: .11; transform: translate3d(-4%, 0, 0) scale(.9); }
  50% { opacity: .27; transform: translate3d(4%, 2%, 0) scale(1.08); }
}

@keyframes nightSignalBlue {
  0%, 100% { opacity: .08; transform: translate3d(4%, 1%, 0) scale(.94); }
  50% { opacity: .23; transform: translate3d(-5%, -2%, 0) scale(1.08); }
}

@keyframes nightUnderline {
  0%, 18% { opacity: .2; transform: scaleX(.12); }
  48%, 82% { opacity: .92; transform: scaleX(1); }
  100% { opacity: .2; transform: scaleX(.12); }
}

@media (max-width: 860px) {
  .card-design-recommended .night-stage-v46 {
    min-height: 820px;
  }

  .card-design-recommended .night-stage-v46 .night-stage-copy {
    min-height: 680px;
  }

  .card-design-recommended .night-stage-v46 .night-stage-title {
    max-width: 760px;
    font-size: clamp(3.7rem, 11vw, 6.2rem);
  }

  .card-design-recommended .night-stage-v46 .night-stage-rail > div {
    grid-template-columns: 45px 1fr;
    padding: 22px 18px;
  }
}

@media (max-width: 620px) {
  .card-design-recommended .night-stage-v46 {
    min-height: auto;
  }

  .card-design-recommended .night-stage-v46 .night-stage-media img {
    object-position: 58% center;
    filter: brightness(1.02) contrast(1.08) saturate(.88);
  }

  .card-design-recommended .night-stage-v46 .night-stage-shade {
    background:
      linear-gradient(90deg, rgba(3, 5, 6, .9), rgba(3, 5, 6, .45) 72%, rgba(3, 5, 6, .58)),
      linear-gradient(0deg, rgba(3, 5, 6, .98) 0%, rgba(3, 5, 6, .4) 48%, rgba(3, 5, 6, .35));
  }

  .card-design-recommended .night-stage-v46 .night-stage-signal span {
    width: 280px;
    filter: blur(38px);
  }

  .card-design-recommended .night-stage-v46 .night-signal-red { top: 18%; right: 8%; }
  .card-design-recommended .night-stage-v46 .night-signal-blue { top: 25%; right: -40%; }

  .card-design-recommended .night-stage-v46 .night-stage-copy {
    min-height: 675px;
    padding-top: 80px;
    padding-bottom: 60px;
  }

  .card-design-recommended .night-stage-v46 .eyebrow.eyebrow-symmetric {
    font-size: .49rem;
  }

  .card-design-recommended .night-stage-v46 .night-stage-title {
    margin-top: 18px;
    font-size: clamp(3rem, 15vw, 4.8rem);
    line-height: .9;
  }

  .card-design-recommended .night-stage-v46 .night-title-emergency em::after {
    height: 2px;
  }

  .card-design-recommended .night-stage-v46 .night-stage-copy > p:not(.eyebrow) {
    max-width: 95%;
    font-size: .84rem;
    line-height: 1.7;
  }

  .card-design-recommended .night-stage-v46 .night-stage-actions .button {
    width: 100%;
  }

  .card-design-recommended .night-stage-v46 .night-stage-rail {
    width: calc(100% - 28px);
    margin-inline: auto;
    border-radius: 9px 9px 0 0;
  }

  .card-design-recommended .night-stage-v46 .night-stage-rail > div {
    min-height: 94px;
    grid-template-columns: 48px 1fr;
    padding: 18px 17px;
  }

  .card-design-recommended .night-stage-v46 .night-stage-rail > div::before {
    right: 16px;
    left: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-design-recommended .night-stage-v46 .night-stage-signal span,
  .card-design-recommended .night-stage-v46 .night-title-emergency em::after {
    animation: none;
  }

  .card-design-recommended .night-stage-v46 .night-stage-media img,
  .card-design-recommended .night-stage-v46 .night-stage-actions .button,
  .card-design-recommended .night-stage-v46 .night-stage-rail > div {
    transition: none;
  }
}

@media (forced-colors: active) {
  .card-design-recommended .night-stage-v46 .night-stage-signal,
  .card-design-recommended .night-stage-v46 .night-title-emergency em::after,
  .card-design-recommended .night-stage-v46 .night-stage-rail > div::before {
    display: none;
  }

  .card-design-recommended .night-stage-v46 .night-title-emergency em,
  .card-design-recommended .night-stage-v46 .night-stage-rail span {
    color: LinkText;
  }

  .card-design-recommended .night-stage-v46 .night-stage-rail {
    border-color: CanvasText;
    background: Canvas;
    box-shadow: none;
  }
}

/* Day-stage v48: Tagesmotiv mit Mercedes Sprinter, links kontrastreich fuer
   die Botschaft und rechts bewusst heller fuer eine klare Fahrzeugansicht. */
.card-design-recommended .night-stage-v46.day-stage-v48 .night-stage-media img {
  object-position: 56% center;
  filter: brightness(.92) contrast(1.06) saturate(.82);
}

.card-design-recommended .night-stage-v46.day-stage-v48 .night-stage-shade {
  background:
    linear-gradient(90deg, rgba(3, 5, 6, .96) 0%, rgba(3, 5, 6, .82) 31%, rgba(3, 5, 6, .34) 56%, rgba(3, 5, 6, .1) 77%, rgba(3, 5, 6, .2) 100%),
    linear-gradient(0deg, rgba(3, 5, 6, .82) 0%, rgba(3, 5, 6, .18) 34%, transparent 58%),
    linear-gradient(180deg, rgba(3, 5, 6, .18), transparent 27%);
}

.card-design-recommended .night-stage-v46.day-stage-v48 .night-stage-signal {
  opacity: .62;
}

@media (hover: hover) and (pointer: fine) {
  .card-design-recommended .night-stage-v46.day-stage-v48:hover .night-stage-media img {
    filter: brightness(.97) contrast(1.06) saturate(.86);
  }
}

@media (max-width: 620px) {
  .card-design-recommended .night-stage-v46.day-stage-v48 .night-stage-media img {
    object-position: 67% center;
    filter: brightness(.9) contrast(1.07) saturate(.8);
  }

  .card-design-recommended .night-stage-v46.day-stage-v48 .night-stage-shade {
    background:
      linear-gradient(90deg, rgba(3, 5, 6, .9), rgba(3, 5, 6, .39) 72%, rgba(3, 5, 6, .44)),
      linear-gradient(0deg, rgba(3, 5, 6, .92) 0%, rgba(3, 5, 6, .31) 48%, rgba(3, 5, 6, .24));
  }
}

/* Luxury-stage v50: Den Maybach rechts als klares Hauptmotiv halten. */
.card-design-recommended .night-stage-v46.day-stage-v48.luxury-stage-v50 .night-stage-media img {
  object-position: 58% center;
  filter: brightness(1.03) contrast(1.05) saturate(.9);
}

@media (hover: hover) and (pointer: fine) {
  .card-design-recommended .night-stage-v46.day-stage-v48.luxury-stage-v50:hover .night-stage-media img {
    filter: brightness(1.08) contrast(1.05) saturate(.94);
  }
}

@media (max-width: 620px) {
  .card-design-recommended .night-stage-v46.day-stage-v48.luxury-stage-v50 .night-stage-media img {
    object-position: 78% center;
    filter: brightness(.98) contrast(1.06) saturate(.88);
  }
}

/* Transition-stage v51: Das Tagesmotiv an beiden Kanten weich mit den
   angrenzenden Bereichen verbinden, ohne Text und Einsatzarten-Leiste zu
   ueberdecken. */
.card-design-recommended .night-stage-v46.transition-stage-v51::before,
.card-design-recommended .night-stage-v46.transition-stage-v51::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

.card-design-recommended .night-stage-v46.transition-stage-v51::before {
  top: -1px;
  height: clamp(132px, 14vw, 220px);
  background: linear-gradient(
    to bottom,
    #08090a 0%,
    rgba(8, 9, 10, .96) 14%,
    rgba(8, 9, 10, .76) 38%,
    rgba(8, 9, 10, .4) 68%,
    rgba(8, 9, 10, 0) 100%
  );
}

.card-design-recommended .night-stage-v46.transition-stage-v51::after {
  bottom: -1px;
  height: clamp(170px, 18vw, 280px);
  background: linear-gradient(
    to bottom,
    rgba(241, 240, 236, 0) 0%,
    rgba(241, 240, 236, .08) 24%,
    rgba(241, 240, 236, .3) 48%,
    rgba(241, 240, 236, .72) 76%,
    #f1f0ec 100%
  );
}

@media (max-width: 620px) {
  .card-design-recommended .night-stage-v46.transition-stage-v51::before {
    height: 112px;
  }

  .card-design-recommended .night-stage-v46.transition-stage-v51::after {
    height: 168px;
  }
}

@media (forced-colors: active) {
  .card-design-recommended .night-stage-v46.transition-stage-v51::before,
  .card-design-recommended .night-stage-v46.transition-stage-v51::after {
    display: none;
  }
}

/* Notfall-Typografie v52: Der rote Unterstrich wird bewusst entfernt. */
.card-design-recommended .night-stage-v46.transition-stage-v51 .night-title-emergency em::after {
  content: none;
  display: none;
}

/* Route-stage v53: Die gewaehlte Variante 03 uebernimmt den Ablauf direkt
   in das Motiv und ersetzt die bisherige untere Einsatzarten-Konsole. */
.card-design-recommended .night-stage-v46.route-stage-v53 {
  min-height: 840px;
}

.card-design-recommended .night-stage-v46.route-stage-v53 .night-stage-copy {
  min-height: 840px;
}

.card-design-recommended .night-stage-v46.route-stage-v53 .night-stage-route-accent {
  position: absolute;
  z-index: 0;
  top: -18%;
  bottom: -18%;
  left: 44%;
  width: clamp(78px, 8vw, 126px);
  opacity: .12;
  background: linear-gradient(180deg, rgba(255, 75, 67, .12), #ff4b43 48%, rgba(255, 75, 67, .12));
  transform: rotate(14deg);
  transform-origin: center;
  pointer-events: none;
  mix-blend-mode: screen;
}

.card-design-recommended .night-stage-v46.route-stage-v53 .night-stage-route {
  --route-gap: 18px;
  --route-duration: 4.8s;
  --route-middle: calc((100% + var(--route-gap)) / 3 + 6px);
  --route-end: calc((100% + var(--route-gap)) / 3 * 2 + 6px);
  position: relative;
  width: min(650px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--route-gap);
  margin-top: 30px;
  color: #f4f2ee;
}

.card-design-recommended .night-stage-v46.route-stage-v53 .night-stage-route::before {
  content: "";
  position: absolute;
  top: 7px;
  right: calc((100% - var(--route-gap) * 2) / 3 - 11px);
  left: 11px;
  height: 2px;
  opacity: .82;
  background: linear-gradient(90deg, #ff5147, rgba(255, 81, 71, .24));
  box-shadow: 0 0 18px rgba(255, 75, 67, .12);
}

.card-design-recommended .night-stage-v46.route-stage-v53 .night-stage-route::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 6px;
  z-index: 3;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 75, 67, .13), 0 0 20px #ff5147;
  animation: nightRouteProgress53 var(--route-duration) cubic-bezier(.45, 0, .25, 1) infinite;
}

.card-design-recommended .night-stage-v46.route-stage-v53 .night-stage-route > div {
  position: relative;
  display: grid;
  gap: 4px;
  padding-top: 24px;
}

.card-design-recommended .night-stage-v46.route-stage-v53 .night-stage-route i {
  position: absolute;
  z-index: 2;
  top: 1px;
  left: 4px;
  width: 14px;
  height: 14px;
  border: 3px solid #ff5147;
  border-radius: 50%;
  background: #080a0b;
  box-shadow: 0 0 15px rgba(255, 75, 67, .2);
  animation: nightRouteNodeFirst165 var(--route-duration) linear infinite;
}

.card-design-recommended .night-stage-v46.route-stage-v53 .night-stage-route > div:nth-child(2) i {
  animation-name: nightRouteNodeMiddle165;
}

.card-design-recommended .night-stage-v46.route-stage-v53 .night-stage-route > div:nth-child(3) i {
  animation-name: nightRouteNodeLast165;
}

.card-design-recommended .night-stage-v46.route-stage-v53 .night-stage-route b {
  color: #f4f2ee;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.card-design-recommended .night-stage-v46.route-stage-v53 .night-stage-route small {
  color: #989da0;
  font-size: .64rem;
  line-height: 1.4;
}

.card-design-recommended .night-stage-v46.route-stage-v53 .night-stage-actions {
  margin-top: 28px;
}

.card-design-recommended .night-stage-v46.route-stage-v53 .night-stage-rail {
  display: none;
}

.card-design-recommended .night-stage-v46.route-stage-v53 .night-stage-route[data-reveal] {
  transition-delay: .25s;
}

@keyframes nightRouteProgress53 {
  0%, 12% { left: 6px; }
  45%, 58% { left: var(--route-middle); }
  91%, 100% { left: var(--route-end); }
}

/* Same clock as the travelling ball; each glow peaks at its actual stop. */
@keyframes nightRouteNodeFirst165 {
  0%, 12% { background: #fff; box-shadow: 0 0 0 5px rgba(255, 81, 71, .2), 0 0 24px #ff5147; }
  18%, 100% { background: #080a0b; box-shadow: 0 0 15px rgba(255, 75, 67, .2); }
}

@keyframes nightRouteNodeMiddle165 {
  0%, 39%, 64%, 100% { background: #080a0b; box-shadow: 0 0 15px rgba(255, 75, 67, .2); }
  45%, 58% { background: #fff; box-shadow: 0 0 0 5px rgba(255, 81, 71, .2), 0 0 24px #ff5147; }
}

@keyframes nightRouteNodeLast165 {
  0%, 85% { background: #080a0b; box-shadow: 0 0 15px rgba(255, 75, 67, .2); }
  91%, 100% { background: #fff; box-shadow: 0 0 0 5px rgba(255, 81, 71, .2), 0 0 24px #ff5147; }
}

@media (max-width: 620px) {
  .card-design-recommended .night-stage-v46.route-stage-v53,
  .card-design-recommended .night-stage-v46.route-stage-v53 .night-stage-copy {
    min-height: auto;
  }

  .card-design-recommended .night-stage-v46.route-stage-v53 .night-stage-copy {
    padding-bottom: 112px;
  }

  .card-design-recommended .night-stage-v46.route-stage-v53 .night-stage-route-accent {
    left: 61%;
    width: 82px;
    opacity: .09;
  }

  .card-design-recommended .night-stage-v46.route-stage-v53 .night-stage-route {
    --route-gap: 8px;
    gap: var(--route-gap);
    margin-top: 26px;
  }

  .card-design-recommended .night-stage-v46.route-stage-v53 .night-stage-route small {
    display: none;
  }

  .card-design-recommended .night-stage-v46.route-stage-v53 .night-stage-route b {
    font-size: .61rem;
    letter-spacing: .035em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-design-recommended .night-stage-v46.route-stage-v53 .night-stage-route::after {
    display: none;
    animation: none;
  }

  .card-design-recommended .night-stage-v46.route-stage-v53 .night-stage-route > div:nth-child(n) i {
    animation: none;
  }
}

@media (forced-colors: active) {
  .card-design-recommended .night-stage-v46.route-stage-v53 .night-stage-route-accent,
  .card-design-recommended .night-stage-v46.route-stage-v53 .night-stage-route::after {
    display: none;
  }

  .card-design-recommended .night-stage-v46.route-stage-v53 .night-stage-route::before,
  .card-design-recommended .night-stage-v46.route-stage-v53 .night-stage-route > div:nth-child(n) i {
    animation: none;
    border-color: CanvasText;
    background: CanvasText;
    box-shadow: none;
  }
}

/* Transition-stage v57: Die obere Dunkelblende greift weiter in das Tagesmotiv
   hinein. Mehr Zwischenstufen und ein sehr dezentes warmes Seitenlicht nehmen
   die Farbe des vorherigen Premiumbereichs auf, ohne Inhalt zu ueberdecken. */
.card-design-recommended .night-stage-v46.transition-stage-v51.transition-stage-v57::before {
  top: -2px;
  height: clamp(230px, 24vw, 390px);
  background:
    radial-gradient(
      ellipse 82% 118% at 76% -12%,
      rgba(92, 52, 31, .18) 0%,
      rgba(46, 31, 23, .09) 34%,
      rgba(8, 9, 10, 0) 72%
    ),
    linear-gradient(
      to bottom,
      #08090a 0%,
      rgba(8, 9, 10, .99) 10%,
      rgba(8, 9, 10, .94) 25%,
      rgba(8, 9, 10, .79) 43%,
      rgba(8, 9, 10, .56) 60%,
      rgba(8, 9, 10, .31) 75%,
      rgba(8, 9, 10, .12) 88%,
      rgba(8, 9, 10, 0) 100%
    );
}

@media (max-width: 860px) {
  .card-design-recommended .night-stage-v46.transition-stage-v51.transition-stage-v57::before {
    height: 260px;
  }
}

@media (max-width: 620px) {
  .card-design-recommended .night-stage-v46.transition-stage-v51.transition-stage-v57::before {
    height: 196px;
    background:
      radial-gradient(ellipse 90% 110% at 82% -8%, rgba(92, 52, 31, .13), transparent 70%),
      linear-gradient(
        to bottom,
        #08090a 0%,
        rgba(8, 9, 10, .98) 16%,
        rgba(8, 9, 10, .84) 38%,
        rgba(8, 9, 10, .5) 64%,
        rgba(8, 9, 10, .18) 84%,
        rgba(8, 9, 10, 0) 100%
      );
  }
}

/* Neutral-crossfade v58: Keine sichtbare braune Verlaufsebene. Der
   Premiumbereich endet in exakt demselben Schwarz wie die folgende Buehne.
   Das Foto selbst wird ueber seine Transparenz eingeblendet; dadurch entsteht
   keine farbige Overlay-Kante. */
.card-design-recommended .premium.premium-transition-v58::after {
  z-index: 1;
  height: clamp(190px, 17vw, 280px);
  background: linear-gradient(
    to bottom,
    rgba(7, 9, 10, 0) 0%,
    rgba(7, 9, 10, .36) 34%,
    rgba(7, 9, 10, .76) 66%,
    #07090a 100%
  );
}

.card-design-recommended .premium.premium-transition-v58 .premium-ambient {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 64%, rgba(0, 0, 0, .5) 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 64%, rgba(0, 0, 0, .5) 82%, transparent 100%);
}

.card-design-recommended .night-stage-v46.transition-stage-v58 {
  background: #07090a;
}

.card-design-recommended .night-stage-v46.transition-stage-v51.transition-stage-v57.transition-stage-v58::before {
  display: none;
}

.card-design-recommended .night-stage-v46.transition-stage-v58 .night-stage-media {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, .05) 12%,
    rgba(0, 0, 0, .22) 28%,
    rgba(0, 0, 0, .52) 47%,
    rgba(0, 0, 0, .82) 65%,
    #000 80%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, .05) 12%,
    rgba(0, 0, 0, .22) 28%,
    rgba(0, 0, 0, .52) 47%,
    rgba(0, 0, 0, .82) 65%,
    #000 80%
  );
}

@media (max-width: 620px) {
  .card-design-recommended .premium.premium-transition-v58::after {
    height: 160px;
  }

  .card-design-recommended .night-stage-v46.transition-stage-v58 .night-stage-media {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .3) 30%, rgba(0, 0, 0, .72) 58%, #000 76%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .3) 30%, rgba(0, 0, 0, .72) 58%, #000 76%);
  }
}

@media (forced-colors: active) {
  .card-design-recommended .premium.premium-transition-v58 .premium-ambient,
  .card-design-recommended .night-stage-v46.transition-stage-v58 .night-stage-media {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Seamless-crossfade v59: Beide Sektionen treffen sich auf demselben neutralen
   Schwarz. Media und Abdunklung erhalten dieselbe Alphamaske; die minimale
   Ueberlappung verhindert eine Subpixel-Linie zwischen den Elementen. */
.card-design-recommended .premium.premium-transition-v59::after {
  background: linear-gradient(
    to bottom,
    rgba(5, 7, 8, 0) 0%,
    rgba(5, 7, 8, .38) 32%,
    rgba(5, 7, 8, .8) 66%,
    #050708 100%
  );
}

.card-design-recommended .night-stage-v46.transition-stage-v59 {
  margin-top: -2px;
  background: #050708;
}

.card-design-recommended .night-stage-v46.transition-stage-v59 .night-stage-media,
.card-design-recommended .night-stage-v46.transition-stage-v59 .night-stage-shade {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, .04) 12%,
    rgba(0, 0, 0, .2) 28%,
    rgba(0, 0, 0, .5) 47%,
    rgba(0, 0, 0, .82) 65%,
    #000 80%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, .04) 12%,
    rgba(0, 0, 0, .2) 28%,
    rgba(0, 0, 0, .5) 47%,
    rgba(0, 0, 0, .82) 65%,
    #000 80%
  );
}

@media (max-width: 620px) {
  .card-design-recommended .night-stage-v46.transition-stage-v59 .night-stage-media,
  .card-design-recommended .night-stage-v46.transition-stage-v59 .night-stage-shade {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .27) 30%, rgba(0, 0, 0, .7) 58%, #000 76%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .27) 30%, rgba(0, 0, 0, .7) 58%, #000 76%);
  }
}

@media (forced-colors: active) {
  .card-design-recommended .night-stage-v46.transition-stage-v59 .night-stage-shade {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Services v63: integrierte Variante 06 "Kinetic Diagonal".
   Die vorhandenen vier Leistungsziele bleiben unveraendert erreichbar. */
.card-design-recommended .night-stage-v46.transition-stage-v51.transition-to-kinetic-v63::after {
  height: clamp(170px, 18vw, 280px);
  background: linear-gradient(
    to bottom,
    rgba(5, 7, 8, 0) 0%,
    rgba(5, 7, 8, .18) 28%,
    rgba(5, 7, 8, .54) 58%,
    rgba(5, 7, 8, .88) 82%,
    #050708 100%
  );
}

.card-design-recommended .night-stage-v46.transition-to-kinetic-v63 + .services-kinetic-v63 {
  margin-top: -2px;
}

.card-design-recommended .services-kinetic-v63 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #f5f3ef;
  box-shadow: 0 -42px 72px rgba(5, 7, 8, .62);
  background:
    linear-gradient(
      to bottom,
      #050708 0%,
      rgba(5, 7, 8, .94) 32px,
      rgba(5, 7, 8, .58) 88px,
      rgba(5, 7, 8, 0) 170px
    ),
    radial-gradient(circle at 72% 18%, rgba(243, 71, 61, .1), transparent 28%),
    linear-gradient(to bottom, #050708 0%, #080a0b 24%, #0d0f10 100%);
}

.card-design-recommended .services-kinetic-v63::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  background: repeating-linear-gradient(
    113deg,
    transparent 0 45px,
    rgba(255, 255, 255, .026) 46px,
    transparent 47px
  );
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.card-design-recommended .services-kinetic-v63::after {
  content: none;
}

.card-design-recommended .services-kinetic-v63 .services-kinetic-heading {
  position: relative;
  z-index: 2;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, .45fr);
  gap: clamp(38px, 4.5vw, 80px);
  align-items: end;
  margin-bottom: clamp(42px, 5vw, 72px);
}

.card-design-recommended .services-kinetic-v63 .services-kinetic-heading > div {
  min-width: 0;
  container-type: inline-size;
}

.card-design-recommended .services-kinetic-v63 .services-kinetic-heading h2 {
  max-width: 980px;
  margin-top: 20px;
  font-size: clamp(3.2rem, 5.7vw, 6.2rem);
  line-height: .93;
  letter-spacing: -.045em;
}

.card-design-recommended .services-kinetic-v63 .services-kinetic-heading h2 > span {
  display: block;
  color: #ff5147;
}

.card-design-recommended .services-kinetic-v63 .services-kinetic-heading > p {
  max-width: 570px;
  color: #9da1a3;
  font-size: .82rem;
  line-height: 1.75;
}

.card-design-recommended .services-kinetic-v63 .services-assurance-note {
  position: relative;
  width: 100%;
  max-width: 440px;
  justify-self: end;
  overflow: hidden;
  padding: clamp(24px, 2.2vw, 34px) clamp(24px, 2.4vw, 38px) clamp(25px, 2.3vw, 36px);
  border: 1px solid rgba(255, 255, 255, .09);
  border-left: 2px solid #ff5147;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  background:
    linear-gradient(90deg, rgba(255, 81, 71, .1), transparent 24%),
    linear-gradient(138deg, rgba(255, 255, 255, .045), rgba(10, 12, 13, .84) 58%, rgba(7, 9, 10, .96));
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 24px 64px rgba(0, 0, 0, .32);
}

.card-design-recommended .services-kinetic-v63 .services-assurance-note::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: 0;
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 81, 71, .8));
}

.card-design-recommended .services-kinetic-v63 .services-assurance-note > span {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: #ff6259;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .16em;
  line-height: 1.25;
  text-transform: uppercase;
}

.card-design-recommended .services-kinetic-v63 .services-assurance-note > span i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border: 2px solid #ff5147;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(255, 81, 71, .1), 0 0 18px rgba(255, 81, 71, .34);
}

.card-design-recommended .services-kinetic-v63 .services-assurance-note > strong {
  display: block;
  max-width: 360px;
  color: #f4f2ee;
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  font-weight: 760;
  letter-spacing: -.02em;
  line-height: 1.22;
}

.card-design-recommended .services-kinetic-v63 .services-assurance-note > p {
  max-width: 370px;
  margin: 14px 0 0;
  color: #9da1a3;
  font-size: .8rem;
  line-height: 1.7;
}

.card-design-recommended .services-kinetic-v63 .services-assurance-rail {
  position: relative;
  width: 100%;
  max-width: 440px;
  justify-self: end;
  overflow: hidden;
  padding: 8px 0 6px clamp(24px, 2.2vw, 34px);
  background: radial-gradient(circle at 4% 36%, rgba(255, 81, 71, .075), transparent 36%);
}

.card-design-recommended .services-kinetic-v63 .services-assurance-rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: linear-gradient(to bottom, #ff5147, rgba(255, 81, 71, .35) 52%, transparent 100%);
  box-shadow: 0 0 22px rgba(255, 81, 71, .2);
}

.card-design-recommended .services-kinetic-v63 .services-assurance-rail::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 2px;
  left: -4px;
  width: 10px;
  height: 10px;
  border: 2px solid #ff5147;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 7px rgba(255, 81, 71, .08), 0 0 26px rgba(255, 81, 71, .8);
  animation: assuranceSignalTravel77 6.8s cubic-bezier(.45, .04, .35, 1) infinite;
}

.card-design-recommended .services-kinetic-v63 .services-assurance-rail > span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ff6259;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .17em;
  line-height: 1.2;
  text-transform: uppercase;
}

.card-design-recommended .services-kinetic-v63 .services-assurance-rail > span i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border: 2px solid #ff5147;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(255, 81, 71, .08), 0 0 16px rgba(255, 81, 71, .4);
}

.card-design-recommended .services-kinetic-v63 .services-assurance-rail > ul {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  margin: 20px 0 16px;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  list-style: none;
}

.card-design-recommended .services-kinetic-v63 .services-assurance-rail > ul::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: -20%;
  bottom: -20%;
  left: -52%;
  width: 34%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 81, 71, .1), rgba(255, 255, 255, .13), rgba(255, 81, 71, .08), transparent);
  filter: blur(.3px);
  transform: skewX(-12deg);
  animation: assuranceGridScan77 7.2s ease-in-out infinite;
}

.card-design-recommended .services-kinetic-v63 .services-assurance-rail > ul li {
  position: relative;
  padding: 13px 12px 12px 17px;
  color: #eeece8;
  font-size: clamp(.82rem, 1vw, .98rem);
  font-weight: 720;
  letter-spacing: -.01em;
  line-height: 1.25;
  animation: assuranceCellGlow77 8s ease-in-out infinite;
}

.card-design-recommended .services-kinetic-v63 .services-assurance-rail > ul li:nth-child(2) { animation-delay: 2s; }
.card-design-recommended .services-kinetic-v63 .services-assurance-rail > ul li:nth-child(3) { animation-delay: 4s; }
.card-design-recommended .services-kinetic-v63 .services-assurance-rail > ul li:nth-child(4) { animation-delay: 6s; }

.card-design-recommended .services-kinetic-v63 .services-assurance-rail > ul li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 1px;
  background: #ff5147;
}

.card-design-recommended .services-kinetic-v63 .services-assurance-rail > ul li:nth-child(odd) {
  border-right: 1px solid rgba(255, 255, 255, .08);
}

.card-design-recommended .services-kinetic-v63 .services-assurance-rail > ul li:nth-child(-n + 2) {
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.card-design-recommended .services-kinetic-v63 .services-assurance-rail > p {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: #9da1a3;
  font-size: .78rem;
  line-height: 1.55;
}

.card-design-recommended .services-kinetic-v63 .services-assurance-rail > p i {
  width: 18px;
  height: 1px;
  flex: 0 0 18px;
  background: linear-gradient(90deg, #ff5147, transparent);
}

@keyframes assuranceSignalTravel77 {
  0%, 10% { top: 2px; opacity: 0; transform: scale(.72); }
  18% { opacity: 1; transform: scale(1); }
  76% { opacity: 1; transform: scale(1); }
  90%, 100% { top: calc(100% - 12px); opacity: 0; transform: scale(.72); }
}

@keyframes assuranceGridScan77 {
  0%, 22% { left: -52%; opacity: 0; }
  34% { opacity: .9; }
  72% { opacity: .65; }
  86%, 100% { left: 122%; opacity: 0; }
}

@keyframes assuranceCellGlow77 {
  0%, 16%, 100% { color: #eeece8; background: transparent; }
  24%, 38% { color: #fff; background: rgba(255, 81, 71, .055); }
  48% { color: #eeece8; background: transparent; }
}

.card-design-recommended .services-kinetic-v63 .eyebrow-symmetric {
  color: #ff5147;
}

.card-design-recommended .kinetic-service-frame {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: 0 clamp(22px, 2.7vw, 48px) 42px;
  border: 0;
  border-radius: 0;
  clip-path: polygon(3.5% 0, 100% 0, 100% 92%, 96.5% 100%, 0 100%, 0 8%);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .04), transparent 38%),
    linear-gradient(120deg, rgba(5, 7, 8, .9), rgba(17, 20, 22, .97));
  filter: drop-shadow(0 34px 52px rgba(0, 0, 0, .34));
}

.card-design-recommended .kinetic-service-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 44%, rgba(255, 255, 255, .035) 50%, transparent 56%);
  opacity: .8;
  box-shadow: inset 0 1px rgba(255, 81, 71, .38), inset 0 -1px rgba(255, 81, 71, .2);
  transform: translateX(-70%);
  animation: kineticFrameLight63 8s ease-in-out infinite;
}

.card-design-recommended .kinetic-service-track {
  position: relative;
  z-index: 2;
  height: clamp(500px, 37vw, 650px);
  display: flex;
  overflow: hidden;
  margin-top: clamp(22px, 2.7vw, 48px);
  transform: skewX(-6deg);
}

.card-design-recommended .kinetic-service-card {
  position: relative;
  min-width: 0;
  flex: 1 1 0;
  container-type: inline-size;
  overflow: hidden;
  border-right: 4px solid #080a0b;
  color: #fff;
  text-decoration: none;
  background: #111416;
  transition: flex .58s cubic-bezier(.2, .72, .2, 1), filter .45s ease;
}

.card-design-recommended .kinetic-service-card:last-child {
  border-right: 0;
}

.card-design-recommended .kinetic-service-card-main {
  flex-grow: 1.28;
}

.card-design-recommended .kinetic-service-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.64) saturate(.76);
  transform: scale(1.14) skewX(6deg);
  transition: filter .45s ease, transform .75s cubic-bezier(.2, .72, .2, 1);
}

.card-design-recommended .kinetic-service-card:nth-child(2) > img {
  object-position: center 60%;
}

.card-design-recommended .kinetic-service-card:nth-child(3) > img {
  object-position: 48% center;
}

.card-design-recommended .kinetic-service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(3, 4, 5, .97) 0%, rgba(3, 4, 5, .68) 34%, transparent 72%),
    linear-gradient(105deg, rgba(3, 4, 5, .45), transparent 54%);
}

.card-design-recommended .kinetic-service-card > div {
  position: absolute;
  z-index: 3;
  right: clamp(20px, 2vw, 34px);
  bottom: clamp(25px, 2.4vw, 42px);
  left: clamp(20px, 2vw, 34px);
  transform: skewX(6deg);
}

.card-design-recommended .kinetic-service-number {
  position: absolute;
  z-index: 3;
  top: clamp(22px, 2vw, 34px);
  right: clamp(22px, 2vw, 34px);
  color: rgba(255, 255, 255, .24);
  font-size: clamp(2.5rem, 4vw, 4.8rem);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.08em;
  transform: skewX(6deg);
}

.card-design-recommended .kinetic-service-card small {
  display: block;
  color: #ff5147;
  font-size: .57rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.card-design-recommended .kinetic-service-card h3 {
  margin: 9px 0 14px;
  font-size: clamp(1.35rem, 2.25vw, 2.75rem);
  line-height: .96;
  letter-spacing: -.052em;
}

.card-design-recommended .kinetic-service-card h3 > span {
  display: block;
}

/* Give 03/04 more usable type width without changing the card geometry. */
.card-design-recommended .kinetic-service-card:nth-child(3) > div,
.card-design-recommended .kinetic-service-card:nth-child(4) > div {
  right: clamp(10px, 1vw, 18px);
  left: clamp(10px, 1vw, 18px);
}

/* Long labels in 03/04 follow their actual panel width, including hover shrink. */
.card-design-recommended .kinetic-service-card:nth-child(3) h3,
.card-design-recommended .kinetic-service-card:nth-child(4) h3 {
  font-size: clamp(1.1rem, 2.15vw, 2.5rem);
}

@supports (font-size: 1cqw) {
  .card-design-recommended .kinetic-service-card:nth-child(3) h3,
  .card-design-recommended .kinetic-service-card:nth-child(4) h3 {
    font-size: clamp(1.05rem, 10.8cqw, 2.5rem);
  }
}

.card-design-recommended .kinetic-service-card p {
  max-width: 310px;
  margin: 0 0 20px;
  color: #b5b9ba;
  font-size: .68rem;
  line-height: 1.55;
}

.card-design-recommended .kinetic-service-card b {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: .28;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: translateY(5px);
  transition: opacity .35s ease, transform .35s ease;
}

.card-design-recommended .kinetic-service-card b i {
  color: #ff5147;
  font-size: 1rem;
  font-style: normal;
}

.card-design-recommended .kinetic-service-scan {
  position: absolute;
  z-index: 4;
  right: 4%;
  bottom: 24px;
  left: 4%;
  height: 1px;
  overflow: visible;
  background: linear-gradient(90deg, transparent, rgba(255, 81, 71, .32) 12%, rgba(255, 81, 71, .32) 88%, transparent);
}

.card-design-recommended .kinetic-service-scan::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 8%;
  width: 9px;
  height: 9px;
  border: 2px solid #ff5147;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 7px rgba(255, 81, 71, .08), 0 0 24px rgba(255, 81, 71, .85);
  animation: kineticSignal63 6.4s ease-in-out infinite;
}

@media (hover: hover) and (pointer: fine) {
  .card-design-recommended .kinetic-service-card:hover,
  .card-design-recommended .kinetic-service-card:focus-visible {
    flex-grow: 2.05;
  }

  .card-design-recommended .kinetic-service-card:hover > img,
  .card-design-recommended .kinetic-service-card:focus-visible > img {
    filter: brightness(.9) saturate(.94);
    transform: scale(1.07) skewX(6deg);
  }

  .card-design-recommended .kinetic-service-card:hover b,
  .card-design-recommended .kinetic-service-card:focus-visible b {
    opacity: 1;
    transform: none;
  }
}

.card-design-recommended .kinetic-service-card:focus-visible {
  z-index: 5;
  outline: 2px solid #ff5147;
  outline-offset: -5px;
}

@keyframes kineticSignal63 {
  0%, 8% { left: 8%; }
  92%, 100% { left: calc(92% - 9px); }
}

@keyframes kineticFrameLight63 {
  0%, 18% { transform: translateX(-70%); opacity: 0; }
  45%, 58% { opacity: .9; }
  82%, 100% { transform: translateX(70%); opacity: 0; }
}

/* Split laptop windows: widen the statement without changing the composition. */
@media (min-width: 1081px) and (max-width: 1400px) {
  .card-design-recommended .services-kinetic-v63 .services-kinetic-heading {
    grid-template-columns: minmax(0, 1.42fr) minmax(300px, .58fr);
    gap: clamp(28px, 3.5vw, 52px);
  }

  .card-design-recommended .services-kinetic-v63 .services-kinetic-heading h2 {
    max-width: none;
    font-size: clamp(3.2rem, 5vw, 5.2rem);
  }

  .card-design-recommended .services-kinetic-v63 .services-kinetic-heading h2 > span {
    white-space: nowrap;
  }

  .card-design-recommended .services-kinetic-v63 .services-kinetic-heading > p {
    max-width: 340px;
  }
}

@media (max-width: 1080px) {
  .card-design-recommended .services-kinetic-v63 .services-kinetic-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    align-items: start;
  }

  .card-design-recommended .services-kinetic-v63 .services-kinetic-heading h2 {
    max-width: none;
    font-size: clamp(3rem, 6.2vw, 4.8rem);
  }

  .card-design-recommended .services-kinetic-v63 .services-kinetic-heading h2 > span {
    white-space: nowrap;
  }

  .card-design-recommended .services-kinetic-v63 .services-kinetic-heading > p {
    max-width: 620px;
    margin: 0;
  }

  .card-design-recommended .services-kinetic-v63 .services-assurance-note {
    width: min(100%, 620px);
    max-width: 620px;
    justify-self: start;
  }

  .card-design-recommended .services-kinetic-v63 .services-assurance-rail {
    width: min(100%, 620px);
    max-width: 620px;
    justify-self: start;
  }

  .card-design-recommended .kinetic-service-track {
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    transform: none;
  }

  .card-design-recommended .kinetic-service-card,
  .card-design-recommended .kinetic-service-card-main {
    min-height: 440px;
    border: 0;
    transform: none;
  }

  .card-design-recommended .kinetic-service-card > img,
  .card-design-recommended .kinetic-service-card:hover > img,
  .card-design-recommended .kinetic-service-card:focus-visible > img {
    transform: scale(1.04);
  }

  .card-design-recommended .kinetic-service-card > div,
  .card-design-recommended .kinetic-service-number {
    transform: none;
  }

  .card-design-recommended .kinetic-service-card:nth-child(3) > div,
  .card-design-recommended .kinetic-service-card:nth-child(4) > div {
    right: clamp(20px, 2vw, 34px);
    left: clamp(20px, 2vw, 34px);
  }

  .card-design-recommended .kinetic-service-card:nth-child(3) h3,
  .card-design-recommended .kinetic-service-card:nth-child(4) h3 {
    font-size: clamp(1.5rem, 3vw, 1.85rem);
  }

  .card-design-recommended .kinetic-service-card b {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 700px) {
  .card-design-recommended .night-stage-v46.transition-stage-v51.transition-to-kinetic-v63::after {
    height: 168px;
    background: linear-gradient(to bottom, transparent, rgba(5, 7, 8, .48) 50%, #050708 100%);
  }

  .card-design-recommended .services-kinetic-v63 {
    padding-top: 92px;
    padding-bottom: 92px;
  }

  .card-design-recommended .services-kinetic-v63::after {
    top: 86px;
    right: -32px;
    width: 250px;
    opacity: .045;
  }

  .card-design-recommended .services-kinetic-v63 .services-kinetic-heading {
    gap: 24px;
    margin-bottom: 34px;
  }

  .card-design-recommended .services-kinetic-v63 .services-kinetic-heading h2 {
    max-width: 540px;
    font-size: clamp(2.8rem, 13vw, 4.4rem);
  }

  .card-design-recommended .services-kinetic-v63 .services-kinetic-heading h2 > span {
    white-space: normal;
  }

  .card-design-recommended .services-kinetic-v63 .services-kinetic-heading > p {
    font-size: .76rem;
  }

  .card-design-recommended .services-kinetic-v63 .services-assurance-note {
    padding: 22px 22px 24px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  }

  .card-design-recommended .services-kinetic-v63 .services-assurance-note > span {
    margin-bottom: 13px;
    font-size: .64rem;
  }

  .card-design-recommended .services-kinetic-v63 .services-assurance-note > strong {
    font-size: 1.05rem;
  }

  .card-design-recommended .services-kinetic-v63 .services-assurance-note > p {
    margin-top: 11px;
    font-size: .76rem;
  }

  .card-design-recommended .services-kinetic-v63 .services-assurance-rail {
    padding-left: 20px;
  }

  .card-design-recommended .services-kinetic-v63 .services-assurance-rail > span {
    font-size: .64rem;
  }

  .card-design-recommended .services-kinetic-v63 .services-assurance-rail > ul {
    margin-top: 17px;
  }

  .card-design-recommended .kinetic-service-frame {
    padding: 10px 10px 36px;
    border-radius: 0;
    clip-path: polygon(2.5% 0, 100% 0, 100% 97%, 97.5% 100%, 0 100%, 0 3%);
  }

  .card-design-recommended .kinetic-service-track {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: 0;
  }

  .card-design-recommended .kinetic-service-card,
  .card-design-recommended .kinetic-service-card-main {
    min-height: min(112vw, 430px);
    border-radius: 7px;
  }

  .card-design-recommended .kinetic-service-card h3 {
    max-width: 380px;
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }

  .card-design-recommended .kinetic-service-card:nth-child(3) h3,
  .card-design-recommended .kinetic-service-card:nth-child(4) h3 {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }

  .card-design-recommended .kinetic-service-card p {
    display: block;
  }

  .card-design-recommended .kinetic-service-scan {
    right: 9%;
    left: 9%;
    bottom: 19px;
  }
}

/* Chrome zoom/fullscreen safe: size the statement from its real column width. */
@media (min-width: 1081px) {
  .card-design-recommended .services-kinetic-v63 .services-kinetic-heading h2 > span {
    white-space: nowrap;
  }

  @supports (font-size: 1cqw) {
    .card-design-recommended .services-kinetic-v63 .services-kinetic-heading h2 {
      font-size: clamp(2.8rem, 8.8cqw, 6.2rem);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-design-recommended .kinetic-service-frame::before,
  .card-design-recommended .kinetic-service-scan::after {
    animation: none;
  }

  .card-design-recommended .kinetic-service-card,
  .card-design-recommended .kinetic-service-card > img,
  .card-design-recommended .kinetic-service-card b {
    transition: none;
  }

  .card-design-recommended .services-kinetic-v63 .services-assurance-rail::after,
  .card-design-recommended .services-kinetic-v63 .services-assurance-rail > ul::after,
  .card-design-recommended .services-kinetic-v63 .services-assurance-rail > ul li {
    animation: none;
  }

  .card-design-recommended .services-kinetic-v63 .services-assurance-rail::after {
    top: 50%;
    opacity: .7;
  }
}

@media (forced-colors: active) {
  .card-design-recommended .services-kinetic-v63::before,
  .card-design-recommended .services-kinetic-v63::after,
  .card-design-recommended .kinetic-service-frame::before,
  .card-design-recommended .kinetic-service-scan {
    display: none;
  }

  .card-design-recommended .kinetic-service-card {
    border: 1px solid CanvasText;
  }
}

/* V82: offene und geschlossene Transportart als verbundenes Auswahlpaar. */
.card-design-recommended .transport-types {
  position: relative;
  overflow: hidden;
  padding-bottom: clamp(110px, 10vw, 155px);
  background:
    radial-gradient(circle at 20% 42%, rgba(255, 67, 58, .06), transparent 30%),
    radial-gradient(circle at 82% 54%, rgba(206, 218, 227, .035), transparent 27%),
    repeating-linear-gradient(118deg, transparent 0 112px, rgba(255, 255, 255, .012) 112px 114px),
    #0c0e0f;
}

.card-design-recommended .transport-types::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  height: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 112% 92% at 50% 114%, rgba(237, 237, 233, 1) 0 40%, rgba(237, 237, 233, .78) 58%, rgba(237, 237, 233, .18) 80%, transparent 100%),
    radial-gradient(ellipse 48% 80% at 17% 72%, rgba(255, 67, 58, .07), transparent 72%),
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(14, 16, 17, .95) 14%,
      rgba(37, 39, 39, .82) 37%,
      rgba(99, 100, 98, .52) 61%,
      rgba(196, 196, 191, .48) 82%,
      #edede9 100%
    );
}

.card-design-recommended .transport-types .section-heading {
  position: relative;
  z-index: 2;
}

.card-design-recommended .transport-types .section-heading h2 {
  max-width: 960px;
  margin-inline: auto;
  font-size: clamp(2.7rem, 5.15vw, 5.7rem);
  line-height: 1.02;
  letter-spacing: -.022em;
  word-spacing: .025em;
}

.card-design-recommended .transport-types .section-heading.centered > p:last-child {
  color: #aeb2b4;
  font-size: .96rem;
  line-height: 1.72;
}

.card-design-recommended .transport-grid {
  position: relative;
  z-index: 2;
  gap: 22px;
}

.card-design-recommended .transport-choice {
  position: absolute;
  z-index: 7;
  top: 50%;
  left: 50%;
  min-width: 58px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border: 1px solid rgba(255, 67, 58, .58);
  border-radius: 999px;
  color: #ff6258;
  background: rgba(10, 12, 13, .92);
  box-shadow: 0 0 0 7px rgba(12, 14, 15, .9), 0 0 22px rgba(255, 67, 58, .18);
  font-size: .55rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.card-design-recommended .transport-grid::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 7%;
  bottom: 7%;
  left: 50%;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 67, 58, .34) 18%, rgba(255, 67, 58, .12) 82%, transparent);
  transform: translateX(-50%);
}

.card-design-recommended .transport-grid::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: 13%;
  left: 50%;
  width: 9px;
  height: 9px;
  border: 2px solid #ff433a;
  border-radius: 50%;
  pointer-events: none;
  background: #fff;
  box-shadow: 0 0 0 7px rgba(255, 67, 58, .08), 0 0 22px rgba(255, 67, 58, .8);
  transform: translate(-50%, -50%);
  animation: transportPairSignal82 6.8s ease-in-out infinite;
}

.card-design-recommended .transport-grid article {
  position: relative;
  z-index: 1;
  isolation: isolate;
  border-color: rgba(255, 255, 255, .15);
  border-radius: 9px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 19px), calc(100% - 19px) 100%, 0 100%);
  background: linear-gradient(145deg, rgba(255, 67, 58, .04), transparent 38%), #121416;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
  transform: translateZ(0);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .55s ease;
}

.card-design-recommended .transport-grid article:nth-child(2) {
  background: linear-gradient(145deg, rgba(206, 218, 227, .045), transparent 40%), #121416;
}

.card-design-recommended .transport-grid figure {
  height: clamp(420px, 35vw, 500px);
}

.card-design-recommended .transport-grid figure::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -30%;
  right: -15%;
  left: -15%;
  height: 18%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .19), rgba(255, 67, 58, .16), transparent);
  filter: blur(2px);
  transform: skewY(-7deg);
  animation: transportImageSweep82 8.4s ease-in-out infinite;
}

.card-design-recommended .transport-grid article:nth-child(2) figure::before {
  animation-delay: -4.2s;
}

.card-design-recommended .transport-grid figure::after {
  background: linear-gradient(0deg, rgba(4, 5, 6, .82), rgba(4, 5, 6, .1) 54%, rgba(4, 5, 6, .06));
}

.card-design-recommended .transport-grid figure img {
  filter: saturate(.92) contrast(1.02);
  transform: scale(1.015);
  transition: transform .8s cubic-bezier(.2, .8, .2, 1), filter .55s ease;
}

.card-design-recommended .transport-grid figcaption {
  padding: 8px 13px;
  border-color: rgba(255, 255, 255, .3);
  background: rgba(5, 6, 7, .56);
  box-shadow: 0 9px 24px rgba(0, 0, 0, .24);
  backdrop-filter: blur(10px);
}

.card-design-recommended .transport-grid article > div {
  min-height: 250px;
  padding: 30px 34px 30px;
}

.card-design-recommended .transport-grid article > div > span {
  top: 25px;
  right: 30px;
  color: rgba(255, 255, 255, .075);
  font-size: 3.6rem;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.08em;
  transition: color .35s ease, text-shadow .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}

.card-design-recommended .transport-grid h3 {
  max-width: 82%;
  padding-right: 0;
  font-size: clamp(1.65rem, 2.05vw, 2.15rem);
  letter-spacing: -.035em;
}

.card-design-recommended .transport-grid p {
  margin-top: 14px;
  margin-bottom: 16px;
  line-height: 1.65;
}

.card-design-recommended .transport-grid ul {
  gap: 7px;
}

.card-design-recommended .transport-grid li::before {
  box-shadow: 0 0 0 rgba(255, 67, 58, 0);
  transition: box-shadow .35s ease, transform .35s ease;
}

@media (hover: hover) and (pointer: fine) {
  .card-design-recommended .transport-grid article:hover {
    z-index: 3;
    border-color: rgba(255, 67, 58, .46);
    box-shadow: 0 34px 75px rgba(0, 0, 0, .34), 0 0 42px rgba(255, 67, 58, .07);
    transform: translateY(-7px) translateZ(0);
  }

  .card-design-recommended .transport-grid article:hover figure img {
    filter: saturate(1.03) contrast(1.04) brightness(1.02);
    transform: scale(1.065);
  }

  .card-design-recommended .transport-grid article:hover li::before {
    box-shadow: 0 0 12px rgba(255, 67, 58, .78);
    transform: scale(1.25);
  }

  .card-design-recommended .transport-grid article:hover > div > span {
    color: rgba(255, 67, 58, .36);
    text-shadow: 0 0 24px rgba(255, 67, 58, .28);
    transform: translateX(-5px);
  }
}

@keyframes transportPairSignal82 {
  0%, 8% { top: 13%; }
  92%, 100% { top: 87%; }
}

@keyframes transportImageSweep82 {
  0%, 22% { top: -30%; opacity: 0; }
  32% { opacity: .7; }
  62% { top: 112%; opacity: .55; }
  72%, 100% { top: 112%; opacity: 0; }
}

@media (max-width: 860px) {
  .card-design-recommended .transport-grid::before,
  .card-design-recommended .transport-grid::after,
  .card-design-recommended .transport-choice {
    display: none;
  }

  .card-design-recommended .transport-grid article > div {
    min-height: 0;
  }
}

@media (max-width: 620px) {
  .card-design-recommended .transport-types {
    padding-bottom: 170px;
  }

  .card-design-recommended .transport-types::after {
    height: 190px;
  }

  .card-design-recommended .transport-grid figure {
    height: min(112vw, 470px);
  }

  .card-design-recommended .transport-grid article > div {
    padding: 28px 24px 32px;
  }

  .card-design-recommended .transport-grid article > div > span {
    top: 24px;
    right: 22px;
    font-size: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-design-recommended .transport-grid::after,
  .card-design-recommended .transport-grid figure::before {
    animation: none;
  }

  .card-design-recommended .transport-grid::after {
    top: 50%;
  }

  .card-design-recommended .transport-grid article,
  .card-design-recommended .transport-grid figure img {
    transition: none;
  }
}

@media (forced-colors: active) {
  .card-design-recommended .transport-grid::before,
  .card-design-recommended .transport-grid::after,
  .card-design-recommended .transport-grid figure::before {
    display: none;
  }

  .card-design-recommended .transport-grid article {
    clip-path: none;
    border: 1px solid CanvasText;
  }
}

/* V84: Ablauf als geführte Route mit wanderndem Signal. */
.card-design-recommended .process {
  --process-transition-height: clamp(280px, 22vw, 350px);
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--process-transition-height) + 62px);
  background:
    linear-gradient(
      180deg,
      #0c0e0f 0%,
      #151718 13%,
      #303231 28%,
      #60615f 44%,
      #999a96 60%,
      #c9c9c4 77%,
      rgba(237, 237, 233, .72) 91%,
      rgba(237, 237, 233, 0) 100%
    ) top / 100% var(--process-transition-height) no-repeat,
    radial-gradient(circle at 8% 31%, rgba(255, 67, 58, .055) 0%, rgba(255, 67, 58, .025) 32%, transparent 68%),
    repeating-linear-gradient(118deg, transparent 0 116px, rgba(13, 15, 16, .026) 116px 118px),
    #edede9;
}

.card-design-recommended .process::before {
  content: none;
  display: none;
}

.card-design-recommended .process-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  gap: clamp(62px, 8vw, 126px);
}

.card-design-recommended .process-intro h2 {
  max-width: 560px;
  line-height: 1.01;
  letter-spacing: -.025em;
  word-spacing: .02em;
}

.card-design-recommended .process-intro > p:last-child {
  max-width: 500px;
  color: #5f605e;
  font-size: .92rem;
  line-height: 1.75;
}

.card-design-recommended .process ol {
  position: relative;
  display: grid;
  gap: 12px;
  border-top: 0;
}

.card-design-recommended .process ol::before {
  content: none;
  display: none;
}

.card-design-recommended .process ol::after {
  content: none;
  display: none;
}

.card-design-recommended .process li {
  position: relative;
  z-index: 1;
  min-height: 118px;
  grid-template-columns: 74px 1fr;
  gap: 22px;
  align-items: center;
  padding: 24px 30px 24px 0;
  border: 1px solid rgba(13, 15, 16, .12);
  background: rgba(255, 255, 255, .43);
  box-shadow: 0 16px 34px rgba(28, 29, 27, .035);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .35s ease, background .35s ease, box-shadow .45s ease;
}

/* V89: kurze, nacheinander aufleuchtende Kartenanschlüsse statt durchgehender Route. */
.card-design-recommended .process li::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 58px;
  width: 34px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 67, 58, .82), rgba(255, 67, 58, .08));
  box-shadow: 0 0 10px rgba(255, 67, 58, .18);
  opacity: .32;
  transform: scaleX(.48);
  transform-origin: left center;
  animation: processStepLink89 8s ease-in-out infinite;
}

.card-design-recommended .process li:nth-child(2)::before { animation-delay: 1.6s; }
.card-design-recommended .process li:nth-child(3)::before { animation-delay: 3.2s; }
.card-design-recommended .process li:nth-child(4)::before { animation-delay: 4.8s; }
.card-design-recommended .process li:nth-child(5)::before { animation-delay: 6.4s; }

.card-design-recommended .process li > span {
  z-index: 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  justify-self: center;
  padding: 0;
  border: 1px solid rgba(255, 67, 58, .34);
  border-radius: 50%;
  color: #df342d;
  background: #edede9;
  box-shadow: 0 0 0 6px #edede9;
  font-size: .58rem;
  line-height: 1;
  transition: color .35s ease, background .35s ease, box-shadow .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}

.card-design-recommended .process li h3 {
  font-size: clamp(1.28rem, 1.65vw, 1.58rem);
  letter-spacing: -.03em;
}

.card-design-recommended .process li p {
  max-width: 720px;
  margin-top: 7px;
  color: #646562;
  font-size: .84rem;
  line-height: 1.62;
}

@media (hover: hover) and (pointer: fine) {
  .card-design-recommended .process li:hover {
    z-index: 3;
    border-color: rgba(255, 67, 58, .3);
    background: rgba(255, 255, 255, .8);
    box-shadow: 0 24px 48px rgba(28, 29, 27, .1), 0 0 32px rgba(255, 67, 58, .055);
    transform: translateX(8px);
  }

  .card-design-recommended .process li:hover > span {
    color: #fff;
    background: #ff433a;
    box-shadow: 0 0 0 6px #edede9, 0 0 20px rgba(255, 67, 58, .45);
    transform: scale(1.08);
  }
}

@keyframes processStepLink89 {
  0%, 18%, 100% {
    opacity: .28;
    transform: scaleX(.48);
  }
  5%, 11% {
    opacity: 1;
    box-shadow: 0 0 14px rgba(255, 67, 58, .48);
    transform: scaleX(1);
  }
}

@media (max-width: 860px) {
  .card-design-recommended .process-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .card-design-recommended .process-intro {
    position: static;
  }
}

@media (max-width: 620px) {
  .card-design-recommended .process {
    --process-transition-height: 210px;
    padding-top: 265px;
  }

  .card-design-recommended .process li {
    min-height: 0;
    grid-template-columns: 58px 1fr;
    gap: 14px;
    padding: 21px 18px 21px 0;
  }

  .card-design-recommended .process ol::before,
  .card-design-recommended .process ol::after {
    display: none;
  }

  .card-design-recommended .process li::before {
    left: 47px;
    width: 22px;
  }

  .card-design-recommended .process li > span {
    width: 36px;
    height: 36px;
    box-shadow: 0 0 0 5px #edede9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-design-recommended .process li::before {
    animation: none;
  }

  .card-design-recommended .process li,
  .card-design-recommended .process li > span {
    transition: none;
  }
}

@media (forced-colors: active) {
  .card-design-recommended .process::before,
  .card-design-recommended .process ol::before,
  .card-design-recommended .process ol::after,
  .card-design-recommended .process li::before {
    display: none;
  }

  .card-design-recommended .process li {
    clip-path: none;
    border: 1px solid CanvasText;
  }
}

/* V94: Fuhrpark als technische Bild- und Ausstattungsinszenierung. */
.card-design-recommended .fleet {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, #0e1011 0%, #090b0c 145px) top / 100% 145px no-repeat,
    radial-gradient(circle at 47% 58%, rgba(255, 67, 58, .06), transparent 31%),
    repeating-linear-gradient(118deg, transparent 0 122px, rgba(255, 255, 255, .016) 122px 124px),
    #090b0c;
}

.card-design-recommended .fleet-grid {
  grid-template-columns: minmax(0, 1.03fr) minmax(460px, .97fr);
  gap: clamp(58px, 7vw, 104px);
}

.card-design-recommended .fleet-gallery {
  position: relative;
  min-height: 570px;
  grid-template-columns: 1.02fr .98fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .018);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}

.card-design-recommended .fleet-gallery figure {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px 12px 0 12px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

.card-design-recommended .fleet-gallery figure::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #ff433a 42%, rgba(255, 67, 58, .18) 70%, transparent);
  box-shadow: 0 0 16px rgba(255, 67, 58, .48);
  opacity: 0;
  animation: fleetScan94 8.4s ease-in-out infinite;
}

.card-design-recommended .fleet-gallery figure:nth-child(2)::before { animation-delay: 2.8s; }
.card-design-recommended .fleet-gallery figure:nth-child(3)::before { animation-delay: 5.6s; }

.card-design-recommended .fleet-gallery figure::after {
  content: "";
  position: absolute;
  inset: 42% 0 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(4, 5, 6, .78), transparent);
}

.card-design-recommended .fleet-gallery img {
  transition: transform 1s cubic-bezier(.2, .75, .2, 1), filter .65s ease;
}

.card-design-recommended .fleet-gallery figcaption {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 13px;
  left: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  color: #fff;
  font-size: .56rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.card-design-recommended .fleet-gallery figcaption span {
  color: #ff5149;
  font-weight: 850;
}

.card-design-recommended .fleet-gallery figcaption b {
  font-size: inherit;
  font-weight: 780;
}

.card-design-recommended .fleet-copy .eyebrow {
  width: max-content;
  max-width: 100%;
}

.card-design-recommended .fleet-copy h2 {
  max-width: 650px;
  font-size: clamp(3.15rem, 4.7vw, 5.35rem);
  line-height: .93;
  letter-spacing: -.035em;
}

.card-design-recommended .fleet-copy h2 span {
  display: block;
}

.card-design-recommended .fleet-copy > p:not(.eyebrow):not(.note) {
  max-width: 600px;
  color: #969a9c;
  font-size: .94rem;
  line-height: 1.7;
}

.card-design-recommended .fleet-copy .spec-grid {
  gap: 8px;
  border: 0;
  background: transparent;
}

.card-design-recommended .fleet-copy .spec-grid > div {
  position: relative;
  overflow: hidden;
  min-height: 96px;
  border: 1px solid rgba(255, 255, 255, .11);
  background: rgba(255, 255, 255, .018);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
  transition: background .35s ease, border-color .35s ease, transform .35s ease;
}

.card-design-recommended .fleet-copy .spec-grid > div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  width: 42px;
  height: 1px;
  background: #ff433a;
  box-shadow: 0 0 12px rgba(255, 67, 58, .48);
  opacity: .24;
  transform: scaleX(.3);
  transform-origin: left;
  animation: fleetSpecPulse94 9s ease-in-out infinite;
}

.card-design-recommended .fleet-copy .spec-grid > div:nth-child(2)::before { animation-delay: 1.5s; }
.card-design-recommended .fleet-copy .spec-grid > div:nth-child(3)::before { animation-delay: 3s; }
.card-design-recommended .fleet-copy .spec-grid > div:nth-child(4)::before { animation-delay: 4.5s; }
.card-design-recommended .fleet-copy .spec-grid > div:nth-child(5)::before { animation-delay: 6s; }
.card-design-recommended .fleet-copy .spec-grid > div:nth-child(6)::before { animation-delay: 7.5s; }

.card-design-recommended .fleet-copy .spec-grid span {
  color: #ff5149;
}

.card-design-recommended .fleet-copy .note {
  margin-top: 20px;
  padding: 14px 17px;
  border: 0;
  border-left: 2px solid #ff433a;
  background: rgba(255, 255, 255, .018);
  color: #7e8284;
  line-height: 1.6;
}

@media (hover: hover) and (pointer: fine) {
  .card-design-recommended .fleet-gallery figure:hover img {
    filter: saturate(1.06) contrast(1.025);
    transform: scale(1.035);
  }

  .card-design-recommended .fleet-copy .spec-grid > div:hover {
    border-color: rgba(255, 67, 58, .26);
    background: rgba(255, 67, 58, .035);
    transform: translateY(-2px);
  }
}

@keyframes fleetScan94 {
  0%, 4% { top: 0; opacity: 0; }
  7% { opacity: .9; }
  24% { top: 100%; opacity: .7; }
  28%, 100% { top: 100%; opacity: 0; }
}

@keyframes fleetSpecPulse94 {
  0%, 16%, 100% {
    opacity: .2;
    transform: scaleX(.3);
  }
  5%, 11% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@media (max-width: 1120px) {
  .card-design-recommended .fleet-grid {
    grid-template-columns: 1fr;
    gap: 64px;
  }

  .card-design-recommended .fleet-copy {
    max-width: 820px;
  }
}

@media (max-width: 620px) {
  .card-design-recommended .fleet-gallery {
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 280px 170px;
    gap: 6px;
    padding: 6px;
  }

  .card-design-recommended .fleet-gallery .fleet-main {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .card-design-recommended .fleet-copy h2 {
    font-size: clamp(2.55rem, 12vw, 3.35rem);
    line-height: .96;
  }

  .card-design-recommended .fleet-copy .spec-grid {
    grid-template-columns: 1fr;
  }

  .card-design-recommended .fleet-gallery figcaption {
    right: 9px;
    bottom: 9px;
    left: 9px;
    font-size: .47rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-design-recommended .fleet-gallery figure::before,
  .card-design-recommended .fleet-copy .spec-grid > div::before {
    animation: none;
  }

  .card-design-recommended .fleet-gallery img,
  .card-design-recommended .fleet-copy .spec-grid > div {
    transition: none;
  }
}

@media (forced-colors: active) {
  .card-design-recommended .fleet-gallery,
  .card-design-recommended .fleet-gallery figure,
  .card-design-recommended .fleet-copy .spec-grid > div {
    clip-path: none;
    border: 1px solid CanvasText;
  }

  .card-design-recommended .fleet-gallery figure::before,
  .card-design-recommended .fleet-gallery figure::after,
  .card-design-recommended .fleet-copy .spec-grid > div::before {
    display: none;
  }
}

/* V98: geordnete Einsatzbereiche und integrierte Standortkarte. */
.card-design-recommended .fleet + .scope {
  padding: 96px 0 118px;
}

.card-design-recommended .fleet + .scope .scope-grid {
  grid-template-columns: minmax(250px, .68fr) minmax(430px, 1.2fr) minmax(260px, .76fr);
  gap: clamp(34px, 4vw, 58px);
  padding-top: 0;
  border-top: 0;
  align-items: start;
}

.card-design-recommended .scope-heading .eyebrow {
  width: max-content;
  max-width: 100%;
  margin-bottom: 28px;
}

.card-design-recommended .scope-heading h2 {
  margin: 0;
  font-size: clamp(3.4rem, 5.1vw, 5.7rem);
  line-height: .91;
  letter-spacing: -.042em;
}

.card-design-recommended .scope-heading h2 span {
  display: block;
}

.card-design-recommended .scope-categories {
  display: grid;
  gap: 10px;
}

.card-design-recommended .scope-category {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
  min-height: 92px;
  padding: 17px 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .085);
  background: linear-gradient(125deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .008));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: border-color .35s ease, background .35s ease, transform .35s ease;
}

.card-design-recommended .scope-category::after {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  width: 34px;
  height: 1px;
  background: rgba(255, 67, 58, .72);
}

.card-design-recommended .scope-category-number {
  padding-top: 2px;
  color: #ff5149;
  font-size: .56rem;
  font-weight: 850;
  letter-spacing: .12em;
}

.card-design-recommended .scope-category small {
  display: block;
  margin: 0 0 11px;
  color: #e5e4e1;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.card-design-recommended .scope-category .tag-cloud {
  gap: 6px;
}

.card-design-recommended .scope-category .tag-cloud span {
  padding: 7px 10px;
  border-color: rgba(255, 255, 255, .11);
  color: #9ea2a4;
  font-size: .6rem;
  background: rgba(0, 0, 0, .08);
  transition: color .3s ease, border-color .3s ease, background .3s ease, transform .3s ease;
}

.card-design-recommended .scope-location {
  position: relative;
  padding: 27px;
  border-radius: 0;
  border-color: rgba(255, 67, 58, .42);
  background:
    radial-gradient(circle at 100% 0, rgba(255, 67, 58, .08), transparent 46%),
    rgba(255, 67, 58, .035);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.card-design-recommended .scope-location::before {
  content: "";
  position: absolute;
  top: 0;
  right: 26px;
  left: 26px;
  height: 1px;
  background: linear-gradient(90deg, #ff433a, rgba(255, 67, 58, 0));
}

.card-design-recommended .scope-location b {
  color: #f4f2ee;
  font-size: .94rem;
  line-height: 1.5;
}

.card-design-recommended .scope-regions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
}

.card-design-recommended .scope-regions span {
  padding: 6px 9px;
  border: 1px solid rgba(255, 67, 58, .22);
  border-radius: 99px;
  color: #c2c1be;
  font-size: .56rem;
}

.card-design-recommended .scope-location p {
  margin-top: 20px;
}

@media (hover: hover) and (pointer: fine) {
  .card-design-recommended .scope-category:hover {
    border-color: rgba(255, 67, 58, .24);
    background: linear-gradient(125deg, rgba(255, 67, 58, .035), rgba(255, 255, 255, .01));
    transform: translateY(-2px);
  }

  .card-design-recommended .scope-category .tag-cloud span:hover {
    color: #f3f1ed;
    border-color: rgba(255, 67, 58, .36);
    background: rgba(255, 67, 58, .045);
    transform: translateY(-1px);
  }
}

@media (max-width: 1120px) {
  .card-design-recommended .fleet + .scope .scope-grid {
    grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr);
  }

  .card-design-recommended .scope-location {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .card-design-recommended .fleet + .scope {
    padding: 72px 0 88px;
  }

  .card-design-recommended .fleet + .scope .scope-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .card-design-recommended .scope-heading h2 {
    font-size: clamp(3.1rem, 15vw, 4.25rem);
  }

  .card-design-recommended .scope-location {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-design-recommended .scope-category,
  .card-design-recommended .scope-category .tag-cloud span {
    transition: none;
  }
}

@media (forced-colors: active) {
  .card-design-recommended .scope-category,
  .card-design-recommended .scope-location {
    clip-path: none;
    border: 1px solid CanvasText;
  }
}

/* V99: nahtlose Dunkel-Hell-Dunkel-Uebergaenge der Bildauswahl. */
.card-design-recommended .references {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--light);
}

.card-design-recommended .references::before,
.card-design-recommended .references::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  left: 0;
  height: clamp(118px, 11vw, 158px);
  pointer-events: none;
}

.card-design-recommended .references::before {
  top: 0;
  background: linear-gradient(
    180deg,
    #090b0c 0%,
    rgba(9, 11, 12, .94) 18%,
    rgba(9, 11, 12, .76) 42%,
    rgba(9, 11, 12, .44) 66%,
    rgba(9, 11, 12, .14) 86%,
    rgba(9, 11, 12, 0) 100%
  );
}

.card-design-recommended .references::after {
  bottom: 0;
  background: linear-gradient(
    0deg,
    #0b0d0e 0%,
    rgba(11, 13, 14, .94) 18%,
    rgba(11, 13, 14, .76) 42%,
    rgba(11, 13, 14, .44) 66%,
    rgba(11, 13, 14, .14) 86%,
    rgba(11, 13, 14, 0) 100%
  );
}

.card-design-recommended .references > .shell,
.card-design-recommended .references > .reference-marquee {
  position: relative;
  z-index: 1;
}

.card-design-recommended .references .section-heading .eyebrow {
  width: max-content;
  max-width: 100%;
}

@media (max-width: 700px) {
  .card-design-recommended .references::before,
  .card-design-recommended .references::after {
    height: 104px;
  }
}

@media (forced-colors: active) {
  .card-design-recommended .references::before,
  .card-design-recommended .references::after {
    display: none;
  }
}

/* V107: konstante Laufgeschwindigkeit bei 54 Referenzmotiven. */
.card-design-recommended .reference-marquee {
  --reference-speed: 139s;
}

@media (max-width: 620px) {
  .card-design-recommended .reference-marquee {
    --reference-speed: 119s;
  }
}

/* V108: fokussierte Google-Bewertungen mit kompakter Vertrauenszusammenfassung. */
.card-design-recommended .reviews {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 0;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 67, 58, .055), transparent 27%),
    linear-gradient(180deg, #0b0d0e 0%, #0a0c0d 72%, #101213 100%);
}

.card-design-recommended .reviews::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  background-image: repeating-linear-gradient(118deg, transparent 0 122px, rgba(255, 255, 255, .018) 123px, transparent 124px 246px);
}

.card-design-recommended .reviews-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 430px);
  gap: clamp(52px, 8vw, 120px);
  align-items: end;
  margin-bottom: 58px;
}

.card-design-recommended .reviews-heading-copy {
  min-width: 0;
}

.card-design-recommended .reviews-heading-copy .eyebrow {
  width: max-content;
  max-width: 100%;
}

.card-design-recommended .reviews-heading-copy h2 {
  margin-top: 28px;
  font-size: clamp(3.5rem, 6.1vw, 6.7rem);
  line-height: .9;
  letter-spacing: -.052em;
}

.card-design-recommended .reviews-summary {
  position: relative;
  padding: 27px 29px 25px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  background:
    radial-gradient(circle at 100% 0, rgba(255, 67, 58, .09), transparent 44%),
    rgba(255, 255, 255, .022);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%);
}

.card-design-recommended .reviews-summary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  width: 74px;
  height: 1px;
  background: linear-gradient(90deg, #ff433a, rgba(255, 67, 58, 0));
  box-shadow: 0 0 14px rgba(255, 67, 58, .5);
}

.card-design-recommended .reviews-summary > small {
  display: block;
  color: #ff5149;
  font-size: .54rem;
  font-weight: 850;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.card-design-recommended .reviews-score {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 17px;
  align-items: center;
  margin: 19px 0 22px;
}

.card-design-recommended .reviews-score > strong {
  color: #f4f2ee;
  font-family: var(--accent-serif);
  font-size: clamp(2.8rem, 4vw, 4.3rem);
  font-weight: 400;
  line-height: .82;
  letter-spacing: -.045em;
}

.card-design-recommended .reviews-score > span {
  display: grid;
  gap: 7px;
}

.card-design-recommended .reviews-score > span > span {
  color: #fbbc04;
  font-size: .79rem;
  letter-spacing: .13em;
}

.card-design-recommended .reviews-score > span > small {
  color: #777c7e;
  font-size: .58rem;
}

.card-design-recommended .reviews-summary > a {
  display: flex;
  min-height: 43px;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .11);
  color: #dedfdd;
  font-size: .66rem;
  font-weight: 780;
  text-decoration: none;
}

.card-design-recommended .reviews-summary > a span {
  color: #ff5149;
  font-size: .9rem;
  transition: transform .3s ease;
}

.card-design-recommended .review-marquee {
  --review-gap: 12px;
  --review-speed: 66s;
  padding-block: 4px 8px;
}

.card-design-recommended .review-sequence {
  counter-reset: pv-review;
}

.card-design-recommended .review-card {
  position: relative;
  counter-increment: pv-review;
  width: clamp(330px, 31vw, 440px);
  min-height: 350px;
  padding: 30px;
  overflow: hidden;
  border-color: rgba(255, 255, 255, .11);
  border-radius: 0;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 67, 58, .04), transparent 36%),
    linear-gradient(145deg, #141719, #101214);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .16);
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
}

.card-design-recommended .review-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 29px;
  width: 54px;
  height: 1px;
  background: #ff433a;
  box-shadow: 0 0 14px rgba(255, 67, 58, .55);
}

.card-design-recommended .review-card::after {
  content: counter(pv-review, decimal-leading-zero);
  position: absolute;
  right: 23px;
  bottom: 18px;
  color: rgba(255, 255, 255, .027);
  font-family: var(--accent-serif);
  font-size: 4.8rem;
  font-weight: 400;
  line-height: .8;
  letter-spacing: -.07em;
  pointer-events: none;
}

.card-design-recommended .review-card > div,
.card-design-recommended .review-card blockquote,
.card-design-recommended .review-card footer {
  position: relative;
  z-index: 1;
}

.card-design-recommended .review-card > div {
  align-items: center;
}

.card-design-recommended .review-card i {
  width: 29px;
  height: 29px;
  border: 1px solid rgba(255, 255, 255, .24);
  background: #f4f3ef;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

.card-design-recommended .review-card blockquote {
  margin: 28px 0 30px;
  color: #d2d4d3;
  font-size: 1rem;
  line-height: 1.72;
}

.card-design-recommended .review-card footer {
  border-top-color: rgba(255, 255, 255, .1);
}

.card-design-recommended .review-card footer span {
  color: #73787a;
}

.card-design-recommended .review-note {
  max-width: 1120px;
  margin-top: 22px;
  margin-left: max(0px, calc((100% - min(92vw, 2040px)) / 2));
  padding-left: 15px;
  border-left: 1px solid rgba(255, 67, 58, .42);
  line-height: 1.65;
}

.card-design-recommended .reviews + .about {
  border-top: 0;
}

@media (hover: hover) and (pointer: fine) {
  .card-design-recommended .reviews-summary > a:hover span,
  .card-design-recommended .reviews-summary > a:focus-visible span {
    transform: translate(2px, -2px);
  }

  .card-design-recommended .review-card:hover {
    border-color: rgba(255, 67, 58, .26);
    background:
      radial-gradient(circle at 100% 0, rgba(255, 67, 58, .075), transparent 38%),
      linear-gradient(145deg, #17191b, #111315);
    transform: translateY(-3px);
  }
}

@media (max-width: 920px) {
  .card-design-recommended .reviews-head {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .card-design-recommended .reviews-summary {
    width: min(100%, 520px);
  }
}

@media (max-width: 620px) {
  .card-design-recommended .reviews-heading-copy h2 {
    margin-top: 22px;
    font-size: clamp(3rem, 14vw, 4.2rem);
  }

  .card-design-recommended .reviews-summary {
    padding: 23px 22px 21px;
  }

  .card-design-recommended .review-card {
    width: min(340px, 86vw);
    min-height: 330px;
    padding: 25px;
  }

  .card-design-recommended .review-note {
    margin-right: 6vw;
    margin-left: 6vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-design-recommended .review-card,
  .card-design-recommended .reviews-summary > a span {
    transition: none;
  }
}

@media (forced-colors: active) {
  .card-design-recommended .reviews-summary,
  .card-design-recommended .review-card {
    clip-path: none;
    border: 1px solid CanvasText;
  }
}

/* V109: konstante Laufgeschwindigkeit bei 17 belegten Kundenstimmen. */
.card-design-recommended .review-marquee {
  --review-speed: 80s;
}

/* V110: der zweizeilige Einsatzgebietsmarker sitzt exakt zwischen gleichen Linien. */
.card-design-recommended .scope-heading .eyebrow {
  width: min(100%, 300px);
  justify-content: center;
  margin-inline: auto;
  text-align: center;
}

.card-design-recommended .scope-heading .eyebrow > span {
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.55;
  text-align: center;
}

.card-design-recommended .scope-heading .eyebrow::before,
.card-design-recommended .scope-heading .eyebrow::after {
  flex: 0 0 32px;
}

/* V111: die Entstehungsgeschichte als ruhiger, zusammenhaengender Spannungsbogen. */
.card-design-recommended .about {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 34%, rgba(255, 67, 58, .045), transparent 28%),
    linear-gradient(180deg, #101213, #0d0f10 68%, #101213);
}

.card-design-recommended .about::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image: repeating-linear-gradient(118deg, transparent 0 126px, rgba(255, 255, 255, .016) 127px, transparent 128px 252px);
}

.card-design-recommended .about-intro {
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .58fr);
  gap: clamp(60px, 8vw, 128px);
  align-items: center;
}

.card-design-recommended .about-intro > div:first-child {
  min-width: 0;
}

.card-design-recommended .about-intro .eyebrow {
  width: max-content;
  max-width: 100%;
}

.card-design-recommended .about-intro h2 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(3.65rem, 5.45vw, 6rem);
  line-height: .93;
  letter-spacing: -.048em;
}

.card-design-recommended .about-intro > div:last-child {
  position: relative;
  padding: 26px 28px;
  border-left: 1px solid rgba(255, 67, 58, .58);
  background: linear-gradient(90deg, rgba(255, 67, 58, .035), transparent 72%);
}

.card-design-recommended .about-intro > div:last-child::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  width: 1px;
  height: 54px;
  background: #ff433a;
  box-shadow: 0 0 14px rgba(255, 67, 58, .55);
}

.card-design-recommended .about-intro > div:last-child p {
  max-width: 560px;
  margin: 0;
  color: #9da1a2;
  font-size: .88rem;
  line-height: 1.82;
}

.card-design-recommended .about-intro > div:last-child p + p {
  margin-top: 18px;
}

.card-design-recommended .origin-story {
  position: relative;
  grid-template-columns: minmax(0, 1.12fr) minmax(410px, .88fr);
  margin-top: 84px;
  overflow: hidden;
  border-color: rgba(255, 255, 255, .115);
  background: #0f1112;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  box-shadow: 0 32px 80px rgba(0, 0, 0, .18);
}

.card-design-recommended .origin-story::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 38%;
  height: 1px;
  background: linear-gradient(90deg, #ff433a, rgba(255, 67, 58, 0));
  box-shadow: 0 0 14px rgba(255, 67, 58, .42);
}

.card-design-recommended .origin-story figure {
  min-height: 740px;
  border-right: 1px solid rgba(255, 255, 255, .1);
}

.card-design-recommended .origin-story figure::after {
  background:
    linear-gradient(90deg, transparent 62%, rgba(8, 10, 11, .3)),
    linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, .88));
}

.card-design-recommended .origin-story figure img {
  transform: scale(1.035);
  transition: transform 1.2s cubic-bezier(.2, .75, .2, 1), filter .65s ease;
}

.card-design-recommended .origin-story figcaption {
  right: 32px;
  bottom: 28px;
  left: 32px;
  display: flex;
  gap: 13px;
  align-items: center;
}

.card-design-recommended .origin-story figcaption::before {
  content: "";
  width: 22px;
  height: 1px;
  flex: 0 0 22px;
  background: #ff5149;
}

.card-design-recommended .origin-story article {
  position: relative;
  justify-content: flex-start;
  padding: clamp(45px, 4.3vw, 70px);
  background:
    radial-gradient(circle at 100% 0, rgba(255, 67, 58, .055), transparent 38%),
    linear-gradient(150deg, #121416, #0e1011);
}

.card-design-recommended .origin-story article > span {
  display: flex;
  gap: 12px;
  align-items: center;
  color: #ff5149;
}

.card-design-recommended .origin-story article > span::before {
  content: "";
  width: 27px;
  height: 1px;
  flex: 0 0 27px;
  background: currentColor;
}

.card-design-recommended .origin-story article > p {
  margin-top: 20px;
  color: #9da1a2;
  font-size: .78rem;
  line-height: 1.82;
}

.card-design-recommended .origin-story blockquote {
  position: relative;
  margin-top: 34px;
  padding: 31px 0 0 25px;
  border-top-color: rgba(255, 255, 255, .11);
  color: #ebe9e4;
  font-size: clamp(1.28rem, 1.85vw, 1.85rem);
  line-height: 1.44;
}

.card-design-recommended .origin-story blockquote::before {
  content: "";
  position: absolute;
  top: 32px;
  bottom: 42px;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, #ff433a, rgba(255, 67, 58, .12));
}

.card-design-recommended .story-timeline {
  position: relative;
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  background: #0c0e0f;
}

.card-design-recommended .story-timeline::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 47px;
  right: 5%;
  left: 5%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 67, 58, .72), rgba(255, 67, 58, .2) 58%, rgba(255, 255, 255, .09));
}

.card-design-recommended .story-timeline li {
  position: relative;
  min-height: 198px;
  padding: 28px 26px 25px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .09);
  background: linear-gradient(145deg, rgba(255, 255, 255, .018), transparent 62%);
  transition: background .35s ease, transform .35s ease;
}

.card-design-recommended .story-timeline li:last-child {
  border-right: 0;
}

.card-design-recommended .story-timeline li > span {
  position: relative;
  z-index: 3;
  display: flex;
  width: max-content;
  gap: 10px;
  align-items: center;
  padding-right: 10px;
  color: #ff5149;
  background: #0d0f10;
}

.card-design-recommended .story-timeline li > span::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border: 1px solid #ff5149;
  border-radius: 50%;
  background: #0d0f10;
  box-shadow: 0 0 0 4px rgba(255, 67, 58, .08), 0 0 12px rgba(255, 67, 58, .34);
}

.card-design-recommended .story-timeline li > b {
  margin-top: auto;
  color: #efeeea;
  font-size: .77rem;
}

.card-design-recommended .story-timeline li > p {
  color: #777c7e;
  line-height: 1.65;
}

@media (hover: hover) and (pointer: fine) {
  .card-design-recommended .origin-story:hover figure img {
    filter: saturate(1.04) contrast(1.02);
    transform: scale(1.055);
  }

  .card-design-recommended .story-timeline li:hover {
    background: linear-gradient(145deg, rgba(255, 67, 58, .045), rgba(255, 255, 255, .012));
    transform: translateY(-2px);
  }
}

@media (max-width: 980px) {
  .card-design-recommended .about-intro,
  .card-design-recommended .origin-story {
    grid-template-columns: 1fr;
  }

  .card-design-recommended .about-intro > div:last-child {
    max-width: 720px;
  }

  .card-design-recommended .origin-story figure {
    min-height: 560px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
}

@media (max-width: 700px) {
  .card-design-recommended .about-intro h2 {
    font-size: clamp(3rem, 14vw, 4.2rem);
  }

  .card-design-recommended .about-intro > div:last-child {
    padding: 22px 20px;
  }

  .card-design-recommended .origin-story {
    margin-top: 52px;
    clip-path: none;
  }

  .card-design-recommended .origin-story figure {
    min-height: 390px;
  }

  .card-design-recommended .origin-story article {
    padding: 31px 23px 36px;
  }

  .card-design-recommended .origin-story blockquote {
    padding-left: 18px;
  }

  .card-design-recommended .story-timeline {
    grid-template-columns: 1fr;
  }

  .card-design-recommended .story-timeline::before {
    top: 28px;
    bottom: 28px;
    left: 31px;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, rgba(255, 67, 58, .7), rgba(255, 255, 255, .08));
  }

  .card-design-recommended .story-timeline li,
  .card-design-recommended .story-timeline li:last-child {
    min-height: 148px;
    padding: 24px 24px 23px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
  }

  .card-design-recommended .story-timeline li:last-child {
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-design-recommended .origin-story figure img,
  .card-design-recommended .story-timeline li {
    transition: none;
  }
}

@media (forced-colors: active) {
  .card-design-recommended .origin-story {
    clip-path: none;
  }

  .card-design-recommended .story-timeline::before,
  .card-design-recommended .origin-story::before,
  .card-design-recommended .origin-story blockquote::before {
    display: none;
  }
}

/* V112: kompakter Entwurf mit ruhigerem Lesefluss und klarerer Abschnittstrennung. */
@media (min-width: 981px) {
  .card-design-recommended .origin-story figure {
    min-height: 670px;
  }
}

.card-design-recommended .origin-story figure img {
  object-position: 52% center;
}

.card-design-recommended .origin-story article > p {
  max-width: 520px;
}

.card-design-recommended .origin-story blockquote {
  max-width: 560px;
}

.card-design-recommended .story-timeline li > b {
  margin-top: 64px;
}

.card-design-recommended .about-stats {
  margin-top: clamp(72px, 8vw, 118px);
}

@media (max-width: 700px) {
  .card-design-recommended .story-timeline li > b {
    margin-top: 38px;
  }

  .card-design-recommended .about-stats {
    margin-top: 62px;
  }
}

/* V115: Zeitleiste und Kennzahlen ohne Kachelwand. */
.card-design-recommended .story-timeline {
  margin-top: 38px;
  overflow: visible;
  border: 0;
  background: transparent;
}

.card-design-recommended .story-timeline::before {
  top: 39px;
  right: 3%;
  left: 3%;
}

.card-design-recommended .story-timeline li,
.card-design-recommended .story-timeline li:last-child {
  min-height: 168px;
  padding: 20px 22px 12px;
  border: 0;
  background: transparent;
}

.card-design-recommended .story-timeline li > span {
  background: #0e1011;
}

.card-design-recommended .story-timeline li > b {
  margin-top: 54px;
}

.card-design-recommended .about-stats {
  gap: clamp(24px, 4vw, 66px);
  border: 0;
  background: transparent;
}

.card-design-recommended .about-stats > div {
  position: relative;
  min-height: 142px;
  padding: 27px 0 0;
  border: 0;
  background: transparent;
}

.card-design-recommended .about-stats > div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 1px;
  background: rgba(255, 67, 58, .72);
}

@media (hover: hover) and (pointer: fine) {
  .card-design-recommended .story-timeline li:hover {
    background: transparent;
  }
}

@media (max-width: 980px) and (min-width: 701px) {
  .card-design-recommended .story-timeline::before {
    display: none;
  }
}

@media (max-width: 700px) {
  .card-design-recommended .story-timeline {
    margin-top: 28px;
  }

  .card-design-recommended .story-timeline li,
  .card-design-recommended .story-timeline li:last-child {
    min-height: 132px;
    padding: 18px 22px 18px 50px;
  }

  .card-design-recommended .story-timeline li > b {
    margin-top: 30px;
  }

  .card-design-recommended .about-stats {
    gap: 36px 24px;
  }

  .card-design-recommended .about-stats > div {
    min-height: 118px;
    padding-top: 22px;
  }
}

/* V116: gesamter Bereich unter dem Bild als zusammenhaengendes Lichtsystem. */
.card-design-recommended .story-system {
  position: relative;
  isolation: isolate;
  margin-top: 18px;
  padding: clamp(25px, 3vw, 40px) clamp(22px, 3vw, 42px) clamp(28px, 3.3vw, 46px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .115);
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 42%, rgba(255, 67, 58, .075), transparent 27%),
    radial-gradient(circle at 80% 64%, rgba(255, 67, 58, .035), transparent 31%),
    linear-gradient(118deg, rgba(255, 255, 255, .034), rgba(255, 255, 255, .008) 48%, rgba(255, 67, 58, .025)),
    #101213;
  box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 30px 80px rgba(0, 0, 0, .17);
}

.card-design-recommended .story-system::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -95%;
  bottom: -95%;
  left: -24%;
  width: 17%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .085), rgba(255, 67, 58, .085), transparent);
  filter: blur(1px);
  transform: skewX(-18deg);
  animation: storySystemSweep116 9s ease-in-out infinite;
}

.card-design-recommended .story-system::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 5%;
  width: 42%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, #ff5149, rgba(255, 67, 58, 0));
  box-shadow: 0 0 18px rgba(255, 67, 58, .35);
}

.card-design-recommended .story-system > * {
  position: relative;
  z-index: 2;
}

.card-design-recommended .story-system .story-timeline {
  margin: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.card-design-recommended .story-system .story-timeline::before {
  top: 29px;
  right: 4%;
  left: 4%;
  background: linear-gradient(90deg, rgba(255, 67, 58, .18), #ff5149 46%, rgba(255, 255, 255, .1));
}

.card-design-recommended .story-system .story-timeline li,
.card-design-recommended .story-system .story-timeline li:last-child {
  min-height: 151px;
  padding: 10px 19px 11px;
  border: 0;
  background: transparent;
}

.card-design-recommended .story-system .story-timeline li > span {
  min-height: 20px;
  padding-right: 10px;
  background: #111314;
}

.card-design-recommended .story-system .story-timeline li > b {
  margin-top: 47px;
}

.card-design-recommended .story-system .about-stats {
  position: relative;
  gap: clamp(22px, 3vw, 54px);
  margin-top: 0;
  padding: clamp(28px, 3vw, 40px) 12px 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .09);
  background: transparent;
}

.card-design-recommended .story-system .about-stats::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 48px;
  height: 5px;
  border-radius: 999px;
  background: #ff6b63;
  box-shadow: 0 0 26px rgba(255, 67, 58, .8);
  animation: storyMetricTravel116 7.6s ease-in-out infinite;
}

.card-design-recommended .story-system .about-stats > div {
  position: relative;
  min-height: 120px;
  padding: 10px 12px 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.card-design-recommended .story-system .about-stats > div::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 42%;
  left: 20%;
  width: 118px;
  height: 118px;
  border: 1px solid rgba(255, 67, 58, .08);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 67, 58, .055), transparent 68%);
  transform: translate(-50%, -50%);
}

.card-design-recommended .story-system .about-stats strong {
  text-shadow: 0 0 30px rgba(255, 67, 58, .12);
}

.card-design-recommended .about-editorial {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr);
  margin-top: clamp(68px, 7vw, 102px);
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, .11);
  border-bottom: 1px solid rgba(255, 255, 255, .11);
  background:
    radial-gradient(circle at 84% 78%, rgba(255, 67, 58, .075), transparent 26%),
    linear-gradient(112deg, rgba(255, 255, 255, .018), transparent 46%, rgba(255, 67, 58, .018));
}

.card-design-recommended .about-editorial::before {
  content: "PV";
  position: absolute;
  z-index: -1;
  right: -1%;
  bottom: -7%;
  color: rgba(255, 255, 255, .022);
  font-size: clamp(12rem, 25vw, 25rem);
  font-weight: 950;
  line-height: .72;
  letter-spacing: -.12em;
  pointer-events: none;
}

.card-design-recommended .about-editorial::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 7%;
  left: calc(46.5% - 4px);
  width: 9px;
  height: 9px;
  border: 1px solid #ff6259;
  border-radius: 50%;
  pointer-events: none;
  background: #fff5f0;
  box-shadow: 0 0 0 7px rgba(255, 67, 58, .07), 0 0 28px rgba(255, 67, 58, .68);
  animation: storyEditorialTravel116 9s ease-in-out infinite;
}

.card-design-recommended .about-editorial-column {
  position: relative;
  z-index: 1;
  padding: 0 clamp(30px, 4vw, 58px);
}

.card-design-recommended .about-editorial-column:first-child {
  border-right: 1px solid rgba(255, 255, 255, .09);
}

.card-design-recommended .about-editorial article {
  position: relative;
  min-height: 290px;
  padding: clamp(38px, 4.2vw, 62px) 0;
  border: 0;
  background: transparent;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

.card-design-recommended .about-editorial article + article {
  border-top: 1px solid rgba(255, 255, 255, .085);
}

.card-design-recommended .about-editorial article > span {
  color: #ff5149;
  font-size: .56rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.card-design-recommended .about-editorial article h3 {
  max-width: 560px;
  margin-top: 20px;
  font-size: clamp(1.75rem, 2.55vw, 2.75rem);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.card-design-recommended .about-editorial article p {
  max-width: 610px;
  margin: 22px 0 0;
  color: #989d9f;
  font-size: .8rem;
  line-height: 1.8;
}

.card-design-recommended .about-editorial article ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 22px;
  margin: 26px 0 0;
  padding: 0;
  color: #b5b9bb;
  font-size: .74rem;
  line-height: 1.45;
  list-style: none;
}

.card-design-recommended .about-editorial article li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 10px 2px 0;
  border-radius: 50%;
  background: #ff5149;
  box-shadow: 0 0 11px rgba(255, 67, 58, .45);
}

.card-design-recommended .about-editorial .about-emergency {
  background: radial-gradient(circle at 0 100%, rgba(255, 67, 58, .085), transparent 48%);
}

.card-design-recommended .about-editorial .about-emergency a {
  width: fit-content;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  margin-top: 28px;
  padding: 0 17px;
  border: 1px solid rgba(255, 67, 58, .48);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 67, 58, .055);
  box-shadow: 0 0 24px rgba(255, 67, 58, .08);
  font-size: .68rem;
  font-weight: 850;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .card-design-recommended .about-editorial article:hover {
    transform: translateX(5px);
  }
}

@keyframes storySystemSweep116 {
  0%, 26% { left: -24%; opacity: 0; }
  36% { opacity: .75; }
  74% { left: 112%; opacity: .5; }
  84%, 100% { left: 112%; opacity: 0; }
}

@keyframes storyMetricTravel116 {
  0%, 8% { left: 0; }
  92%, 100% { left: calc(100% - 48px); }
}

@keyframes storyEditorialTravel116 {
  0%, 8% { top: 7%; }
  92%, 100% { top: 91%; }
}

@media (max-width: 980px) {
  .card-design-recommended .story-system {
    border-radius: 23px;
  }

  .card-design-recommended .story-system .story-timeline::before {
    display: none;
  }

  .card-design-recommended .about-editorial article ul {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .card-design-recommended .story-system {
    padding: 26px 20px 30px;
    border-radius: 19px;
  }

  .card-design-recommended .story-system .story-timeline {
    grid-template-columns: 1fr;
  }

  .card-design-recommended .story-system .story-timeline li,
  .card-design-recommended .story-system .story-timeline li:last-child {
    min-height: 125px;
    padding: 17px 18px 17px 48px;
  }

  .card-design-recommended .story-system .story-timeline li > b {
    margin-top: 26px;
  }

  .card-design-recommended .story-system .about-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 27px 18px;
  }

  .card-design-recommended .story-system .about-stats > div {
    min-height: 104px;
    padding-inline: 5px;
  }

  .card-design-recommended .about-editorial {
    grid-template-columns: 1fr;
  }

  .card-design-recommended .about-editorial::after {
    display: none;
  }

  .card-design-recommended .about-editorial-column {
    padding-inline: 26px;
  }

  .card-design-recommended .about-editorial-column:first-child {
    border-right: 0;
  }

  .card-design-recommended .about-editorial-column + .about-editorial-column {
    border-top: 1px solid rgba(255, 255, 255, .09);
  }

  .card-design-recommended .about-editorial article {
    min-height: 0;
    padding: 38px 0 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-design-recommended .story-system::before,
  .card-design-recommended .story-system .about-stats::after,
  .card-design-recommended .about-editorial::after {
    animation: none;
  }
}

/* V117: synchroner Zeitbalken und vollstaendig zentrierte Kennzahlenkreise. */
.card-design-recommended .story-system .story-timeline {
  --story-bar-left: 4%;
}

.card-design-recommended .story-system .story-timeline::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 27px;
  left: var(--story-bar-left);
  width: 18%;
  height: 4px;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 67, 58, .12), #ff5149 42%, #fff2ed 76%, rgba(255, 67, 58, .18));
  box-shadow: 0 0 8px rgba(255, 67, 58, .5), 0 0 25px rgba(255, 67, 58, .34);
  transition: left .82s cubic-bezier(.2, .78, .2, 1);
}

.card-design-recommended .story-system .story-timeline li,
.card-design-recommended .story-system .story-timeline li:last-child {
  opacity: .3;
  transform: translateY(0);
  transition: opacity .55s ease, transform .65s cubic-bezier(.2, .8, .2, 1), filter .55s ease;
}

.card-design-recommended .story-system .story-timeline li > span,
.card-design-recommended .story-system .story-timeline li > b,
.card-design-recommended .story-system .story-timeline li > p {
  transition: color .5s ease, font-size .5s ease, text-shadow .5s ease;
}

.card-design-recommended .story-system .story-timeline li > b {
  color: #777c7e;
  font-weight: 680;
}

.card-design-recommended .story-system .story-timeline li > p {
  color: #5d6264;
}

.card-design-recommended .story-system .story-timeline li.is-story-active {
  opacity: 1;
  filter: none;
  transform: translateY(-3px);
}

.card-design-recommended .story-system .story-timeline li.is-story-active > span {
  color: #fff4ef;
  text-shadow: 0 0 15px rgba(255, 67, 58, .85);
}

.card-design-recommended .story-system .story-timeline li.is-story-active > span::before {
  border-color: #fff0eb;
  background: #ff5149;
  box-shadow: 0 0 0 6px rgba(255, 67, 58, .12), 0 0 24px rgba(255, 67, 58, .9);
}

.card-design-recommended .story-system .story-timeline li.is-story-active > b {
  color: #fff;
  font-size: .84rem;
  font-weight: 900;
  text-shadow: 0 0 19px rgba(255, 255, 255, .08);
}

.card-design-recommended .story-system .story-timeline li.is-story-active > p {
  color: #aeb2b4;
}

.card-design-recommended .story-system .about-stats {
  align-items: start;
}

.card-design-recommended .story-system .about-stats::after {
  display: none;
}

.card-design-recommended .story-system .about-stats > div {
  min-height: 188px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 7px 8px 0;
  text-align: center;
}

.card-design-recommended .story-system .about-stats > div::before {
  display: none;
}

.card-design-recommended .story-system .about-stats strong {
  width: clamp(116px, 11vw, 146px);
  height: clamp(116px, 11vw, 146px);
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(255, 81, 73, .24);
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 42%, rgba(255, 67, 58, .105), transparent 58%),
    rgba(11, 13, 14, .42);
  box-shadow: inset 0 0 32px rgba(255, 67, 58, .035), 0 0 30px rgba(255, 67, 58, .06);
  line-height: 1;
  text-align: center;
}

.card-design-recommended .story-system .about-stats span {
  width: 100%;
  max-width: 195px;
  margin-top: 18px;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 980px) {
  .card-design-recommended .story-system .story-timeline::after {
    display: none;
  }
}

@media (max-width: 760px) {
  .card-design-recommended .story-system .about-stats > div {
    min-height: 168px;
  }

  .card-design-recommended .story-system .about-stats strong {
    width: 112px;
    height: 112px;
  }
}

/* V119: Kennzahlenkreise mit technischer Tiefe und ruhigem Lichtumlauf. */
.card-design-recommended .story-system .about-stats strong {
  position: relative;
  isolation: isolate;
  border-color: rgba(255, 81, 73, .36);
  background:
    radial-gradient(circle at 32% 23%, rgba(255, 255, 255, .12), transparent 16%),
    radial-gradient(circle at 50% 66%, rgba(255, 67, 58, .13), transparent 54%),
    conic-gradient(from 218deg, rgba(255, 67, 58, .025), rgba(255, 67, 58, .17) 16%, rgba(255, 255, 255, .045) 30%, rgba(255, 67, 58, .02) 51%, rgba(255, 67, 58, .13) 81%, rgba(255, 67, 58, .025));
  box-shadow:
    inset 0 0 0 7px rgba(255, 255, 255, .012),
    inset 0 -24px 38px rgba(0, 0, 0, .32),
    inset 0 18px 30px rgba(255, 67, 58, .025),
    0 0 0 1px rgba(255, 67, 58, .055),
    0 18px 35px rgba(0, 0, 0, .2),
    0 0 30px rgba(255, 67, 58, .075);
  color: #ff554d;
  text-shadow: 0 0 18px rgba(255, 67, 58, .22), 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .5s ease;
}

.card-design-recommended .story-system .about-stats strong::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 9px;
  border: 1px solid rgba(255, 255, 255, .045);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: inset 0 0 24px rgba(255, 67, 58, .045);
}

.card-design-recommended .story-system .about-stats strong::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -5px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 76%, rgba(255, 81, 73, .1) 81%, #ff6b63 87%, rgba(255, 255, 255, .76) 89%, rgba(255, 81, 73, .12) 93%, transparent 98% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  filter: drop-shadow(0 0 5px rgba(255, 67, 58, .7));
  animation: storyStatOrbit119 10s linear infinite;
}

.card-design-recommended .story-system .about-stats > div:nth-child(2) strong::after {
  animation-delay: -2.5s;
}

.card-design-recommended .story-system .about-stats > div:nth-child(3) strong::after {
  animation-delay: -5s;
}

.card-design-recommended .story-system .about-stats > div:nth-child(4) strong::after {
  animation-delay: -7.5s;
}

.card-design-recommended .story-system .about-stats span {
  color: #8b9092;
  letter-spacing: .135em;
}

@media (hover: hover) and (pointer: fine) {
  .card-design-recommended .story-system .about-stats > div:hover strong {
    border-color: rgba(255, 81, 73, .58);
    box-shadow:
      inset 0 0 0 7px rgba(255, 255, 255, .015),
      inset 0 -24px 38px rgba(0, 0, 0, .26),
      inset 0 18px 30px rgba(255, 67, 58, .04),
      0 0 0 1px rgba(255, 67, 58, .09),
      0 22px 40px rgba(0, 0, 0, .22),
      0 0 42px rgba(255, 67, 58, .15);
    transform: translateY(-4px) scale(1.025);
  }
}

@keyframes storyStatOrbit119 {
  to { transform: rotate(1turn); }
}

@media (prefers-reduced-motion: reduce) {
  .card-design-recommended .story-system .about-stats strong::after {
    animation: none;
    transform: rotate(28deg);
  }
}

/* V120: ruhigere, besser lesbare Typografie der Entstehungs-Ueberschrift. */
.card-design-recommended .about-intro h2 {
  max-width: 850px;
  font-size: clamp(3.45rem, 5.12vw, 5.65rem);
  font-weight: 840;
  font-kerning: normal;
  line-height: .985;
  letter-spacing: -.015em;
  word-spacing: .012em;
  text-wrap: balance;
}

@media (max-width: 700px) {
  .card-design-recommended .about-intro h2 {
    font-size: clamp(2.75rem, 12.8vw, 3.85rem);
    line-height: 1;
    letter-spacing: -.012em;
    word-spacing: .01em;
  }
}

/* V122: Manrope-Abstaende auf der kompletten Hauptseite.
   Die vorherigen sehr engen Inter-Werte liessen Zeilen und einzelne Glyphen
   optisch ineinanderlaufen. Die Textgroessen und Umbrueche bleiben erhalten,
   waehrend Zeilenhoehe und Laufweite fuer Manrope sicher geoeffnet werden. */
.card-design-recommended.hero-concept-v1 .hero h1,
.card-design-recommended #cine-principle-title,
.card-design-recommended .premium-copy h2,
.card-design-recommended .night-stage-title,
.card-design-recommended .services-kinetic-v63 .services-kinetic-heading h2,
.card-design-recommended .kinetic-service-card h3,
.card-design-recommended .service-details .section-heading h2,
.card-design-recommended .transport-types .section-heading h2,
.card-design-recommended .routes .section-heading h2,
.card-design-recommended #handover-film-title,
.card-design-recommended .fleet-copy h2,
.card-design-recommended .scope-heading h2,
.card-design-recommended #referenzen .section-heading h2,
.card-design-recommended .reviews-heading-copy h2,
.card-design-recommended .about-intro h2,
.card-design-recommended #fragen .section-heading h2,
.card-design-recommended #kontakt .section-heading h2,
.card-design-recommended #kontakt h3 {
  font-kerning: normal;
  line-height: 1.055;
  letter-spacing: -.012em;
}

.card-design-recommended.hero-concept-v1 .hero h1 {
  row-gap: .045em;
}

.card-design-recommended.hero-concept-v1 .hero-title-first {
  letter-spacing: -.006em;
}

.card-design-recommended.hero-concept-v1 .hero h1 em {
  -webkit-transform: none;
  transform: none;
}

.card-design-recommended .premium-copy h2 .premium-title-accent {
  font-size: .9em;
  white-space: nowrap;
}

.card-design-recommended .premium-copy h2 > span + span,
.card-design-recommended .services-kinetic-v63 .services-kinetic-heading h2 > span,
.card-design-recommended .fleet-copy h2 > span + span,
.card-design-recommended .scope-heading h2 > span + span {
  margin-top: .035em;
}

@media (max-width: 700px) {
  .card-design-recommended.hero-concept-v1 .hero h1,
  .card-design-recommended .premium-copy h2,
  .card-design-recommended .night-stage-title,
  .card-design-recommended .services-kinetic-v63 .services-kinetic-heading h2,
  .card-design-recommended .fleet-copy h2,
  .card-design-recommended .scope-heading h2,
  .card-design-recommended .reviews-heading-copy h2,
  .card-design-recommended .about-intro h2 {
    line-height: 1.075;
    letter-spacing: -.008em;
  }

  .card-design-recommended .premium-copy h2 .premium-title-accent {
    font-size: .88em;
  }
}

/* V123: ruhige Laptop- und Tablet-Geometrie fuer Leistungsuebersicht und Scope.
   Die grossen Titel erhalten mehr Zeilenluft; ihre Nachbarspalten werden vor
   einer moeglichen Beruehrung gestapelt bzw. grosszuegiger aufgeteilt. */
.card-design-recommended .service-details .section-heading h2 {
  line-height: 1.1;
}

.card-design-recommended .fleet + .scope .scope-grid {
  grid-template-columns: minmax(290px, .76fr) minmax(390px, 1.16fr) minmax(260px, .74fr);
  gap: clamp(30px, 3vw, 46px);
}

.card-design-recommended .scope-heading h2 {
  max-width: 100%;
  line-height: 1.09;
}

@media (max-width: 1240px) {
  .card-design-recommended .service-details .section-heading.split {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .card-design-recommended .service-details .section-heading h2 {
    max-width: 940px;
    font-size: clamp(3rem, 6.15vw, 4.9rem);
  }

  .card-design-recommended .service-details .section-heading.split > p {
    max-width: 760px;
  }

  .card-design-recommended .fleet + .scope .scope-grid {
    grid-template-columns: minmax(285px, .72fr) minmax(0, 1.45fr);
    gap: 42px;
  }

  .card-design-recommended .scope-heading h2 {
    font-size: clamp(2.85rem, 4.8vw, 3.8rem);
  }

  .card-design-recommended .scope-location {
    grid-column: 1 / -1;
    max-width: none;
  }
}

@media (max-width: 900px) {
  .card-design-recommended .fleet + .scope .scope-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .card-design-recommended .scope-heading {
    max-width: 620px;
  }

  .card-design-recommended .scope-heading h2 {
    font-size: clamp(3rem, 8vw, 4rem);
  }

  .card-design-recommended .scope-location {
    grid-column: auto;
  }
}

/* Release V166: keep long DE/EN display headings inside the smallest 320px viewport. */
@media (max-width: 340px) {
  .card-design-recommended #cine-principle-title,
  .card-design-recommended .fleet-copy h2,
  .card-design-recommended .night-stage-title,
  .card-design-recommended #kontakt .section-heading h2 {
    max-width: 100%;
    font-size: 2.12rem;
    line-height: 1.08;
    letter-spacing: -.006em;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }
}

/* V169: lange Transportprinzip-Zeilen bleiben in schmalen Handys vollständig sichtbar. */
@media (max-width: 620px) {
  .card-design-recommended .cine-principle-head > * { min-width: 0; }
  .card-design-recommended #cine-principle-title {
    max-width: 100%;
    font-size: clamp(2.55rem,12vw,3.2rem);
    overflow-wrap: normal;
  }
}

@media (max-width: 340px) {
  .card-design-recommended #cine-principle-title { font-size: 2.12rem; overflow-wrap: anywhere; }
}

/* Desktop navigation: keep the links integrated into the hero. A shallow,
   full-width header fade provides a stable reading zone without a rounded
   navigation capsule. */
@media (min-width: 861px) {
  body.hero-concept-v1 .site-header {
    background: linear-gradient(180deg, rgba(5, 6, 7, .86) 0%, rgba(5, 6, 7, .68) 55%, rgba(5, 6, 7, .32) 82%, transparent 100%);
  }

  body.hero-concept-v1 .desktop-nav {
    padding-inline: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}

/* Restabnahme: Small process explanations require normal-text contrast. */
.card-design-recommended .cine-principle-step-copy small {
  color: #2b2c29;
}