/* 
 * PRIME HR Webstra Custom Styles
 * Alle Custom-Anpassungen, die nicht Farben/Design betreffen
 */

/* Neon: Sektions-Trenner + Bildrahmen */
.neon-divider {
  position: relative;
  z-index: 2;
  height: 2px;
  margin: 0;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(242, 255, 30, 0.45) 18%,
    #f2ff1e 50%,
    rgba(242, 255, 30, 0.45) 82%,
    transparent 100%
  );
  box-shadow:
    0 0 4px rgba(242, 255, 30, 1),
    0 0 14px rgba(242, 255, 30, 0.85),
    0 0 32px rgba(242, 255, 30, 0.55),
    0 0 56px rgba(242, 255, 30, 0.28);
}

.neon-img-frame {
  display: block;
  position: relative;
  z-index: 1;
  overflow: visible;
}

.neon-img-frame > img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow:
    0 0 8px rgba(242, 255, 30, 1),
    0 0 20px rgba(242, 255, 30, 0.85),
    0 0 40px rgba(242, 255, 30, 0.55),
    0 0 64px rgba(242, 255, 30, 0.3);
}

.neon-img-frame.rounded-2 > img {
  border-radius: 0.375rem;
}

.neon-img-frame.rounded > img {
  border-radius: var(--bs-border-radius, 0.375rem);
}

.home-features-band__office-photo.neon-img-frame > img {
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.home-testimonials .neon-img-frame {
  margin: 0;
}

/* Swiper: Glow außerhalb (symmetrisch); Fade-Modus verhindert Nachbar-Slide rechts */
.home-testimonials__slider,
.home-testimonials > .container {
  overflow: visible;
}

.home-testimonials .js-swiper-testimonials.swiper {
  overflow: clip;
  overflow-clip-margin: 4.5rem;
}

.home-testimonials .swiper-slide {
  overflow: visible;
}

.home-testimonials
  .swiper-slide:not(.swiper-slide-active)
  .neon-img-frame
  > img {
  box-shadow: none !important;
}

@supports not (overflow-clip-margin: 1rem) {
  .home-testimonials .js-swiper-testimonials.swiper {
    overflow: hidden;
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .neon-divider {
    box-shadow: 0 0 10px rgba(242, 255, 30, 0.45);
  }

  .neon-img-frame > img {
    box-shadow: 0 0 16px rgba(242, 255, 30, 0.55);
  }
}

/* Über uns: Statement-Video im 16:9-Rahmen (object-fit bei abweichendem Quellformat) */
.page-ueber-uns .ratio.ratio-16x9 > .ueber-uns-statement-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Über uns Hero: Logo-Animation, dunkler Grund + Poster (kein Weiß-Flash) */
.page-ueber-uns .ueber-uns-hero {
  position: relative;
  z-index: 1;
  background: #0b0d10 url('/assets/img/home/ueber-uns-logo-hero-poster.jpg')
    center / cover no-repeat;
}

/* Background-Videos: sanft einblenden, damit beim Laden kein schwarzer Frame blitzt */
.hero-bg-video-shell {
  background-color: #f4f7fb;
}

.page-ueber-uns .ueber-uns-hero.hero-bg-video-shell {
  background-color: var(--jb-hero-ueber-uns-bg);
}

.hero-bg-video-shell .hero-bg-video {
  opacity: 0;
  transition: opacity 240ms ease;
}

.hero-bg-video-shell .hero-bg-video.is-ready {
  opacity: 1;
}

.home-hero-video-shell {
  background: var(--jb-body-bg)
    url('/assets/img/home/ueber-uns-logo-hero-poster.jpg') center / cover
    no-repeat;
}

.home-hero-video-shell .home-hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

.home-hero-video-shell .home-hero-funny-logo-wrap {
  margin-bottom: 11rem;
}

@media (min-width: 768px) {
  .home-hero-video-shell .home-hero-funny-logo-wrap {
    margin-bottom: 15rem;
  }
}

@media (min-width: 992px) {
  .home-hero-video-shell .home-hero-funny-logo-wrap {
    margin-bottom: 19rem;
  }
}

@media (min-width: 1200px) {
  .home-hero-video-shell .home-hero-funny-logo-wrap {
    margin-bottom: 22rem;
  }
}

.home-hero-video-shell .home-hero-funny-logo {
  max-width: min(100%, 18rem);
  width: auto;
  height: auto;
}

@media (min-width: 768px) {
  .home-hero-video-shell .home-hero-funny-logo {
    max-width: min(100%, 20rem);
  }
}

@media (min-width: 992px) {
  .home-hero-video-shell .home-hero-funny-logo {
    max-width: min(100%, 24rem);
  }
}

@media (min-width: 1200px) {
  .home-hero-video-shell .home-hero-funny-logo {
    max-width: min(100%, 26rem);
  }
}

/* Start-Hero: H1 unter Neon-Logo – kleiner als display-2, proportional zum Lead */
.home-hero-video-shell .home-hero-title {
  font-size: clamp(1.75rem, 2.8vw + 0.85rem, 2.875rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

@media (min-width: 992px) {
  .home-hero-video-shell .home-hero-title {
    font-size: clamp(2rem, 2.4vw + 1rem, 3.125rem);
  }
}

.page-ueber-uns .ueber-uns-hero > .ueber-uns-hero__inner {
  position: relative;
  z-index: 2;
}

.page-ueber-uns .ueber-uns-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

.page-ueber-uns .ueber-uns-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Dunkler Schleier + Verlauf zu Seitenhintergrund #0b0d10 (nächste Sektion) */
  background: linear-gradient(
    to bottom,
    rgba(11, 13, 16, 0.88) 0%,
    rgba(11, 13, 16, 0.5) 14%,
    rgba(11, 13, 16, 0.2) 30%,
    rgba(11, 13, 16, 0.06) 45%,
    rgba(11, 13, 16, 0.05) 55%,
    rgba(11, 13, 16, 0.22) 68%,
    rgba(11, 13, 16, 0.55) 80%,
    rgba(11, 13, 16, 0.88) 92%,
    #0b0d10 100%
  );
}

.page-ueber-uns .ueber-uns-hero .ueber-uns-hero__head h1,
.page-ueber-uns .ueber-uns-hero .ueber-uns-hero__head .display-6 {
  color: #ffffff !important;
}

.page-ueber-uns .ueber-uns-hero .lead.text-dark,
.page-ueber-uns .ueber-uns-mobile-lead .lead.text-dark {
  color: rgba(255, 255, 255, 0.92) !important;
}

.page-ueber-uns .ueber-uns-hero__body {
  min-height: min(74vh, 44rem);
}

@media (max-width: 767.98px) {
  .page-ueber-uns .ueber-uns-hero > .ueber-uns-hero__inner {
    min-height: min(82vh, 38rem);
    padding-top: 2rem !important;
    padding-bottom: 1.25rem !important;
  }

  .page-ueber-uns .ueber-uns-hero__mobile-head {
    min-height: min(82vh, 38rem);
    width: 100%;
    align-items: flex-start;
    padding-top: clamp(2rem, 10vh, 4.5rem);
  }

  .page-ueber-uns .ueber-uns-hero__mobile-head .ueber-uns-hero__head {
    width: min(100%, 24rem);
    margin-left: auto;
    margin-right: auto;
  }

  /* Überlappt den Hero per negativem Margin – muss darüber liegen */
  .page-ueber-uns .ueber-uns-mobile-lead {
    position: relative;
    z-index: 3;
    margin-top: -10rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-ueber-uns .ueber-uns-hero__video {
    display: none;
  }

  .page-ueber-uns .ueber-uns-hero__overlay {
    background:
      url('/assets/svg/logos/logo.svg') center / min(52%, 11rem) no-repeat,
      linear-gradient(
        to bottom,
        rgba(11, 13, 16, 0.92) 0%,
        rgba(11, 13, 16, 0.75) 38%,
        rgba(11, 13, 16, 0.75) 62%,
        rgba(11, 13, 16, 0.9) 82%,
        #0b0d10 100%
      );
  }

  .home-hero-video-shell .home-hero-bg-video {
    display: none;
  }
}

/* Navbar Logo - Größe begrenzen (512x512px, 1:1 Seitenverhältnis) */
.navbar-brand-logo {
  max-width: 4rem !important;
  min-width: unset !important;
  object-fit: contain !important;
}

/* Header: Logo (PNG), größere Darstellung */
header .navbar-brand-logo--header {
  width: 11rem !important;
  height: 4.6rem !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: left center !important;
  display: block;
}

/* Trust-Streifen: Sterne wie Auwald (Finder text-warning ≈ Google-Orange) */
.trust-strip-stars {
  color: rgb(252, 146, 49);
}

/* Trust-Streifen: Badges (neben breitem Google-Block) */
.trust-strip .trust-strip-badge-img {
  max-height: 6.75rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

@media (min-width: 992px) {
  .trust-strip .trust-strip-badge-img {
    max-height: 8.25rem;
  }
}

@media (min-width: 1200px) {
  .trust-strip .trust-strip-badge-img {
    max-height: 7.75rem;
  }
}

/* Kununu-Jahres-Badges: gleiche max-height wie Arbeitsgeber (.trust-strip-badge-img) */
.trust-strip-kununu-img {
  flex-shrink: 0;
}

/* Partner-Badges: je eine Bootstrap-Spalte, darf bei Bedarf schrumpfen */
.trust-strip-partner-row > .col {
  min-width: 0;
}

/* Button Link White - für Hero-Bereich */
.btn-link.text-white {
  color: #fff !important;
}

.btn-link.text-white:hover,
.btn-link.text-white:focus {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Navbar Links White - wenn Navbar nicht sticky ist (absolute) */
.navbar-absolute-top:not(.navbar-scrolled) .navbar-nav .nav-link {
  color: #fff !important;
}

.navbar-absolute-top:not(.navbar-scrolled) .navbar-nav .nav-link:hover,
.navbar-absolute-top:not(.navbar-scrolled) .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 0.8) !important;
}

.navbar-absolute-top:not(.navbar-scrolled)
  .navbar-nav
  .nav-link.dropdown-toggle::after {
  background-image: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.72,15.78a.75.75,0,0,1-.53.22h-.38a.77.77,0,0,1-.53-.22L6.15,10.64a.5.5,0,0,1,0-.71l.71-.71a.49.49,0,0,1,.7,0L12,13.67l4.44-4.45a.5.5,0,0,1,.71,0l.7.71a.5.5,0,0,1,0,.71Z'/%3e%3c/svg%3e") !important;
}

.navbar-absolute-top:not(.navbar-scrolled) .navbar-toggler-default i,
.navbar-absolute-top:not(.navbar-scrolled) .navbar-toggler-toggled i {
  color: #fff !important;
}

/* Navbar Links Dark - wenn darkNavbar Variable gesetzt ist */
.navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link {
  color: #677788 !important;
}

.navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link:hover,
.navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link:focus {
  color: var(--bs-primary) !important;
}

/* Navbar Nav-Link Hover - Primärfarbe für alle Nav-Links im gescrollten Zustand und navbar-dark-custom */
.navbar-scrolled .navbar-nav .nav-link:hover,
.navbar-scrolled .navbar-nav .nav-link:focus,
.navbar-dark-custom .navbar-nav .nav-link:hover,
.navbar-dark-custom .navbar-nav .nav-link:focus {
  color: var(--bs-primary) !important;
}

/* Navbar Scrolled: Hintergrund siehe Block „Jobbusters color/accessibility overrides“ */

/* Mobile: klassisches Bootstrap-Dropdown ausblenden – Navigation läuft über Overlay */
@media (max-width: 991.98px) {
  .navbar-expand-lg .navbar-nav-wrap > #navbarNavDropdown.collapse {
    display: none !important;
  }
}

/* Mobile Navigation Overlay (Slide-in von links, wie competenceontop) */
.prime-mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.78);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.prime-mobile-nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.prime-mobile-nav-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 22rem;
  height: 100%;
  max-height: 100vh;
  max-height: -webkit-fill-available;
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.prime-mobile-nav-overlay.is-open .prime-mobile-nav-container {
  transform: translateX(0);
}

@media (max-width: 479.98px) {
  .prime-mobile-nav-container {
    max-width: 100%;
  }
}

.prime-mobile-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.prime-mobile-nav-logo img {
  max-height: 2.75rem;
  width: auto;
  object-fit: contain;
}

.prime-mobile-nav-close {
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  background: rgba(0, 0, 0, 0.06);
  color: #333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.prime-mobile-nav-close:hover {
  background: rgba(var(--bs-primary-rgb), 0.12);
  color: var(--bs-primary);
}

.prime-mobile-nav-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0.75rem 0 1.5rem;
  touch-action: pan-y;
}

.prime-mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.prime-mobile-nav-item {
  margin: 0;
}

.prime-mobile-nav-link {
  display: block;
  padding: 1rem 1.5rem;
  color: #333;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.05rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    padding-left 0.2s ease;
}

.prime-mobile-nav-link:hover {
  background: rgba(var(--bs-primary-rgb), 0.06);
  color: var(--bs-primary);
}

.prime-mobile-nav-cta {
  padding: 1.25rem 1.5rem 0.5rem;
}

body.prime-mobile-nav-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
}

/* Mobile-Hamburger: groß, weißer Hintergrund, schwarzes Icon (gut sichtbar auf Video/Hero) */
.navbar-expand-lg .navbar-toggler.prime-mobile-nav-toggle {
  border: none;
  padding: 0;
  width: 3.375rem;
  height: 3.375rem;
  min-width: 3.375rem;
  min-height: 3.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff !important;
  border-radius: 50%;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.12);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle
  .navbar-toggler-default
  i {
  color: #212529 !important;
  font-size: 1.875rem;
  line-height: 1;
}

