/* ==========================================================================
   APTIV CI RESKIN — integrierte Fassung
   --------------------------------------------------------------------------
   Quelle: docs/aptiv-ci.source.css (Piero). Eingebunden nach app.css ueber
   assets/app.js. Abweichungen zur Quelle:
     * __FONTS__ durch die drei Formular-Schnitte aus public/fonts/formular/ ersetzt
     * CN-Block am Ende von Abschnitt 3: `body.font-notoSans` behaelt Noto
       Sans SC (Formular hat keine CJK-Glyphen)
     * Swiper-Buttons: border/transition/align auf !important, weil swiper.css
       dynamisch importiert wird und sonst spaeter im DOM landet
     * Abschnitt 6 (Navigation) und 11 (Footer) entfallen: Header und Footer
       sind in Twig nachgebaut und bringen ihre Aptiv-Optik selbst mit
     * Abschnitt 12 ("STATIC EXPORT ONLY") entfernt; auf der Live-Site
       uebernehmen assets/swiper.js und assets/modal.js
   ========================================================================== */

/* ==========================================================================
   APTIV CI RESKIN — Intercable Automotive Solutions Career pages
   --------------------------------------------------------------------------
   Pure CSS override layer. Loaded AFTER the original app.css, so the original
   markup and DOM structure stay untouched. Only colours, type, imagery
   treatment and CTAs are re-skinned to the Aptiv corporate identity.

   Sources
   -----------------------------------------------------------------------
   Aptiv Brand Guidelines 12/2023 (p.13 Colour Primary, p.14 Colour Secondary,
   p.18/19 Typography, p.42 Photography Usage)
   Aptiv design system tokens taken 1:1 from https://www.aptiv.com/styles/aptiv.css
     .aptiv-button / .orange-button / .arrow-button / .card-basic  (CTA specs)
     .job-header / .job-description h2:before                     (job detail)
     header-component .top-nav / .bottom-nav                      (navigation)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONT — Formular (Aptiv primary typeface, Brand Guidelines p.18)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Formular";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/formular/formular-light.woff") format("woff");
}

@font-face {
  font-family: "Formular";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/formular/formular-regular.woff") format("woff");
}

@font-face {
  font-family: "Formular";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/formular/formular-bold.woff") format("woff");
}

/* Es gibt keinen Medium-Schnitt (500) und keine Italics: die Templates fordern
   font-[200], font-[300], font-bold und font-[900] an, diese Schicht 300/400/700.
   200 fällt per CSS-Font-Matching auf Light, 900 auf Bold. */

