/* Preserve footer spacing when shared wrapper rules reset vertical padding. */
.sx-foot > .sx-foot__in {
  padding-top: 64px;
  padding-bottom: 52px;
}

.sx-foot > .sx-foot__bar {
  padding-top: 22px;
  padding-bottom: 26px;
}

@media (max-width: 700px) {
  .sx-foot > .sx-foot__in {
    padding-top: 56px;
    padding-bottom: 48px;
  }
}

/* Live Startseite: Hero Motiv mit zwei Kollegen am Bildschirm (ab 02.11.2026). Ein Bild für alle Breiten, ohne Farbfilter. */
.sx-page-home .hx-hero__img picture img {
  filter: none !important;
}
/* Smartphone bis 767 px: Bildfläche und Aufbau bleiben. Oben ausgerichtet, damit beide Köpfe und das Headset ganz sichtbar sind.
   Leicht nach links versetzt, damit die Hand auf der Schulter im Bild bleibt. Abgeschnitten wird vor allem der Monitor rechts. */
@media (max-width: 767px) {
  .sx-page-home .hx-hero__img picture img {
    object-fit: cover !important;
    object-position: 15% 0% !important;
  }
}
/* Ab 768 px: Das Bild behält sein Seitenverhältnis und wird rechtsbündig gesetzt. --cx-hero-h ist die Bildhöhe,
   --cx-hero-m der Abstand vom rechten Rand bis zum Kopf des stehenden Kollegen. Rechts steht das Bild über, dort liegt nur der Monitor.
   So bleiben beide Köpfe frei von Text und Handschrift Notiz, der vorhandene Verlauf sorgt links für die Lesbarkeit. */
@media (min-width: 768px) {
  .sx-page-home .hx-hero__img picture {
    position: absolute;
    inset: 0;
    display: block;
  }
  .sx-page-home .hx-hero__img picture img {
    --cx-hero-h: clamp(354px, calc((100vw - 699px) * 1.8887), 612px);
    --cx-hero-m: 28px;
    position: absolute;
    top: 0;
    left: auto;
    right: calc(var(--cx-hero-m) - var(--cx-hero-h) * 0.4816);
    width: auto;
    max-width: none;
    height: var(--cx-hero-h);
    object-fit: cover;
    object-position: 50% 0%;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%), linear-gradient(90deg, transparent 0, #000 18%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, #000 70%, transparent 100%), linear-gradient(90deg, transparent 0, #000 18%);
    mask-composite: intersect;
  }
}
@media (min-width: 1024px) {
  .sx-page-home .hx-hero__img picture img {
    --cx-hero-h: calc(111.38vw - 576px);
    --cx-hero-m: 40px;
  }
}
/* Ab 1181 px ist die Handschrift Notiz sichtbar. Das Bild rückt so weit nach links, dass Kopf und Notiz getrennt bleiben. */
@media (min-width: 1181px) {
  .sx-page-home .hx-hero__img picture img {
    --cx-hero-h: calc(25.16vw + 354.5px);
    --cx-hero-m: min(calc(20vw - 88px), calc(8.3vw + 80.5px), 280px);
  }
}
/* Startseite, Fallstudie "Von 0,8 % auf 13 % Abschlussquote." (ab 03.11.2026): Das Motiv ist 4:3 und wird auf allen Breiten vollständig gezeigt.
   Das Paket verkürzt die Bildfläche bis 1023 px auf 16:9, dabei würden Notizblock und Schreibhand angeschnitten.
   Position, Abstände, Rundung, Schatten und Bildausrichtung bleiben unverändert. Ab 1024 px ist die Fläche bereits 4:3. */
.sx-page-home .cx2-case__fig {
  aspect-ratio: 4 / 3;
}