.navbar-expand-lg .navbar-toggler.prime-mobile-nav-toggle:hover {
  transform: scale(1.05);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

.navbar-expand-lg .navbar-toggler.prime-mobile-nav-toggle:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* Text-Selektion - Heller Hintergrund mit Primärfarbe für Text */
::selection {
  background-color: rgba(var(--bs-primary-rgb), 0.2);
  color: var(--bs-primary);
}

::-moz-selection {
  background-color: rgba(var(--bs-primary-rgb), 0.2);
  color: var(--bs-primary);
}

/* List Checked mit Nummern statt Haken */
.list-checked-primary .list-checked-item[data-number]::before {
  content: attr(data-number) !important;
  background-image: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  color: var(--bs-primary) !important;
  font-size: 0.875rem !important;
}

/* Job Detail Page - HTML Content Styling */
.card-body ul,
.card-body ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.card-body li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.card-body p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

/* Entferne überflüssige inline Styles von Draft.js */
.card-body .public-DraftStyleDefault-block {
  margin: 0 !important;
  padding: 0 !important;
}

.card-body .public-DraftStyleDefault-block span {
  display: inline !important;
  float: none !important;
}

/* Bereinige Listen-Styling */
.card-body ul li,
.card-body ol li {
  list-style-position: outside;
}

.card-body ul[style*='list-style-type'] {
  list-style-type: disc !important;
}

/* Input Group Icon - Sichtbar bleiben beim Focus */
.input-group .input-group-text .bi-search::before,
.input-group .input-group-prepend .bi-search::before {
  content: '\f52a' !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.input-group .input-group-text .bi-geo-alt::before,
.input-group .input-group-prepend .bi-geo-alt::before {
  content: '\f3e8' !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Input Group Text - Sichtbar bleiben beim Focus */
.input-group:focus-within .input-group-text,
.input-group:focus-within .input-group-prepend {
  z-index: 6 !important;
}

/* Form Select – dunkles Theme (Sortierung Jobs etc.): heller Text, kein Grau auf dunklem Grund */
.form-select {
  color: #e4ebf7 !important;
}

.form-select.has-value {
  color: #e4ebf7 !important;
}

.form-select option[value=''] {
  color: #9eabbe !important;
}

.form-select option:not([value='']) {
  color: #1e2022 !important;
}

/* Form Check Input - Primärfarbe für Checkboxen */
.form-check-input:checked {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.form-check-input:focus {
  border-color: rgba(var(--bs-primary-rgb), 0.35) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* Matching Form - Navigation Buttons */
.matching-nav-btn {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  min-width: 120px;
}

.matching-nav-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.matching-nav-btn:active {
  transform: translateY(0);
}

/* Matching Form - Step Display */
#stepCounter {
  font-size: 1.125rem;
  font-weight: 500;
}

#stepSubtitle {
  font-size: 1rem;
  color: #677788;
}

.matching-step-progress {
  height: 0.5rem;
  border-radius: 999px;
  background: #e7ebf3;
}

.matching-step-progress .progress-bar {
  transition: width 0.25s ease;
}

.matching-question {
  border: 1px solid #e7ebf3;
  border-radius: 0.75rem;
  padding: 1rem;
  background: #fff;
}

#dynamicExtraFields {
  display: grid;
  gap: 0.75rem;
}

.matching-open-system-btn {
  width: 100%;
  text-align: left;
  font-weight: 500;
  border-color: #d4ddea;
  color: #1e2022;
  background: #fff;
}

.matching-open-system-btn:hover {
  border-color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), 0.03);
}

.matching-open-system-btn.active,
.matching-open-system-btn.active:hover,
.matching-open-system-btn.active:focus {
  border-color: var(--bs-primary) !important;
  background: rgba(var(--bs-primary-rgb), 0.08) !important;
  color: #48135f !important;
}

.form-check-input[type='checkbox']:indeterminate {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

/* Pagination - Primärfarbe für aktive und hover-Zustände */
.pagination .page-item.active .page-link {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}

.pagination .page-link:hover {
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.pagination .page-link:focus {
  color: var(--bs-primary) !important;
  border-color: rgba(var(--bs-primary-rgb), 0.35) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* Reference Number Button - Hover Effect */
#copyReferenceBtn {
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

#copyReferenceBtn:hover {
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
  background-color: rgba(var(--bs-primary-rgb), 0.05) !important;
}

#copyReferenceBtn:hover .bi-clipboard {
  color: var(--bs-primary) !important;
}

#copyReferenceBtn:active {
  transform: scale(0.98);
}

/* Job ID Button - Hover Effect (gleiche Styles wie Reference Button) */
#copyJobIdBtn {
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

#copyJobIdBtn:hover {
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
  background-color: rgba(var(--bs-primary-rgb), 0.05) !important;
}

#copyJobIdBtn:hover .bi-clipboard {
  color: var(--bs-primary) !important;
}

#copyJobIdBtn:active {
  transform: scale(0.98);
}

/* Button White: heller Fläche, Schrift bei Hover dunkel (nicht Primär-Gelb, sonst unleserlich) */
.btn-check:focus + .btn-white:not(.active),
.btn-check:focus-visible + .btn-white:not(.active),
.btn-white:focus:not(.active),
.btn-white:focus-visible:not(.active),
.btn-white:hover:not(.active) {
  color: #090d14 !important;
  border-color: var(--bs-primary) !important;
  background-color: #ffffff !important;
}

/* Button White - Ursprungszustand wenn aktiviert */
.btn-check:checked + .btn-white,
.btn-white.active {
  color: inherit !important;
  border-color: inherit !important;
}

/* Sticky Sidebar - Anpassung wenn Header sticky wird */
#jobDetailSidebar {
  transition: top 0.3s ease;
}

/* Dropzone - Fehlermeldungen begrenzen und formatieren */
.dz-dropzone .dz-preview {
  max-width: 100% !important;
  width: auto !important;
}

.dz-dropzone .dz-preview .dz-details {
  max-width: 100%;
  overflow: hidden;
}

.dz-dropzone .dz-preview .dz-filename {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}

.dz-dropzone .dz-preview .dz-error-message {
  max-width: 300px !important;
  width: auto !important;
  word-wrap: break-word !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
}

.dz-dropzone .dz-preview .dz-error-message:after {
  left: 50% !important;
  margin-left: -6px !important;
}

/* Application Steps - Eigenes CSS-System */
.application-steps-container {
  position: relative;
  width: 100%;
}

.application-steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  flex-wrap: nowrap;
  position: relative;
  width: 100%;
  padding: 0 1.5rem;
}

.application-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
  z-index: 2;
}

/* Linke Verbindungslinie - vom Container-Rand zum ersten Schritt */
.application-step-connector-left {
  position: absolute;
  top: 1.25rem;
  left: 0;
  width: calc(25% - 0.25rem);
  height: 2px;
  background-color: #e7eaf3;
  z-index: 1;
  transform: translateY(-50%);
  transition: background-color 0.3s ease;
}

/* Linke Linie wird primärfarbig wenn Schritt 1, 2 oder 3 aktiv ist (immer wenn wir nicht vor Schritt 1 sind) */
.application-steps-container.step-1-active .application-step-connector-left,
.application-steps-container.step-2-active .application-step-connector-left,
.application-steps-container.step-3-active .application-step-connector-left {
  background-color: var(--bs-primary);
}

/* Rechte Verbindungslinie - vom letzten Schritt zum Container-Rand */
.application-step-connector-right {
  position: absolute;
  top: 1.25rem;
  right: 0;
  width: calc(25% - 0.25rem);
  height: 2px;
  background-color: #e7eaf3;
  z-index: 1;
  transform: translateY(-50%);
  transition: background-color 0.3s ease;
}

/* Rechte Linie wird primärfarbig wenn Schritt 3 aktiv ist */
.application-steps-container.step-3-active .application-step-connector-right {
  background-color: var(--bs-primary);
}

/* Verbindungslinien zwischen den Schritten - genau auf Höhe der Kreise */
.application-step-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 1.25rem; /* Exakt auf Höhe der Kreismitte (2.5rem / 2 = 1.25rem) */
  left: calc(50% + 1.25rem);
  width: calc(100% - 2.5rem);
  height: 2px;
  background-color: #e7eaf3;
  z-index: 1;
  transform: translateY(-50%);
  transition: background-color 0.3s ease;
}

/* Linie zwischen Schritt 1 und 2 wird primärfarbig wenn Schritt 2 oder 3 aktiv ist */
/* Schritt 1 ist das 2. Kind (nach connector-left) */
.application-steps-container.step-2-active
  .application-step-item:nth-child(2)::after,
.application-steps-container.step-3-active
  .application-step-item:nth-child(2)::after {
  background-color: var(--bs-primary);
}

/* Linie zwischen Schritt 2 und 3 wird primärfarbig wenn Schritt 3 aktiv ist */
/* Schritt 2 ist das 3. Kind (nach connector-left und Schritt 1) */
.application-steps-container.step-3-active
  .application-step-item:nth-child(3)::after {
  background-color: var(--bs-primary);
}

.application-step-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  color: #677788;
  background-color: #e7eaf3;
  border: 2px solid #e7eaf3;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

/* Aktiver Schritt - Primärfarbe */
.application-step-item.active .application-step-icon {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Abgeschlossener Schritt - Primärfarbe */
.application-step-item.completed .application-step-icon {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.application-step-title {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #677788;
  text-align: center;
  white-space: nowrap;
  transition: color 0.3s ease;
}

/* Aktiver Schritt - Primärfarbe */
.application-step-item.active .application-step-title {
  color: var(--bs-primary);
}

/* Abgeschlossener Schritt - Primärfarbe */
.application-step-item.completed .application-step-title {
  color: var(--bs-primary);
}

/* Responsive - Mobile */
@media (max-width: 767.98px) {
  .application-steps {
    padding: 0 0.5rem;
  }

  .application-step-connector-left {
    left: 0;
    width: calc(20% - 0.25rem);
  }

  .application-step-connector-right {
    right: 0;
    width: calc(20% - 0.25rem);
  }

  .application-step-item:not(:last-child)::after {
    width: calc(100% - 1.5rem);
    left: calc(50% + 0.75rem);
  }

  .application-step-icon {
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
  }

  .application-step-connector-left,
  .application-step-connector-right,
  .application-step-item:not(:last-child)::after {
    top: 1rem; /* Angepasst für kleinere Icons (2rem / 2 = 1rem) */
  }

  .application-step-title {
    font-size: 0.75rem;
    margin-top: 0.5rem;
  }
}

@media (max-width: 575.98px) {
  .application-steps {
    padding: 0 0.25rem;
  }

  .application-step-connector-left {
    left: 0;
    width: calc(15% - 0.125rem);
  }

  .application-step-connector-right {
    right: 0;
    width: calc(15% - 0.125rem);
  }

  .application-step-item:not(:last-child)::after {
    width: calc(100% - 1rem);
    left: calc(50% + 0.5rem);
  }

  .application-step-icon {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.6875rem;
  }

  .application-step-connector-left,
  .application-step-connector-right,
  .application-step-item:not(:last-child)::after {
    top: 0.875rem; /* Angepasst für kleinere Icons (1.75rem / 2 = 0.875rem) */
    height: 1.5px;
  }

  .application-step-title {
    font-size: 0.6875rem;
    margin-top: 0.5rem;
    line-height: 1.2;
  }
}

/* Form Validation - Fehleranzeige für Dropzone */
.dz-dropzone.border-danger {
  border-color: #ed4c78 !important;
  border-width: 2px !important;
}

#resumeError {
  color: #ed4c78;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

/* Job-Detailseite: Kopfbereich – bg-light-Band, helle Typo (body.page-job-detail) */
.page-job-detail .job-detail-page-hero.bg-light {
  background-color: var(--jb-bg-soft-band) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0;
}

/* Abstand Breadcrumb → Überschrift (nicht zwischen Titelzeilen) */
.job-detail-page-hero-nav {
  margin-bottom: 2.25rem !important;
}

@media (min-width: 992px) {
  .job-detail-page-hero-nav {
    margin-bottom: 3rem !important;
  }
}

.page-job-detail .job-detail-page-hero-breadcrumb .breadcrumb-item a {
  color: var(--jb-accent) !important;
}

.page-job-detail .job-detail-page-hero-breadcrumb .breadcrumb-item a:hover,
.page-job-detail .job-detail-page-hero-breadcrumb .breadcrumb-item a:focus {
  color: var(--jb-accent-hover) !important;
}

.page-job-detail .job-detail-page-hero-breadcrumb .breadcrumb-item.active {
  color: rgba(232, 237, 246, 0.95) !important;
  font-weight: 500;
}

.page-job-detail
  .job-detail-page-hero-breadcrumb
  .breadcrumb-item
  + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.35);
}

.job-detail-page-hero-header.page-header {
  border-bottom: none !important;
  padding-bottom: 0;
}

.page-job-detail .job-detail-page-hero-header .page-header-title {
  color: #f2f6ff !important;
}

.page-job-detail .job-detail-page-hero .text-dark,
.page-job-detail .job-detail-page-hero .text-body {
  color: rgba(220, 228, 240, 0.95) !important;
}

.page-job-detail .job-detail-page-hero h2.h5 {
  color: rgba(220, 228, 240, 0.95) !important;
}

.page-job-detail .job-detail-page-hero .small.text-body {
  color: rgba(200, 210, 225, 0.88) !important;
}

/* Weiße Buttons (Job-ID, Teilen) auf dunklem Hero */
.page-job-detail .job-detail-page-hero .btn-white {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #e8edf6 !important;
}

.page-job-detail .job-detail-page-hero .btn-white:hover,
.page-job-detail .job-detail-page-hero .btn-white:focus {
  background-color: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
}

.page-job-detail .job-detail-page-hero .btn-white i {
  color: inherit !important;
}

/* Job-ID-Kopieren: #copyReferenceBtn:hover nutzt global dunkles Akzent-Grün – auf Hero unsichtbar; Hero-Optik erzwingen */
.page-job-detail .job-detail-page-hero #copyReferenceBtn:hover,
.page-job-detail .job-detail-page-hero #copyReferenceBtn:focus,
.page-job-detail .job-detail-page-hero #copyReferenceBtn:focus-visible {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.page-job-detail .job-detail-page-hero #copyReferenceBtn:hover .bi-clipboard,
.page-job-detail .job-detail-page-hero #copyReferenceBtn:focus .bi-clipboard,
.page-job-detail
  .job-detail-page-hero
  #copyReferenceBtn:focus-visible
  .bi-clipboard {
  color: inherit !important;
}

@media (prefers-reduced-motion: reduce) {
  .page-job-detail .job-detail-page-hero.bg-light {
    box-shadow: none;
  }
}

/* bg-light auf Cards: weicher Band-Ton (überschreibt globales .card / .card-header) */
.card.bg-light,
.card.bg-light > .card-header,
.card.bg-light > .card-body,
.card.bg-light > .card-footer {
  background-color: var(--jb-bg-soft-band) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.card.bg-light {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}

/* Startseite: Branchen-Streifen – volle Breite, bg-light wie Testimonials */
.home-industry-strip {
  overflow: hidden;
}

.home-industry-strip__grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .home-industry-strip__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .home-industry-strip__panel:last-of-type {
    grid-column: 1 / -1;
  }
}