/* --------------------------------------------------------------------------
   2. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Primary palette — Brand Guidelines p.13 */
  --aptiv-orange: #f84018; /* Aptiv Orange — accents only, never a large area */
  --aptiv-black: #000000; /* Black — use liberally, ideal as background */
  --aptiv-slate: #b7d1cf; /* Light Slate Blue */

  /* Secondary palette — Brand Guidelines p.14 */
  --aptiv-night: #383942;
  --aptiv-dark-gray: #929d96;
  --aptiv-turquoise: #00ac9e;
  --aptiv-sky: #3bc6eb;
  --aptiv-sun: #ffa211;

  /* UI greys — aptiv.com */
  --aptiv-nav-bg: #191919;
  --aptiv-gray-100: #f3f3f3;
  --aptiv-gray-200: #e5e5e5;
  --aptiv-gray-300: #d6d6d6;
  --aptiv-gray-600: #636363;
  --aptiv-gray-500: #878787;

  /* Shape */
  --aptiv-radius: 32px; /* .white-with-dots / .card-basic */
  --aptiv-radius-pill: 40px; /* .aptiv-button — live computed value */
  --aptiv-radius-tag: 6px; /* .card-basic__category */

  --aptiv-font: "Formular", Arial, Helvetica, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;

  /* CTA-Pfeil = Aptiv-Original aus .orange-arrow-button:after (aptiv.css:22724),
     26 x 12 px PNG, Aptiv Orange, 2px-Linie + Chevron. Byte-identisch uebernommen. */
  --aptiv-cta-arrow: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAMCAYAAAB8xa1IAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADCSURBVHgBtZSxDcJADEW/AaHQhS6IJiMwgkcgG4QNsgGswAQZgWxARmCEdEAFBYJEimT+FSmIRHf3JOtOPslf/rYO8MxHk9w0jsf5CTzS6qoQoOwQnYIKGazi0TC006QMJrSob02PaQbI04CcYnuEhHPSVhNzMYiJG57zFQGhbblX6/7Rw5YIwUvXG27gw1lHxw4uJ/AMC6cseuY15R4eo/peeBf6FZEqqq/Z8DaDRwSyZRcUs8sc7Q4hefN3cJ2N81/MnjxTu/re2gAAAABJRU5ErkJggg==");
  --aptiv-cta-arrow-white: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAMCAYAAAB8xa1IAAAAaUlEQVR42r2UQQ2AQAwEFxSAg5OABKScBBwcEnCABCQgAQlIQMLw4BIS3nTnu49J022lnwEy0CkSYOJhjxYl4KyyNVo2AFeVlWjZyEuRpAbIkmLHlHIrD71jT7OjeYtDsjkO9nB9h/QNbmYfglTozUa9AAAAAElFTkSuQmCC");
  --aptiv-cta-arrow-black: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAMCAYAAAB8xa1IAAAAXElEQVR42mNgoD5IYGBgEGCgMShgYGD4z8DAsJ/WFikwMDDch1o2n9aWGTAwMLyHWlZPa8scoBahWJaAJEgrHM/EQB8gSI94aqBHyptAD0vW0yPDnqdX6aCALgoAqAsuB0oEzQsAAAAASUVORK5CYII=");
  /* .card-basic__cta / .arrow-button chevron */
  --aptiv-chevron-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='15' viewBox='0 0 25 24' fill='none'%3E%3Cpath d='M14.4707 3.19727L22.7903 11.5169L14.4707 19.8365' stroke='black' stroke-width='2'/%3E%3Cpath d='M23.0012 11.7278L0.373802 11.7278' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
  --aptiv-chevron-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='15' viewBox='0 0 25 24' fill='none'%3E%3Cpath d='M14.4707 3.19727L22.7903 11.5169L14.4707 19.8365' stroke='white' stroke-width='2'/%3E%3Cpath d='M23.0012 11.7278L0.373802 11.7278' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY — Formular everywhere, Aptiv type scale
   Brand Guidelines p.19: Formular Light for copy, Formular Bold for emphasis,
   line spacing 30% greater than type size, all text left aligned.
   -------------------------------------------------------------------------- */
html,
body,
.font-sans,
button,
input,
optgroup,
select,
textarea {
  font-family: var(--aptiv-font) !important;
}

/* Die Originalseite deklariert keinen eigenen Seitenhintergrund. In einem
   Viewer mit `prefers-color-scheme: dark` scheint dadurch dessen dunkler Grund
   durch — sichtbar an allen Bereichen ohne explizite Flaeche. Deshalb hier
   ausdruecklich weiss setzen und das Farbschema festnageln. */
