/* jobheld brand overrides for smart-solutions template */

/* === Header (logo + nav bar) === */
.header-one {
  padding: 10px !important;
  align-items: center !important;
  min-height: 64px;
}
.header-one > * {
  align-self: center;
}

/* === Logo === */
.jh-logo-wrap {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding-left: 16px;
}
@media (min-width: 1024px) {
  .jh-logo-wrap { padding-left: 24px; }
}
.jh-logo {
  display: flex;
  align-items: center;
  height: 100%;
  line-height: 1;
}
.jh-logo-img {
  height: 32px;
  width: auto;
  max-width: none;
  display: block;
  vertical-align: middle;
}
@media (min-width: 1024px) {
  .jh-logo-img {
    height: 36px;
  }
}
.jh-logo-img-lg {
  height: 40px;
}
/* let Tailwind's hidden / dark:block utilities control which one renders */
.jh-logo-img.hidden {
  display: none;
}

/* === Header nav === */
.jh-nav {
  display: none;
  align-items: center;
  gap: 28px;
  margin-left: auto;
  margin-right: 24px;
}
@media (min-width: 1280px) {
  .jh-nav {
    display: flex;
  }
}
.jh-nav a {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(26, 26, 28, 0.65);
  padding: 8px 4px;
  border-radius: 999px;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.jh-nav a:hover {
  color: var(--color-primary-500);
}
.dark .jh-nav a {
  color: rgba(252, 252, 252, 0.65);
}
.dark .jh-nav a:hover {
  color: #c8d1ff;
}

/* === Satoshi font for headlines === */
@font-face {
  font-family: 'Satoshi';
  src:
    url('../fonts/satoshi/Satoshi-Variable.woff2') format('woff2'),
    url('../fonts/satoshi/Satoshi-Variable.woff') format('woff');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src:
    url('../fonts/satoshi/Satoshi-Bold.woff2') format('woff2'),
    url('../fonts/satoshi/Satoshi-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src:
    url('../fonts/satoshi/Satoshi-Black.woff2') format('woff2'),
    url('../fonts/satoshi/Satoshi-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

h1,
h2,
h3 {
  font-family: 'Satoshi', 'Inter Tight', system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* Headlines: weight 700 by default. The hero h1 keeps its own (900) weight. */
h1,
h2 {
  font-weight: 700;
}

/* Responsive h2 — small on mobile, scale up with viewport. */
h2 {
  font-size: 1.75rem;
}
@media (min-width: 640px) {
  h2 { font-size: 2rem; }
}
@media (min-width: 768px) {
  h2 { font-size: 2.4rem; }
}
@media (min-width: 1024px) {
  h2 { font-size: 3rem;
  }
}

/* Team-title styling: light by default, bold on highlighted words.
   Use !important to win against the template's responsive h2 rules in main.css. */
.split-text-team-title {
  font-weight: 400 !important;
  font-size: 1.75rem !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
@media (min-width: 768px) {
  .split-text-team-title { font-size: 2.25rem !important; }
}
@media (min-width: 1280px) {
  .split-text-team-title { font-size: 2.75rem !important; }
}
.split-text-team-title strong,
.split-text-team-title strong > div { font-weight: 800; }
/* Keep compound words (e.g. Recruiting-Kanäle, Kandidat:innen) on one line */
.jh-nb { white-space: nowrap; }

/* ----------------------------------------------------------------------
   Backfill for Tailwind arbitrary classes used by the testimonial /
   gradient panel imported from the insurance template. These values
   were JIT-compiled in insurance but not in smart-solutions, so we
   re-add them here. */

/* 50/50 column split */
.sm\:flex-1\/2 { flex: 1 1 50%; }
@media (max-width: 639.98px) {
  .sm\:flex-1\/2 { flex: 1 1 100%; }
}

/* Gradient blob: size + rotation + offsets */
.size-\[1060px\] { width: 1060px; height: 1060px; }
.rotate-\[10deg\] { rotate: 10deg; }
@media (min-width: 768px) {
  .md\:rotate-\[60deg\] { rotate: 60deg; }
  .md\:-top-\[65\%\] { top: -65%; }
  .md\:-right-\[70\%\] { right: -70%; }
}
.-top-\[110\%\] { top: -110%; }
.-right-\[75\%\] { right: -75%; }
@media (min-width: 640px) {
  .sm\:-top-\[75\%\] { top: -75%; }
}
@media (min-width: 1024px) {
  .lg\:-top-\[170\%\] { top: -170%; }
  .lg\:-right-\[40\%\] { right: -40%; }
}

/* Right-column padding */
@media (min-width: 1024px) {
  .lg\:pe-\[42px\] { padding-inline-end: 42px; }
  .lg\:pl-14 { padding-left: 56px; }
  .lg\:py-16 { padding-top: 64px; padding-bottom: 64px; }
}
@media (min-width: 1536px) {
  .\32xl\:pe-\[200px\] { padding-inline-end: 200px; }
}

/* Image max-widths used by the testimonial figure */
.max-w-\[250px\] { max-width: 250px; }
@media (min-width: 640px) {
  .sm\:max-w-\[300px\] { max-width: 300px; }
}
@media (min-width: 768px) {
  .md\:max-w-\[350px\] { max-width: 350px; }
}
@media (min-width: 1024px) {
  .lg\:max-w-\[525px\] { max-width: 525px; }
}

/* Text max-widths */
.max-w-\[340px\] { max-width: 340px; }
@media (min-width: 768px) {
  .md\:max-w-\[420px\] { max-width: 420px; }
}

/* Top margins on the wrapper — !important so they always beat the template's
   responsive utilities (which previously won at certain breakpoints). */
.mt-\[50px\] { margin-top: 50px !important; }
@media (min-width: 640px) { .sm\:mt-\[100px\] { margin-top: 100px !important; } }
@media (min-width: 768px) { .md\:mt-\[150px\] { margin-top: 150px !important; } }
@media (min-width: 1024px) {
  .lg\:mt-\[150px\] { margin-top: 150px !important; }
  .lg\:mt-\[220px\] { margin-top: 220px !important; }
  .lg\:mt-\[260px\] { margin-top: 260px !important; }
}

.rounded-\[20px\] { border-radius: 20px; }

/* ----- Process section (steps list) backfill ----- */
.max-w-\[804px\] { max-width: 804px; }
.max-w-\[802px\] { max-width: 802px; }
.max-w-\[1000px\] { max-width: 1000px; }
.max-w-\[640px\] { max-width: 640px; }
.max-w-\[700px\] { max-width: 700px; }
.text-\[3\.8rem\] { font-size: 3.8rem; line-height: 1.1; letter-spacing: -0.01em; }
.max-w-\[478px\] { max-width: 478px; }
.max-h-\[547px\] { max-height: 547px; }
.leading-\[27px\] { line-height: 27px; }
.px-7 { padding-left: 28px; padding-right: 28px; }
.py-5 { padding-top: 20px; padding-bottom: 20px; }
.gap-4 { gap: 16px; }
.space-y-1 > * + * { margin-top: 4px; }
.space-y-5 > * + * { margin-top: 20px; }
.space-y-\[70px\] > * + * { margin-top: 70px; }

/* responsive helpers */
@media (min-width: 640px) {
  .sm\:max-w-\[596px\] { max-width: 596px; }
  .sm\:gap-\[22px\] { gap: 22px; }
  .sm\:px-\[34px\] { padding-left: 34px; padding-right: 34px; }
  .sm\:rounded-\[20px\] { border-radius: 20px; }
}
@media (min-width: 768px) {
  .md\:gap-y-20 { row-gap: 80px; }
}
@media (min-width: 1280px) {
  .xl\:gap-\[100px\] { gap: 100px; }
  .xl\:col-span-5 { grid-column: span 5 / span 5; }
  .xl\:col-span-7 { grid-column: span 7 / span 7; }
}

/* 2-column grid at lg+ for the 4 step cards */
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* "Why trust us" grid: make both columns vertically centered on their own track */
.jh-trust-grid { align-items: center !important; }
.jh-trust-grid > * { align-self: center; }

/* Modelle section ("Vorqualifizierte Personalgewinnung statt Bewerbungschaos").
   Visual column is FIRST in the DOM (image left, copy right) so no order swap
   is needed — completely independent grid from the above-the-fold hero. */
.jh-modelle-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}
@media (min-width: 1024px) {
  .jh-modelle-grid { grid-template-columns: 0.9fr 1.1fr; gap: 48px; }
}
@media (min-width: 1024px) {
  .jh-hero-figure--flip {
    width: 140%;
    max-width: 140%;
    margin-left: -30%;
    margin-right: 0;
  }
}

/* "Why trust us" right-side copy: h2 + 3 paragraphs, 30px gap (last excluded) */
@media (min-width: 1024px) {
  .jh-trust-copy { padding-left: 10%; }
}
.jh-trust-copy h2 { margin: 0 0 28px; }
.jh-trust-copy p {
  margin: 0 0 30px;
  font-size: 19px;
  font-weight: 500;
  color: black;
  letter-spacing: 0.1px;
  line-height: 170%;
}
.jh-trust-copy p:last-child { margin-bottom: 0; }
.dark .jh-trust-copy p { color: var(--color-accent); }

/* Unicode glyph icons for the jobheld stack cards — force monochrome (no color emoji) */
.jh-stack-icon {
  font-family: "Segoe UI Symbol", "Symbola", "Noto Sans Symbols", "Noto Sans Symbols 2", "DejaVu Sans", system-ui, -apple-system, sans-serif;
  font-variant-emoji: text;
  line-height: 1;
  color: var(--color-secondary);
}
.dark .jh-stack-icon { color: var(--color-accent); }

/* Service card photo (one image per card, hero/jobheld imagery) */
.jh-service-photo {
  width: 100%;
  aspect-ratio: 4 / 3.3;
  background: #f6f6f6;
  border: 1px solid #e9e9e9;
}
.jh-service-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  padding: 20px;
}

/* Service card title + horizontal padding on the copy column */
.jh-service-copy {
  padding-left: 5%;
  padding-right: 5%;
}
.jh-service-copy h3 {
  font-size: 2rem;
  line-height: 1.15;
}

/* Service-card icon column: large monochrome glyph centered in a soft tile */
.jh-service-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.jh-service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  font-size: 64px;
  line-height: 1;
  color: var(--color-primary-500);
  background: rgba(47, 77, 244, 0.08);
  border-radius: 28px;
}
@media (min-width: 1024px) {
  .jh-service-icon { width: 180px; height: 180px; font-size: 80px; border-radius: 32px; }
}
@media (min-width: 768px) {
  .md\:col-span-7 { grid-column: span 7 / span 7; }
  .md\:col-span-5 { grid-column: span 5 / span 5; }
}

.space-y-12 > * + * { margin-top: 48px; }
@media (min-width: 768px) { .md\:space-y-16 > * + * { margin-top: 64px; } }

/* ----- Über uns: Team card (original opai layout) ----- */
.border-stroke-1\/11 { border-color: rgba(223, 228, 235, 0.11); }
.h-\[395px\] { height: 395px; }
.h-\[280px\] { height: 280px; }
/* Anchor team portraits to the top so heads aren't cropped */
.h-\[395px\] img,
.h-\[280px\] img { object-position: top; }
.jh-team-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-family: 'Satoshi', sans-serif;
  font-weight: 800;
  font-size: 3.5rem;
  color: var(--color-primary-500);
  background: linear-gradient(135deg, #eef1ff 0%, #f4f5f8 100%);
}
@media (max-width: 1023.98px) {
  .pb-30 { padding-bottom: 80px; }
}
@media (min-width: 1024px) {
  .lg\:pb-30 { padding-bottom: 120px; }
}

.max-w-\[1000px\] { max-width: 1000px; }
@media (min-width: 768px) { .md\:p-16 { padding: 64px; } }
@media (min-width: 1024px) { .lg\:p-20 { padding: 80px; } }

/* ----- Mobile sidebar nav ----- */
.jh-mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.jh-mobile-nav a {
  display: block;
  padding: 14px 4px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-secondary);
  border-bottom: 1px solid var(--color-stroke-1, #dfe4eb);
  transition: color 200ms ease;
}
.jh-mobile-nav a:last-child { border-bottom: none; }
.jh-mobile-nav a:hover { color: var(--color-primary-500); }
.dark .jh-mobile-nav a { color: var(--color-accent); border-bottom-color: var(--color-stroke-6, #202731); }
.dark .jh-mobile-nav a:hover { color: #c8d1ff; }

.jh-mobile-contact {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--color-stroke-1, #dfe4eb);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dark .jh-mobile-contact { border-top-color: var(--color-stroke-6, #202731); }
.jh-mobile-contact-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--color-secondary);
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 200ms ease;
}
.dark .jh-mobile-contact-row { color: var(--color-accent); }
.jh-mobile-contact-row:hover { color: var(--color-primary-500); }
.jh-mobile-contact-row svg { flex: 0 0 auto; }

.jh-mobile-socials {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.jh-mobile-socials a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--color-stroke-1, #dfe4eb);
  color: var(--color-secondary);
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.dark .jh-mobile-socials a { border-color: var(--color-stroke-6, #202731); color: var(--color-accent); }
.jh-mobile-socials a:hover {
  background-color: var(--color-primary-500);
  border-color: var(--color-primary-500);
  color: #fff;
}

/* ----- FAQ page ----- */
/* Group head: left-aligned title above a thin separator + optional intro copy */
.jh-faq-group-head {
  text-align: left;
  margin-bottom: 0;
}
.jh-faq-group-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-secondary);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.dark .jh-faq-group-title { color: var(--color-accent); }
.jh-faq-group-divider {
  height: 1px;
  width: 100%;
  background: var(--color-stroke-1, #dfe4eb);
}
.dark .jh-faq-group-divider { background: var(--color-stroke-6, #202731); }
.jh-faq-group-intro {
  margin-top: 18px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-secondary);
}
.dark .jh-faq-group-intro { color: var(--color-accent); }


.max-w-\[850px\] { max-width: 850px; }
.max-w-\[600px\] { max-width: 600px; }
.py-\[70px\] { padding-top: 70px; padding-bottom: 70px; }
.h-\[2px\] { height: 2px; }
.bottom-\[-1px\] { bottom: -1px; }
.z-\[1\] { z-index: 1; }

/* Tab states (attribute selectors — variant utilities weren't pre-compiled) */
[data-tab-button][data-state="selected"] { color: var(--color-secondary); }
.dark [data-tab-button][data-state="selected"] { color: var(--color-accent); }
[data-mobile-tab-button][data-mobile-active="true"] {
  background-color: var(--color-primary-500);
  color: #fff;
  transform: scale(1.05);
}

/* Accordion structure — JS handles the open/close inline styles via the
   `.accordion-action`, `.accordion-content`, `.accordion-arrow` hooks; we
   just need consistent vertical rhythm + arrow rotation. */
.accordion-item { transition: background-color 200ms ease; }
.accordion-action { background: transparent; border: none; text-align: left; }
.accordion-content { transition: height 300ms ease, opacity 300ms ease; }

/* ----- Jobs page: jobheld jobs widget container ----- */
.jh-jobs-widget {
  width: 100%;
  min-height: 600px;
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--color-stroke-1, #dfe4eb);
  overflow: hidden;
}
.dark .jh-jobs-widget { background: var(--color-background-6); border-color: var(--color-stroke-6, #202731); }
.jh-jobs-widget iframe { width: 100%; min-height: 600px; border: 0; display: block; }

/* ----- Impressum page ----- */
.jh-impressum-title {
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.1;
}
.jh-impressum h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-secondary);
}
.dark .jh-impressum h2 { color: var(--color-accent); }
.jh-impressum p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-secondary);
}
.dark .jh-impressum p { color: var(--color-accent); }
.jh-impressum-link {
  color: var(--color-primary-500);
  text-decoration: none;
}
.jh-impressum-link:hover { text-decoration: underline; }
.jh-impressum h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-secondary);
}
.dark .jh-impressum h3 { color: var(--color-accent); }
.jh-impressum-list {
  list-style: disc;
  padding-left: 1.4rem;
  color: var(--color-secondary);
  line-height: 1.6;
}
.dark .jh-impressum-list { color: var(--color-accent); }
.jh-impressum-list li + li { margin-top: 0.4em; }

/* ----- Über uns: Vision section ----- */
.max-w-\[780px\] { max-width: 780px; }
.max-w-\[630px\] { max-width: 630px; }
@media (min-width: 1280px) {
  .xl\:pt-\[180px\] { padding-top: 180px; }
}

/* ----- Über uns: Services section ----- */
.py-\[60px\] { padding-top: 60px; padding-bottom: 60px; }
.space-y-\[42px\] > * + * { margin-top: 42px; }
.max-w-\[410px\] { max-width: 410px; }
.max-w-\[493px\] { max-width: 493px; }
.max-w-\[380px\] { max-width: 380px; }
.max-h-\[317px\] { max-height: 317px; }
.max-h-\[178px\] { max-height: 178px; }
.max-h-\[345px\] { max-height: 345px; }
.max-h-\[190px\] { max-height: 190px; }
.sm\:-space-x-3\.5 > * + * { margin-left: -14px; }
.-space-x-2 > * + * { margin-left: -8px; }
@media (min-width: 768px) {
  .md\:gap-14 { gap: 56px; }
  .md\:mb-\[70px\] { margin-bottom: 70px; }
}
@media (min-width: 1024px) {
  .lg\:py-\[100px\] { padding-top: 100px; padding-bottom: 100px; }
  .lg\:p-\[42px\] { padding: 42px; }
  .lg\:text-tagline-1 {
    font-size: var(--text-tagline-1, 1rem);
    line-height: var(--text-tagline-1--line-height, 1.5);
  }
}
@media (min-width: 1280px) {
  .xl\:max-w-\[233px\] { max-width: 233px; }
  .xl\:max-w-\[326px\] { max-width: 326px; }
  .xl\:max-w-\[255px\] { max-width: 255px; }
  .xl\:max-w-\[286px\] { max-width: 286px; }
}

/* ----- Über uns: avatar marquee box ----- */
.max-w-\[680px\] { max-width: 680px; }
.max-w-\[168px\] { max-width: 168px; }
.min-w-\[168px\] { min-width: 168px; }
.max-w-\[450px\] { max-width: 450px; }
.rounded-\[300px\] { border-radius: 300px; }
.gap-x-7 { column-gap: 28px; }
.ml-7 { margin-left: 28px; }
.pt-\[25px\] { padding-top: 25px; }
.pb-\[27px\] { padding-bottom: 27px; }
.space-y-6 > * + * { margin-top: 24px; }
.space-y-7 > * + * { margin-top: 28px; }
@media (min-width: 768px) {
  .md\:p-5 { padding: 20px; }
}
@media (min-width: 1280px) {
  .xl\:p-8 { padding: 32px; }
}
@media (max-width: 767.98px) {
  .max-md\:space-y-0\.5 > * + * { margin-top: 2px; }
}
/* fallback for the AI-app heading utility */
.text-it-heading-6 { font-size: 1rem; line-height: 1.4; }

.jh-rating-pill { padding-left: 10px; padding-right: 4px; }
.jh-rating-num {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  margin-left: 2px;
  margin-right: auto;
  white-space: nowrap;
}
.jh-rating-avatar {
  flex: 0 0 auto;
  overflow: visible;
  border-radius: 50%;
}
figure.jh-rating-avatar img {
  border-radius: 50%;
}
.jh-cv-badge {
  position: absolute;
  left: -2px;
  bottom: -2px;
  background: #7eb547;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 999px;
  border: 2px solid #fff;
  line-height: 1.1;
}

/* ----- Über uns hero ----- */
.jh-about-hero-title {
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.05;
}
.bg-\[url\(\'\.\/images\/ns-img-128\.svg\'\)\] { background-image: url('../images/ns-img-128.svg'); }
.dark .dark\:bg-\[url\(\'\.\/images\/ns-img-dark-97\.svg\'\)\] { background-image: url('../images/ns-img-dark-97.svg'); }
.mt-3 { margin-top: 12px; }
.mb-16 { margin-bottom: 64px; }
.pt-\[140px\] { padding-top: 140px; }
.pb-\[50px\] { padding-bottom: 50px; }
.max-w-\[1600px\] { max-width: 1600px; }
.max-w-\[719px\] { max-width: 719px; }
.max-w-\[405px\] { max-width: 405px; }
.gap-y-7 { row-gap: 28px; }
@media (max-width: 1023.98px) { .max-lg\:pb-20 { padding-bottom: 80px; } }
@media (min-width: 640px) { .sm\:pt-\[170px\] { padding-top: 170px; } }
@media (min-width: 768px) {
  .md\:mb-\[100px\] { margin-bottom: 100px; }
  .md\:rounded-t-\[20px\] { border-top-left-radius: 20px; border-top-right-radius: 20px; }
  .md\:pb-\[80px\] { padding-bottom: 80px; }
  .md\:gap-x-9 { column-gap: 36px; }
  .md\:space-y-\[70px\] > * + * { margin-top: 70px; }
}
@media (min-width: 1024px) {
  .lg\:pt-\[176px\] { padding-top: 176px; }
  .lg\:pb-\[100px\] { padding-bottom: 100px; }
}

/* ----- CTA box above the footer ----- */
.jh-cta-heading { font-weight: 700; font-size: clamp(2rem, 6vw, 70px); line-height: 1.1; }

/* Über uns CTA variant — smaller headline + 80% wide card centered */
.jh-cta-heading--sm { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.15; }
.jh-cta-box--narrow {
  width: 80%;
  max-width: 1152px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 767.98px) {
  .jh-cta-box--narrow { width: calc(100% - 32px); }
}
.jh-cta-lead { color: #000; font-weight: 500; letter-spacing: 0.1px; }
.dark .jh-cta-lead { color: var(--color-accent); }

.py-\[76px\] { padding-top: 76px; padding-bottom: 76px; }
.py-\[100px\] { padding-top: 100px; padding-bottom: 100px; }
.bottom-\[-103px\] { bottom: -103px; }
.left-\[-120px\] { left: -120px; }
.top-\[-152px\] { top: -152px; }
.right-\[-104px\] { right: -104px; }
.max-w-\[230px\] { max-width: 230px; }
.max-w-\[290px\] { max-width: 290px; }
.max-w-\[558px\] { max-width: 558px; }
@media (min-width: 768px) {
  .md\:py-\[150px\] { padding-top: 150px; padding-bottom: 150px; }
  .md\:top-\[-195px\] { top: -195px; }
  .md\:right-\[-188px\] { right: -188px; }
  .md\:max-w-\[300px\] { max-width: 300px; }
  .md\:max-w-\[400px\] { max-width: 400px; }
}
@media (min-width: 1024px) {
  .lg\:max-w-\[340px\] { max-width: 340px; }
  .lg\:max-w-\[450px\] { max-width: 450px; }
}
@media (min-width: 1280px) {
  .xl\:max-w-\[386px\] { max-width: 386px; }
  .xl\:max-w-\[535px\] { max-width: 535px; }
}

/* ----- Pricing plan cards: title pill straddling the top border ----- */
/* Flex column + h-100 + auto-margin on the CTA pins the buttons to the
   same vertical baseline even when the two cards have different feature lists. */
.jh-plan-card {
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.jh-plan-card--blue { border-color: #304bf4; }
.jh-plan-card--orange { border-color: #fa6753; }
.jh-plan-card .jh-plan-cta { margin-top: auto; }
/* The col-span wrapper inherits a stretched grid cell — make sure it actually
   passes that height down to the card. */
.jh-plan-card-col { display: flex; }
.jh-plan-card-col > .jh-plan-card { width: 100%; }

.jh-plan-pill {
  display: inline-block;
  color: #fff;
  padding: 10px 25px;
  border-radius: 10px;
  position: relative;
  transform: translateY(-50%);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  max-width: calc(100% - 2rem);
}
.jh-plan-pill--blue { background: #304cf4; }
.jh-plan-pill--orange { background: #fa6753; }

/* CTA centered, capped at 80% width */
.jh-plan-cta { text-align: center; }
.jh-plan-cta .btn {
  max-width: 80%;
  margin: 0 auto;
  left: auto;
}
/* Orange pricing card: CTA hovers in the orange brand colour to match its pill. */
.jh-plan-card--orange .jh-plan-cta .btn:hover {
  background-color: #fa6753;
  border-color: #fa6753;
  color: #fff;
}

/* ----- Pricing section backfill ----- */
.max-w-\[604px\] { max-width: 604px; }
.max-w-\[620px\] { max-width: 620px; }
.max-w-\[600px\] { max-width: 600px; }
.mb-\[34px\] { margin-bottom: 34px; }
.py-\[60px\] { padding-top: 60px; padding-bottom: 60px; }
.h-\[598px\] { height: 598px; }
.rounded-\[36px\] { border-radius: 36px; }
.rotate-\[2deg\] { rotate: 2deg; }
.translate-x-\[41\%\] { translate: 41% 0; }
.-translate-y-\[27\%\] { translate: 0 -27%; }
.ms-44 { margin-inline-start: 176px; }
.mt-11 { margin-top: 44px; }
.mt-16 { margin-top: 64px; }
.gap-3\.5 { gap: 14px; }
.z-\[10\] { z-index: 10; }
.before\:content-none::before { content: none; }
@media (min-width: 768px) {
  .md\:-translate-y-\[47\%\] { translate: 0 -47%; }
  .md\:ms-\[420px\] { margin-inline-start: 420px; }
}
@media (min-width: 1024px) {
  .lg\:-translate-y-\[25\%\] { translate: 0 -25%; }
  .lg\:ms-36 { margin-inline-start: 144px; }
  .lg\:ms-auto { margin-inline-start: auto; }
}
@media (min-width: 1280px) {
  .xl\:py-\[100px\] { padding-top: 100px; padding-bottom: 100px; }
  .xl\:translate-x-\[44\%\] { translate: 44% 0; }
  .xl\:-translate-y-\[33\%\] { translate: 0 -33%; }
  .xl\:ms-56 { margin-inline-start: 224px; }
}
@media (min-width: 1440px) {
  .lp\:ms-64 { margin-inline-start: 256px; }
}

/* Pricing toggle: when the hidden checkbox is checked, slide knob right and
   swap monthly→yearly prices via a peer/sibling-state matcher driven by JS */
.peer:checked ~ span .after\:rounded-full::after,
.peer-checked\:after\:translate-x-4:has(~ *),
input.peer:checked + span::after { transform: translate(16px, -50%); left: 2px; }

/* ----- What we offer (stack cards) backfill ----- */
.max-w-\[1440px\] { max-width: 1440px; }
.max-w-\[520px\] { max-width: 520px; }
.rounded-\[30px\] { border-radius: 30px; }
.gap-x-\[140px\] { column-gap: 140px; }
.gap-y-24 > *,
.gap-y-24 { row-gap: 96px; }
.py-20 { padding-top: 80px; padding-bottom: 80px; }
@media (min-width: 768px) {
  .md\:py-\[100px\] { padding-top: 100px; padding-bottom: 100px; }
  .md\:max-w-\[595px\] { max-width: 595px; }
  .md\:max-w-\[65\%\] { max-width: 65%; }
}
@media (min-width: 1024px) {
  .lg\:pb-\[88px\] { padding-bottom: 88px; }
  .lg\:flex-1 { flex: 1 1 0%; }
  .lg\:space-y-14 > * + * { margin-top: 56px; }
}
@media (min-width: 1280px) {
  .xl\:pb-\[200px\] { padding-bottom: 200px; }
}
@media (max-width: 639.98px) {
  .max-sm\:min-h-\[255px\] { min-height: 255px; }
}

/* badge-primary-light fallback */
.badge-primary-light {
  background-color: var(--color-primary-50, #eef1ff);
  color: var(--color-primary-500, #2f4df4);
}
.dark .badge-primary-light {
  background-color: rgba(47, 77, 244, 0.18);
  color: #c8d1ff;
}

/* ----- "Why trust us" section backfill ----- */
@media (min-width: 768px) {
  .md\:gap-y-18 { row-gap: 72px; }
  .md\:ms-16 { margin-inline-start: 64px; }
  .md\:max-w-\[208px\] { max-width: 208px; }
  .md\:bottom-1\/12 { bottom: 8.333333%; }
}
@media (min-width: 1024px) {
  .lg\:gap-x-\[60px\] { column-gap: 60px; }
  .lg\:ms-0 { margin-inline-start: 0; }
  .lg\:pt-\[88px\] { padding-top: 88px; }
  .lg\:pb-\[88px\] { padding-bottom: 88px; }
}
@media (min-width: 1280px) {
  .xl\:gap-x-\[100px\] { column-gap: 100px; }
  .xl\:pt-\[100px\] { padding-top: 100px; }
  .xl\:pb-\[100px\] { padding-bottom: 100px; }
  .xl\:max-w-\[253px\] { max-width: 253px; }
}
@media (max-width: 767.98px) {
  .max-md\:mb-18 { margin-bottom: 72px; }
}
.text-\[36px\] { font-size: 36px; }
.rotate-\[8deg\] { rotate: 8deg; }
.gap-4 { gap: 16px; }

/* "How it works" step cards: white default, brand-blue for the accented ones */
.jh-step-card { background-color: #fff; }
.dark .jh-step-card { background-color: var(--color-background-8); }
.jh-step-card--accent {
  background-color: var(--color-primary-500);
}
.jh-step-card--accent,
.jh-step-card--accent h3,
.jh-step-card--accent h4,
.jh-step-card--accent p { color: #fff; }

/* ----- How it works section backfill ----- */
.space-y-24 > * + * { margin-top: 96px; }
.p-10\.5 { padding: 42px; }
.rounded-\[80px\] { border-radius: 80px; }
.max-w-\[190px\] { max-width: 190px; }
.max-w-\[260px\] { max-width: 260px; }
.max-w-\[44px\] { max-width: 44px; }
.left-\[23\.5\%\] { left: 23.5%; }
.right-\[23\.5\%\] { right: 23.5%; }
.ring-8 { box-shadow: 0 0 0 8px var(--tw-ring-color, currentColor); }
.ring-white { --tw-ring-color: #fff; }
.gap-x-3 { column-gap: 12px; }
.gap-y-6 { row-gap: 24px; }
@media (max-width: 1279.98px) { .max-xl\:flex-wrap { flex-wrap: wrap; } }
@media (min-width: 768px) { .md\:max-w-\[306px\] { max-width: 306px; } }
@media (min-width: 1024px) {
  .lg\:pt-22 { padding-top: 88px; }
  .lg\:pb-22 { padding-bottom: 88px; }
}
@media (min-width: 1280px) {
  .xl\:pt-39 { padding-top: 156px; }
}

/* v2 button (dark pill → primary on hover) — from ai-resume-builder */
.btn-xl-v2 {
  height: 54px;
  padding-inline: 32px;
  padding-block: 14px;
  font-size: 15px;
  line-height: 1.4;
}
.btn-secondary-v2 {
  background-color: var(--color-secondary);
  color: var(--color-white);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.26);
}
.btn-secondary-v2 .btn-v2-icon { fill: var(--color-white); }
.group\/btn-v2:hover .group-hover\/btn-v2\:btn-primary-v2 {
  background-color: var(--color-primary-500);
  color: var(--color-white);
}
.group\/btn-v2:hover .group-hover\/btn-v2\:btn-primary-v2 .btn-v2-icon { fill: var(--color-white); }
.group\/btn-v2:hover .group-hover\/btn-v2\:translate-x-1 { transform: translateX(4px); }
.group\/btn-v2:hover .group-hover\/btn-v2\:translate-x-6 { transform: translateX(24px); }
.btn-v2-icon svg { width: 100%; height: 100%; display: block; }

/* ----- Ablauf section: figure responsive max-widths ----- */
.max-w-\[320px\] { max-width: 320px; }
@media (min-width: 425px) { .min-\[425px\]\:max-w-\[350px\] { max-width: 350px; } }
@media (min-width: 475px) { .min-\[475px\]\:max-w-\[450px\] { max-width: 450px; } }
@media (min-width: 640px) { .sm\:max-w-\[600px\] { max-width: 600px; } }
@media (min-width: 768px) { .md\:max-w-\[700px\] { max-width: 700px; } }
@media (min-width: 1024px) { .lg\:max-w-\[980px\] { max-width: 980px; } }
@media (min-width: 1280px) { .xl\:max-w-\[1140px\] { max-width: 1140px; } }
/* `lp:` is a custom breakpoint in the source template (~1440px) */
@media (min-width: 1440px) { .lp\:max-w-\[1240px\] { max-width: 1240px; } }

/* sm: breakpoint utilities used by the testimonial block */
@media (min-width: 640px) {
  .sm\:text-left { text-align: left; }
  .sm\:px-0 { padding-left: 0; padding-right: 0; }
  .sm\:pl-10 { padding-left: 40px; }
  .sm\:mb-10 { margin-bottom: 40px; }
  .sm\:mb-5 { margin-bottom: 20px; }
}

/* md: utilities */
@media (min-width: 768px) {
  .md\:py-10 { padding-top: 40px; padding-bottom: 40px; }
  .md\:mb-7 { margin-bottom: 28px; }
  /* image positioning: bottom-right absolute so the tall image
     overflows above the rounded card */
  .md\:absolute { position: absolute; }
  .md\:right-0 { right: 0; }
  .md\:bottom-0 { bottom: 0; }
  .md\:mx-0 { margin-left: 0; margin-right: 0; }
}

/* Matthias testimonial gradient blob: positioned in the top-left corner.
   ns-img-523.png is a much smaller, denser gradient than ns-img-504. */
.jh-matthias-gradient {
  width: 420px;
  height: 420px;
  top: -120px;
  left: -120px;
  transform: rotate(-101deg);
  rotate: none;
  translate: none;
  scale: none;
  opacity: 1;
  filter: blur(0px);
}
@media (min-width: 768px) {
  .jh-matthias-gradient {
    width: 560px;
    height: 560px;
    top: -180px;
    left: -180px;
  }
}
@media (min-width: 1024px) {
  .jh-matthias-gradient {
    width: 640px;
    height: 640px;
    top: -240px;
    left: -291px;
    rotate: -25deg;
  }
}
@media (min-width: 1280px) {
  .xl\:pr-24 { padding-right: 96px; }
}
@media (min-width: 1536px) {
  .\32xl\:pr-\[120px\] { padding-right: 120px; }
}

/* Backfill for the mirrored Zwerschina testimonial (image on the left) */
.order-1 { order: 1; }
.order-2 { order: 2; }
@media (min-width: 1024px) {
  .lg\:order-none { order: 0; }
  .lg\:ps-\[42px\] { padding-inline-start: 42px; }
  .lg\:pr-14 { padding-right: 56px; }
  .lg\:ms-auto { margin-inline-start: auto; }
}
@media (min-width: 1536px) {
  .\32xl\:ps-\[200px\] { padding-inline-start: 200px; }
}
@media (min-width: 640px) {
  .sm\:pr-10 { padding-right: 40px; }
}
@media (min-width: 768px) {
  .md\:left-0 { left: 0; }
}

/* below md the image becomes a centered flex item */
@media (max-width: 767.98px) {
  .max-md\:flex { display: flex; }
  .max-md\:items-center { align-items: center; }
  .max-md\:justify-center { justify-content: center; }
}


/* === Brand color overrides ===
   Main brand color (#2f4df4) replaces the template's purple primary scale.
   CTA buttons get the secondary orange (#fa6752). */
:root {
  --color-primary-50: #eef1ff;
  --color-primary-400: #5a72f6;
  --color-primary-500: #2f4df4;
  --color-primary-600: #1f3bdb;
  --color-jobheld-cta: #fa6752;
  --color-jobheld-cta-hover: #e85541;
}

/* Use the literal casing from the HTML — no forced lower/upper transform.
   Template defaults force `text-transform: lowercase` on .btn and uppercase
   on .btn span:first-letter; override both. */
.btn,
.btn span,
.btn span:first-letter {
  text-transform: none;
}

/* CTA buttons use the orange accent across the page */
.btn-primary {
  background-color: var(--color-jobheld-cta);
  border-color: var(--color-jobheld-cta);
}
.btn-primary:where(.dark, .dark *) {
  border-color: var(--color-jobheld-cta);
}
.btn-primary:hover {
  background-color: var(--color-jobheld-cta-hover);
  border-color: var(--color-jobheld-cta-hover);
}

/* === jobheld hero === */
.jh-hero {
  padding: 146px 0 140px;
  position: relative;
  overflow: hidden;
}
.jh-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}

/* Center the hero copy on mobile (below lg) — text, headline + CTAs */
@media (max-width: 1023.98px) {
  .jh-hero-grid { text-align: center; }
  .jh-hero h1 { text-align: center; }
  .jh-hero .jh-actions,
  .jh-hero .jh-actions--top { justify-content: center; }
  .jh-hero .jh-eyebrow { margin-left: auto; margin-right: auto; }
  .jh-hero-figure { margin-left: auto; margin-right: auto; }
}
@media (min-width: 1024px) {
  .jh-hero-grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
  }
  /* DOM order stays copy-first (better for mobile + a11y), then at lg+
     we flip so the visual sits on the left. */
  .jh-hero-grid > :first-child { order: 2; }
  .jh-hero-grid .jh-visual    { order: 1; }
}
.jh-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: #eef1ff;
  color: var(--color-primary-500);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dark .jh-eyebrow {
  background: rgba(47, 77, 244, 0.18);
  color: #c8d1ff;
}
.jh-hero h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--color-secondary);
  margin: 24px 0 0;
}
.dark .jh-hero h1 {
  color: var(--color-accent);
}
.jh-hero h1 .jh-accent {
  color: var(--color-primary-500);
  display: block;
  margin-top: 0.35em;
}
.jh-lead {
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
  color: rgba(26, 26, 28, 0.7);
  max-width: 560px;
  margin: 28px 0 36px;
  line-height: 1.6;
}
.dark .jh-lead {
  color: rgba(252, 252, 252, 0.7);
}
.jh-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.jh-actions--top {
  margin-top: 36px;
}

/* Hero visual: jobheld hero image */
.jh-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
}
.jh-hero-figure {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
}
@media (min-width: 1024px) {
  .jh-hero-figure {
    /* push outside the column to make the image visually larger.
       Image now sits in the LEFT column, so the bleed goes left. */
    width: 110%;
    max-width: 130%;
    margin-left: -25%;
    margin-right: 0;
  }
}
.jh-hero-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  border-radius: 30px;
  background: #f9fafb;
}
.jh-orb {
  position: absolute;
  width: 420px;
  height: 420px;
  max-width: 90%;
  max-height: 90%;
  border-radius: 50%;
  background: rgba(250, 103, 82, 0.14);
  filter: blur(2px);
  transform: translate(28px, 12px);
  z-index: 0;
}
.jh-candidate-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  background: #fff;
  border: 1px solid var(--color-stroke-1);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(17, 31, 75, 0.1);
  padding: 22px;
}
.dark .jh-candidate-card {
  background: var(--color-background-6);
  border-color: var(--color-stroke-7);
}
.jh-candidate-top {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}
.jh-avatar {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: rgba(47, 77, 244, 0.12);
  display: grid;
  place-items: center;
  color: var(--color-primary-500);
  font-weight: 900;
  flex: 0 0 auto;
}
.jh-candidate-name {
  font-weight: 800;
  color: var(--color-secondary);
  margin: 0;
  font-size: 1.1rem;
}
.dark .jh-candidate-name {
  color: var(--color-accent);
}
.jh-candidate-role {
  display: block;
  color: rgba(26, 26, 28, 0.6);
  font-size: 0.86rem;
  margin-top: 2px;
}
.dark .jh-candidate-role {
  color: rgba(252, 252, 252, 0.6);
}
.jh-match {
  margin-left: auto;
  background: #e9f8ef;
  color: #12703a;
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  white-space: nowrap;
}
.dark .jh-match {
  background: rgba(18, 112, 58, 0.25);
  color: #c8f0d6;
}
.jh-criteria {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}
.jh-criteria-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  background: var(--color-background-3);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 0.92rem;
  color: var(--color-secondary);
}
.dark .jh-criteria-row {
  background: var(--color-background-9);
  color: var(--color-accent);
}
.jh-criteria-row span:first-child::before {
  content: '\2713';
  color: #138f4f;
  font-weight: 900;
  margin-right: 8px;
}
.jh-criteria-row strong {
  font-weight: 700;
}
.jh-note {
  background: #fff6f0;
  border: 1px solid #ffded4;
  border-radius: 12px;
  padding: 14px;
  font-size: 0.9rem;
  color: #5a3b33;
}
.dark .jh-note {
  background: rgba(250, 103, 82, 0.12);
  border-color: rgba(250, 103, 82, 0.32);
  color: #ffd9cc;
}
.jh-chat-card {
  position: absolute;
  left: 12px;
  bottom: 24px;
  width: 240px;
  background: #fff;
  border: 1px solid var(--color-stroke-1);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(17, 31, 75, 0.14);
  padding: 12px;
  z-index: 2;
}
.dark .jh-chat-card {
  background: var(--color-background-6);
  border-color: var(--color-stroke-7);
}
.jh-bubble {
  padding: 10px 12px;
  background: #f2f4ff;
  border-radius: 10px;
  margin: 6px 0;
  font-size: 0.8rem;
  color: #3b4261;
  line-height: 1.4;
}
.jh-bubble.alt {
  background: #fff0f0;
  color: #5a3030;
}
.dark .jh-bubble {
  background: rgba(47, 77, 244, 0.18);
  color: #e6ebff;
}
.dark .jh-bubble.alt {
  background: rgba(250, 103, 82, 0.18);
  color: #ffe1d9;
}

@media (max-width: 1023px) {
  .jh-chat-card {
    position: relative;
    left: 0;
    bottom: 0;
    margin: 18px auto 0;
  }
  .jh-visual {
    min-height: auto;
  }
}

/* =========================================================================
   Blog index — full-width hero cards (image left / content right) + pagination
   Mirrors the legacy WordPress .blog-item layout: gray container, large
   padding, 45/45 split with a 10% gutter, dark pill CTA.
   ========================================================================= */
.jh-blog-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
@media (min-width: 1024px) {
  .jh-blog-list { gap: 80px; }
}
.jh-blog-item { display: block; }
.jh-blog-item__inner {
  background: #fff;
  border-radius: 24px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 768px) {
  .jh-blog-item__inner {
    flex-direction: row;
    align-items: center;
    padding: 40px;
    gap: 8%;
  }
}
@media (min-width: 1280px) {
  .jh-blog-item__inner {
    padding: 50px 70px;
    gap: 10%;
  }
}
.dark .jh-blog-item__inner { background: var(--color-background-6); }

.jh-blog-item__media {
  display: block;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #e8e8ea;
  flex-shrink: 0;
}
.jh-blog-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 4 / 3;
  transition: transform 0.4s ease;
}
.jh-blog-item__media:hover img { transform: scale(1.03); }

@media (min-width: 768px) {
  .jh-blog-item__media   { width: 45%; flex: 0 0 45%; }
  .jh-blog-item__content { width: 45%; flex: 0 0 45%; }
}

.jh-blog-item__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.jh-blog-item__date {
  font-size: 0.85rem;
  color: #4a4a4a;
  margin: 0;
}
.dark .jh-blog-item__date { color: var(--color-accent); }

.jh-blog-item__title {
  font-size: clamp(1.6rem, 1rem + 1.4vw, 2.6rem);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
  color: inherit;
}
.jh-blog-item__title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 0.3s ease;
}
.jh-blog-item__title a:hover { background-size: 100% 1px; }

.jh-blog-item__subtitle {
  font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.35rem);
  line-height: 1.35;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}
.dark .jh-blog-item__subtitle { color: #f3f3f3; }

.jh-blog-item__cta { margin: 12px 0 0; }
.jh-blog-item__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.jh-blog-item__btn:hover { background: #2f4df4; transform: translateY(-1px); }
.dark .jh-blog-item__btn { background: #fff; color: #111; }
.dark .jh-blog-item__btn:hover { background: #fa6752; color: #fff; }

.jh-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.jh-pagination__nav,
.jh-pagination__list a,
.jh-pagination__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--color-stroke-1);
  background: #fff;
  font-size: 0.95rem;
  color: var(--color-primary);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.jh-pagination__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0.5rem;
}
.jh-pagination__nav:hover,
.jh-pagination__list a:hover {
  background: #2f4df4;
  border-color: #2f4df4;
  color: #fff;
}
.jh-pagination__current {
  background: #2f4df4;
  border-color: #2f4df4;
  color: #fff;
  font-weight: 600;
}
.dark .jh-pagination__nav,
.dark .jh-pagination__list a {
  background: var(--color-background-6);
  border-color: var(--color-stroke-7);
  color: var(--color-accent);
}

/* =========================================================================
   Single post layout
   ========================================================================= */
.jh-post__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--color-secondary);
  margin: 0;
}
.jh-post__title {
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
  margin: 0;
}
@media (min-width: 640px) { .jh-post__title { font-size: 2.4rem; } }
@media (min-width: 1024px) { .jh-post__title { font-size: 2.8rem; } }
.jh-post__excerpt {
  font-size: 1.1rem;
  color: var(--color-secondary);
  line-height: 1.5;
  margin: 0;
}
.jh-post__hero {
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #f3f4f8;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.jh-post__hero img {
  width: 100%;
  height: auto;
  display: block;
}
.jh-post__body {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-primary);
}
.jh-post__body > div > * + * { margin-top: 1.1rem; }
.jh-post__body h2 {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 2.5rem;
}
.jh-post__body h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 2rem;
}
.jh-post__body p { margin: 0; }
.jh-post__body a { color: #2f4df4; text-decoration: underline; text-underline-offset: 3px; }
.jh-post__body a:hover { color: #fa6752; }
.jh-post__body ul,
.jh-post__body ol {
  padding-left: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.jh-post__body blockquote {
  border-left: 4px solid #2f4df4;
  background: #f4f6ff;
  padding: 1rem 1.25rem;
  border-radius: 0 12px 12px 0;
  font-style: italic;
  color: #25305c;
}
.dark .jh-post__body blockquote {
  background: rgba(47, 77, 244, 0.15);
  color: #e6ebff;
}
.jh-post__body img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
  margin: 1.5rem auto;
}

.jh-post__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.3rem;
  border-radius: 16px;
  border: 1px solid var(--color-stroke-1);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.jh-post__nav:hover {
  border-color: rgba(47, 77, 244, 0.5);
  transform: translateY(-2px);
}
.jh-post__nav--next { text-align: right; align-items: flex-end; }
.jh-post__nav-label {
  font-size: 0.8rem;
  color: var(--color-secondary);
}
.jh-post__nav-title {
  font-weight: 600;
  line-height: 1.35;
}
.dark .jh-post__nav {
  background: var(--color-background-6);
  border-color: var(--color-stroke-7);
}

/* FAQ accordion: black paragraph text + breathing room around lists */
.accordion-content p { color: #000; }
.accordion-content ul,
.accordion-content ol {
  padding-top: 15px;
  padding-bottom: 15px;
}

/* Stack cards (index hero feature pile): alternate the border between
   jobheld orange and jobheld blue, and match the inline icon to its border. */
.stack-cards .stack-cards__item:nth-child(odd)  { border-color: #fa6752; }
.stack-cards .stack-cards__item:nth-child(even) { border-color: #2f4df4; }
.stack-cards .stack-cards__item:nth-child(odd)  .jh-stack-icon { color: #fa6752; }
.stack-cards .stack-cards__item:nth-child(even) .jh-stack-icon { color: #2f4df4; }
/* Icon set to 40px and tightened against the title that follows. */
.stack-cards .jh-stack-icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 0;
}
.stack-cards .stack-cards__item.space-y-6 > * + * {
  margin-top: 12px;
}

/* ============================================================================
   Testimonials slider (index)
   Centered swiper carousel. Side slides are scaled, faded and blurred so the
   focus naturally lands on the active card in the middle.
   ============================================================================ */
.jh-testimonial-swiper {
  padding: 16px 0 32px; /* a bit of breathing room above/below */
}
.jh-testimonial-swiper .swiper-slide {
  width: 530px;
  max-width: 90vw;
  transition: transform 0.55s ease, opacity 0.55s ease, filter 0.55s ease;
  transform: scale(0.85);
  opacity: 0.35;
  filter: blur(2px);
}
.jh-testimonial-swiper .swiper-slide-active {
  transform: scale(1);
  opacity: 1;
  filter: none;
}
/* Below xl: drop the scale/opacity/blur fade so the slider stays flat — no
   gradient-looking edges from the side slides at narrow widths. */
@media (max-width: 1279.98px) {
  .jh-testimonial-swiper .swiper-slide {
    transform: none;
    opacity: 1;
    filter: none;
  }
}
.jh-testimonial-card {
  background: #fff;
  border: 1px solid var(--color-stroke-1);
  border-radius: 24px;
  padding: 36px 32px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 22px 48px rgba(17, 31, 75, 0.06);
}
.dark .jh-testimonial-card {
  background: var(--color-background-6);
  border-color: var(--color-stroke-7);
  box-shadow: none;
}
.jh-testimonial-card__rating {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 0 0 18px;
}
.jh-testimonial-card__rating svg {
  width: 20px;
  height: 20px;
  fill: #fa6752;
}
.jh-testimonial-card__title {
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 700;
  color: #1a1a1c;
  margin: 0 0 18px;
  text-align: center;
}
.dark .jh-testimonial-card__title { color: var(--color-accent); }
.jh-testimonial-card__quote {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #1a1a1c;
  text-align: center;
  margin: 0 0 28px;
  flex: 1;
}
.dark .jh-testimonial-card__quote { color: var(--color-accent); }
.jh-testimonial-card__person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.jh-testimonial-card__person figure {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  overflow: hidden;
  margin: 0;
}
.jh-testimonial-card__person img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.jh-testimonial-card__attribution {
  font-size: 0.9rem;
  color: rgba(26, 26, 28, 0.7);
  font-weight: 500;
  margin: 0;
}
.dark .jh-testimonial-card__attribution { color: rgba(255, 255, 255, 0.7); }

/* Navigation buttons */
.jh-testimonial-prev,
.jh-testimonial-next {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--color-stroke-1);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1c;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.jh-testimonial-prev:hover,
.jh-testimonial-next:hover {
  background: #2f4df4;
  border-color: #2f4df4;
  color: #fff;
}
.dark .jh-testimonial-prev,
.dark .jh-testimonial-next {
  background: var(--color-background-6);
  border-color: var(--color-stroke-7);
  color: var(--color-accent);
}
.jh-testimonial-prev[disabled],
.jh-testimonial-next[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Lets a section's .main-container break out to a wider 1600px frame at lg+
   while keeping the regular container width on smaller screens. */
@media (min-width: 1024px) {
  .main-container.mw-1600-on-large { max-width: 1600px; }
}

/* ----- Timeline section (Über uns) — backfill arbitrary Tailwind classes
   the pre-compiled main.css doesn't ship with. Sourced from the
   crypto-marketing template's main.css so responsive behaviour matches. */
.max-w-\[1464px\] { max-width: 1464px; }
.max-w-\[560px\]  { max-width: 560px; }
.rounded-\[365px\] { border-radius: 365px; }
.border-8         { border-width: 8px; }
.top-2\/3         { top: 66.6667%; }
.left-1\/2        { left: 50%; }
.-z-0             { z-index: 0; }
.-translate-x-\[50\%\] { transform: translateX(-50%); }
.dark .dark\:border-\[\#1F252F\] { border-color: #1F252F; }
@media (min-width: 640px) {
  .sm\:border-\[12px\] { border-width: 12px; }
  .sm\:px-\[60px\]     { padding-left: 60px; padding-right: 60px; }
  .sm\:max-w-\[560px\] { max-width: 560px; }
}
@media (min-width: 1024px) {
  .lg\:max-w-\[560px\] { max-width: 560px; }
}
@media (min-width: 1280px) {
  .xl\:py-\[120px\] { padding-top: 120px; padding-bottom: 120px; }
  .xl\:px-\[50px\]  { padding-left: 50px; padding-right: 50px; }
}
/* 2xl uses Tailwind's CSS escape `\32 ` for "2xl:". Note the trailing space —
   it terminates the hex escape so the parser keeps reading "xl:". */
@media (min-width: 1536px) {
  .\32 xl\:mx-auto      { margin-left: auto; margin-right: auto; }
  .\32 xl\:mb-\[183px\] { margin-bottom: 183px; }
  .\32 xl\:mt-\[70px\]  { margin-top: 70px; }
}