.home-industry-strip__panel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  min-height: 22rem;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background-color: transparent;
  box-shadow: none;
  isolation: isolate;
}

.home-industry-strip__panel:last-child {
  border-bottom: 0;
}

@media (max-width: 767.98px) {
  .home-industry-strip__panel {
    min-height: clamp(20rem, 62vw, 26rem);
  }

  /* Bildband oben: Mindesthöhe, damit Foto sichtbar bleibt */
  .home-industry-strip__stretch {
    flex: 0 0 auto;
    min-height: clamp(9.5rem, 32vw, 12.5rem);
    height: clamp(9.5rem, 32vw, 12.5rem);
    overflow: hidden;
  }

  .home-industry-strip__content {
    margin-top: 0;
    flex-shrink: 0;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .home-industry-strip__panel {
    min-height: 32rem;
  }

  .home-industry-strip__stretch {
    flex: 1 1 auto;
    min-height: 14rem;
  }
}

.home-industry-strip__stretch {
  flex: 1 1 auto;
  min-height: 0;
}

@media (min-width: 1200px) {
  .home-industry-strip__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: minmax(22rem, 1fr) auto;
    gap: 0;
  }

  .home-industry-strip__panel {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    min-height: 0;
    border-bottom: 0;
  }

  .home-industry-strip__panel + .home-industry-strip__panel {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
  }

  .home-industry-strip__stretch {
    min-height: 0;
  }

  .home-industry-strip__content {
    align-self: end;
  }
}

/* Browser ohne Subgrid: Bild oben, Textblock unten */
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 1200px) {
    .home-industry-strip__panel {
      display: grid;
      grid-template-rows: minmax(22rem, 1fr) auto;
      min-height: 22rem;
    }
  }
}

.home-industry-strip__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--home-industry-bg);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.home-industry-strip__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to top,
      rgba(var(--jb-accent-rgb), 0.48) 0%,
      rgba(var(--jb-accent-rgb), 0.22) 22%,
      rgba(var(--jb-accent-rgb), 0.06) 42%,
      transparent 58%
    ),
    linear-gradient(
      to top,
      rgba(24, 23, 40, 0.94) 0%,
      rgba(24, 23, 40, 0.72) 32%,
      rgba(24, 23, 40, 0.1) 58%,
      rgba(8, 10, 12, 0.32) 100%
    );
  pointer-events: none;
}

.home-industry-strip__content {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 1.15rem 1.25rem 1.35rem;
  background: transparent;
}

@media (min-width: 768px) {
  .home-industry-strip__content {
    padding-left: 1.35rem;
    padding-right: 1.35rem;
  }
}

@media (min-width: 1200px) {
  .home-industry-strip__content {
    padding: 1.2rem 1.35rem 1.4rem;
  }
}

.home-industry-strip__num {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  margin: 0;
  font-size: calc(1.325rem + 0.9vw);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

@media (min-width: 1400px) {
  .home-industry-strip__num {
    font-size: 2rem;
  }
}

@media (min-width: 1200px) {
  .home-industry-strip__num {
    top: 1.25rem;
    left: 1.25rem;
  }
}

.home-industry-strip__title {
  position: relative;
  z-index: 2;
  padding: 0;
  font-weight: 700;
  line-height: 1.2;
  color: #f2f6ff !important;
}

.home-industry-strip__text {
  position: relative;
  z-index: 2;
  padding: 0.65rem 0 0;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(232, 237, 246, 0.92) !important;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

@media (min-width: 1200px) {
  .home-industry-strip__title {
    padding-top: 0;
  }

  .home-industry-strip__text {
    padding-top: 0.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-industry-strip__panel::before {
    background-attachment: scroll;
  }
}

/* Job List Hero – nur Verlauf (z. B. Kundenstimmen; gemeinsame Klasse) */
.job-list-hero-gradient {
  background: radial-gradient(
    ellipse at center,
    #0e1218 0%,
    rgba(242, 255, 30, 0.07) 42%,
    rgba(242, 255, 30, 0.16) 72%,
    rgba(30, 36, 12, 0.92) 100%
  );
  position: relative;
}

/* 404, Datenschutz, Impressum: Hero – bg-light-Band */
.page-404 .job-list-hero-gradient.bg-light,
.page-datenschutz .job-list-hero-gradient.bg-light,
.page-impressum .job-list-hero-gradient.bg-light {
  background-color: var(--jb-bg-soft-band) !important;
  background-image: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}

.page-404 .job-list-hero-gradient.border-bottom,
.page-datenschutz .job-list-hero-gradient.border-bottom,
.page-impressum .job-list-hero-gradient.border-bottom {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.page-404 .job-list-hero-gradient h1,
.page-datenschutz .job-list-hero-gradient h1,
.page-impressum .job-list-hero-gradient h1 {
  color: #f2f6ff !important;
}

.page-404 .job-list-hero-gradient .lead.text-muted,
.page-datenschutz .job-list-hero-gradient .lead.text-muted,
.page-impressum .job-list-hero-gradient .lead.text-muted {
  color: rgba(232, 237, 246, 0.88) !important;
}

.page-404 .job-list-hero-gradient .btn-outline-primary {
  color: var(--jb-accent) !important;
  border-color: var(--jb-accent) !important;
  background-color: transparent !important;
}

.page-404 .job-list-hero-gradient .btn-outline-primary:hover,
.page-404 .job-list-hero-gradient .btn-outline-primary:focus {
  color: #171b08 !important;
  background-color: var(--jb-accent) !important;
  border-color: var(--jb-accent) !important;
}

.page-404 .job-list-hero-gradient .btn-link.text-dark {
  color: rgba(255, 255, 255, 0.92) !important;
}

.page-404 .job-list-hero-gradient .btn-link.text-dark:hover,
.page-404 .job-list-hero-gradient .btn-link.text-dark:focus {
  color: var(--jb-accent) !important;
}

.page-404 main > .container .text-muted,
.page-datenschutz main > .container .text-muted,
.page-impressum main > .container .text-muted,
.page-empfehlungsbonus main > .container .text-muted {
  color: rgba(180, 195, 215, 0.9) !important;
}

.page-404 main > .container a:not(.btn),
.page-datenschutz main > .container a:not(.btn),
.page-impressum main > .container a:not(.btn),
.page-empfehlungsbonus main > .container a:not(.btn) {
  color: var(--jb-accent) !important;
}

.page-404 main > .container a:not(.btn):hover,
.page-datenschutz main > .container a:not(.btn):hover,
.page-impressum main > .container a:not(.btn):hover,
.page-empfehlungsbonus main > .container a:not(.btn):hover {
  color: var(--jb-accent-hover) !important;
}

/* Stellenübersicht: Foto-Hintergrund nur auf /jobs */
.page-jobs .job-list-hero-gradient {
  background-color: var(--jb-body-bg);
  background-image: url('/assets/img/jobs/tueren.jpg');
  background-size: cover;
  background-position: center 80%;
  background-repeat: no-repeat;
}

/* Input-Card (Jobs-Hero etc.): abgesetzte Purple-Fläche wie Suchleiste */
.input-card {
  background-color: var(--jb-bg-soft-band) !important;
  box-shadow: var(--jb-field-shadow);
  border: 1px solid var(--jb-field-border);
}

.input-card .form-control,
.input-card .form-select,
.input-card .input-group-text {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.input-card .form-control:focus,
.input-card .form-select:focus {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.input-card .input-card-form:not(:first-child)::before {
  background-color: rgba(255, 255, 255, 0.14) !important;
}

@media (max-width: 575.98px) {
  .input-card-sm .input-card-form {
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
  }
}

/* Jobs-Hero: Suchleiste (Alias – gleiche Fläche wie .input-card global) */
.page-jobs #jobs-hero-filter .input-card {
  background-color: var(--jb-bg-soft-band) !important;
  box-shadow: var(--jb-field-shadow);
  border: 1px solid var(--jb-field-border);
}

.page-jobs
  #jobs-hero-filter
  .input-card
  .input-card-form:not(:first-child)::before {
  background-color: rgba(255, 255, 255, 0.14) !important;
}

@media (max-width: 575.98px) {
  .page-jobs #jobs-hero-filter .input-card-sm .input-card-form {
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
  }
}

/* Jobs: Mobile-Filter als Offcanvas statt in-page Collapse */
.page-jobs .jobs-filter-panel {
  --bs-offcanvas-width: min(100vw, 22rem);
}

@media (max-width: 991.98px) {
  .page-jobs .jobs-filter-panel {
    background-color: var(--jb-body-bg);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }

  .page-jobs .jobs-filter-panel .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .page-jobs .jobs-filter-panel .offcanvas-title {
    color: #f2f6ff !important;
  }

  .page-jobs .jobs-filter-panel .btn-close {
    filter: invert(1) grayscale(1);
    opacity: 0.85;
  }

  .page-jobs .jobs-filter-panel .offcanvas-body {
    padding: 1rem !important;
  }

  .page-jobs #jobs-mobile-filter-count {
    min-width: 1.5rem;
  }

  body.page-jobs .offcanvas-backdrop.show {
    z-index: 2100;
  }

  body.page-jobs #jobsFilterPanel.offcanvas-lg {
    z-index: 2105;
  }
}

@media (min-width: 992px) {
  /* Desktop: rechts wieder als normale Sidebar, nicht als Overlay */
  .page-jobs #jobsFilterPanel.jobs-filter-panel.offcanvas-lg {
    position: static;
    z-index: auto;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transform: none !important;
    visibility: visible !important;
  }

  .page-jobs #jobsFilterPanel.jobs-filter-panel.offcanvas-lg .offcanvas-header {
    display: none;
  }

  .page-jobs #jobsFilterPanel.jobs-filter-panel.offcanvas-lg .offcanvas-body {
    display: block;
    padding: 0 !important;
    overflow: visible;
    background: transparent !important;
    background-color: transparent !important;
  }
}

@media (min-width: 992px) {
  /* /jobs Liste: Filter-Sidebar – Wand-Hintergrund durchscheinen (global .offcanvas überschreiben) */
  .page-jobs .jobs-list-section .jobs-filter-panel.offcanvas,
  .page-jobs .jobs-list-section .jobs-filter-panel .offcanvas-body {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
}

/* Hero Diagonal Cut - Für Unternehmen (dunkles Marken-Layout, kein hellgrau/weiß) */
.hero-diagonal-cut {
  min-height: 350px;
  overflow: hidden;
  background-color: var(--jb-body-bg);
}

@media (min-width: 992px) {
  .hero-diagonal-cut {
    min-height: 450px;
  }
}

.hero-diagonal-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-diagonal-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(5.5rem, 12vw, 8rem);
  background: linear-gradient(
    180deg,
    rgba(11, 13, 16, 0.98) 0%,
    rgba(11, 13, 16, 0.72) 45%,
    rgba(11, 13, 16, 0) 100%
  );
  pointer-events: none;
  z-index: 3;
}

.hero-diagonal-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    115deg,
    #24233b 0%,
    #2a2948 42%,
    #302f52 72%,
    rgba(var(--jb-accent-rgb), 0.07) 100%
  );
  clip-path: polygon(0% 0%, 65% 0%, 45% 100%, 0% 100%);
  z-index: 2;
}

.hero-diagonal-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.hero-diagonal-image picture {
  display: block;
  width: 100%;
  height: 100%;
}

@media (min-width: 1200px) and (max-width: 1769.98px) {
  /* Große Screens: Bildbereich begrenzen, damit es nicht "gestreckt" wirkt */
  .hero-diagonal-image {
    width: min(58vw, 980px);
  }
}

@media (min-width: 1770px) {
  /* Ultra-wide: wieder voll aufziehen, aber mit ruhigerem Zuschnitt */
  .hero-diagonal-cut {
    min-height: 500px;
  }

  .hero-diagonal-image {
    width: 100%;
  }

  .hero-diagonal-image .hero-image {
    object-position: 60% center;
  }
}

.hero-diagonal-image .hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

@media (max-width: 991.98px) {
  .hero-diagonal-gradient {
    width: 100%;
    clip-path: none;
  }

  .hero-diagonal-image {
    display: none;
  }
}

/* Für-Unternehmen-Hero: Typo + Sekundär-Button auf dunklem Grund */
.page-fuer-unternehmen .hero-diagonal-cut .lead {
  color: rgba(232, 237, 246, 0.94) !important;
}

.page-fuer-unternehmen .hero-diagonal-cut .btn-ghost-light {
  color: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  background-color: transparent !important;
}

.page-fuer-unternehmen .hero-diagonal-cut .btn-ghost-light:hover,
.page-fuer-unternehmen .hero-diagonal-cut .btn-ghost-light:focus {
  color: var(--jb-on-accent) !important;
  background-color: var(--jb-accent) !important;
  border-color: var(--jb-accent) !important;
}

/* Paket-Karten: weiße Flächen mit Neon-Glow auf dunklem Grund */
.page-fuer-unternehmen .fuer-unternehmen-paket-card.card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%) !important;
  color: #171b08 !important;
  border: 2px solid rgba(var(--jb-accent-rgb), 0.45) !important;
  border-radius: 1rem !important;
  box-shadow:
    0 0 0 1px rgba(var(--jb-accent-rgb), 0.2),
    0 0 20px rgba(var(--jb-accent-rgb), 0.28),
    0 0 48px rgba(var(--jb-accent-rgb), 0.14),
    0 1rem 2.5rem rgba(0, 0, 0, 0.35);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.page-fuer-unternehmen .fuer-unternehmen-paket-card.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--jb-accent-rgb), 0.55) 20%,
    var(--jb-accent) 50%,
    rgba(var(--jb-accent-rgb), 0.55) 80%,
    transparent 100%
  );
  box-shadow: 0 0 12px rgba(var(--jb-accent-rgb), 0.75);
}

.page-fuer-unternehmen .fuer-unternehmen-paket-card.card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--jb-accent-rgb), 0.85) !important;
  box-shadow:
    0 0 0 1px rgba(var(--jb-accent-rgb), 0.35),
    0 0 28px rgba(var(--jb-accent-rgb), 0.55),
    0 0 64px rgba(var(--jb-accent-rgb), 0.28),
    0 1.25rem 3rem rgba(0, 0, 0, 0.4);
}