html {
  color-scheme: light;
  background-color: #fff;
}
body {
  background-color: #fff;
  color: var(--aptiv-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Formular Light is the Aptiv default body weight */
body.font-sans {
  font-weight: 300;
}

/* Aptiv sets no hyphenation — headlines break on words */
.paragraphs p,
h1,
h2 {
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* Headline scale — --type-h1/h2/title tokens from aptiv.css */
h1,
h2,
.ci-title {
  font-family: var(--aptiv-font) !important;
  letter-spacing: -1px;
}

/* Eyebrow / small-caps labels (Brand Guidelines p.19: "EYEBROW TEXT IS SET IN
   SMALL CAPS"). Aptiv .eyebrow => Light Slate Blue on dark, uppercase, 2.4px. */
.ci-eyebrow {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.286;
  letter-spacing: 2.4px;
}

/* Blocksatz auf links normalisieren — Brand Guidelines p.19 kennt keinen
   Blocksatz (ein Absatz auf der Job-Seite war inline justified gesetzt).

   Die frueheren Pauschalregeln `.paragraphs p/li -> left` und
   `.text-center p/li -> center` sind entfallen: sie erzwangen die Ausrichtung
   unabhaengig vom Breakpoint und schlugen dabei auch die Inline-Ausrichtung des
   WYSIWYG. Dadurch blieben die Absaetze in `text-center lg:text-left`-Containern
   (teaser/block, Convention, map) auch auf Desktop zentriert. Ohne sie erben die
   Absaetze vom Container, die Tailwind-Kaskade greift wieder und die Redaktion
   kann pro Absatz ausrichten. */
p[style*="justify"] {
  text-align: left !important;
}

/* ---- CN (zh_Hant): Noto Sans SC muss gewinnen ---------------------------
   layout.html.twig setzt fuer zh_Hant `font-notoSans` statt `font-sans` auf den
   Body. Formular deckt keine CJK-Glyphen ab, die Erzwingung oben greift aber
   auch auf h1/h2, die Formularelemente und die CTAs. Dieser Block hat in jedem
   dieser Faelle die hoehere Spezifitaet und dreht sie fuer CN zurueck.       */
body.font-notoSans,
body.font-notoSans h1,
body.font-notoSans h2,
body.font-notoSans .ci-title,
body.font-notoSans button,
body.font-notoSans input,
body.font-notoSans optgroup,
body.font-notoSans select,
body.font-notoSans textarea,
body.font-notoSans a.btn-arrow:not([class="btn-arrow"]),
body.font-notoSans button.btn-arrow {
  font-family: "Noto Sans SC", sans-serif !important;
}

/* Location meta — .job-header .contents .text-contents span.location */
.location {
  text-transform: uppercase;
  letter-spacing: 2px !important;
  font-weight: 300 !important;
  color: var(--aptiv-gray-600) !important;
}
.bg-\[\#212121\] .location,
.linear-bg2 .location,
.linear-bg3 .location {
  color: var(--aptiv-gray-300) !important;
}

/* --------------------------------------------------------------------------
   4. COLOUR MAPPING — Intercable red/anthracite  ->  Aptiv orange/black
   The original markup uses Tailwind arbitrary values; the compiled selectors
   are simply re-declared here so the cascade resolves to the Aptiv palette.
   -------------------------------------------------------------------------- */

/* Intercable anthracite #212121 -> Aptiv Black */
.bg-\[\#212121\] {
  background-color: var(--aptiv-black) !important;
}
.text-\[\#212121\] {
  color: var(--aptiv-black) !important;
}
.border-\[\#212121\] {
  border-color: var(--aptiv-black) !important;
}
.bg-\[\#212121\]\/50 {
  background-color: rgba(0, 0, 0, 0.6) !important;
}
.bg-\[\#58595B\] {
  background-color: var(--aptiv-black) !important;
}
.border-\[\#535353\] {
  border-color: var(--aptiv-gray-600) !important;
}
.bg-\[\#b5b5b6\] {
  background-color: var(--aptiv-gray-500) !important;
}

/* Intercable red #E20020 / #dc0921 -> Aptiv Orange */
.bg-\[\#e20020\],
.bg-\[\#E20020\],
.bg-\[\#dc0921\],
.bg-\[\#F84018\] {
  background-color: var(--aptiv-orange) !important;
}
.hover\:border-b-\[\#E20020\]:hover {
  border-bottom-color: var(--aptiv-orange) !important;
}

/* Neutral surfaces -> Aptiv greys */
.bg-\[\#eeeeee\],
.bg-\[\#eaeaea\] {
  background-color: var(--aptiv-gray-100) !important;
}
.bg-\[\#eeeeee\].h-\[1px\] {
  background-color: var(--aptiv-gray-300) !important;
}
.border-\[\#EEEEEE\],
.border-b-\[\#EEEEEE\] {
  border-color: var(--aptiv-gray-300) !important;
}

/* Dark image scrims — Brand Guidelines p.42: black frame, multiply, 50% */
.linear-bg2 {
  background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.9),
      rgba(0, 0, 0, 0.1) 28%,
      #000
    )
    0 0 no-repeat padding-box !important;
}
.linear-bg3::after {
  background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.9),
      rgba(0, 0, 0, 0.1) 28%,
      #000
    )
    0 0 no-repeat padding-box !important;
}
.linear-bg4 {
  background: linear-gradient(180deg, var(--aptiv-gray-100), #fff) 0 0 no-repeat
    padding-box !important;
}

/* Accent rule under headlines — Aptiv .job-description h2:before
   (25px wide, 2px solid #F84018, 5px radius) */
.h-\[2px\].w-\[60px\] {
  width: 25px !important;
  height: 2px !important;
  border-radius: 5px;
  background-color: var(--aptiv-orange) !important;
}

/* --------------------------------------------------------------------------
   5. CALL TO ACTION — 1:1 Aptiv
   -------------------------------------------------------------------------- */

/* ---- 5a. CTA = Aptiv `.orange-arrow-button` -------------------------------
   Quelle: aptiv.css Zeilen 22685-22734, zusaetzlich am Live-Element
   (a.orange-arrow-button.orange-arrow-button--outline, /en/careers) verifiziert:
   417 x 65 px, bg #fff, color #000, border 2px solid #000, radius 100px,
   padding 20px 84px 20px 44px, 14px / 700 / 2px, display:inline-block,
   text-align:left. Pfeil = absolut positioniert, right:48px, vertikal zentriert.

   Hover (am Live-Element gemessen, nicht abgeleitet):
     background:#000; color:#fff; border-color:#fff; text-decoration:none
     -> der Pfeil bleibt unveraendert orange.                                */
a.btn-arrow:not([class="btn-arrow"]),
button.btn-arrow {
  display: inline-block !important;
  position: relative;
  box-sizing: border-box;
  color: var(--aptiv-black) !important;
  background: #fff;
  padding: 20px 84px 20px 44px !important;
  border: 2px solid var(--aptiv-black);
  border-radius: 100px !important;
  width: 100%;
  text-align: center;
  font-family: var(--aptiv-font) !important;
  font-size: 0.75rem !important;
  line-height: 1.5 !important; /* Bootstrap --bs-body-line-height, live = 21px */
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  text-decoration: none;
  transition: 0.2s ease-in-out;
}
@media (min-width: 768px) {
  a.btn-arrow:not([class="btn-arrow"]),
  button.btn-arrow {
    font-size: 0.875rem !important;
    width: auto;
    text-align: left;
  }
}
/* .orange-arrow-button:after — Aptiv-Pfeil, 26 x 12 px, right:48px */
a.btn-arrow:not([class="btn-arrow"])::after,
button.btn-arrow::after {
  content: var(--aptiv-cta-arrow) !important;
  display: inline-block !important;
  position: absolute !important;
  top: 50% !important;
  right: 48px !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  background: none !important;
}
/* Hover/Focus — exakt .orange-arrow-button:hover, :focus */
a.btn-arrow:not([class="btn-arrow"]):hover,
a.btn-arrow:not([class="btn-arrow"]):focus,
button.btn-arrow:hover,
button.btn-arrow:focus {
  color: #fff !important;
  border-color: #fff !important;
  background: var(--aptiv-black) !important;
  text-decoration: none;
  cursor: pointer;
}

/* Auf dunklen Sections die Basisvariante ohne schwarzen Rahmen
   (.orange-arrow-button ohne --outline: border 2px solid transparent) */
a.btn-arrow[class~="text-white"] {
  border-color: transparent;
}

/* ---- 5b. Primaerer CTA = Aptiv `.orange-button` (aptiv.css 22834-22862) --
   text-align:center; color:#fff; background:#f84018;
   padding:20px 44px; border:2px solid #f84018; border-radius:100px
   :hover -> background:#000 (color bleibt #fff)
   Aptivs `.orange-button` traegt selbst keinen Pfeil. Da die Original-CTAs
   einen Pfeil haben und alle CTAs den Aptiv-Pfeil nutzen sollen, wird hier
   der Pfeil aus .orange-arrow-button:after in Weiss uebernommen — die
   einzige zusammengesetzte Variante. Ohne Pfeil: `content:none` setzen.   */
a.btn-arrow[class~="rounded-3xl"],
button.btn-arrow[class~="rounded-3xl"] {
  text-align: center;
  color: #fff !important;
  background: var(--aptiv-orange) !important;
  border: 2px solid var(--aptiv-orange) !important;
}
a.btn-arrow[class~="rounded-3xl"]::after,
button.btn-arrow[class~="rounded-3xl"]::after {
  content: var(--aptiv-cta-arrow-white) !important;
}
a.btn-arrow[class~="rounded-3xl"]:hover,
a.btn-arrow[class~="rounded-3xl"]:focus,
button.btn-arrow[class~="rounded-3xl"]:hover,
button.btn-arrow[class~="rounded-3xl"]:focus {
  color: #fff !important;
  background: var(--aptiv-black) !important;
  border-color: var(--aptiv-black) !important;
}

/* Meta-Zeile der Job-Seite: Ort + CTA umbrechen statt kollidieren
   (= Aptiv .job-header .contents unterhalb md) */
@media (max-width: 767px) {
  div[class~="justify-between"]:has(> div > .location) {
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 20px;
  }
}

/* ---- 5c. Icon-CTA in der Stellenliste — nur der orange Aptiv-Pfeil -------
   Identischer Pfeil wie im CTA, ohne Kreis und ohne Rahmen. Aptivs eigenes
   Pendant fuer einen blanken Pfeil ist `.auto-complete .arrow::after`
   (arrow-right-orange, no-repeat right center) — dort ist ebenfalls
   kein Hover-State definiert, deshalb bleibt der Pfeil unveraendert.      */
a[class="btn-arrow"] {
  display: inline-block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  line-height: 0;
}
a[class="btn-arrow"]::after {
  content: var(--aptiv-cta-arrow) !important;
  display: inline-block !important;
  position: static !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  vertical-align: middle;
}

/* ---- 5d. Round contact FAB — Aptiv Orange, hover Black ------------------ */
.btn-contact {
  background-color: var(--aptiv-orange) !important;
}
a:hover .btn-contact {
  background-color: var(--aptiv-black) !important;
}

/* --------------------------------------------------------------------------
   7. HERO — Aptiv .video-hero (full-bleed dark image, oversized light
      headline; Brand Guidelines p.42: black scrim + white type)
   -------------------------------------------------------------------------- */
.ci-page-career h1.text-white {
  font-size: clamp(2.75rem, 6vw, 4.625rem) !important;
  line-height: 1 !important;
  letter-spacing: -2px !important;
  font-weight: 400 !important;
  color: #fff !important;
}
.ci-page-career h1.text-white + div + div {
  font-weight: 300;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   8. SURFACES & CARDS — Aptiv .card-basic / .white-with-dots
      32px radius, 1–2px border instead of shadow
      (Brand Guidelines p.28: no drop shadows or gradients)
   -------------------------------------------------------------------------- */
.shadow-xl,
.lg\:shadow-xl {
  box-shadow: none !important;
}

/* Aptiv-Tag-Radius der kleinen Overlay-Flaechen. Die Regel stand ursprünglich
   im (entfernten) Navigationsabschnitt, trifft aber ausser den Sprachmenüs auch
   den FAB-Tooltip (includes/contact/button.html.twig), den Formular-Toast
   (includes/contact/form.html.twig) und die Messe-Kacheln
   (components/Convention.html.twig) — deshalb gehoert sie hierher. */
.rounded-xl.shadow-xl {
  border-radius: var(--aptiv-radius-tag) !important;
}

.rounded-b-lg,
.rounded-lg {
  border-radius: var(--aptiv-radius) !important;
  overflow: hidden;
}
.rounded-b-lg.bg-white,
.rounded-lg.bg-\[\#FFFFFF\] {
  border: 1px solid var(--aptiv-gray-300);
  transition: border-color 0.2s ease-in-out;
}
.rounded-b-lg.bg-white:hover {
  border-color: var(--aptiv-black);
}

/* Rounded media, aligned to the Aptiv grid (.img-rounded) */
picture img,
.rounded-b-lg picture img {
  border-radius: 0;
}
.rounded-b-lg > div:first-child picture img,
.rounded-b-lg > .linear-bg3 picture img {
  border-top-left-radius: var(--aptiv-radius);
  border-top-right-radius: var(--aptiv-radius);
}

/* Teaser card caption -> Aptiv .card-basic__heading */
.swiper-slide .rounded-b-lg h2 {
  font-size: 1.375rem !important;
  line-height: 30px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  padding: 24px !important;
}

/* Job list rows */
.border-b-\[\#EEEEEE\].py-\[15px\] {
  border-bottom-color: var(--aptiv-gray-300) !important;
}

/* Category headline above the job groups */
.border-b-\[\#EEEEEE\].pb-\[10px\] {
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  border-bottom-width: 2px !important;
  border-bottom-color: var(--aptiv-black) !important;
}

/* Category filter bar — orange 3px underline like the Aptiv nav */
a[class~="hover:border-b-[#E20020]"] {
  letter-spacing: 2px;
  border-bottom-width: 3px !important;
}

/* --------------------------------------------------------------------------
   9. FORMS — Aptiv radius & focus colour
   -------------------------------------------------------------------------- */
input,
select,
textarea {
  border-radius: var(--aptiv-radius-tag) !important;
  border-color: var(--aptiv-gray-300) !important;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--aptiv-orange) !important;
  outline-offset: 1px;
  border-color: var(--aptiv-orange) !important;
}
label {
  letter-spacing: 1.2px;
}

/* Karussell-Navigation = Aptiv `.card-carousel__nav button.swiper-button-*`
   32px-Kreis mit Aptiv-Chevron, Hover -> Fläche Aptiv Orange + weißer Chevron.
   `prev` ist die gespiegelte Variante desselben Glyphs.                     */
.swiper-button-prev,
.swiper-button-next {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--aptiv-black) !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  transition: 0.2s ease-in-out !important;
}
.swiper-buttons-o {
  gap: 8px !important;
}
.swiper-button-prev::after,
.swiper-button-next::after {
  content: var(--aptiv-chevron-black) !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  background-image: none !important;
  /* swiper.css faerbt den Pfeil per `filter: brightness(0) invert(1)` weiss —
     zuruecksetzen, sonst ist der schwarze Aptiv-Chevron unsichtbar. */
  filter: none !important;
  /* !important, weil swiper.css dynamisch nachgeladen wird und sonst mit
     seinem eigenen `transform` Drehung und Skalierung ueberschreibt. */
  transform: scale(0.62) !important;
  transform-origin: center;
}
.swiper-button-prev::after {
  transform: scale(0.62) rotate(180deg) !important;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background-color: var(--aptiv-orange) !important;
  border-color: var(--aptiv-orange) !important;
}
.swiper-button-next:hover::after {
  content: var(--aptiv-chevron-white) !important;
}
.swiper-button-prev:hover::after {
  content: var(--aptiv-chevron-white) !important;
  transform: scale(0.62) rotate(180deg) !important;
}
.swiper-button-disabled {
  opacity: 0.3 !important;
  background-color: transparent !important;
  border-color: var(--aptiv-black) !important;
}

/* --------------------------------------------------------------------------
   10. JOB DETAIL PAGE — Aptiv .job-header / .job-description
   -------------------------------------------------------------------------- */
/* Headline: Aptiv .job-header h1 — 44px/54px, Formular Light */
.ci-page-job [class~="lg:text-[45px]/[55px]"] {
  font-weight: 300 !important;
  letter-spacing: -1px;
}

/* Aptiv .job-description h2:before — 25px orange rule above every h2 */
.ci-page-job .swiper-slide h2::before,
.ci-page-job .paragraphs + h2::before {
  content: "";
  display: block;
  width: 25px;
  border-bottom: 2px solid var(--aptiv-orange);
  border-radius: 5px;
  margin-bottom: 10px;
}
.ci-page-job .swiper-slide[class] .rounded-lg.text-center h2::before {
  margin: 0 auto 10px;
}

/* Content / benefit cards get the Aptiv surface treatment */
.ci-page-job .swiper-slide > .rounded-lg {
  background-color: var(--aptiv-gray-100) !important;
  border-radius: var(--aptiv-radius) !important;
}
.ci-page-job .swiper-slide > .rounded-lg h2 {
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
/* Bullets — Aptiv "points" are round, not typographic dots */
.ci-page-job .paragraphs ul li::before,
.paragraphs ul li::before {
  content: "" !important;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--aptiv-orange);
  top: 0.55em !important;
}
.text-center .paragraphs ul li::before {
  display: none !important;
}

/* Intro standfirst -> Aptiv .subheadline */
.ci-page-job [class~="text-[24px]/[30px]"][class~="font-[200]"] {
  font-weight: 300 !important;
  letter-spacing: 0 !important;
}

/* Modal — Aptiv radius */
.modal-panel {
  border-radius: var(--aptiv-radius) !important;
}
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

/* --------------------------------------------------------------------------
   11. FOOTER — Aptiv Black
   -------------------------------------------------------------------------- */
/* Der Footer bringt seine Aptiv-Flaeche seit dem Umbau selbst im Markup mit
   (includes/footer.html.twig). Hier bleibt nur der Link-Hover, der auch die
   dunklen Areabrick-Sections trifft. */
.bg-\[\#212121\] a.text-white:hover {
  color: var(--aptiv-orange) !important;
}