/* ─── Hero ─── */
  .hero {
    padding: 100px 0 44px;
    position: relative;
    overflow: hidden;
  }
  @media (max-width: 991.98px) {
    .hero { padding: 40px 0 56px; }
  }
  .hero::before {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(155,95,255,.12) 0%, transparent 70%);
    pointer-events: none;
  }
  .hero::after {
    content: '';
    position: absolute;
    bottom: -80px; left: -80px;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,197,127,.1) 0%, transparent 70%);
    pointer-events: none;
  }
  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 100px;
    padding: 6px 14px;
    font-size: .8rem;
    font-weight: 500;
    color: var(--c-mid);
    margin-bottom: 28px;
  }  
  
  @keyframes pulse {
    0%,100% { opacity:1; transform: scale(1); }
    50%      { opacity:.5; transform: scale(1.3); }
  }
  .hero h1 {
    font-size: clamp(1.7rem, 3vw, 3rem);
    font-weight: 800;
    margin-bottom: 24px;
    max-width: 820px;
  }  
  .hero-sub {
    font-size: 1.15rem;
    color: var(--c-mid);
    max-width: 520px;
    margin-bottom: 40px;
    font-weight: 300;
  }
  .btn-primary-cta {
    background: var(--c-dark);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: 16px 36px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform .2s, box-shadow .2s;
  }
  .btn-primary-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(14,13,12,.2);
    color: #fff;
  }
  .btn-rainbow-cta {
    background: linear-gradient(135deg, #FF3366, #FF6B3F, #FFC700, #00C97F, #00AAFF, #9B5FFF) !important;
    background-size: 200% auto !important;
    animation: rainbow-shift 4s linear infinite;
    box-shadow: 0 6px 24px rgba(155,95,255,.4) !important;
  }
  .btn-rainbow-cta:hover {
    box-shadow: 0 10px 36px rgba(155,95,255,.55) !important;
    transform: translateY(-3px) !important;
  }
  @keyframes rainbow-shift {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
  }
  .btn-secondary-cta {
    background: transparent;
    color: var(--c-dark);
    border: 1.5px solid var(--c-border);
    border-radius: 100px;
    padding: 15px 32px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: border-color .2s, background .2s;
  }
  .btn-secondary-cta:hover {
    border-color: var(--c-mid);
    background: rgba(14,13,12,.04);
    color: var(--c-dark);
  }
  /* Farblich hervorgehobene Variante (z. B. „Für Arbeitgeber") */
  /*
  .btn-secondary-cta--accent {
    background: rgba(155,95,255,.08);
    border-color: var(--violet);
    color: var(--violet);
  }
  .btn-secondary-cta--accent:hover {
    background: var(--violet);
    border-color: var(--violet);
    color: #fff;
  }
  */
  .btn-secondary-cta--accent {    
    background: var(--violet);
    border-color: var(--violet);
    color: #fff;
  }
  .btn-secondary-cta--accent:hover {
    background: rgba(155,95,255,.08);
    border-color: var(--violet);
    color: var(--violet);
  }
  
  /* ─── Hero Image Placeholder ─── */
  .hero-img-placeholder {
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(155,95,255,.08) 0%, rgba(0,170,255,.08) 100%);
    border: none;
    aspect-ratio: 4/3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--c-muted);
    font-size: .9rem;
    font-weight: 500;
    position: relative;
    overflow: hidden;
  }
  .hero-img-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--rainbow);
    opacity: .04;
    border-radius: 22px;
  }  
  .hero-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 24px;
  }
  
  /* ─── Hero Image – align to H1 on desktop ─── */
  @media (min-width: 992px) {
    .hero-img-col {
      padding-top: 0;
      display: flex;
    }
    .hero-img-col .hero-img-placeholder {
      aspect-ratio: auto;
      max-height: none;
      height: 100%;
      width: 100%;
    }
  }
  
  /* ─── Logo Slider ─── */
  .partner-bar {
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    padding: 22px 0;
    overflow: hidden;
  }
  .partner-bar-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--c-muted);
    white-space: nowrap;
    padding-right: 32px;
    flex-shrink: 0;
  }
  @media (max-width: 767.98px) {
    .partner-bar-label {
      display: block;
      text-align: center;
      padding-right: 0;
      padding-bottom: 12px;
    }
    .partner-bar-flex { flex-direction: column; }
  }
  .partner-track-wrap { overflow: hidden; flex: 1; }
  .partner-track {
    display: flex;
    gap: 0;
    animation: slide-logos 48s linear infinite;
    width: max-content;
  }
  .partner-track:hover { animation-play-state: paused; }
  @keyframes slide-logos {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .partner-logo-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 40px;
    border-right: 1px solid var(--c-border);
    white-space: nowrap;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: .9rem;
    color: var(--c-mid);
  }
  .partner-logo-dot {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
  }
  
  /* ─── Logo Slider – Image slots ─── */
  .partner-logo-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
    border-right: 1px solid var(--c-border);
    flex-shrink: 0;
  }
  .partner-logo-img {
    height: 36px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
    opacity: 1;
    filter: grayscale(0);
    transition: opacity .3s, filter .3s;
  }
  .partner-track:hover .partner-logo-img { opacity: 1; filter: grayscale(0); }
  /* Placeholder for missing images */
  .partner-logo-placeholder {
    height: 36px;
    min-width: 110px;
    border-radius: 8px;
    border: 1.5px dashed var(--c-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 600;
    color: var(--c-muted);
    font-family: 'Bricolage Grotesque', sans-serif;
    letter-spacing: .04em;
    gap: 6px;
  }
  
  /* ─── Stats Bar ─── */
  .stats-bar {
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    padding: 40px 0;
  }
  .stat-item {
    text-align: center;
    padding: 24px 20px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
    transition: transform .25s, box-shadow .25s;
  }
  .stat-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--rainbow);
  }
  .stat-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
  .stat-num {
    font-family: 'Bricolage Grotesque', sans-serif;
    /* font-size: 2.2rem; */
    font-size: clamp(1.6rem, 1rem + 2vw, 2.2rem);
    font-weight: 800;
    background: var(--rainbow);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    line-height: 1.1;
    margin-bottom: 6px;
  }
  .stat-label {
    font-size: .78rem;
    color: var(--c-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .07em;
  }
  
  /* ─── Section Labels ─── */
  /* section element ---> see default.css */
  .section-eyebrow {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--c-muted);
    margin-bottom: 12px;
  }
  .section-title {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 800;
    margin-bottom: 16px;
  }
  .section-sub {
    color: var(--c-muted);
    max-width: 480px;
    font-weight: 300;
  }
    
  /* ─── Category Grid ─── */
  .cat-card {
    border-radius: var(--radius);
    padding: 32px 28px;
    color: #fff;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    display: block;
    transition: transform .25s;
  }
  .cat-card:hover { transform: scale(1.02); color: #fff; }
  .cat-card h4 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
    margin-bottom: 6px;
    color: #fff;
  }
  .cat-card p { 
    font-size: .85rem;
    opacity: .8;
    margin: 0;
  }
  
  /* ─── Jobs Promo ─── */
  .jobs-promo {
    background:var(--c-surface);
    border:1px solid var(--c-border);
    box-shadow:var(--shadow);
    border-radius:24px;
    padding:56px 48px;
    color:var(--c-dark);
    position:relative;
    overflow:hidden;
  }
  .jobs-promo-bg-left {
   position:absolute;
   bottom:-60px;
   left:-60px;
   width:260px;
   height:260px;
   border-radius:50%;
   background:radial-gradient(circle,rgba(0,201,127,.1) 0%,transparent 70%);
   pointer-events:none;
  }
  .jobs-promo-bg-right {
    position:absolute;
    top:-80px;
    right:-80px;
    width:340px;
    height:340px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(155,95,255,.12) 0%,transparent 70%);
    pointer-events:none;
  }
  .jobs-promo-row {
    position:relative;
    z-index:1;
  }
  .jobs-promo-h2 {
    font-weight:800;
    font-size:clamp(2rem,4vw,3.2rem);    
    margin-bottom:18px;    
  }
  .jobs-promo-sub {
    font-size:1.1rem;
    color:var(--c-mid);
    max-width:520px;
    margin-bottom:32px;
    font-weight:300;
  }
  .job-promo-img {
    width:100%;
    height:auto;
    display:block;
    border-radius:20px;
    border:1px solid var(--c-border);
    box-shadow:var(--shadow);
  }
  
  /* ─── Event Cards ─── */
  .event-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .25s, box-shadow .25s;
    height: 100%;
  }
  .event-card-body {
    padding: 20px 22px 24px;
  }
  .event-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
  .event-card-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 8px;
  }
  .event-card-info {
    font-size: .82rem;
    color: var(--c-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
  }  
  .event-card-footer {
    background: var(--c-surface);    
    margin: 0px 22px;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .event-card-price {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: .95rem;
    color: var(--c-dark);
  }
  .event-card-btn-register {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-dark);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: 9px 18px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: .82rem;
    text-decoration: none;
    transition: background .2s, transform .2s;
    white-space: nowrap;
  }  
  .event-card-btn-register:hover { background: linear-gradient(135deg,#FF3366,#9B5FFF); transform: translateY(-1px); color: #fff; }
  .event-card-btn-disabled {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--c-muted);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: 9px 18px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: .82rem;
    text-decoration: none;
    transition: background .2s, transform .2s;
    white-space: nowrap;
  }
  .event-card-img-div {
    position: relative;
  }
  .event-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #fff;
    border-radius: 10px;
    padding: 6px 14px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: .75rem;
    font-weight: 700;
    color: var(--c-dark);
    text-transform: uppercase;
  }
  .event-card-img-autor {
    max-height: 3rem;  
  }
  @media only screen and (max-width: 370px) {
    .event-card-bullet {
      display: none;
    }
  }
  
  /* ─── Mentors ─── */
  .mentor-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
    height: 100%;
    transition: transform .25s, box-shadow .25s;
  }
  .mentor-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
  .mentor-header {
    height: 100px;
    position: relative;
  }
  .mentor-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    border: 3px solid var(--c-surface);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
    color: #fff;
    position: absolute;
    bottom: -36px;
    left: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
  }
  .mentor-body { padding: 46px 24px 24px; }
  .mentor-name {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 2px;
    color: var(--c-dark);
  }
  .mentor-title { font-size: .82rem; color: var(--c-muted); margin-bottom: 14px; }
  .mentor-focus {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
  }
  .mentor-tag {
    background: rgba(155,95,255,.08);
    color: var(--violet);
    border-radius: 100px;
    padding: 3px 12px;
    font-size: .73rem;
    font-weight: 600;
  }
  .btn-mentor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    font-weight: 700;
    font-family: 'Bricolage Grotesque', sans-serif;
    text-decoration: none;
    border-radius: 100px;
    padding: 8px 18px;
    border: none;
    background: linear-gradient(135deg,#9B5FFF,#00AAFF);
    color: #fff;
    transition: opacity .2s, transform .2s;
  }
  .btn-mentor:hover { opacity: .85; transform: translateY(-1px); color: #fff; }
  
  /* ─── Mentor Slider ─── */
  .mentor-slider { position: relative; }
  .mentor-viewport { overflow: hidden; }
  .mentor-track {
    display: flex;
    gap: 24px;
    transition: transform .45s cubic-bezier(.4,0,.2,1);
    will-change: transform;
  }
  /* 3 sichtbar auf Desktop, 2 auf Tablet, 1 auf Mobil – Gap wird einberechnet */
  .mentor-track > .mentor-slide {
    flex: 0 0 calc((100% - 48px) / 3);
    max-width: calc((100% - 48px) / 3);
  }
  @media (max-width: 991.98px) {
    .mentor-track > .mentor-slide {
      flex: 0 0 calc((100% - 24px) / 2);
      max-width: calc((100% - 24px) / 2);
    }
  }
  @media (max-width: 767.98px) {
    .mentor-track { gap: 16px; }
    .mentor-track > .mentor-slide {
      flex: 0 0 100%;
      max-width: 100%;
    }
  }
  .mentor-nav {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, opacity .2s, transform .2s;
    box-shadow: var(--shadow);
  }
  .mentor-nav:hover:not(:disabled) {
    background: linear-gradient(135deg,#9B5FFF,#00AAFF);
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
  }
  .mentor-nav:disabled { opacity: .35; cursor: default; }
  .mentor-dots {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .mentor-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: var(--c-border);
    cursor: pointer;
    transition: width .3s, background .3s;
  }
  .mentor-dot.active {
    width: 24px;
    border-radius: 100px;
    background: linear-gradient(135deg,#9B5FFF,#00AAFF);
  }
  
  /* ─────────────────────────────────────────────────────────────
     Globaler, sehr zarter Regenbogen-Verlauf (liegt auf <body>).
     EIN durchgehender Verlauf für die ganze Seite → stimmig & subtil.
     Die Farbe wandert beim Scrollen langsam durchs Spektrum.
     Alle Abschnitte sind transparent, damit dieser Verlauf durchscheint.
     Header (.navbar) & Footer bleiben weiß/unberührt.
     ───────────────────────────────────────────────────────────── */
  .stats-bar,
  .partner-bar,
  .employer-hero-section,
  .newsletter-section,
  .dual-cta-card.for-users,
  .dual-cta-card.for-employers {
    background: transparent;
  }