.page-fuer-unternehmen .fuer-unternehmen-paket-card--featured.card {
  border-color: var(--jb-accent) !important;
  transform: translateY(-8px);
  box-shadow:
    0 0 0 2px rgba(var(--jb-accent-rgb), 0.55),
    0 0 24px rgba(var(--jb-accent-rgb), 0.85),
    0 0 56px rgba(var(--jb-accent-rgb), 0.45),
    0 1.25rem 3rem rgba(0, 0, 0, 0.42);
}

.page-fuer-unternehmen .fuer-unternehmen-paket-card--featured.card::before {
  height: 5px;
  box-shadow: 0 0 18px rgba(var(--jb-accent-rgb), 1);
}

.page-fuer-unternehmen .fuer-unternehmen-paket-card--featured.card:hover {
  transform: translateY(-10px);
  box-shadow:
    0 0 0 2px var(--jb-accent),
    0 0 32px rgba(var(--jb-accent-rgb), 1),
    0 0 72px rgba(var(--jb-accent-rgb), 0.55),
    0 1.5rem 3.25rem rgba(0, 0, 0, 0.45);
}

.page-fuer-unternehmen .fuer-unternehmen-paket-card .card-body {
  background: transparent !important;
  color: #171b08 !important;
}

.page-fuer-unternehmen .fuer-unternehmen-paket-card h3 {
  color: #171b08 !important;
  font-weight: 700;
}

.page-fuer-unternehmen .fuer-unternehmen-paket-card__price {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  color: #171b08 !important;
}

.page-fuer-unternehmen .fuer-unternehmen-paket-card__price span {
  color: #5c6478 !important;
  font-weight: 500;
}

.page-fuer-unternehmen .fuer-unternehmen-paket-card__tagline {
  color: #5c6478 !important;
}

/* Global `li, small { color: #d7deea }` würde auf weißer Karte unlesbar */
.page-fuer-unternehmen .fuer-unternehmen-paket-card .card-body li,
.page-fuer-unternehmen .fuer-unternehmen-paket-card__list,
.page-fuer-unternehmen .fuer-unternehmen-paket-card__list li,
.page-fuer-unternehmen .fuer-unternehmen-paket-card .card-body small {
  color: #2a2f3d !important;
}

.page-fuer-unternehmen .fuer-unternehmen-paket-card__check {
  color: #5a6200 !important;
  text-shadow: none;
  font-weight: 700;
}

.page-fuer-unternehmen .fuer-unternehmen-paket-card__badge {
  align-self: center;
  display: inline-block;
  margin-bottom: 0.85rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jb-on-accent) !important;
  background: var(--jb-accent) !important;
  box-shadow:
    0 0 12px rgba(var(--jb-accent-rgb), 0.85),
    0 0 24px rgba(var(--jb-accent-rgb), 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .page-fuer-unternehmen .fuer-unternehmen-paket-card.card,
  .page-fuer-unternehmen .fuer-unternehmen-paket-card--featured.card {
    transform: none;
  }

  .page-fuer-unternehmen .fuer-unternehmen-paket-card.card:hover,
  .page-fuer-unternehmen .fuer-unternehmen-paket-card--featured.card:hover {
    transform: none;
  }
}

/* Vergleich: Jobbusters-Karte – weiß mit Neon wie Paket-Karten */
.page-fuer-unternehmen .fuer-unternehmen-compare-jobbusters {
  overflow: hidden;
  border: 2px solid var(--jb-accent) !important;
  border-radius: 1rem !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%) !important;
  box-shadow:
    0 0 0 1px rgba(var(--jb-accent-rgb), 0.35),
    0 0 24px rgba(var(--jb-accent-rgb), 0.45),
    0 0 56px rgba(var(--jb-accent-rgb), 0.2),
    0 1rem 2.5rem rgba(0, 0, 0, 0.35);
}

.page-fuer-unternehmen .fuer-unternehmen-compare-jobbusters .card-header {
  background: var(--jb-accent) !important;
  color: var(--jb-on-accent) !important;
  border-bottom: none !important;
}

.page-fuer-unternehmen .fuer-unternehmen-compare-jobbusters .card-header h4 {
  color: var(--jb-on-accent) !important;
}

.page-fuer-unternehmen .fuer-unternehmen-compare-jobbusters .card-body {
  background: transparent !important;
  color: #2a2f3d !important;
}

.page-fuer-unternehmen .fuer-unternehmen-compare-jobbusters .card-body strong {
  color: #171b08 !important;
}

.page-fuer-unternehmen
  .fuer-unternehmen-compare-jobbusters
  .card-body
  .text-muted {
  color: #5c6478 !important;
}

.page-fuer-unternehmen
  .fuer-unternehmen-compare-jobbusters
  .bi-check-circle-fill {
  color: #5a6200 !important;
}

/* Vergleich: Gegenkarte – abgesetztes Purple-Band */
.page-fuer-unternehmen .fuer-unternehmen-compare-other {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 1rem !important;
  background: linear-gradient(
    165deg,
    var(--jb-body-bg) 0%,
    var(--jb-bg-soft-band) 100%
  ) !important;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.28);
}

.page-fuer-unternehmen .fuer-unternehmen-compare-other__header,
.page-fuer-unternehmen .fuer-unternehmen-compare-other .card-header {
  background: rgba(255, 255, 255, 0.05) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #e8edf6 !important;
}

.page-fuer-unternehmen .fuer-unternehmen-compare-other__header h4,
.page-fuer-unternehmen .fuer-unternehmen-compare-other .card-header h4 {
  color: rgba(232, 237, 246, 0.88) !important;
}

.page-fuer-unternehmen .fuer-unternehmen-compare-other .card-body {
  background: transparent !important;
}

.page-fuer-unternehmen .fuer-unternehmen-compare-other .card-body strong,
.page-fuer-unternehmen .fuer-unternehmen-compare-other .card-body .text-muted,
.page-fuer-unternehmen .fuer-unternehmen-compare-other .card-body p {
  color: rgba(232, 237, 246, 0.72) !important;
}

.page-fuer-unternehmen .fuer-unternehmen-vs-label {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--jb-on-accent) !important;
  background: var(--jb-accent) !important;
  border: 2px solid rgba(var(--jb-accent-rgb), 0.65);
  border-radius: 50rem;
  box-shadow: 0 0 16px rgba(var(--jb-accent-rgb), 0.45);
}

.page-fuer-unternehmen .fuer-unternehmen-vs-divider {
  width: 2px;
  height: 200px;
  margin: 1rem auto;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(var(--jb-accent-rgb), 0.55),
    transparent
  );
}

/* Kunden-Logos: Flex + gap. <lg: Umbruch 2/3 Spalten. ≥lg: eine Zeile, 6 gleich breite Slots */
.hero-client-logos {
  --hero-client-logos-gap: 1.25rem;
  --hero-client-logos-inset: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--hero-client-logos-gap);
  justify-content: center;
  align-items: stretch;
  align-content: flex-start;
}

.hero-client-logos__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
  min-height: 3.5rem;
  /* gleicher Innenabstand links/rechts zum Logo (Rand der Grafik) */
  padding-inline: var(--hero-client-logos-inset);
  flex: 0 0 calc((100% - var(--hero-client-logos-gap)) / 2);
  max-width: calc((100% - var(--hero-client-logos-gap)) / 2);
}

@media (min-width: 576px) {
  .hero-client-logos__cell {
    flex: 0 0 calc((100% - 2 * var(--hero-client-logos-gap)) / 3);
    max-width: calc((100% - 2 * var(--hero-client-logos-gap)) / 3);
  }
}

@media (min-width: 992px) {
  /* Eine Zeile: alle 6 Logos nebeneinander (kein Umbruch) */
  .hero-client-logos {
    flex-wrap: nowrap;
  }

  .hero-client-logos__cell {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    min-height: 3.75rem;
  }
}

.hero-client-logos .hero-client-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* Optische Harmonie: breite Wordmarks etwas kleiner */
.hero-client-logos .hero-client-logo--baywobau {
  max-height: 2.35rem;
}

.hero-client-logos .hero-client-logo--bmw {
  max-height: 3rem;
}

.hero-client-logos .hero-client-logo--knuspr {
  max-height: 2.65rem;
}

.hero-client-logos .hero-client-logo--krausmaffei {
  max-height: 2.05rem;
}

.hero-client-logos .hero-client-logo--muchyp {
  max-height: 2.55rem;
}

.hero-client-logos .hero-client-logo--wacker {
  max-height: 2.4rem;
}

@media (min-width: 768px) {
  .hero-client-logos .hero-client-logo--baywobau {
    max-height: 2.55rem;
  }

  .hero-client-logos .hero-client-logo--bmw {
    max-height: 3.35rem;
  }

  .hero-client-logos .hero-client-logo--knuspr {
    max-height: 2.9rem;
  }

  .hero-client-logos .hero-client-logo--krausmaffei {
    max-height: 2.2rem;
  }

  .hero-client-logos .hero-client-logo--muchyp {
    max-height: 2.8rem;
  }

  .hero-client-logos .hero-client-logo--wacker {
    max-height: 2.6rem;
  }
}

/* Kundenstimmen Hero: bg-hero.png + Verlauf nach unten (analog Über-uns-Overlay) */
.page-kundenstimmen .kundenstimmen-hero {
  position: relative;
  z-index: 1;
  background: #f4f7fb url('/assets/img/kundenstimmen/bg-hero.png') center /
    cover no-repeat;
}

/* Wie Über-uns-Verlauf, nur minimal heller in der Mitte → Bild bleibt gut sichtbar */
.page-kundenstimmen .kundenstimmen-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(255, 255, 255, 0.76) 11%,
    rgba(255, 255, 255, 0.28) 28%,
    rgba(255, 255, 255, 0.14) 44%,
    rgba(255, 255, 255, 0.14) 56%,
    rgba(255, 255, 255, 0.3) 68%,
    rgba(255, 255, 255, 0.58) 76%,
    rgba(255, 255, 255, 0.84) 84%,
    rgba(255, 255, 255, 0.94) 90%,
    #ffffff 100%
  );
}

.page-kundenstimmen .kundenstimmen-hero__inner {
  position: relative;
  z-index: 2;
}

@media (min-width: 768px) {
  .page-kundenstimmen .kundenstimmen-hero {
    min-height: min(52vh, 28rem);
  }

  .page-kundenstimmen .kundenstimmen-hero__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: min(48vh, 26rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-kundenstimmen .kundenstimmen-hero__overlay {
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.9) 40%,
      rgba(255, 255, 255, 0.95) 70%,
      #ffffff 100%
    );
  }
}

/* Seite Kundenstimmen: harmonisches Split-Layout für Video + Text */
.page-kundenstimmen .kundenstimmen-story {
  max-width: 88rem;
  margin-left: auto;
  margin-right: auto;
}

.page-kundenstimmen .kundenstimmen-video-wrap {
  border-radius: 1rem;
  overflow: hidden;
  background-color: #eceff3;
  box-shadow:
    0 10px 26px rgba(19, 33, 68, 0.14),
    0 2px 8px rgba(19, 33, 68, 0.08);
}

.page-kundenstimmen .ratio > .kundenstimmen-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Kein Schwarz als „Platzhalter“ (war mit schwarzem ersten Eindruck auf Mobil) */
  background-color: #eceff3;
}

.page-kundenstimmen .kundenstimmen-copy {
  position: relative;
  padding-bottom: 0 !important;
}

/* Gleiche Spaltenbreite für alle Video+Text-Stimmen (INVENIO + Kandidaten) */
.page-kundenstimmen .kundenstimmen-candidates-list {
  max-width: 68rem;
  margin-left: auto;
  margin-right: auto;
}

.page-kundenstimmen .kundenstimmen-story--company .kundenstimmen-copy,
.page-kundenstimmen .kundenstimmen-story--candidate .kundenstimmen-copy {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

.page-kundenstimmen .kundenstimmen-story--candidate .blockquote {
  color: #1f2b3d;
}

/* „Neue Perspektiven“: mehr Luft zwischen den Blöcken */

.page-kundenstimmen .kundenstimmen-candidate-block:not(:last-child) {
  margin-bottom: 3.75rem;
  padding-bottom: 1.75rem;
}

@media (min-width: 768px) {
  .page-kundenstimmen .kundenstimmen-candidate-block:not(:last-child) {
    margin-bottom: 4.75rem;
    padding-bottom: 2rem;
  }
}

@media (min-width: 1200px) {
  .page-kundenstimmen .kundenstimmen-candidate-block:not(:last-child) {
    margin-bottom: 5.75rem;
    padding-bottom: 2.25rem;
  }
}

/* Empfehlungsbonus: Hero – bg-light-Band, Foto dezent rechts, helle Typo */
.page-empfehlungsbonus .empfehlungsbonus-hero.bg-light {
  position: relative;
  overflow: hidden;
  background-color: var(--jb-bg-soft-band) !important;
  background-image: url('/assets/img/empfehlung/bg-empfehlung.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto min(100%, 1080px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}

.page-empfehlungsbonus .empfehlungsbonus-hero.border-bottom {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Linker Bereich: Band-Ton für Typo; nach rechts ausblenden – Foto bleibt sichtbar */
.page-empfehlungsbonus .empfehlungsbonus-hero.bg-light::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    var(--jb-bg-soft-band) 0%,
    rgba(24, 23, 40, 0.94) 22%,
    rgba(24, 23, 40, 0.65) 42%,
    rgba(24, 23, 40, 0.28) 62%,
    rgba(24, 23, 40, 0.08) 78%,
    transparent 100%
  );
}

.page-empfehlungsbonus .empfehlungsbonus-hero .container {
  position: relative;
  z-index: 1;
}

.page-empfehlungsbonus .empfehlungsbonus-hero h1 {
  color: #f2f6ff !important;
}

.page-empfehlungsbonus .empfehlungsbonus-hero .lead.text-muted {
  color: rgba(232, 237, 246, 0.9) !important;
}

.page-empfehlungsbonus .empfehlungsbonus-hero .lead .text-dark {
  color: var(--jb-accent) !important;
}

@media (max-width: 575.98px) {
  .page-empfehlungsbonus .empfehlungsbonus-hero.bg-light {
    background-size: auto min(85%, 520px);
    background-position: right -8% center;
  }

  .page-empfehlungsbonus .empfehlungsbonus-hero.bg-light::before {
    background: linear-gradient(
      165deg,
      var(--jb-bg-soft-band) 0%,
      rgba(24, 23, 40, 0.88) 35%,
      rgba(24, 23, 40, 0.45) 55%,
      rgba(24, 23, 40, 0.12) 75%,
      transparent 100%
    );
  }
}

/* Empfehlungsbonus: linke Spalte – Theme `.list-checked-item` ist #677788 (auf dunklem Grund kaum lesbar) */
.page-empfehlungsbonus main .list-checked .list-checked-item {
  color: rgba(255, 255, 255, 0.94) !important;
}

.page-empfehlungsbonus main .list-checked .list-checked-item:hover {
  color: #fff !important;
}

.page-empfehlungsbonus main #empfehlungsbonus-how-title {
  color: #f2f6ff !important;
}

/* Startseite: „So starten Sie durch“ – Job-Karten-Layout, kräftige Neon-Gradienten + farbiger Glow */
#featuresSection > .row {
  overflow: visible;
  padding-bottom: 1.75rem;
}

