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

/* Ü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 als Section-Background (Mitte frei für Effekt) */
.page-ueber-uns .ueber-uns-hero {
  position: relative;
  z-index: 1;
  background: #fff url('/assets/img/home/hero-logo-poster.jpg') center / cover
    no-repeat;
}

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

.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: #1f2933 url('/assets/img/home/hero-main-poster.jpg') center /
    cover no-repeat;
}

.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;
  /* Oben/Mitte: Lesbarkeit + Logo; unten: weicher Übergang zu deckendem Weiß (nächste Sektion) */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(255, 255, 255, 0.72) 11%,
    rgba(255, 255, 255, 0.2) 28%,
    rgba(255, 255, 255, 0.04) 44%,
    rgba(255, 255, 255, 0.04) 56%,
    rgba(255, 255, 255, 0.22) 68%,
    rgba(255, 255, 255, 0.55) 76%,
    rgba(255, 255, 255, 0.82) 84%,
    rgba(255, 255, 255, 0.94) 90%,
    #ffffff 100%
  );
}

.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(255, 255, 255, 0.98) 0%,
        rgba(255, 255, 255, 0.95) 42%,
        rgba(255, 255, 255, 0.95) 58%,
        rgba(255, 255, 255, 0.92) 78%,
        #ffffff 100%
      );
  }
}

/* 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: animiertes Logo (GIF), 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;
}

header .navbar-brand-logo--header.navbar-brand-logo--loop {
  margin-left: -8px;
}

/* 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: #9220d0 !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: #9220d0 !important;
}

/* Navbar Scrolled - Background und Shadow für navbar-dark-custom */
.navbar.navbar-scrolled.navbar-dark-custom {
  background-color: #fff;
  box-shadow: 0 0.375rem 1.5rem 0 rgba(140, 152, 164, 0.125);
}

/* 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(146, 32, 208, 0.12);
  color: #9220d0;
}

.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(146, 32, 208, 0.06);
  color: #9220d0;
}

.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 #9220d0;
  outline-offset: 2px;
}

/* Text-Selektion - Heller Hintergrund mit Primärfarbe für Text */
::selection {
  background-color: rgba(146, 32, 208, 0.2);
  color: #9220d0;
}

::-moz-selection {
  background-color: rgba(146, 32, 208, 0.2);
  color: #9220d0;
}

/* 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: #9220d0 !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 - Heller Farbe für Standardwert (Placeholder-ähnlich) */
.form-select {
  color: #6c757d !important; /* Helle Farbe wie Placeholder */
}

/* Wenn ein Wert ausgewählt ist (nicht Standard), wird es dunkel */
.form-select.has-value {
  color: #1e2022 !important;
}

/* Optionen - Standardwert hell, andere dunkel */
.form-select option[value=''] {
  color: #6c757d !important;
}

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

/* Form Check Input - Primärfarbe für Checkboxen */
.form-check-input:checked {
  background-color: #9220d0 !important;
  border-color: #9220d0 !important;
}

.form-check-input:focus {
  border-color: rgba(146, 32, 208, 0.35) !important;
  box-shadow: 0 0 0 0.25rem rgba(146, 32, 208, 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: #9220d0;
  background: rgba(146, 32, 208, 0.03);
}

.matching-open-system-btn.active,
.matching-open-system-btn.active:hover,
.matching-open-system-btn.active:focus {
  border-color: #9220d0 !important;
  background: rgba(146, 32, 208, 0.08) !important;
  color: #48135f !important;
}

.form-check-input[type='checkbox']:indeterminate {
  background-color: #9220d0 !important;
  border-color: #9220d0 !important;
}

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

.pagination .page-link:hover {
  color: #9220d0 !important;
  border-color: #9220d0 !important;
}

.pagination .page-link:focus {
  color: #9220d0 !important;
  border-color: rgba(146, 32, 208, 0.35) !important;
  box-shadow: 0 0 0 0.25rem rgba(146, 32, 208, 0.25) !important;
}

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

#copyReferenceBtn:hover {
  border-color: #9220d0 !important;
  color: #9220d0 !important;
  background-color: rgba(146, 32, 208, 0.05) !important;
}

#copyReferenceBtn:hover .bi-clipboard {
  color: #9220d0 !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: #9220d0 !important;
  color: #9220d0 !important;
  background-color: rgba(146, 32, 208, 0.05) !important;
}

#copyJobIdBtn:hover .bi-clipboard {
  color: #9220d0 !important;
}

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

/* Button White - Primärfarbe für hover und focus (überschreibt Theme-Regel) */
.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: #9220d0 !important;
  border-color: #9220d0 !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: #9220d0;
}

/* 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: #9220d0;
}

/* 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: #9220d0;
}

/* 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: #9220d0;
}

.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: #9220d0;
  border-color: #9220d0;
}

/* Abgeschlossener Schritt - Primärfarbe */
.application-step-item.completed .application-step-icon {
  color: #fff;
  background-color: #9220d0;
  border-color: #9220d0;
}

.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: #9220d0;
}

/* Abgeschlossener Schritt - Primärfarbe */
.application-step-item.completed .application-step-title {
  color: #9220d0;
}

/* 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 (Breadcrumb + Titel) vom Inhalt absetzen */
.job-detail-page-hero {
  background: linear-gradient(
    165deg,
    #f4f6f8 0%,
    rgba(var(--bs-primary-rgb), 0.09) 42%,
    #ffffff 100%
  );
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
  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;
  }
}

.job-detail-page-hero-breadcrumb .breadcrumb-item a {
  color: var(--bs-primary);
}

.job-detail-page-hero-breadcrumb .breadcrumb-item.active {
  color: var(--bs-body-color);
  font-weight: 500;
}

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

.job-detail-page-hero-header .page-header-title {
  color: #1a1a1a;
}

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

/* Startseite: Branchen-Streifen: 1 col mobil, 2 col Tablet–<xl, 5 col ab 1200px */
.home-industry-strip {
  overflow: hidden;
}

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

@media (max-width: 767.98px) {
  .home-industry-strip__grid {
    gap: 0.75rem;
  }
}

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

  .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;
}

@media (max-width: 767.98px) {
  /* Kacheln: Höhe folgt dem Text; kein erzwungenes Mindestformat */
  .home-industry-strip__panel {
    min-height: 0;
  }

  /* Stretch nur auf Desktop/Subgrid – mobil keinen künstlichen Zwischenraum */
  .home-industry-strip__stretch {
    flex: 0 0 0;
    min-height: 0;
    height: 0;
    overflow: hidden;
  }

  /* Abstand unter der absolut positionierten Nummer (01., 02., …) zur Überschrift */
  .home-industry-strip__title {
    margin-top: 4.25rem;
    padding-top: 0.75rem;
  }
}

@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: 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 auto;
  }

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

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

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

/* Browser ohne Subgrid: Zeilen pro Panel, Überschriften nicht über Spalten verbunden */
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 1200px) {
    .home-industry-strip__panel {
      display: grid;
      grid-template-rows: minmax(22rem, 1fr) auto 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(
    180deg,
    rgba(18, 12, 32, 0.2) 0%,
    rgba(60, 22, 95, 0.55) 45%,
    rgba(90, 35, 130, 0.9) 100%
  );
}

.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;
  color: #fff;
  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-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff !important;
}

.home-industry-strip__text {
  position: relative;
  z-index: 2;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.5rem;
  padding-bottom: 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.94) !important;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

@media (min-width: 1200px) {
  .home-industry-strip__title,
  .home-industry-strip__text {
    padding-left: 1.35rem;
    padding-right: 1.35rem;
  }

  .home-industry-strip__title {
    padding-top: 0;
  }

  .home-industry-strip__text {
    padding-bottom: 1.75rem;
  }
}

@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,
    #f8f9fa 0%,
    rgba(146, 32, 208, 0.08) 40%,
    rgba(146, 32, 208, 0.18) 70%,
    rgba(146, 32, 208, 0.35) 100%
  );
  position: relative;
}