#featuresSection [class*='col-'] {
  overflow: visible;
}

#featuresSection .home-so-start-card {
  border: 1px solid rgba(11, 13, 16, 0.12) !important;
  isolation: isolate;
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

#featuresSection a.home-so-start-card .card-footer {
  background-color: transparent !important;
  color: #0b0d10 !important;
  border-top-color: rgba(11, 13, 16, 0.1) !important;
}

#featuresSection a.home-so-start-card .card-title,
#featuresSection a.home-so-start-card .card-title.text-dark,
#featuresSection a.home-so-start-card p,
#featuresSection a.home-so-start-card li,
#featuresSection a.home-so-start-card .list-checked-item {
  color: #0b0d10 !important;
}

#featuresSection a.home-so-start-card .card-footer .card-link {
  color: #0b0d10 !important;
  font-weight: 700;
}

#featuresSection a.home-so-start-card .card-footer .card-link:hover,
#featuresSection a.home-so-start-card .card-footer .card-link:focus {
  color: #171b18 !important;
}

/* 🩵 Exklusiv – Cyan-/Neon-Blau */
#featuresSection a.home-so-start-card.home-so-start-card--exclusive {
  background: linear-gradient(
    155deg,
    #bae6fd 0%,
    #38bdf8 42%,
    #0ea5e9 100%
  ) !important;
  color: #0b0d10 !important;
  border-color: rgba(12, 74, 110, 0.38) !important;
  box-shadow:
    0 0 28px rgba(56, 189, 248, 0.55),
    0 16px 48px rgba(14, 165, 233, 0.42),
    0 4px 24px rgba(0, 0, 0, 0.2);
}

#featuresSection a.home-so-start-card.home-so-start-card--exclusive:hover {
  box-shadow:
    0 0 40px rgba(56, 189, 248, 0.65),
    0 22px 58px rgba(14, 165, 233, 0.52),
    0 10px 32px rgba(0, 0, 0, 0.24) !important;
  transform: translateY(-3px);
  border-color: rgba(12, 74, 110, 0.52) !important;
}

#featuresSection .home-so-start-badge--exclusive {
  background-color: rgba(11, 13, 16, 0.14) !important;
  color: var(--bs-primary) !important;
  border: 1px solid rgba(11, 13, 16, 0.14);
  font-weight: 600;
}

#featuresSection
  .home-so-start-card--exclusive
  .list-checked-primary
  .list-checked-item[data-number]::before {
  content: attr(data-number) !important;
  background-image: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  color: #082f49 !important;
  font-size: 0.875rem !important;
  background-color: rgba(255, 255, 255, 0.38) !important;
  border-radius: 999px;
}

#featuresSection
  .home-so-start-card--exclusive
  .list-checked-primary
  .list-checked-item:not([data-number])::before {
  background-image: url("data:image/svg+xml,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.3035 4.76425C13.5718 4.44865 14.0451 4.41027 14.3607 4.67853C14.6763 4.9468 14.7147 5.42012 14.4464 5.73572L8.07144 13.2357C7.79896 13.5563 7.31616 13.5901 7.00171 13.3105L3.62671 10.3105C3.31713 10.0354 3.28924 9.5613 3.56443 9.25172C3.83962 8.94213 4.31367 8.91424 4.62326 9.18943L7.42515 11.68L13.3035 4.76425Z' fill='%230b0d10'/%3e%3c/svg%3e") !important;
}

/* 🔥 Direkt – Neon-Orange */
#featuresSection a.home-so-start-card.home-so-start-card--direct {
  background: linear-gradient(
    155deg,
    #fed7aa 0%,
    #fb923c 45%,
    #f97316 100%
  ) !important;
  color: #0b0d10 !important;
  border-color: rgba(124, 45, 18, 0.38) !important;
  box-shadow:
    0 0 28px rgba(251, 146, 60, 0.55),
    0 16px 48px rgba(249, 115, 22, 0.42),
    0 4px 24px rgba(0, 0, 0, 0.2);
}

#featuresSection a.home-so-start-card.home-so-start-card--direct:hover {
  box-shadow:
    0 0 40px rgba(251, 146, 60, 0.68),
    0 22px 58px rgba(249, 115, 22, 0.52),
    0 10px 32px rgba(0, 0, 0, 0.24) !important;
  transform: translateY(-3px);
  border-color: rgba(124, 45, 18, 0.52) !important;
}

#featuresSection .home-so-start-badge--direct {
  background-color: rgba(11, 13, 16, 0.14) !important;
  color: var(--bs-primary) !important;
  border: 1px solid rgba(11, 13, 16, 0.14);
  font-weight: 600;
}

#featuresSection
  .home-so-start-card--direct
  .list-checked-primary
  .list-checked-item::before {
  background-image: url("data:image/svg+xml,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.3035 4.76425C13.5718 4.44865 14.0451 4.41027 14.3607 4.67853C14.6763 4.9468 14.7147 5.42012 14.4464 5.73572L8.07144 13.2357C7.79896 13.5563 7.31616 13.5901 7.00171 13.3105L3.62671 10.3105C3.31713 10.0354 3.28924 9.5613 3.56443 9.25172C3.83962 8.94213 4.31367 8.91424 4.62326 9.18943L7.42515 11.68L13.3035 4.76425Z' fill='%230b0d10'/%3e%3c/svg%3e") !important;
}

/* 🎁 Empfehlung – Neon-Pink / Rose */
#featuresSection a.home-so-start-card.home-so-start-card--referral {
  background: linear-gradient(
    155deg,
    #fecdd3 0%,
    #fb7185 42%,
    #f43f5e 100%
  ) !important;
  color: #0b0d10 !important;
  border-color: rgba(136, 19, 55, 0.38) !important;
  box-shadow:
    0 0 28px rgba(251, 113, 133, 0.55),
    0 16px 48px rgba(244, 63, 94, 0.42),
    0 4px 24px rgba(0, 0, 0, 0.2);
}

#featuresSection a.home-so-start-card.home-so-start-card--referral:hover {
  box-shadow:
    0 0 40px rgba(251, 113, 133, 0.68),
    0 22px 58px rgba(244, 63, 94, 0.52),
    0 10px 32px rgba(0, 0, 0, 0.24) !important;
  transform: translateY(-3px);
  border-color: rgba(136, 19, 55, 0.52) !important;
}

#featuresSection .home-so-start-badge--referral {
  background-color: rgba(11, 13, 16, 0.14) !important;
  color: var(--bs-primary) !important;
  border: 1px solid rgba(11, 13, 16, 0.14);
  font-weight: 600;
}

#featuresSection
  .home-so-start-card--referral
  .list-checked-primary
  .list-checked-item::before {
  background-image: url("data:image/svg+xml,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.3035 4.76425C13.5718 4.44865 14.0451 4.41027 14.3607 4.67853C14.6763 4.9468 14.7147 5.42012 14.4464 5.73572L8.07144 13.2357C7.79896 13.5563 7.31616 13.5901 7.00171 13.3105L3.62671 10.3105C3.31713 10.0354 3.28924 9.5613 3.56443 9.25172C3.83962 8.94213 4.31367 8.91424 4.62326 9.18943L7.42515 11.68L13.3035 4.76425Z' fill='%230b0d10'/%3e%3c/svg%3e") !important;
}

@media (prefers-reduced-motion: reduce) {
  #featuresSection a.home-so-start-card {
    transition: box-shadow 0.2s ease;
  }

  #featuresSection a.home-so-start-card:hover {
    transform: none;
  }
}

/* Emojis (🩵 🎁): gleiche Zielgröße wie frühere 32px-SVGs */
#featuresSection .home-so-start-card__icon--emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  font-size: 3rem;
  line-height: 1;
  font-style: normal;
  font-variant-emoji: emoji;
}

/* Direkt-Karte: Geist etwas größer als Emoji-Icons (3rem) + Schweben */
#featuresSection .home-so-start-card__icon--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  animation: home-so-start-ghost-float 1.9s ease-in-out infinite;
}

#featuresSection .home-so-start-card__ghost-img {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
  display: block;
}

@keyframes home-so-start-ghost-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-0.45rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  #featuresSection .home-so-start-card__icon--ghost {
    animation: none;
  }
}

/* Startseite + /jobs: Jarallax-Wand-Hintergrund (vendor/jarallax) */
.home-jobs-section,
.jobs-list-section {
  position: relative;
  overflow: hidden;
  background-color: #e6e2de;
}

.home-jobs-section__jarallax,
.jobs-list-section__jarallax {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.home-jobs-section__inner,
.jobs-list-section__inner {
  position: relative;
  z-index: 1;
}

/* Überschrift & Fließtext (ohne Textschatten) */
.home-jobs-section .home-jobs-heading h2 {
  color: #fff;
}

.home-jobs-section .home-jobs-heading p {
  color: rgba(255, 255, 255, 0.95);
}

.home-jobs-section .home-jobs-empty {
  color: rgba(255, 255, 255, 0.92) !important;
}

.home-jobs-section a.btn.btn-white.text-dark,
.home-jobs-section a.btn.btn-white.text-dark:hover,
.home-jobs-section a.btn.btn-white.text-dark:focus {
  color: #1a1a1a !important;
}

.home-jobs-section a.btn.btn-white.text-dark .bi {
  color: inherit;
}

/* Job-Detail: „Wir bieten“, Icon-Timeline (Jobbusters, feste Inhalte) */
.prime-wir-bieten {
  width: 100%;
}

.prime-offer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.prime-offer-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  position: relative;
  padding-bottom: 1.35rem;
}

.prime-offer-item:last-child {
  padding-bottom: 0;
}

/* Vertikale Punktlinie: von unterhalb des Icons bis zum nächsten Eintrag (durchgehend inkl. Abstand) */
.prime-offer-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 1.25rem;
  top: 2.5rem;
  bottom: 0;
  width: 0;
  border-left: 2px dotted rgba(var(--bs-primary-rgb), 0.55);
  z-index: 0;
}

.prime-offer-icon-wrap {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--bs-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  position: relative;
  z-index: 2;
  border: 2px solid #fff;
  box-sizing: border-box;
}

.prime-offer-text {
  padding-top: 0.35rem;
  line-height: 1.45;
  color: var(--bs-body-color);
}