/* Stellenübersicht: Foto-Hintergrund nur auf /jobs */
.page-jobs .job-list-hero-gradient {
  background-color: #f8f9fa;
  background-image:
    radial-gradient(
      ellipse at center,
      rgba(248, 249, 250, 0.78) 0%,
      rgba(248, 249, 250, 0.5) 45%,
      rgba(146, 32, 208, 0.1) 78%,
      rgba(146, 32, 208, 0.2) 100%
    ),
    url('/assets/img/jobs/tueren.webp');
  background-size: cover;
  background-position: center 70%;
  background-repeat: no-repeat;
}

/* 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: #fff;
    border-left: 1px solid rgba(103, 120, 142, 0.2);
  }

  .page-jobs .jobs-filter-panel .offcanvas-header {
    border-bottom: 1px solid rgba(103, 120, 142, 0.2);
  }

  .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;
    background: transparent;
    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;
  }
}

/* Hero Diagonal Cut - Für Unternehmen Seite */
.hero-diagonal-cut {
  min-height: 350px;
  overflow: hidden;
}

@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(248, 249, 250, 0.96) 0%,
    rgba(248, 249, 250, 0.78) 45%,
    rgba(248, 249, 250, 0) 100%
  );
  pointer-events: none;
  z-index: 3;
}

.hero-diagonal-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #f8f9fa 0%, #f8f9fa 70%, #ffffff 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;
  }
}

/* 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--bauindustrie {
  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--bauindustrie {
    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;
  }
}

/* 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;
  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;
  background-color: #000;
}

.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: blasses Violett unten, PNG darüber – rechts andockend, Fläche ausfüllen */
/* PNG ist 2500×1080 px: Höhe nie über Original hinaus skalieren; schmaler Hero = Bild mitwachsend bis max. 1080px */
.page-empfehlungsbonus .empfehlungsbonus-hero {
  background-color: #f7f2fc;
  background-image: url('/assets/img/empfehlung/bg-empfehlung.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto min(100%, 1080px);
  overflow: hidden;
}

/* Mobil/Tablet: Person im PNG liegt oft hinter dem Text – heller Schleier für Kontrast */
@media (max-width: 1199.98px) {
  .page-empfehlungsbonus .empfehlungsbonus-hero {
    position: relative;
  }

  .page-empfehlungsbonus .empfehlungsbonus-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
      105deg,
      rgba(255, 255, 255, 0.97) 0%,
      rgba(247, 242, 252, 0.94) 38%,
      rgba(247, 242, 252, 0.72) 62%,
      rgba(247, 242, 252, 0.35) 82%,
      transparent 100%
    );
  }

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

/* Mobil: kein Foto-Hintergrund – einheitlich weiches Primary (lesbar wie btn-soft-primary) */
@media (max-width: 575.98px) {
  .page-empfehlungsbonus .empfehlungsbonus-hero {
    background-color: rgba(var(--bs-primary-rgb), 0.11);
    background-image: none;
  }

  .page-empfehlungsbonus .empfehlungsbonus-hero::before {
    display: none;
  }
}

/* Startseite: „So starten Sie durch“ – drei Farbwelten (Grün / Amber-Orange / Blau), zur Marke kompatibel */
#featuresSection .home-so-start-card {
  border-width: 1px;
  border-style: solid;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* Links: Smaragd / Teal-Grün */
#featuresSection .home-so-start-card--exclusive {
  background-color: #ecfdf5;
  border-color: rgba(4, 120, 87, 0.28);
  box-shadow:
    0 0 0 1px rgba(4, 120, 87, 0.1),
    0 4px 14px rgba(4, 120, 87, 0.08);
}

#featuresSection .home-so-start-card--exclusive:hover {
  background-color: #d1fae5;
  border-color: rgba(4, 120, 87, 0.4);
  box-shadow:
    0 0 0 1px rgba(4, 120, 87, 0.18),
    0 8px 22px rgba(4, 120, 87, 0.12);
}

#featuresSection .home-so-start-card--exclusive .home-so-start-card__icon {
  color: #047857 !important;
}