/* Für Unternehmen: Preis-Matrix + dynamische Säulen */
.page-fuer-unternehmen .fuer-unternehmen-matrix-wrap {
  background: linear-gradient(
    180deg,
    var(--jb-body-bg) 0%,
    var(--jb-bg-soft-band) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  box-shadow:
    inset 0 1px 0 rgba(var(--jb-accent-rgb), 0.12),
    0 1rem 2.5rem rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.page-fuer-unternehmen .fuer-unternehmen-matrix {
  margin-bottom: 0 !important;
}

.page-fuer-unternehmen
  .fuer-unternehmen-matrix
  thead
  tr.fuer-unternehmen-matrix__head
  th {
  background-color: #2a2848 !important;
  color: #f2f6ff !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(var(--jb-accent-rgb), 0.18);
}

.page-fuer-unternehmen
  .fuer-unternehmen-matrix
  thead
  tr.fuer-unternehmen-matrix__head
  .text-muted {
  color: #a8b2c4 !important;
}

.page-fuer-unternehmen .fuer-unternehmen-matrix tbody th[scope='row'],
.page-fuer-unternehmen .fuer-unternehmen-matrix tbody td {
  background-color: var(--jb-body-bg) !important;
  color: #e8edf6 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.page-fuer-unternehmen .fuer-unternehmen-matrix tbody .text-primary {
  color: var(--jb-accent) !important;
}

.page-fuer-unternehmen .fuer-unternehmen-matrix tbody .text-secondary {
  color: #7a8499 !important;
}

.fuer-unternehmen-matrix__row--accent,
.page-fuer-unternehmen
  .fuer-unternehmen-matrix
  tbody
  tr.fuer-unternehmen-matrix__row--accent
  th,
.page-fuer-unternehmen
  .fuer-unternehmen-matrix
  tbody
  tr.fuer-unternehmen-matrix__row--accent
  td {
  background-color: #302e4a !important;
  color: #f2f6ff !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 1px 0 rgba(var(--jb-accent-rgb), 0.14);
}

.page-fuer-unternehmen
  .fuer-unternehmen-matrix
  tbody
  tr.fuer-unternehmen-matrix__row--accent
  .text-primary {
  color: var(--jb-accent) !important;
  font-weight: 700;
}

.fuer-unternehmen-matrix__row--accent-dark,
.page-fuer-unternehmen
  .fuer-unternehmen-matrix
  tbody
  tr.fuer-unternehmen-matrix__row--accent-dark
  th,
.page-fuer-unternehmen
  .fuer-unternehmen-matrix
  tbody
  tr.fuer-unternehmen-matrix__row--accent-dark
  td {
  background: linear-gradient(
    90deg,
    var(--jb-bg-soft-band) 0%,
    #24233b 50%,
    var(--jb-bg-soft-band) 100%
  ) !important;
  color: #f2f6ff !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Preis-Matrix: unter md Karten statt 4-Spalten-Tabelle (lesbar, kein Quer-Scroll) */
@media (max-width: 767.98px) {
  .page-fuer-unternehmen .fuer-unternehmen-matrix-wrap.table-responsive {
    overflow: visible !important;
  }

  .page-fuer-unternehmen .fuer-unternehmen-matrix {
    display: block;
    width: 100%;
    border: 0 !important;
  }

  .page-fuer-unternehmen .fuer-unternehmen-matrix thead {
    display: none;
  }

  .page-fuer-unternehmen .fuer-unternehmen-matrix tbody {
    display: block;
    width: 100%;
  }

  .page-fuer-unternehmen .fuer-unternehmen-matrix tbody tr {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.65rem;
    overflow: hidden;
    background: var(--jb-body-bg);
  }

  .page-fuer-unternehmen .fuer-unternehmen-matrix tbody tr:last-child {
    margin-bottom: 0;
  }

  .page-fuer-unternehmen .fuer-unternehmen-matrix tbody tr th[scope='row'] {
    display: block;
    width: 100%;
    text-align: center !important;
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: #2a2848;
    color: #f2f6ff !important;
  }

  .page-fuer-unternehmen
    .fuer-unternehmen-matrix
    tbody
    tr.fuer-unternehmen-matrix__row--accent
    th[scope='row'] {
    background: #302e4a;
    box-shadow: inset 0 1px 0 rgba(var(--jb-accent-rgb), 0.14);
  }

  .page-fuer-unternehmen
    .fuer-unternehmen-matrix
    tbody
    tr.fuer-unternehmen-matrix__row--accent-dark
    th[scope='row'] {
    background: var(--jb-bg-soft-band) !important;
    color: #f2f6ff !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
  }

  .page-fuer-unternehmen .fuer-unternehmen-matrix tbody tr td {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    width: 100% !important;
    text-align: right !important;
    padding: 0.65rem 1rem !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
  }

  .page-fuer-unternehmen .fuer-unternehmen-matrix tbody tr td:last-child {
    border-bottom: none !important;
  }

  .page-fuer-unternehmen .fuer-unternehmen-matrix tbody tr td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.8125rem;
    text-align: left;
    flex-shrink: 0;
    max-width: 48%;
    color: #a8b2c4;
  }

  .page-fuer-unternehmen
    .fuer-unternehmen-matrix
    tbody
    tr.fuer-unternehmen-matrix__row--accent
    td {
    background: #302e4a !important;
    color: #f2f6ff !important;
  }

  .page-fuer-unternehmen
    .fuer-unternehmen-matrix
    tbody
    tr.fuer-unternehmen-matrix__row--accent-dark
    td {
    background: #24233b !important;
    color: #f2f6ff !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
  }

  .page-fuer-unternehmen
    .fuer-unternehmen-matrix
    tbody
    tr.fuer-unternehmen-matrix__row--accent-dark
    td::before {
    color: rgba(242, 246, 255, 0.92);
  }
}

.fuer-unternehmen-matrix__row--accent-dark th,
.fuer-unternehmen-matrix__row--accent-dark td {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Modell-Finder: linke Karte im Purple-Schema */
.page-fuer-unternehmen .fuer-unternehmen-model-card {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 1rem !important;
  background: linear-gradient(
    165deg,
    var(--jb-body-bg) 0%,
    var(--jb-bg-soft-band) 100%
  ) !important;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.28);
}

.page-fuer-unternehmen .fuer-unternehmen-model-card .card-body {
  background: transparent !important;
}

.fuer-unternehmen-pillar-wrap {
  background: linear-gradient(
    165deg,
    var(--jb-body-bg) 0%,
    var(--jb-bg-soft-band) 100%
  );
  border: 2px solid rgba(var(--jb-accent-rgb), 0.35);
  box-shadow:
    0 0 0 1px rgba(var(--jb-accent-rgb), 0.15),
    0 0 24px rgba(var(--jb-accent-rgb), 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.page-fuer-unternehmen .fuer-unternehmen-process-strip {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
}

/* Modell-Finder: Filter links – Struktur & Ausrichtung */
.fuer-unternehmen-criterion {
  padding-bottom: 1.125rem;
  margin-bottom: 1.125rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.fuer-unternehmen-criterion:last-of-type {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Nummer + Label: erste Zeile optisch bündig (Badge leicht nach unten = x-Höhe) */
.fuer-unternehmen-criterion__head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.fuer-unternehmen-criterion__num {
  flex-shrink: 0;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background: rgba(var(--bs-primary-rgb), 0.12);
  color: var(--bs-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-top: 0.1875rem;
}

.fuer-unternehmen-criterion__label {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

.page-fuer-unternehmen .fuer-unternehmen-criterion__label {
  color: #e8edf6;
}

/* Zwei Optionen: klarer „Segmented“-Rahmen, bessere Klickfläche */
.fuer-unternehmen-criterion__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  padding: 0.3rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.page-fuer-unternehmen .fuer-unternehmen-criterion__options .btn {
  min-height: 2.625rem;
  font-weight: 600;
  border-radius: 0.4rem;
  box-shadow: none !important;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.page-fuer-unternehmen .fuer-unternehmen-criterion__options .btn:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(var(--jb-accent-rgb), 0.35) !important;
  z-index: 1;
  position: relative;
}

/* Inaktive Option: dezentes Dunkel statt Weiß */
.page-fuer-unternehmen
  .fuer-unternehmen-criterion__options
  .btn-outline-secondary {
  color: #e8edf6 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
}

.page-fuer-unternehmen
  .fuer-unternehmen-criterion__options
  .btn-outline-secondary:hover,
.page-fuer-unternehmen
  .fuer-unternehmen-criterion__options
  .btn-outline-secondary:focus {
  color: #f2f6ff !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.page-fuer-unternehmen
  .fuer-unternehmen-criterion__options
  .btn-outline-secondary:active {
  color: #f2f6ff !important;
  background-color: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

/* Aktive Option: flaches Gelb ohne Neon-Glow */
.page-fuer-unternehmen .fuer-unternehmen-criterion__options .btn-primary,
.page-fuer-unternehmen .fuer-unternehmen-criterion__options .btn-primary:hover,
.page-fuer-unternehmen .fuer-unternehmen-criterion__options .btn-primary:focus,
.page-fuer-unternehmen
  .fuer-unternehmen-criterion__options
  .btn-primary:active {
  color: var(--jb-on-accent) !important;
  border-color: var(--jb-accent) !important;
  background-color: var(--jb-accent) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.page-fuer-unternehmen .fuer-unternehmen-criterion__options .btn-primary:hover,
.page-fuer-unternehmen .fuer-unternehmen-criterion__options .btn-primary:focus {
  background-color: var(--jb-accent-hover) !important;
  border-color: var(--jb-accent-hover) !important;
}

.page-fuer-unternehmen
  .fuer-unternehmen-criterion__options
  .btn-primary:active {
  background-color: var(--jb-accent-active) !important;
  border-color: var(--jb-accent-active) !important;
}

.fuer-unternehmen-model-intro strong {
  color: #e8edf6;
}

.page-fuer-unternehmen
  .js-fuer-model-toggles
  .fuer-unternehmen-model-intro.text-muted {
  color: rgba(232, 237, 246, 0.78) !important;
}

/* Prozess-Streifen (Icon Blocks): Hintergrund bis zum Viewport-Rand trotz Parent-.container */
.page-fuer-unternehmen .fuer-unternehmen-process-strip {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
}

.page-fuer-unternehmen .fuer-unternehmen-pillar-wrap .text-muted {
  color: rgba(232, 237, 246, 0.82) !important;
}

.page-fuer-unternehmen .fuer-unternehmen-pillar-wrap .text-body {
  color: #f2f6ff !important;
}

.fuer-unternehmen-pillar-row {
  min-height: 0;
}

.fuer-unternehmen-pillar-track {
  flex: 1 1 auto;
  min-height: 10.5rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 992px) {
  .fuer-unternehmen-pillar-track {
    min-height: 15rem;
  }
}

@media (min-width: 1200px) {
  .fuer-unternehmen-pillar-track {
    min-height: 17.5rem;
  }
}

.fuer-unternehmen-pillar-fill {
  width: 72%;
  max-width: 5rem;
  height: var(--pillar-h, 50%);
  min-height: 28%;
  background: linear-gradient(
    180deg,
    rgba(var(--jb-accent-rgb), 0.22) 0%,
    rgba(var(--jb-accent-rgb), 0.42) 100%
  );
  border-radius: 0.65rem 0.65rem 0 0;
  transition: height 0.35s ease;
  opacity: 0.9;
}

.fuer-unternehmen-pillar-fill--accent {
  background: linear-gradient(180deg, #f2ff1e 0%, #dbe800 100%);
  opacity: 1;
  box-shadow:
    0 0 12px rgba(var(--jb-accent-rgb), 0.65),
    0 0 24px rgba(var(--jb-accent-rgb), 0.35);
}

.page-fuer-unternehmen
  .fuer-unternehmen-pillar-wrap
  .js-fuer-pillar-btn.btn-dark {
  background-color: transparent !important;
  color: #e8edf6 !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  font-weight: 600;
}

.page-fuer-unternehmen
  .fuer-unternehmen-pillar-wrap
  .js-fuer-pillar-btn.btn-dark:hover,
.page-fuer-unternehmen
  .fuer-unternehmen-pillar-wrap
  .js-fuer-pillar-btn.btn-dark:focus {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}

.page-fuer-unternehmen
  .fuer-unternehmen-pillar-wrap
  .js-fuer-pillar-btn.btn-primary {
  color: #171b08 !important;
  border-color: var(--bs-primary) !important;
  font-weight: 600;
  box-shadow: 0 4px 18px rgba(var(--bs-primary-rgb), 0.35);
}

.page-fuer-unternehmen
  .fuer-unternehmen-pillar-wrap
  .js-fuer-pillar-btn.btn-primary:hover,
.page-fuer-unternehmen
  .fuer-unternehmen-pillar-wrap
  .js-fuer-pillar-btn.btn-primary:focus {
  color: #171b08 !important;
  background-color: var(--bs-primary);
  filter: brightness(0.97);
}

.page-fuer-unternehmen .fuer-unternehmen-pillar-row .fw-semibold {
  color: #e8edf6;
}

/* Home: Testimonials – Sektion nutzt .bg-light wie übrige Bänder (Farbe in theme-colors) */

.home-testimonials > .container > .text-center .h1,
.home-testimonials > .container > .text-center h2 {
  color: #ffffff !important;
}

.home-testimonials > .container > .text-center > p {
  color: rgba(255, 255, 255, 0.92) !important;
}

.home-testimonials .text-primary {
  color: #f2ff1e !important;
}

.home-testimonials .blockquote,
.home-testimonials .blockquote-footer,
.home-testimonials .blockquote-footer-source {
  color: #f3f6ff !important;
}

.home-testimonials .blockquote-footer {
  opacity: 0.95;
}

/* Video-Karte: kräftiger Gelb-Neon-Hintergrund, ganze Fläche klickbar (<a>) */
.home-testimonials a.home-testimonials__video-card {
  background: linear-gradient(
    155deg,
    #fdff9e 0%,
    var(--jb-accent) 38%,
    #dbe800 100%
  );
  border: 2px solid rgba(23, 27, 8, 0.14) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.45),
    0 10px 36px rgba(0, 0, 0, 0.12),
    0 18px 56px rgba(var(--jb-accent-rgb), 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  overflow: hidden;
  color: var(--jb-on-accent);
}

.home-testimonials a.home-testimonials__video-card:hover {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 14px 44px rgba(0, 0, 0, 0.14),
    0 22px 64px rgba(var(--jb-accent-rgb), 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.home-testimonials a.home-testimonials__video-card:focus-visible {
  outline: 3px solid rgba(11, 13, 16, 0.55);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .home-testimonials a.home-testimonials__video-card:hover {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.45),
      0 10px 36px rgba(0, 0, 0, 0.12),
      0 18px 56px rgba(var(--jb-accent-rgb), 0.45);
  }
}

.home-testimonials__video-kicker {
  opacity: 0.95;
  color: var(--jb-on-accent) !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.home-testimonials__video-lead {
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  color: var(--jb-on-accent) !important;
  font-weight: 500;
}

@media (min-width: 992px) {
  .home-testimonials__video-lead {
    margin-left: 0;
    margin-right: auto;
  }
}

.home-testimonials__video-icon-wrap {
  width: 5.25rem;
  height: 5.25rem;
  background: rgba(11, 13, 16, 0.92);
  border: 2px solid rgba(11, 13, 16, 0.95);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

@media (min-width: 992px) {
  .home-testimonials__video-icon-wrap {
    width: 5.75rem;
    height: 5.75rem;
  }
}

.home-testimonials__video-icon {
  font-size: 2.35rem;
  color: #f2ff1e;
  line-height: 1;
}

@media (min-width: 992px) {
  .home-testimonials__video-icon {
    font-size: 2.6rem;
  }
}

.home-testimonials__video-btn {
  font-weight: 600;
  pointer-events: none;
}

/* CTA-Balken: dunkel auf Gelb (optisch Button; Klick = ganze Karte) */
.home-testimonials__video-card .home-testimonials__video-btn {
  background-color: var(--jb-body-bg) !important;
  color: var(--jb-accent) !important;
  border: 2px solid var(--jb-body-bg) !important;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.2);
}

.home-testimonials
  a.home-testimonials__video-card:hover
  .home-testimonials__video-btn {
  background-color: #171b18 !important;
  color: #f7ff7a !important;
  border-color: #171b18 !important;
}

.home-testimonials__video-card .home-testimonials__video-btn .bi,
.home-testimonials__video-card .home-testimonials__video-btn i {
  color: inherit !important;
}

.home-testimonials__video-btn__play-ico {
  color: inherit !important;
}

@media (max-width: 575.98px) {
  .home-testimonials__video-card .card-body {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .home-testimonials__video-lead {
    font-size: 1.1rem;
  }
}

.home-testimonials__quotes-label {
  letter-spacing: 0.02em;
}

/* Jobbusters color/accessibility overrides */
.navbar.navbar-scrolled.navbar-dark-custom {
  background-color: var(--jb-body-bg);
  box-shadow: 0 0.375rem 1.5rem 0 rgba(0, 0, 0, 0.35);
}

.navbar.navbar-scrolled.navbar-dark-custom .navbar-nav .nav-link {
  color: #e6ebf2;
}

/* Über uns: im Hero oben – Nav weiß (Standard darkNavbar ist sonst grau #677788) */
.page-ueber-uns
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link {
  color: rgba(255, 255, 255, 0.98) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 0 10px rgba(0, 0, 0, 0.25);
}

.page-ueber-uns
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link:hover,
.page-ueber-uns
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link:focus {
  color: #f2ff1e !important;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.55),
    0 0 12px rgba(0, 0, 0, 0.35);
}

.page-ueber-uns
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled).navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle {
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.35);
}

.page-ueber-uns
  .navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle
  .navbar-toggler-default
  i,
.page-ueber-uns
  .navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle
  .navbar-toggler-toggled
  i {
  color: #ffffff !important;
}

/* Für Unternehmen: wie Über uns – Nav oben auf dunklem Hero weiß */
.page-fuer-unternehmen
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link {
  color: rgba(255, 255, 255, 0.98) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 0 10px rgba(0, 0, 0, 0.25);
}

.page-fuer-unternehmen
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link:hover,
.page-fuer-unternehmen
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link:focus {
  color: #f2ff1e !important;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.55),
    0 0 12px rgba(0, 0, 0, 0.35);
}

.page-fuer-unternehmen
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled).navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle {
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.35);
}

.page-fuer-unternehmen
  .navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle
  .navbar-toggler-default
  i,
.page-fuer-unternehmen
  .navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle
  .navbar-toggler-toggled
  i {
  color: #ffffff !important;
}

/* Job-Detail: Nav auf dunklem Hero – wie Für Unternehmen */
.page-job-detail
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link {
  color: rgba(255, 255, 255, 0.98) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 0 10px rgba(0, 0, 0, 0.25);
}

.page-job-detail
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link:hover,
.page-job-detail
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link:focus {
  color: #f2ff1e !important;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.55),
    0 0 12px rgba(0, 0, 0, 0.35);
}

.page-job-detail
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled).navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle {
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.35);
}

.page-job-detail
  .navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle
  .navbar-toggler-default
  i,
.page-job-detail
  .navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle
  .navbar-toggler-toggled
  i {
  color: #ffffff !important;
}

/* 404, Datenschutz, Impressum, Empfehlungsbonus: Nav auf dunklem Bereich – weiße Links */
.page-404
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link,
.page-datenschutz
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link,
.page-impressum
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link,
.page-empfehlungsbonus
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link {
  color: rgba(255, 255, 255, 0.98) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 0 10px rgba(0, 0, 0, 0.25);
}

.page-404
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link:hover,
.page-404
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link:focus,
.page-datenschutz
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link:hover,
.page-datenschutz
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link:focus,
.page-impressum
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link:hover,
.page-impressum
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link:focus,
.page-empfehlungsbonus
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link:hover,
.page-empfehlungsbonus
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link:focus {
  color: #f2ff1e !important;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.55),
    0 0 12px rgba(0, 0, 0, 0.35);
}

.page-404
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled).navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle,
.page-datenschutz
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled).navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle,
.page-impressum
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled).navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle,
.page-empfehlungsbonus
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled).navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle {
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.35);
}

.page-404
  .navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle
  .navbar-toggler-default
  i,
.page-404
  .navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle
  .navbar-toggler-toggled
  i,
.page-datenschutz
  .navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle
  .navbar-toggler-default
  i,
.page-datenschutz
  .navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle
  .navbar-toggler-toggled
  i,
.page-impressum
  .navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle
  .navbar-toggler-default
  i,
.page-impressum
  .navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle
  .navbar-toggler-toggled
  i,
.page-empfehlungsbonus
  .navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle
  .navbar-toggler-default
  i,
.page-empfehlungsbonus
  .navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle
  .navbar-toggler-toggled
  i {
  color: #ffffff !important;
}

/* Kontakt, Express-Bewerbung, Matching: dunkler Seitenhintergrund, Nav oben weiß (wie 404/Empfehlungsbonus) */
.page-kontakt
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link,
.page-express-bewerbung
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link,
.page-matching
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link {
  color: rgba(255, 255, 255, 0.98) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 0 10px rgba(0, 0, 0, 0.25);
}

.page-kontakt
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link:hover,
.page-kontakt
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link:focus,
.page-express-bewerbung
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link:hover,
.page-express-bewerbung
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link:focus,
.page-matching
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link:hover,
.page-matching
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link:focus {
  color: #f2ff1e !important;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.55),
    0 0 12px rgba(0, 0, 0, 0.35);
}

.page-kontakt
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled).navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle,
.page-express-bewerbung
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled).navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle,
.page-matching
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled).navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle {
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.35);
}