#featuresSection
  .home-so-start-card--exclusive
  .home-so-start-badge--exclusive {
  background-color: rgba(4, 120, 87, 0.12);
  color: #065f46;
  font-weight: 600;
}

/* Nummern 1–2–3 (nicht Häkchen) – gleiche Logik wie .list-checked-primary [data-number], Farbe grün */
#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: #047857 !important;
  font-size: 0.875rem !important;
}

/* Häkchen nur, falls mal ohne data-number verwendet */
#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='%23047857'/%3e%3c/svg%3e") !important;
}

#featuresSection .home-so-start-card--exclusive .card-link {
  color: #047857 !important;
}

#featuresSection .home-so-start-card--exclusive:hover .card-link {
  color: #065f46 !important;
}

/* Mitte: warmes Gelb / Orange */
#featuresSection .home-so-start-card--direct {
  background-color: #fffbeb;
  border-color: rgba(180, 83, 9, 0.32);
  box-shadow:
    0 0 0 1px rgba(180, 83, 9, 0.1),
    0 4px 14px rgba(217, 119, 6, 0.1);
}

#featuresSection .home-so-start-card--direct:hover {
  background-color: #fef3c7;
  border-color: rgba(180, 83, 9, 0.45);
  box-shadow:
    0 0 0 1px rgba(180, 83, 9, 0.2),
    0 8px 22px rgba(217, 119, 6, 0.14);
}

#featuresSection .home-so-start-card--direct .home-so-start-card__icon {
  color: #c2410c !important;
}

#featuresSection .home-so-start-card--direct .home-so-start-badge--direct {
  background-color: rgba(234, 88, 12, 0.14);
  color: #9a3412;
  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='%23c2410c'/%3e%3c/svg%3e") !important;
}

#featuresSection .home-so-start-card--direct .card-link {
  color: #c2410c !important;
}

#featuresSection .home-so-start-card--direct:hover .card-link {
  color: #9a3412 !important;
}

/* Rechts: kühles Blau (ergänzt Violett, seriös) */
#featuresSection .home-so-start-card--referral {
  background-color: #eff6ff;
  border-color: rgba(3, 105, 161, 0.28);
  box-shadow:
    0 0 0 1px rgba(3, 105, 161, 0.1),
    0 4px 14px rgba(3, 105, 161, 0.08);
}

#featuresSection .home-so-start-card--referral:hover {
  background-color: #dbeafe;
  border-color: rgba(3, 105, 161, 0.4);
  box-shadow:
    0 0 0 1px rgba(3, 105, 161, 0.18),
    0 8px 22px rgba(3, 105, 161, 0.12);
}

#featuresSection .home-so-start-card--referral .home-so-start-card__icon {
  color: #0369a1 !important;
}

#featuresSection .home-so-start-card--referral .home-so-start-badge--referral {
  background-color: rgba(3, 105, 161, 0.12);
  color: #075985;
  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='%230369a1'/%3e%3c/svg%3e") !important;
}

#featuresSection .home-so-start-card--referral .card-link {
  color: #0369a1 !important;
}

#featuresSection .home-so-start-card--referral:hover .card-link {
  color: #075985 !important;
}

/* Startseite: Aktuelle Stellenangebote – Hintergrund (Parallax via pseudo layer) */
.home-jobs-section {
  position: relative;
  overflow: hidden;
  background-color: #e6e2de;
}

.home-jobs-section::before {
  content: '';
  position: absolute;
  inset: -30% 0;
  background-image: url('/assets/img/home/bg-wall.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: translate3d(0, var(--home-jobs-parallax-y, 0px), 0);
  will-change: transform;
  z-index: 0;
  pointer-events: none;
}

.home-jobs-section > .container {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .home-jobs-section::before {
    transform: translate3d(0, 0, 0) !important;
  }
}

/* Ü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 (Prime HR, 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 (PRIME Primary, kein Orange) */
.page-fuer-unternehmen
  .fuer-unternehmen-matrix
  thead
  tr.fuer-unternehmen-matrix__head
  th {
  background-color: #fff !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(0, 0, 0, 0.12);
    border-radius: 0.65rem;
    overflow: hidden;
    background: #fff;
  }

  .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(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.035);
  }

  .page-fuer-unternehmen
    .fuer-unternehmen-matrix
    tbody
    tr.fuer-unternehmen-matrix__row--accent
    th[scope='row'] {
    background: rgba(var(--bs-primary-rgb), 0.1);
  }

  .page-fuer-unternehmen
    .fuer-unternehmen-matrix
    tbody
    tr.fuer-unternehmen-matrix__row--accent-dark
    th[scope='row'] {
    background: var(--bs-primary);
    color: #fff !important;
    border-bottom-color: rgba(255, 255, 255, 0.22);
  }

  .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(0, 0, 0, 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: var(--bs-body-color);
  }

  .page-fuer-unternehmen
    .fuer-unternehmen-matrix
    tbody
    tr.fuer-unternehmen-matrix__row--accent
    td {
    background: rgba(var(--bs-primary-rgb), 0.06);
  }

  .page-fuer-unternehmen
    .fuer-unternehmen-matrix
    tbody
    tr.fuer-unternehmen-matrix__row--accent-dark
    td {
    background: var(--bs-primary) !important;
    color: #fff !important;
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
  }

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

.fuer-unternehmen-matrix__row--accent {
  background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.fuer-unternehmen-matrix__row--accent-dark {
  background-color: var(--bs-primary);
}

.fuer-unternehmen-matrix__row--accent-dark th,
.fuer-unternehmen-matrix__row--accent-dark td {
  border-color: rgba(255, 255, 255, 0.22) !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;
}

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

.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;
}

/* 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(0, 0, 0, 0.045);
  border-radius: 0.55rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

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

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

/* Inaktive Option: kein weißer Text auf hellem Grund (Bootstrap hover überschreiben) */
.page-fuer-unternehmen
  .fuer-unternehmen-criterion__options
  .btn-outline-secondary {
  color: var(--bs-body-color);
  border-color: rgba(0, 0, 0, 0.14);
  background-color: #fff;
}

.page-fuer-unternehmen
  .fuer-unternehmen-criterion__options
  .btn-outline-secondary:hover,
.page-fuer-unternehmen
  .fuer-unternehmen-criterion__options
  .btn-outline-secondary:focus {
  color: var(--bs-body-color);
  background-color: rgba(var(--bs-primary-rgb), 0.09);
  border-color: rgba(var(--bs-primary-rgb), 0.4);
}

.page-fuer-unternehmen
  .fuer-unternehmen-criterion__options
  .btn-outline-secondary:active {
  color: var(--bs-body-color);
  background-color: rgba(var(--bs-primary-rgb), 0.14);
  border-color: rgba(var(--bs-primary-rgb), 0.45);
}

/* Aktive Option (Primary): Schrift bleibt weiß, Hover per Overlay abdunkeln */
.page-fuer-unternehmen .fuer-unternehmen-criterion__options .btn-primary:hover,
.page-fuer-unternehmen .fuer-unternehmen-criterion__options .btn-primary:focus {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  background-image: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12));
}

.page-fuer-unternehmen
  .fuer-unternehmen-criterion__options
  .btn-primary:active {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}

.fuer-unternehmen-model-intro strong {
  color: var(--bs-body-color);
}

.fuer-unternehmen-pillar-wrap {
  background: linear-gradient(
    160deg,
    rgba(55, 125, 255, 0.07) 0%,
    rgba(146, 32, 208, 0.06) 100%
  );
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

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

/* Balken wachsen mit der Kartenhöhe (nebeneinander links/rechts gleich hoch) */
.fuer-unternehmen-pillar-track {
  flex: 1 1 auto;
  min-height: 10.5rem;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 0.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
}

@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, #377dff 0%, #93c5fd 100%);
  border-radius: 0.65rem 0.65rem 0 0;
  transition: height 0.35s ease;
}

.fuer-unternehmen-pillar-fill--accent {
  background: linear-gradient(180deg, #9220d0 0%, #c084fc 100%);
}