.page-kontakt
  .navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle
  .navbar-toggler-default
  i,
.page-kontakt
  .navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle
  .navbar-toggler-toggled
  i,
.page-express-bewerbung
  .navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle
  .navbar-toggler-default
  i,
.page-express-bewerbung
  .navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle
  .navbar-toggler-toggled
  i,
.page-matching
  .navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle
  .navbar-toggler-default
  i,
.page-matching
  .navbar-expand-lg
  .navbar-toggler.prime-mobile-nav-toggle
  .navbar-toggler-toggled
  i {
  color: #ffffff !important;
}

/* Kontakt: Seiteninhalt */
.page-kontakt main > .container h1 {
  color: #f2f6ff;
}

.page-kontakt main > .container p,
.page-kontakt main > .container h5 {
  color: #e8edf6;
}

.page-kontakt main > .container a:not(.btn) {
  color: var(--jb-accent) !important;
}

.page-kontakt main > .container a:not(.btn):hover,
.page-kontakt main > .container a:not(.btn):focus {
  color: var(--jb-accent-hover) !important;
}

/* Kontakt & Empfehlungsbonus: Formular-Karten harmonisch ins Dark Theme */
.page-kontakt .card:has(#contactForm),
.page-empfehlungsbonus .card:has(#referralForm) {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 1rem !important;
  background: linear-gradient(
    165deg,
    var(--jb-body-bg) 0%,
    var(--jb-bg-soft-band) 100%
  ) !important;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.28) !important;
  overflow: hidden;
}

.page-kontakt .card:has(#contactForm) .card-header,
.page-empfehlungsbonus .card:has(#referralForm) .card-header {
  background: transparent !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.page-kontakt .card:has(#contactForm) .card-header-title,
.page-empfehlungsbonus .card:has(#referralForm) .card-header .h4,
.page-empfehlungsbonus .card:has(#referralForm) #empfehlungsbonus-form-title {
  color: #f2f6ff;
}

.page-kontakt .card:has(#contactForm) .card-body,
.page-empfehlungsbonus .card:has(#referralForm) .card-body {
  background: transparent !important;
}

.page-kontakt .card:has(#contactForm) .form-label,
.page-empfehlungsbonus .card:has(#referralForm) .form-label {
  color: #d5dce8 !important;
  font-weight: 500;
}

.page-kontakt .card:has(#contactForm) .form-control,
.page-empfehlungsbonus .card:has(#referralForm) .form-control {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  color: #f2f6ff !important;
}

.page-kontakt .card:has(#contactForm) .form-control::placeholder,
.page-empfehlungsbonus .card:has(#referralForm) .form-control::placeholder {
  color: #8a96ab !important;
}

.page-kontakt .card:has(#contactForm) .form-control:focus,
.page-empfehlungsbonus .card:has(#referralForm) .form-control:focus {
  background-color: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(var(--jb-accent-rgb), 0.35) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--jb-accent-rgb), 0.12) !important;
}

.page-kontakt .card:has(#contactForm) .form-text,
.page-empfehlungsbonus .card:has(#referralForm) .form-text,
.page-empfehlungsbonus .card:has(#referralForm) .text-muted {
  color: rgba(232, 237, 246, 0.62) !important;
}

.page-kontakt .card:has(#contactForm) .btn-primary,
.page-kontakt .card:has(#contactForm) .btn-primary:hover,
.page-kontakt .card:has(#contactForm) .btn-primary:focus,
.page-kontakt .card:has(#contactForm) .btn-primary:active,
.page-empfehlungsbonus .card:has(#referralForm) .btn-primary,
.page-empfehlungsbonus .card:has(#referralForm) .btn-primary:hover,
.page-empfehlungsbonus .card:has(#referralForm) .btn-primary:focus,
.page-empfehlungsbonus .card:has(#referralForm) .btn-primary:active {
  box-shadow: none !important;
}

.page-kontakt .card:has(#contactForm) .btn-primary:hover,
.page-kontakt .card:has(#contactForm) .btn-primary:focus,
.page-empfehlungsbonus .card:has(#referralForm) .btn-primary:hover,
.page-empfehlungsbonus .card:has(#referralForm) .btn-primary:focus {
  background-color: var(--jb-accent-hover) !important;
  border-color: var(--jb-accent-hover) !important;
}

.page-empfehlungsbonus .card:has(#referralForm) legend.h6 {
  color: rgba(232, 237, 246, 0.82) !important;
  letter-spacing: 0.04em;
}

.page-empfehlungsbonus .card:has(#referralForm) .form-check-label {
  color: #d5dce8 !important;
}

.page-empfehlungsbonus
  .card:has(#referralForm)
  .form-check-label
  .link-primary {
  color: var(--jb-accent) !important;
}

.page-empfehlungsbonus
  .card:has(#referralForm)
  .form-check-label
  .link-primary:hover,
.page-empfehlungsbonus
  .card:has(#referralForm)
  .form-check-label
  .link-primary:focus {
  color: var(--jb-accent-hover) !important;
}

/* Startseite & Co.: navbar-light wird nach Scroll dunkel (wie navbar-dark-custom) */
.navbar.navbar-scrolled.navbar-light {
  background-color: var(--jb-body-bg) !important;
  box-shadow: 0 0.375rem 1.5rem 0 rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.navbar.navbar-scrolled.navbar-light .navbar-nav .nav-link {
  color: #e6ebf2 !important;
}

.navbar.navbar-scrolled.navbar-light .navbar-nav .nav-link.active {
  color: #f2ff1e !important;
}

.navbar.navbar-scrolled.navbar-light .navbar-toggler.prime-mobile-nav-toggle {
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.35);
}

.navbar.navbar-scrolled.navbar-light
  .navbar-toggler.prime-mobile-nav-toggle
  .navbar-toggler-default
  i,
.navbar.navbar-scrolled.navbar-light
  .navbar-toggler.prime-mobile-nav-toggle
  .navbar-toggler-toggled
  i {
  color: #e7edf8 !important;
}

.navbar-scrolled .navbar-nav .nav-link:hover,
.navbar-scrolled .navbar-nav .nav-link:focus,
.navbar-dark-custom .navbar-nav .nav-link:hover,
.navbar-dark-custom .navbar-nav .nav-link:focus {
  color: #f2ff1e !important;
}

.prime-mobile-nav-container {
  background: var(--jb-body-bg);
  box-shadow: 6px 0 26px rgba(0, 0, 0, 0.45);
}

.prime-mobile-nav-header {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.prime-mobile-nav-close {
  background: rgba(255, 255, 255, 0.12);
  color: #e7edf8;
}

.prime-mobile-nav-close:hover {
  background: rgba(var(--bs-primary-rgb), 0.24);
  color: #171b08;
}

.prime-mobile-nav-link {
  color: #e7edf8;
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.prime-mobile-nav-link:hover {
  background: rgba(var(--bs-primary-rgb), 0.22);
  color: #171b08;
}

.navbar-expand-lg .navbar-toggler.prime-mobile-nav-toggle:focus-visible {
  outline: 2px solid var(--bs-primary);
}

::selection,
::-moz-selection {
  background-color: rgba(var(--bs-primary-rgb), 0.35);
  color: #171b08;
}

.form-check-input:checked,
.form-check-input[type='checkbox']:indeterminate {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.form-check-input:focus {
  border-color: rgba(var(--bs-primary-rgb), 0.55) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.28) !important;
}

.matching-open-system-btn:hover {
  border-color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), 0.09);
}

.matching-open-system-btn.active,
.matching-open-system-btn.active:hover,
.matching-open-system-btn.active:focus {
  border-color: var(--bs-primary) !important;
  background: rgba(var(--bs-primary-rgb), 0.22) !important;
  color: #1f2507 !important;
}

.pagination .page-item.active .page-link {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #171b08 !important;
}

.pagination .page-link:hover,
.pagination .page-link:focus {
  color: #f2ff1e !important;
  border-color: rgba(242, 255, 30, 0.55) !important;
}

/* Job-ID / Referenz-Kopie: Primary-Gelb (Regel oben nutzte #3f4700 → auf dunklem Grund unsichtbar) */
#copyReferenceBtn:hover,
#copyJobIdBtn:hover,
#copyReferenceBtn:hover .bi-clipboard,
#copyJobIdBtn:hover .bi-clipboard {
  color: #f2ff1e !important;
  border-color: rgba(242, 255, 30, 0.55) !important;
  background-color: rgba(242, 255, 30, 0.1) !important;
}

.application-steps-container.step-1-active .application-step-connector-left,
.application-steps-container.step-2-active .application-step-connector-left,
.application-steps-container.step-3-active .application-step-connector-left,
.application-steps-container.step-3-active .application-step-connector-right,
.application-steps-container.step-2-active
  .application-step-item:nth-child(2)::after,
.application-steps-container.step-3-active
  .application-step-item:nth-child(2)::after,
.application-steps-container.step-3-active
  .application-step-item:nth-child(3)::after {
  background-color: var(--bs-primary);
}

.application-step-item.active .application-step-icon,
.application-step-item.completed .application-step-icon {
  color: #171b08;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.application-step-item.active .application-step-title,
.application-step-item.completed .application-step-title {
  color: #f2ff1e !important;
}

.prime-offer-icon-wrap {
  color: #171b08;
}

.page-fuer-unternehmen
  .fuer-unternehmen-matrix
  tbody
  tr.fuer-unternehmen-matrix__row--accent-dark
  th[scope='row'],
.page-fuer-unternehmen
  .fuer-unternehmen-matrix
  tbody
  tr.fuer-unternehmen-matrix__row--accent-dark
  td {
  color: #f2f6ff !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.page-fuer-unternehmen
  .fuer-unternehmen-matrix
  tbody
  tr.fuer-unternehmen-matrix__row--accent-dark
  td::before {
  color: rgba(242, 246, 255, 0.92);
}

.fuer-unternehmen-matrix__row--accent-dark th,
.fuer-unternehmen-matrix__row--accent-dark td {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Global dark surfaces + stronger contrast */
body {
  background-color: var(--jb-body-bg);
  color: #dfe6f2;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: #f2f6ff;
}

p,
li,
label,
small {
  color: #d7deea;
}

.text-dark,
.text-body {
  color: #dfe6f2 !important;
}

.text-muted,
.text-secondary,
.text-white-70 {
  color: #b8c2d2 !important;
}

.text-white-50 {
  color: #9ca8bb !important;
}

.bg-white,
.card,
.offcanvas,
.modal-content,
.dropdown-menu {
  background-color: var(--jb-body-bg) !important;
  color: #dfe6f2;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* FAQ & Co.: gleiche Fläche wie Body, kein gelblicher „aktiver“ Streifen */
.accordion-item {
  background-color: var(--jb-body-bg) !important;
  color: #dfe6f2;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.accordion-body {
  background-color: var(--jb-body-bg) !important;
  color: #dfe6f2 !important;
}

.card-header,
.card-footer {
  background-color: var(--jb-body-bg) !important;
  color: #f2f6ff !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.accordion-button {
  background-color: var(--jb-body-bg) !important;
  color: #f2f6ff !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.accordion-button:not(.collapsed) {
  background-color: var(--jb-body-bg) !important;
  color: #f2f6ff !important;
}

/* FAQ (Startseite): Listen auf dunklem Grund lesbar + Outline-Button in Primary-Gelb */
#accordionFAQ .accordion-body .list-checked-primary .list-checked-item,
#accordionFAQ .accordion-body .list-checked .list-checked-item {
  color: rgba(255, 255, 255, 0.94) !important;
}

#accordionFAQ .accordion-body .list-checked-primary .list-checked-item::before {
  filter: none;
}

#accordionFAQ .accordion-body .btn-outline-primary {
  color: #f2ff1e !important;
  border-color: rgba(242, 255, 30, 0.55) !important;
  background-color: transparent !important;
}

#accordionFAQ .accordion-body .btn-outline-primary:hover,
#accordionFAQ .accordion-body .btn-outline-primary:focus {
  color: #171b08 !important;
  background-color: #f2ff1e !important;
  border-color: #f2ff1e !important;
}

.form-control,
.form-select,
.input-group-text {
  background-color: var(--jb-field-bg) !important;
  color: #e4ebf7 !important;
  border: 1px solid var(--jb-field-border) !important;
  box-shadow: var(--jb-field-shadow);
}

.form-check-input {
  background-color: var(--jb-field-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.form-control::placeholder {
  color: #9eabbe !important;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--jb-field-bg) !important;
  color: #f3f7ff !important;
  border-color: var(--jb-field-focus-border) !important;
  box-shadow: var(--jb-field-focus-shadow) !important;
}

.form-check-input:focus {
  border-color: var(--jb-field-focus-border) !important;
  box-shadow: var(--jb-field-focus-shadow) !important;
}

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c8d4e8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

/* Input-Group: kein Doppel-Schatten an den Einzelteilen */
.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text {
  box-shadow: none !important;
}

/* theme.min.css: .form-label ist #1e2022 (Light-Theme) – auf dunklen Cards/Kontaktformular kaum lesbar */
.form-label,
.col-form-label {
  color: #e8edf5 !important;
}

.form-label-secondary {
  color: var(--bs-secondary-color) !important;
}

.form-text {
  color: var(--bs-secondary-color) !important;
}

.btn-white {
  background-color: #f7f9fd !important;
  color: #0f1420 !important;
  border-color: #f7f9fd !important;
}

.btn-white:hover,
.btn-white:focus {
  background-color: #ffffff !important;
  color: #090d14 !important;
  border-color: #ffffff !important;
}

/* Primary sections (CTA bars, process strips): dark purple band matching theme */
.bg-primary {
  --bs-bg-opacity: 1;
  background-color: var(--jb-bg-soft-band) !important;
  /* background-image:
    url('/assets/svg/components/wave-pattern-light.svg'),
    linear-gradient(
      145deg,
      var(--jb-primary-band-start) 0%,
      var(--jb-primary-band-mid) 45%,
      var(--jb-primary-band-end) 100%
    ) !important; */
  background-repeat: repeat, no-repeat;
  background-size:
    auto,
    100% 100%;
  color: var(--bs-body-color) !important;
  box-shadow:
    inset 0 1px 0 rgba(var(--jb-accent-rgb), 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}

.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-primary h4,
.bg-primary h5,
.bg-primary h6,
.bg-primary .text-white,
.bg-primary .text-white-70,
.bg-primary .text-white-50 {
  color: #e8ecf5 !important;
}

.bg-primary .btn-light {
  background-color: #f2ff1e !important;
  border-color: #f2ff1e !important;
  color: #171b08 !important;
}

.bg-primary .btn-light:hover,
.bg-primary .btn-light:focus {
  background-color: #dbe800 !important;
  border-color: #dbe800 !important;
  color: #141804 !important;
}

.bg-primary .btn-ghost-light {
  color: #f2ff1e !important;
  border-color: rgba(var(--bs-primary-rgb), 0.52) !important;
}

.bg-primary .btn-ghost-light:hover,
.bg-primary .btn-ghost-light:focus {
  background-color: rgba(var(--bs-primary-rgb), 0.16) !important;
  color: #f7ff7a !important;
}

.table,
.table > :not(caption) > * > * {
  color: #dce3ef;
  border-color: rgba(255, 255, 255, 0.12);
}

footer {
  /* background-color: #080b10; */
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

footer h5 {
  color: #f1f5ff;
}

footer .link-secondary,
footer .text-body {
  color: #c2ccdc !important;
}

footer .link-secondary:hover,
footer .text-body:hover {
  color: #f2ff1e !important;
}

footer .text-muted {
  color: #97a5ba !important;
}

footer .border-top {
  border-top-color: rgba(255, 255, 255, 0.15) !important;
}

footer .btn-soft-secondary {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #dfe6f2 !important;
}

footer .btn-soft-secondary:hover,
footer .btn-soft-secondary:focus {
  background-color: rgba(242, 255, 30, 0.12) !important;
  color: #f2ff1e !important;
  border-color: rgba(242, 255, 30, 0.45) !important;
}

/* --- Jobbusters: Lesbarkeit Jobs-Hero (heller Fotohintergrund) + Filter-Sidebar --- */
.page-jobs
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link {
  color: rgba(255, 255, 255, 0.98) !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 0 12px rgba(0, 0, 0, 0.35);
}

.page-jobs
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link:hover,
.page-jobs
  .navbar-absolute-top.navbar-dark-custom:not(.navbar-scrolled)
  .navbar-nav
  .nav-link:focus {
  color: #f2ff1e !important;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.65),
    0 0 14px rgba(0, 0, 0, 0.45);
}

/* Filter: Sidebar + Mobil-Offcanvas – gleiche helle Typo auf dunklem Grund */
.page-jobs .jobs-filter-panel .form-check-label,
.page-jobs #jobsFilterPanel .form-check-label {
  color: #e8eef6 !important;
}

.page-jobs .jobs-filter-panel h5,
.page-jobs #jobsFilterPanel h5 {
  color: #f4f8ff !important;
}

.page-jobs #jobsFilterPanel .form-check-input[type='checkbox'] {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background-color: var(--jb-field-bg) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* /jobs: Liste + Filter – Typo auf Wand-Hintergrund */
.page-jobs .jobs-list-section .col-sm h3,
.page-jobs .jobs-list-section .col-sm h3 .text-dark {
  color: #fff !important;
}

.page-jobs .jobs-list-section #jobs-no-results {
  color: rgba(255, 255, 255, 0.92) !important;
}

.page-jobs .jobs-list-section #jobs-sort {
  background-color: var(--jb-bg-soft-band);
  border-color: var(--jb-field-border);
  color: #e8eef6;
}

.page-jobs .jobs-list-section .text-center.text-body {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Jobs-Liste: „X von Y Stellen“ + Fortschritt + „weitere laden“ (auf dunklem Grund gut lesbar) */
.page-jobs #jobs-load-more #jobs-load-more-counter {
  color: rgba(232, 237, 246, 0.95) !important;
}

.page-jobs #jobs-load-more .progress {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-radius: 999px;
  overflow: hidden;
}

.page-jobs #jobs-load-more .progress-bar {
  background-color: var(--jb-accent) !important;
}

.page-jobs #jobs-load-more #jobs-load-more-btn {
  color: #0b0d10 !important;
  background-color: var(--jb-accent) !important;
  border: 2px solid var(--jb-accent) !important;
  font-weight: 600;
  box-shadow: 0 4px 18px rgba(var(--jb-accent-rgb), 0.35);
}

.page-jobs #jobs-load-more #jobs-load-more-btn:hover,
.page-jobs #jobs-load-more #jobs-load-more-btn:focus {
  color: #171b08 !important;
  background-color: var(--jb-accent-hover) !important;
  border-color: var(--jb-accent-hover) !important;
}

.page-jobs #jobs-load-more #jobs-load-more-btn:active {
  filter: brightness(0.96);
}

/* Stellenliste + Startseite: Job-Karten als echtes Primary-Gelb (#f2ff1e), dunkle Typo */
.job-card > .card,
.home-jobs-section .card.card-transition.h-100 {
  background-color: #f2ff1e !important;
  color: #0b0d10 !important;
  border: 1px solid rgba(11, 13, 16, 0.12) !important;
  box-shadow:
    0 16px 44px rgba(242, 255, 30, 0.35),
    0 4px 24px rgba(0, 0, 0, 0.22);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.job-card > .card:hover,
.home-jobs-section .card.card-transition.h-100:hover {
  box-shadow:
    0 22px 56px rgba(242, 255, 30, 0.55),
    0 10px 32px rgba(0, 0, 0, 0.28) !important;
  transform: translateY(-3px);
  border-color: rgba(11, 13, 16, 0.2) !important;
}

.job-card > .card .text-dark,
.job-card > .card .card-title,
.job-card > .card .card-title a,
.job-card > .card .text-body,
.home-jobs-section .card.card-transition.h-100 .text-dark,
.home-jobs-section .card.card-transition.h-100 .card-title,
.home-jobs-section .card.card-transition.h-100 .card-title a,
.home-jobs-section .card.card-transition.h-100 .text-body {
  color: #0b0d10 !important;
}

/* Global `li, small { color: #d7deea }` sonst Meta-Zeile (Datum/Ort) hell/„weiß“ */
.job-card > .card li,
.job-card > .card small,
.job-card > .card .list-inline-item,
.job-card > .card .text-muted,
.home-jobs-section .card.card-transition.h-100 li,
.home-jobs-section .card.card-transition.h-100 small,
.home-jobs-section .card.card-transition.h-100 .list-inline-item,
.home-jobs-section .card.card-transition.h-100 .text-muted {
  color: #0b0d10 !important;
}

.job-card > .card .text-primary,
.home-jobs-section .card.card-transition.h-100 .text-primary {
  color: #0b0d10 !important;
}

.job-card > .card .badge,
.home-jobs-section .card.card-transition.h-100 .badge {
  background-color: rgba(11, 13, 16, 0.12) !important;
  color: #0b0d10 !important;
  border: 1px solid rgba(11, 13, 16, 0.12);
}

.job-card > .card .btn-primary,
.home-jobs-section .card.card-transition.h-100 .btn-primary {
  background-color: var(--jb-body-bg) !important;
  border-color: var(--jb-body-bg) !important;
  color: #f2ff1e !important;
}

.job-card > .card .btn-primary:hover,
.job-card > .card .btn-primary:focus,
.home-jobs-section .card.card-transition.h-100 .btn-primary:hover,
.home-jobs-section .card.card-transition.h-100 .btn-primary:focus {
  background-color: #171b18 !important;
  border-color: #171b18 !important;
  color: #f7ff7a !important;
}

.job-card > .card .btn-outline-primary,
.home-jobs-section .card.card-transition.h-100 .btn-outline-primary {
  color: #0b0d10 !important;
  border-color: rgba(11, 13, 16, 0.55) !important;
  background-color: transparent !important;
}

.job-card > .card .btn-outline-primary:hover,
.job-card > .card .btn-outline-primary:focus,
.home-jobs-section .card.card-transition.h-100 .btn-outline-primary:hover,
.home-jobs-section .card.card-transition.h-100 .btn-outline-primary:focus {
  background-color: var(--jb-body-bg) !important;
  color: #f2ff1e !important;
  border-color: var(--jb-body-bg) !important;
}

.job-card .card-footer,
.home-jobs-section .card.card-transition.h-100 .card-footer {
  border-top-color: rgba(11, 13, 16, 0.2) !important;
  background-color: transparent !important;
}

@media (prefers-reduced-motion: reduce) {
  .job-card > .card,
  .home-jobs-section .card.card-transition.h-100 {
    transition: box-shadow 0.2s ease;
  }

  .job-card > .card:hover,
  .home-jobs-section .card.card-transition.h-100:hover {
    transform: none;
  }
}

/* Start: „Premium Partner“-Band + Liste auf dunklem Grund */
.home-features-band {
  background: var(--jb-body-bg);
}

.home-features-band .list-checked-primary .list-checked-item {
  color: #e8edf8 !important;
}

.home-features-band .btn-outline-primary {
  color: #f2ff1e !important;
  border-color: rgba(242, 255, 30, 0.65) !important;
}

.home-features-band .btn-outline-primary:hover,
.home-features-band .btn-outline-primary:focus {
  color: #171b08 !important;
  background-color: #f2ff1e !important;
  border-color: #f2ff1e !important;
}

/* Bürofoto: gleiche sichtbare Proportion wie früheres prime_office.jpg (1100×1000) */
.home-features-band__office-photo {
  aspect-ratio: 1100 / 1000;
  max-width: 100%;
}

.home-features-band__office-photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Job-Karten: Fußzeilen-Link „Mehr erfahren“ u. ä. */
.card .card-footer .card-link {
  color: #f2ff1e !important;
  font-weight: 600;
}

.card .card-footer .card-link:hover,
.card .card-footer .card-link:focus {
  color: #f7ff7a !important;
}

/* Gelbe Job-Karten: „Mehr erfahren“ dunkel (nach globaler .card-link-Regel) */
.job-card .card .card-footer .card-link,
.home-jobs-section .card .card-footer .card-link {
  color: #0b0d10 !important;
  font-weight: 700;
}

.job-card .card .card-footer .card-link:hover,
.job-card .card .card-footer .card-link:focus,
.home-jobs-section .card .card-footer .card-link:hover,
.home-jobs-section .card .card-footer .card-link:focus {
  color: #171b18 !important;
}