/* Scoped to .page-jhb-jobs .jhb-jobs-wrap */
.page-jhb-jobs .jhb-jobs-wrap /* jhb-jobs.css – extrahiert aus der gelieferten HTML-Datei */ :root {
--space-12:12px;--space-16:16px;--space-24:24px;--space-32:32px;
      --container:1180px;
      --radius:18px; --radius-lg:22px;
      --ink:#1F2937; --muted:#667085; --border:#ECEFF4;
      --brand-50:#FFF6EF; --brand-100:#FFE6D3; --brand-200:#FFD4B5; --brand-500:#FF6F1A; --brand-600:#EA5F0E;
      --brand: var(--brand-600);
      --brown:#91502A; --brown-600:#7B3F1E; --apricot:#FFE6D3;
      --tag-stationaer-bg:#D6F2E0; --tag-stationaer-bd:#AEE4C4; --tag-stationaer-tx:#0E5E3E;
      --tag-ambulant-bg:#D8E8FF;  --tag-ambulant-bd:#B7D4FF;  --tag-ambulant-tx:#114C9A;
      --tag-schule-bg:#FFE1C6;   --tag-schule-bd:#FFC89A;   --tag-schule-tx:#7C3E06;
      --tag-leitung-bg:#E3DCFD;  --tag-leitung-bd:#CEC3FA;  --tag-leitung-tx:#4C34C7;
      --tag-teamleitung-bg:#D7F1FB; --tag-teamleitung-bd:#BFE6F7; --tag-teamleitung-tx:#0B5B7A;
      --tag-hr-bg:#EADFFF;      --tag-hr-bd:#D9C8FF;      --tag-hr-tx:#5B31D6;
      --tag-schulbegleitung-bg: #FFE0EA; --tag-schulbegleitung-bd:#FFC2D6; --tag-schulbegleitung-tx:#8A174B;
      --shadow-sm:0 6px 14px rgba(17,24,39,.06); --shadow-md:0 14px 32px rgba(17,24,39,.08);
      --ring: color-mix(in oklab, var(--brand-600) 72%, white 28%);
}
.page-jhb-jobs {
--space-12:12px;--space-16:16px;--space-24:24px;--space-32:32px;
      --container:1180px;
      --radius:18px; --radius-lg:22px;
      --ink:#1F2937; --muted:#667085; --border:#ECEFF4;
      --brand-50:#FFF6EF; --brand-100:#FFE6D3; --brand-200:#FFD4B5; --brand-500:#FF6F1A; --brand-600:#EA5F0E;
      --brand: var(--brand-600);
      --brown:#91502A; --brown-600:#7B3F1E; --apricot:#FFE6D3;
      --tag-stationaer-bg:#D6F2E0; --tag-stationaer-bd:#AEE4C4; --tag-stationaer-tx:#0E5E3E;
      --tag-ambulant-bg:#D8E8FF;  --tag-ambulant-bd:#B7D4FF;  --tag-ambulant-tx:#114C9A;
      --tag-schule-bg:#FFE1C6;   --tag-schule-bd:#FFC89A;   --tag-schule-tx:#7C3E06;
      --tag-leitung-bg:#E3DCFD;  --tag-leitung-bd:#CEC3FA;  --tag-leitung-tx:#4C34C7;
      --tag-teamleitung-bg:#D7F1FB; --tag-teamleitung-bd:#BFE6F7; --tag-teamleitung-tx:#0B5B7A;
      --tag-hr-bg:#EADFFF;      --tag-hr-bd:#D9C8FF;      --tag-hr-tx:#5B31D6;
      --tag-schulbegleitung-bg: #FFE0EA; --tag-schulbegleitung-bd:#FFC2D6; --tag-schulbegleitung-tx:#8A174B;
      --shadow-sm:0 6px 14px rgba(17,24,39,.06); --shadow-md:0 14px 32px rgba(17,24,39,.08);
      --ring: color-mix(in oklab, var(--brand-600) 72%, white 28%);
}
.page-jhb-jobs .jhb-jobs-wrap /* Utility classes */ .text-center {
text-align:center
}
.page-jhb-jobs .jhb-jobs-wrap .mt-8 {
margin-top:8px
}
.page-jhb-jobs .jhb-jobs-wrap .mt-12 {
margin-top: var(--space-12)
}
.page-jhb-jobs .jhb-jobs-wrap .mt-14 {
margin-top:14px
}
.page-jhb-jobs .jhb-jobs-wrap .mt-24 {
margin-top: var(--space-24)
}
.page-jhb-jobs .jhb-jobs-wrap .mt-32 {
margin-top: var(--space-32)
}
.page-jhb-jobs .jhb-jobs-wrap .mt-34 {
margin-top:34px
}
.page-jhb-jobs .jhb-jobs-wrap .mb-12 {
margin-bottom: var(--space-12)
}
.page-jhb-jobs .jhb-jobs-wrap .max-w-760 {
max-width:760px
}
.page-jhb-jobs .jhb-jobs-wrap .max-w-960 {
max-width:960px
}
.page-jhb-jobs .jhb-jobs-wrap .mx-auto {
margin-left:auto; margin-right:auto
}
.page-jhb-jobs .jhb-jobs-wrap * {
box-sizing:border-box
}
.page-jhb-jobs .jhb-jobs-wrap html, .page-jhb-jobs .jhb-jobs-wrap body {
margin:0;padding:0;background:#fff;color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial
}
.page-jhb-jobs .jhb-jobs-wrap a {
color:inherit;text-decoration:none
}
.page-jhb-jobs .jhb-jobs-wrap :focus-visible {
outline:3px solid color-mix(in oklab, var(--brand-600) 86%, white 14%);outline-offset:3px;border-radius:10px
}
.page-jhb-jobs .jhb-jobs-wrap .container {
max-width:var(--container);margin:0 auto;padding:0 24px
}
.page-jhb-jobs .jhb-jobs-wrap .section {
padding:48px 0
}
.page-jhb-jobs .jhb-jobs-wrap h1, .page-jhb-jobs .jhb-jobs-wrap h2, .page-jhb-jobs .jhb-jobs-wrap h3 {
margin:0
}
.page-jhb-jobs .jhb-jobs-wrap h2 {
font-size:28px;font-weight:900;letter-spacing:-.01em;color:#0F172A;text-align:center;margin-bottom:12px
}
.page-jhb-jobs .jhb-jobs-wrap h3 {
font-size:18px;font-weight:800;letter-spacing:-.01em;text-align:center;margin-bottom:8px
}
.page-jhb-jobs .jhb-jobs-wrap p {
margin:0;color:var(--muted);line-height:1.65;text-align:center
}
.page-jhb-jobs .jhb-jobs-wrap .hero {
background:linear-gradient(180deg,var(--brand-50) 0,#fff 78%)
}
.page-jhb-jobs .jhb-jobs-wrap .hero .title {
text-align:center
}
.page-jhb-jobs .jhb-jobs-wrap .hero .lead {
max-width:960px; margin:12px auto 0; text-align:center; font-weight:700; color:#344054
}
@media (max-width:1024px) {
h1{font-size:40px}
}
.page-jhb-jobs .jhb-jobs-wrap .grid {
display:grid;align-items:stretch
}
.page-jhb-jobs .jhb-jobs-wrap .grid-2 {
grid-template-columns:repeat(2,1fr)
}
.page-jhb-jobs .jhb-jobs-wrap /* Mobile: Einsatzbereiche untereinander */ @media (max-width:640px) {
.grid-2{ grid-template-columns:1fr }
}
.page-jhb-jobs .jhb-jobs-wrap .card {
background:#fff;border:1px solid var(--border);border-bottom-color:#E5E7EB;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow .2s ease,transform .2s ease; will-change: transform, box-shadow; margin-bottom:16px
}
.page-jhb-jobs .jhb-jobs-wrap /* fix card width for centering in grid */ .job.card, .page-jhb-jobs .jhb-jobs-wrap .feature.card, .page-jhb-jobs .jhb-jobs-wrap .area-card.card {
width:100%; max-width: 100%; margin-left:auto; margin-right:auto; justify-self:center
}
.page-jhb-jobs .jhb-jobs-wrap .card:hover {
box-shadow:0 16px 38px rgba(17,24,39,.10);transform:translateY(-2px)
}
.page-jhb-jobs .jhb-jobs-wrap .pad {
padding: var(--space-24)
}
.page-jhb-jobs .jhb-jobs-wrap .feature {
display:flex;gap: var(--space-12);flex-direction:column;align-items:center;text-align:center
}
.page-jhb-jobs .jhb-jobs-wrap .feature .icon {
width:68px;aspect-ratio:1/1;border-radius:999px;background:radial-gradient(circle at 30% 30%, #fff 0%, #fff 46%, var(--brand-50) 100%);display:grid;place-items:center;border:1.5px solid var(--brand-100);color:var(--brand-600); box-shadow:0 8px 18px rgba(234,95,14,.12)
}
.page-jhb-jobs .jhb-jobs-wrap .feature p {
font-size:13px;color:var(--brown-600)
}
.page-jhb-jobs .jhb-jobs-wrap .pill {
display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:10px 16px;background:#fff;border:1.5px solid var(--brand-200);color:#EA5F0E;font-weight:800;box-shadow:0 10px 22px rgba(255,111,26,.15);position:relative;overflow:hidden; cursor:pointer
}
.page-jhb-jobs .jhb-jobs-wrap .pill svg {
flex:0 0 auto
}
.page-jhb-jobs .jhb-jobs-wrap .pill::before {
content:"";position:absolute;top:0;left:-140%;width:120%;height:100%;background:linear-gradient(110deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.65) 50%,rgba(255,255,255,0) 60%);transform:skewX(-12deg);animation:shimmer 2.2s ease-in-out infinite;opacity:.6;pointer-events:none
}
@keyframes shimmer {
0%{left:-140%}50%{left:10%}100%{left:140%}
}
.page-jhb-jobs .jhb-jobs-wrap .btn {
appearance:none;border:0;border-radius:999px;padding:0.5rem 1rem;font-weight:800;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;display:inline-flex;align-items:center;gap:10pxfont-size:0.9rem;line-height:1.2;
}
.page-jhb-jobs .jhb-jobs-wrap .btn:active {
transform:translateY(1px)
}
.page-jhb-jobs .jhb-jobs-wrap .btn-primary {
background:linear-gradient(180deg,var(--brand-500),var(--brand-600));color:#fff;box-shadow:0 10px 20px rgba(255,111,26,.25)font-size:0.9rem;padding:0.5rem 1rem;
}
.page-jhb-jobs .jhb-jobs-wrap .btn-primary:hover {
filter:brightness(1.03); transform:translateY(-1px); box-shadow:0 12px 26px rgba(255,111,26,.28)
}
.page-jhb-jobs .jhb-jobs-wrap .btn-ghost {
background:#fff;color:var(--brand-600);border:1.5px solid var(--brand-200)
}
.page-jhb-jobs .jhb-jobs-wrap .btn-ghost:hover {
background:var(--brand-50); transform:translateY(-1px)
}
.page-jhb-jobs .jhb-jobs-wrap .btn .i, .page-jhb-jobs .jhb-jobs-wrap .meta .chip .i, .page-jhb-jobs .jhb-jobs-wrap .feature .icon svg {
transform: translateY(0.5px)
}
.page-jhb-jobs .jhb-jobs-wrap .badge {
display:inline-block;font-size:0.75rem;font-weight:800;padding:0.25rem 0.6rem;border-radius:999px;border:1.25px solid;white-space:nowrap;position:relative;box-shadow:0 6px 14px rgba(17,24,39,.06), inset 0 1px 0 rgba(255,255,255,.65)
}
.page-jhb-jobs .jhb-jobs-wrap .badge::after {
content:"";position:absolute;inset:0;border-radius:999px;background:linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0));pointer-events:none
}
.page-jhb-jobs .jhb-jobs-wrap .badge.tag-stationaer {
background:linear-gradient(180deg,var(--tag-stationaer-bg),#E1F6EA);border-color:var(--tag-stationaer-bd);color:var(--tag-stationaer-tx)
}
.page-jhb-jobs .jhb-jobs-wrap .badge.tag-ambulant {
background:linear-gradient(180deg,var(--tag-ambulant-bg), #E6F0FF);border-color:var(--tag-ambulant-bd);color:var(--tag-ambulant-tx)
}
.page-jhb-jobs .jhb-jobs-wrap .badge.tag-schule {
background:linear-gradient(180deg,var(--tag-schule-bg),   #FFE9D4);border-color:var(--tag-schule-bd);color:var(--tag-schule-tx)
}
.page-jhb-jobs .jhb-jobs-wrap .badge.tag-leitung {
background:linear-gradient(180deg,var(--tag-leitung-bg),  #E9E4FD);border-color:var(--tag-leitung-bd);color:var(--tag-leitung-tx)
}
.page-jhb-jobs .jhb-jobs-wrap .badge.tag-teamleitung {
background:linear-gradient(180deg,var(--tag-teamleitung-bg),#D8F0FC);border-color:var(--tag-teamleitung-bd);color:var(--tag-teamleitung-tx)
}
.page-jhb-jobs .jhb-jobs-wrap .badge.tag-hr {
background:linear-gradient(180deg,var(--tag-hr-bg),       #EDE3FF);border-color:var(--tag-hr-bd);color:var(--tag-hr-tx)
}
.page-jhb-jobs .jhb-jobs-wrap .badge.tag-schulbegleitung {
background: linear-gradient(180deg, var(--tag-schulbegleitung-bg), #FFD4E2); border-color:var(--tag-schulbegleitung-bd); color:var(--tag-schulbegleitung-tx)
}
.page-jhb-jobs .jhb-jobs-wrap .inline-badges {
display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  margin-top:0;
}
.page-jhb-jobs .jhb-jobs-wrap .inline-badges .badge + .badge {
background:linear-gradient(180deg,#fff,#fff); border-color:#ECEFF4; color:#475467; box-shadow:none
}
.page-jhb-jobs .jhb-jobs-wrap .job {
display:flex;flex-direction:column;height:100%
}
.page-jhb-jobs .jhb-jobs-wrap .job-body {
padding:16px 22px;
  row-gap:10px;
  flex:1 1 auto;  /* grow to push footer down */
}

.page-jhb-jobs .jhb-jobs-wrap .job-body h3 {
font-size:22px;
  line-height:1.25;
  margin:0 0 12px;
}

@media (min-width:1025px) {
.job-body h3{
  font-size:22px;
  line-height:1.25;
  margin:0 0 12px;
}
}
.page-jhb-jobs .jhb-jobs-wrap .meta {
line-height:1.6;
  margin-top:14px;
  margin-bottom:18px;
  gap:6px;
}

.page-jhb-jobs .jhb-jobs-wrap .meta .chip {
display:flex;
  align-items:center;
  gap:8px;
}

.page-jhb-jobs .jhb-jobs-wrap .meta .chip .i {
color:#6B7280; opacity:.95; width:18px; height:18px
}
.page-jhb-jobs .jhb-jobs-wrap .i {
display:block
}
.page-jhb-jobs .jhb-jobs-wrap .job-actions {
display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top:12px;
  flex-wrap:wrap;
}
.page-jhb-jobs .jhb-jobs-wrap .job-footer {
display:flex;
  justify-content:space-between;
  align-items:center;   /* text und Herz vertikal zentriert */
  padding:10px 22px;
  background:#FFF5EF;
  border-top:1px solid #f8e0d6;
  min-height:42px;      /* fixierte Höhe für Einheitlichkeit */
}







.job-footer p {
margin:0;
  font-size:11.5px;
  line-height:1.3;
  color:#555;
  display:-webkit-box;
  -webkit-line-clamp:2;              /* max 2 lines */
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  height: calc(1.3em * 2);           /* fixed height = 2 lines */
  flex:1;
}





.job-footer .favorite-icon {
font-size: 16px;
  color: #999;
  cursor: pointer;
  transition: color 0.2s ease;
}


.job-footer .favorite-icon:hover {
color: #ff6600;                   /* Hover-Farbe Apricot/Orange */
}



.page-jhb-jobs .jhb-jobs-wrap .job-footer .fav.is-active {
color: var(--brand-600);
}
.page-jhb-jobs .jhb-jobs-wrap .job-footer .fav.is-active svg {
fill: currentColor;
}
.page-jhb-jobs .jhb-jobs-wrap .card:hover .job-footer {
display:flex;
  justify-content:space-between;
  align-items:center;   /* text und Herz vertikal zentriert */
  padding:10px 22px;
  background:#FFF5EF;
  border-top:1px solid #f8e0d6;
  min-height:42px;      /* fixierte Höhe für Einheitlichkeit */
}

















.page-jhb-jobs .jhb-jobs-wrap .section-title {
text-align:center;margin:24px 0 12px
}
.page-jhb-jobs .jhb-jobs-wrap .region-title .icon {
width: 28px; height: 28px; color: var(--brand-600);
}
.page-jhb-jobs .jhb-jobs-wrap .region-title {
display:inline-flex; align-items:center; gap:10px; transition: transform .15s ease, text-shadow .15s ease;
}
.page-jhb-jobs .jhb-jobs-wrap .region-title:hover {
transform: translateY(-1px); text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.page-jhb-jobs .jhb-jobs-wrap /* Extended, .page-jhb-jobs .jhb-jobs-wrap balanced separators */ .section-title .title-row {
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;max-width:960px;margin:0 auto
}
.page-jhb-jobs .jhb-jobs-wrap .section-title .title-row h2 {
white-space:nowrap;margin:0
}
.page-jhb-jobs .jhb-jobs-wrap .section-title .title-row .line {
width:100%;height:2px;position:relative;overflow:hidden;border-radius:2px;background:linear-gradient(90deg,rgba(234,95,14,.12),rgba(234,95,14,.4),rgba(234,95,14,.12))
}
.page-jhb-jobs .jhb-jobs-wrap .section-title .title-row .line::before {
content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(234,95,14,.65),transparent);transform:translateX(-100%);animation:sweep 3.4s ease-in-out infinite
}
@keyframes sweep {
0%{transform:translateX(-100%)}50%{transform:translateX(0%)}100%{transform:translateX(100%)}
}
.page-jhb-jobs .jhb-jobs-wrap /* Überschriften-Icons in Orange färben */ .section-title svg {
color: var(--brand-600);
}
.page-jhb-jobs .jhb-jobs-wrap .area-card .title {
font-weight:900;color:#9A4A17
}
.page-jhb-jobs .jhb-jobs-wrap .faq details {
border:1px solid var(--border);border-radius:16px;background:#fff
}
.page-jhb-jobs .jhb-jobs-wrap .faq details + details {
margin-top:14px
}
.page-jhb-jobs .jhb-jobs-wrap .faq summary {
padding:18px 20px;list-style:none;cursor:pointer;font-weight:800
}
.page-jhb-jobs .jhb-jobs-wrap .faq summary::-webkit-details-marker {
display:none
}
.page-jhb-jobs .jhb-jobs-wrap .faq details:hover {
background:#FFF0E4
}
.page-jhb-jobs .jhb-jobs-wrap .faq .content {
padding:0 20px 18px;color:#475467
}
.page-jhb-jobs .jhb-jobs-wrap /* Bottom Drawer */ .drawer-overlay {
position:fixed;inset:0;background:rgba(17,24,39,.45);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:98;
}
.page-jhb-jobs .jhb-jobs-wrap .drawer {
position:fixed;left:50%;right:auto;bottom:0;top:auto;
transform:translate(-50%,12px) scale(.98);
width:clamp(320px,96vw,720px);max-height:90vh;
background:#fff;border:1px solid rgba(0,0,0,.08);
border-radius:16px 16px 0 0;box-shadow:0 24px 64px rgba(17,24,39,.22);
display:grid;grid-template-rows:auto 1fr;overflow:hidden;
opacity:0;pointer-events:none;transition:opacity .22s ease,transform .24s cubic-bezier(.22,1,.36,1);z-index:99;
}
.page-jhb-jobs .jhb-jobs-wrap .drawer.open {
transform:translate(-50%,0) scale(1);opacity:1;pointer-events:auto;
}
.page-jhb-jobs .jhb-jobs-wrap .drawer-overlay.open {
opacity:1;pointer-events:auto
}
.page-jhb-jobs .jhb-jobs-wrap .drawer-header {
display:flex; align-items:center; gap:12px;
padding:16px 18px; border-bottom:1px solid rgba(0,0,0,.06);
background:linear-gradient(to bottom, rgba(249,250,251,.8), #fff);
cursor: grab; user-select:none;
}
.page-jhb-jobs .jhb-jobs-wrap .drawer-title {
font-weight:600;font-size:20px;line-height:1.3;flex:1;
}
.page-jhb-jobs .jhb-jobs-wrap .drag-handle {
position:absolute;left:50%;transform:translateX(-50%);top:8px;width:54px;height:5px;border-radius:999px;background:#E5E7EB
}
.page-jhb-jobs .jhb-jobs-wrap .drawer-body {
padding:18px;overflow:auto;
}
.page-jhb-jobs .jhb-jobs-wrap .form-grid {
display:grid;gap:12px;grid-template-columns:1fr;
}
.page-jhb-jobs .jhb-jobs-wrap label {
font-weight:600;font-size:14px;color:#111827
}
.page-jhb-jobs .jhb-jobs-wrap input, .page-jhb-jobs .jhb-jobs-wrap textarea, .page-jhb-jobs .jhb-jobs-wrap select {
width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;font-family:inherit;font-size:15px
}
.page-jhb-jobs .jhb-jobs-wrap textarea {
min-height:110px
}
.page-jhb-jobs .jhb-jobs-wrap .form-actions {
display:flex;gap:10px;margin-top:6px; justify-content:flex-end
}
@media (max-width:640px) {
.pill{justify-content:center;font-size:15px;padding:14px 20px}
      .card{margin-left:14px;margin-right:14px}
      .feature{ flex-direction:column; align-items:center; text-align:center; gap: var(--space-12) }
      .feature .icon{ width:68px }
      .feature .icon .i{ width:32px; height:32px }
      .area-card .feature .icon{ width:72px }
      
.job-body h3{
  font-size:22px;
  line-height:1.25;
  margin:0 0 12px;
}

      .inline-badges .badge{ font-size:11px; padding:7px 10px }
}
.page-jhb-jobs .jhb-jobs-wrap /* === Grid-Regeln für gleichgroße, .page-jhb-jobs .jhb-jobs-wrap zentrierte Karten === */ .grid-3 {
display:grid;grid-template-columns:repeat(auto-fit,340px);gap:var(--space-16);justify-content:center;
}
@media (max-width:1024px) {
.grid-3{ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); justify-items:center }
}
@media (max-width:640px) {
.grid-3{ grid-template-columns: 1fr; justify-items:center }
}
.page-jhb-jobs .jhb-jobs-wrap .section--tint {
background:linear-gradient(180deg,#fff 0,#FFF6EF 100%)
}
.page-jhb-jobs .jhb-jobs-wrap .subheading {
color:#EA5F0E; font-size:28px; font-weight:800; letter-spacing:-.01em
}
@media (prefers-reduced-motion: reduce) {
*{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important }
}
@media (max-width: 640px) {
/* mehr Luft vor den Einsatzbereichen */
      .grid.grid-2{ margin-top: 36px; }
}
.page-jhb-jobs .jhb-jobs-wrap /* Drawer polish */ .drawer[open] {
backdrop-filter: blur(4px);
}
.page-jhb-jobs .jhb-jobs-wrap .drawer .panel {
border-radius:var(--radius-lg);
      box-shadow:var(--shadow);
      padding: var(--space-24);
}
.page-jhb-jobs .jhb-jobs-wrap .drawer .panel header {
font-weight: 800;
      font-size: 20px;
      margin-bottom: 12px;
}
.page-jhb-jobs .jhb-jobs-wrap .drawer .panel .sub {
color: var(--muted);
      margin-bottom: 16px;
}
.page-jhb-jobs .jhb-jobs-wrap .form-grid input[type="file"] {
background: var(--soft);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px;
}
.page-jhb-jobs .jhb-jobs-wrap .form-grid .hint {
color: var(--muted); font-size: 13px; margin-top: 6px;
}
.page-jhb-jobs .jhb-jobs-wrap .form-grid .error {
color: #B91C1C; font-weight: 600; margin-top: 8px; display:none;
}
.page-jhb-jobs .jhb-jobs-wrap /* gezielt für Einsatzbereiche */ .areas-grid {
grid-template-columns:1fr; max-width:100%; gap:20px;
}
@media (max-width:640px) {
.areas-grid{ grid-template-columns:repeat(2,1fr); justify-items:center; gap: var(--space-16); max-width:900px; margin:0 auto }
}
@media (min-width:1025px) {
.feature .icon{ width:68px } .feature .icon .i{ width:32px; height:32px }
}
.page-jhb-jobs .jhb-jobs-wrap } /* Jobs: fixed columns and centered track */ .jobs-grid {
display:grid;grid-template-columns:repeat(auto-fit,380px);justify-content:center;gap:24px;
}
@media (max-width:1024px) {
.jobs-grid{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-16) }
}
@media (max-width:640px) {
.jobs-grid{ grid-template-columns: 1fr; padding: 0 16px }
}
@media (min-width:1025px) {
.area-card.card{ width: 400px }
}
@media (max-width:640px) {
.areas-grid{ grid-template-columns:1fr; max-width:100% }
}
.page-jhb-jobs .jhb-jobs-wrap /* Steps: three across on desktop, .page-jhb-jobs .jhb-jobs-wrap centered and roomier */ .page-jhb-jobs .jhb-jobs-wrap .steps-grid {
grid-template-columns:1fr; max-width:100%; gap:20px; justify-items:center;
}
.page-jhb-jobs .jhb-jobs-wrap .step-card {
padding: 28px
}
.page-jhb-jobs .jhb-jobs-wrap .step-title {
font-weight: 800
}
.page-jhb-jobs .jhb-jobs-wrap .step-badge {
width: 56px;
      height: 56px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      font-weight: 800;
      color: var(--brand-700);
      background:
        radial-gradient(circle at 30% 30%, #fff 0%, #fff 46%, var(--brand-50) 100%);
      border: 1.5px solid var(--brand-100);
      box-shadow: 0 10px 22px rgba(234,95,14,.12);
      margin: 0 auto 12px;
}
@media (min-width:1025px) {
.steps-grid{ grid-template-columns: repeat(3, minmax(260px, 1fr)); max-width: 1100px }
}
@media (max-width:640px) {
.page-jhb-jobs .jhb-jobs-wrap .steps-grid{ grid-template-columns: 1fr; max-width: 100% }
}
.page-jhb-jobs .jhb-jobs-wrap /* === Job count under "Aktuelle Stellenangebote" === */ .job-count {
margin-top: 12px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ff9966; /* dunkleres Apricot für besseren Glow */
  text-align: center;
  text-shadow: 0 0 8px rgba(255,153,102,.55);

.job-actions .btn{
  width:auto;
  flex:0 0 auto;
  font-size:14px;
  padding:10px 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  letter-spacing:.2px;
}
}
.page-jhb-jobs .jhb-jobs-wrap /* === Meta-Liste: neutralere Farbe statt Braun, .page-jhb-jobs .jhb-jobs-wrap Icons in Marken-Orange === */ .meta {
line-height:1.6;
  margin-top:14px;
  margin-bottom:18px;
  gap:6px;
}

.page-jhb-jobs .jhb-jobs-wrap /* === Mobile: Aktionen exakt mittig zwischen Meta und Footer ausrichten === */ @media (max-width:640px) {
.job-body{
  padding:16px 22px;
  row-gap:10px;
  flex:1 1 auto;  /* grow to push footer down */
}

  
.job-body h3{
  font-size:22px;
  line-height:1.25;
  margin:0 0 12px;
}

  .inline-badges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  margin-top:0;
}
  
.meta{
  line-height:1.6;
  margin-top:14px;
  margin-bottom:18px;
  gap:6px;
}

  .job-actions{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top:12px;
  flex-wrap:wrap;
}
  




.job-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;   /* text und Herz vertikal zentriert */
  padding:10px 22px;
  background:#FFF5EF;
  border-top:1px solid #f8e0d6;
  min-height:42px;      /* fixierte Höhe für Einheitlichkeit */
}






.job-footer p{
  margin:0;
  font-size:11.5px;
  line-height:1.3;
  color:#555;
  display:-webkit-box;
  -webkit-line-clamp:2;              /* max 2 lines */
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  height: calc(1.3em * 2);           /* fixed height = 2 lines */
  flex:1;
}




.job-footer .favorite-icon {
  font-size: 16px;
  color: #999;
  cursor: pointer;
  transition: color 0.2s ease;
}

.job-footer .favorite-icon:hover {
  color: #ff6600;                   /* Hover-Farbe Apricot/Orange */
}
}
.page-jhb-jobs .jhb-jobs-wrap /* Pill unter der Überschrift: Apricot-Hintergrund + Abstand nach oben */ .subheading + .pill {
margin-top: 10px;
}
.page-jhb-jobs .jhb-jobs-wrap .pill {
background: #FFE6D3;           /* apricot fill */
  border-color: #FFC9A6;
  color: #EA5F0E;
  box-shadow: 0 10px 24px rgba(255,153,102,.25);
}
.page-jhb-jobs .jhb-jobs-wrap /* Subtle bottom border on job cards for clear edge */ .job.card {
display:flex;
  flex-direction:column;
  height:100%;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}


.page-jhb-jobs .jhb-jobs-wrap /* === Steps: gleichgroß & hochwertiges Design === */ :root {
--step-w: 320px;
  --step-h: 190px;
  --step-gap: 22px;
  --step-shadow: 0 10px 28px rgba(17,24,39,.08);
  --step-shadow-hover: 0 16px 36px rgba(17,24,39,.12);
}
.page-jhb-jobs {
--step-w: 320px;
  --step-h: 190px;
  --step-gap: 22px;
  --step-shadow: 0 10px 28px rgba(17,24,39,.08);
  --step-shadow-hover: 0 16px 36px rgba(17,24,39,.12);
}
.page-jhb-jobs .jhb-jobs-wrap .steps-grid {
grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: var(--step-gap);
  max-width: 1100px;
  margin: 0 auto;
  justify-items: center;
}
@media (max-width:1024px) {
.page-jhb-jobs .jhb-jobs-wrap .steps-grid{ grid-template-columns: repeat(2, minmax(240px, 1fr)); max-width: 820px }
}
@media (max-width:640px) {
.page-jhb-jobs .jhb-jobs-wrap .steps-grid{ grid-template-columns: 1fr; max-width: 100% }
}
.page-jhb-jobs .jhb-jobs-wrap .step-card {
width: 100%;
  max-width: var(--step-w);
  height: var(--step-h);               /* feste Höhe: immer gleich groß */
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: center;
  justify-items: center;
  text-align: center;
  border-radius: 20px;
  background: linear-gradient(180deg,#fff 0,#fff 70%, #FFF6EF 140%); /* zarter Premium-Glanz */
  border: 1px solid #ECEFF4;
  box-shadow: var(--step-shadow);
  transition: box-shadow .18s ease, transform .18s ease;
}
.page-jhb-jobs .jhb-jobs-wrap .step-card:hover {
transform: translateY(-2px); box-shadow: var(--step-shadow-hover)
}
.page-jhb-jobs .jhb-jobs-wrap .step-badge {
display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #fff 46%, #FFE6D3 100%);
  border: 1.5px solid #FFD4B5;
  color: var(--brand-600);
  font-weight: 900; font-size: 18px;
  margin-bottom: 10px;
  box-shadow: 0 10px 22px rgba(255,153,102,.20);
}
.page-jhb-jobs .jhb-jobs-wrap .step-title {
font-weight: 900;
  font-size: 22px;
  color: #111827;
}
@media (min-width:900px) {
.drawer{top:50%;bottom:auto;transform:translate(-50%,-50%) scale(.98);width:clamp(560px,56vw,720px);border-radius:16px}.drawer.open{transform:translate(-50%,-50%) scale(1)}
}
@media (min-width:740px) {
.form-grid{grid-template-columns:1fr 1fr}.form-grid .span-2{grid-column:1 / -1}
}
.page-jhb-jobs .jhb-jobs-wrap .drawer.dragging {
transform:none !important
}
.page-jhb-jobs .jhb-jobs-wrap .drawer .btn {
border-radius:10px;padding:8px 12px;min-height:40px;font-size:14px;line-height:1.2;gap:8px
}
.page-jhb-jobs .jhb-jobs-wrap .drawer .btn-primary {
background:linear-gradient(180deg,var(--brand-500),var(--brand-600));color:#fff;box-shadow:0 6px 14px rgba(255,111,26,.18)
}
.page-jhb-jobs .jhb-jobs-wrap .drawer .btn-primary:disabled {
opacity:.55;cursor:not-allowed;box-shadow:none
}
.page-jhb-jobs .jhb-jobs-wrap .drawer .btn-ghost {
background:transparent;border:0;color:var(--brand-600);padding:8px 10px
}
.page-jhb-jobs .jhb-jobs-wrap .drawer .btn-ghost:hover {
background:rgba(0,0,0,.04);border-radius:8px
}
.page-jhb-jobs .jhb-jobs-wrap .drawer .btn .i {
width:14px;height:14px
}
.page-jhb-jobs .jhb-jobs-wrap .form-actions {
display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap
}
.page-jhb-jobs .jhb-jobs-wrap .antispam {
display:grid;gap:6px;margin-top:6px
}
.page-jhb-jobs .jhb-jobs-wrap .antispam .row {
display:flex;gap:8px;align-items:center
}
.page-jhb-jobs .jhb-jobs-wrap .antispam input {
padding:8px 10px;border:1px solid #E5E7EB;border-radius:8px;width:120px;font-size:14px
}
.page-jhb-jobs .jhb-jobs-wrap .antispam .hint {
color:#6B7280;font-size:.85rem
}
@media (max-width:739px) {
.page-jhb-jobs .jhb-jobs-wrap .antispam input{width:100%}.page-jhb-jobs .jhb-jobs-wrap .antispam .row{flex-direction:column;align-items:stretch}
}
.page-jhb-jobs .jhb-jobs-wrap .drawer-header:active {
cursor: grabbing;
}
.page-jhb-jobs .jhb-jobs-wrap /* Form field layout to avoid label overlap on focus */ .form-grid > label {
display:flex; flex-direction:column; gap:6px;
}
.page-jhb-jobs .jhb-jobs-wrap .form-grid input[type="text"], .page-jhb-jobs .jhb-jobs-wrap .form-grid input[type="email"], .page-jhb-jobs .jhb-jobs-wrap .form-grid input[type="tel"], .page-jhb-jobs .jhb-jobs-wrap .form-grid input[type="file"], .page-jhb-jobs .jhb-jobs-wrap .form-grid textarea {
padding:10px 12px;
  border:1px solid #E5E7EB;
  border-radius:10px;
  background:#fff;
  outline:0;
  box-shadow:none;
}
.page-jhb-jobs .jhb-jobs-wrap .form-grid input:focus, .page-jhb-jobs .jhb-jobs-wrap .form-grid textarea:focus {
border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.page-jhb-jobs .jhb-jobs-wrap /* === Desktop Scanability Improvements === */ @media (min-width:1025px) {
.job-body, .job-body h3, .job-body .meta, .job-actions{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top:12px;
  flex-wrap:wrap;
}
  .job-body 
.meta{
  line-height:1.6;
  margin-top:14px;
  margin-bottom:18px;
  gap:6px;
}

  
.job-body h3{
  font-size:22px;
  line-height:1.25;
  margin:0 0 12px;
}
}
.page-jhb-jobs .jhb-jobs-wrap /* Left color strip to quickly spot categories */ .job.card {
display:flex;
  flex-direction:column;
  height:100%;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}


.page-jhb-jobs .jhb-jobs-wrap /* Stronger hover affordance */ .job.card:hover {
box-shadow:0 14px 30px rgba(0,0,0,.08);
}

.page-jhb-jobs .jhb-jobs-wrap .job.card:hover .job-body h3 {
font-size:22px;
  line-height:1.25;
  margin:0 0 12px;
}

.page-jhb-jobs .jhb-jobs-wrap /* Emphasize location in meta as first chip */ .job .meta .chip:first-child {
font-weight:800; color:#0F172A;
}
.page-jhb-jobs .jhb-jobs-wrap /* === Extra spacing for headings and meta === */ .job-body h3 {
font-size:22px;
  line-height:1.25;
  margin:0 0 12px;
}

.page-jhb-jobs .jhb-jobs-wrap .job-body .meta {
line-height:1.6;
  margin-top:14px;
  margin-bottom:18px;
  gap:6px;
}

.page-jhb-jobs .jhb-jobs-wrap /* === Correct spacing below region headings === */ /* The region titles live inside .section-title; increase its bottom margin */ .section-title {
margin:24px 0 28px;
}
.page-jhb-jobs .jhb-jobs-wrap /* Extra safety: if a jobs grid follows immediately, .page-jhb-jobs .jhb-jobs-wrap add a dedicated top margin */ .section-title + .jobs-grid {
margin-top: 24px;
}
.page-jhb-jobs .jhb-jobs-wrap /* On wider screens, .page-jhb-jobs .jhb-jobs-wrap make it a bit roomier */ @media (min-width:1025px) {
.section-title{ margin-bottom: 32px; }
  .section-title + .jobs-grid{ margin-top: 28px; }
}
.page-jhb-jobs .jhb-jobs-wrap /* === Badge visibility tweaks (no side color strips) === */ .inline-badges {
display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  margin-top:0;
}
@media (min-width:1025px) {
.inline-badges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  margin-top:0;
}
}
.page-jhb-jobs .jhb-jobs-wrap .job .inline-badges .badge {
/* Subtle lift so badges carry the category emphasis */
  box-shadow: 0 6px 14px rgba(17,24,39,.06), inset 0 1px 0 rgba(255,255,255,.55);
}
.page-jhb-jobs .jhb-jobs-wrap /* === Global vertical rhythm for sections === */ section {
margin-top: 4rem;
  margin-bottom: 4rem;
}
@media (min-width:1025px) {
section{
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
}
.page-jhb-jobs .jhb-jobs-wrap /* Exceptions: header hero section should stay tight */ header + section {
margin-top: 0;
}
.page-jhb-jobs .jhb-jobs-wrap /* === Heading spacing (global) === */ h2 {
margin-bottom: 1.5rem;
}
.page-jhb-jobs .jhb-jobs-wrap h3 {
margin-bottom: 1rem;
}
@media (min-width:1025px) {
h2{ margin-bottom: 2rem; }
  h3{ margin-bottom: 1.25rem; }
}
.page-jhb-jobs .jhb-jobs-wrap /* The Einsatzbereiche block uses .section.section--tint */ .section.section--tint h2 {
font-size: 2rem;
  margin-bottom: 2.5rem;
}
@media (min-width:1025px) {
.section.section--tint h2{
    font-size: 2.25rem;
    margin-bottom: 3rem;
  }
}
.page-jhb-jobs .jhb-jobs-wrap /* Extra vertical space around Einsatzbereiche and before the next section */ .section.section--tint {
margin-bottom: 5rem;
}
.page-jhb-jobs .jhb-jobs-wrap .section.section--tint + .section {
margin-top: 5rem;
}


@media (min-width:1025px) {
/* Titles a touch larger with better line height */
  
.job-body h3{
  font-size:22px;
  line-height:1.25;
  margin:0 0 12px;
}


  /* Actions on one line with comfy spacing */
  .job-actions{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top:12px;
  flex-wrap:wrap;
}

  /* Buttons: a hair larger so they don't look cramped */
  
.job-actions .btn{
  width:auto;
  flex:0 0 auto;
  font-size:14px;
  padding:10px 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  letter-spacing:.2px;
}
}




.badge, .pill, .chip {
display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  font-weight:500;
  border-radius:10px;
}




.job-meta {
margin-top: 12px;   /* Abstand zu den Badges */
  margin-bottom: 16px; /* Abstand zu den Buttons */
  display: flex;
  flex-direction: column;
  gap: 6px;           /* Abstand zwischen den einzelnen Icons/Texten */
}


/* Jobs H1 – single definition */
.page-jhb-jobs .jhb-jobs-wrap h1 {
font-size:56px;             /* bigger again */
  line-height:1.2;
  font-weight:800;
  margin-top:48px;
  margin-bottom:30px;
  text-align:center;
  color:var(--brand-600);      /* orange */
}

@media (max-width:1024px) {
.page-jhb-jobs .jhb-jobs-wrap h1{ font-size:40px; margin-top:42px; }
}

@media (max-width:640px) {
.page-jhb-jobs .jhb-jobs-wrap h1{ font-size:34px; margin-top:36px; }
}


/* Meta (icons/list) – equal spacing between badges and buttons */
.job-meta, .job-info, .job-details, .job-content {
margin-top:12px;      /* space from badges */
  margin-bottom:16px;   /* space before buttons */
  display:flex;
  flex-direction:column;
  gap:8px;
}


.meta .chip span {
overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


.job-actions .btn:hover {
transform: translateY(-1px);
}


.job-actions .btn:focus-visible {
outline:2px solid var(--brand-300);
  outline-offset:2px;
}


.region-title {
margin:22px 0 18px;
}



.job-footer .favorite-icon, .job-footer .fav, .job-footer .like, .job-footer .heart {
flex:0 0 auto;
  font-size:16px;
  color:#999;
  cursor:pointer;
  transition:color .2s ease;
}

.job-footer .favorite-icon:hover, .job-footer .fav:hover, .job-footer .like:hover, .job-footer .heart:hover {
color:#ff6600;
}


/* Robust footer equalization without relying on element type (p/span/div) */
.job.card {
display:flex; flex-direction:column;
}


.job-body {
flex:1 1 auto;
}



.job-footer {
display:flex;
  justify-content:space-between;
  align-items:center;   /* text und Herz vertikal zentriert */
  padding:10px 22px;
  background:#FFF5EF;
  border-top:1px solid #f8e0d6;
  min-height:42px;      /* fixierte Höhe für Einheitlichkeit */
}



/* Text container = first child (works for p, span, or div) */

.job-footer > :first-child {
font-size:12.5px;
  line-height:1.4;
  color:#555;
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}



/* Heart/icon container stays tight on the right */
.job-footer > :last-child {
flex:0 0 auto;
  margin-left:12px;
}

/* === JHB Jobs – gezielte Verbesserungen (Buttons gleich groß + Footer) === */
.page-jhb-jobs .jhb-jobs-wrap .job-actions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:12px !important;
  align-items:center !important;
}
.page-jhb-jobs .jhb-jobs-wrap .job-actions .btn,
.page-jhb-jobs .jhb-jobs-wrap .job-actions .elementor-button,
.page-jhb-jobs .jhb-jobs-wrap .job-actions a.button{
  width:100% !important;
  height:44px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
}
.page-jhb-jobs .jhb-jobs-wrap .job-footer{
  min-height:42px !important;
  padding:10px 22px !important;
}
.page-jhb-jobs .jhb-jobs-wrap .job-footer p{
  margin:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
}

/* === Einsatzbereiche gleich hoch + 2x2 Grid (Desktop), 1 Spalte (Mobile) === */
@media (min-width: 769px) {
  .page-jhb-jobs .jhb-jobs-wrap .areas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: stretch; /* sorgt für gleiche Höhen je Reihe */
  }
  .page-jhb-jobs .jhb-jobs-wrap .areas-grid .area-card {
    display: flex;
    flex-direction: column;
    height: 100%; /* Karte füllt Zellenhöhe */
  }
}
@media (max-width: 768px) {
  .page-jhb-jobs .jhb-jobs-wrap .areas-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* === Job-Karten: Abschluss direkt am unteren Kartenrand (pseudo-element, mobil) === */
@media (max-width: 820px) {
  .page-jhb-jobs .jhb-jobs-wrap .jobs-grid article.job.card {
    position: relative;
  }
  .page-jhb-jobs .jhb-jobs-wrap .jobs-grid article.job.card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(0,0,0,0.18);
    pointer-events: none;
  }
}

/* === Benefits/Feature cards: improve paragraph contrast === */
.page-jhb-jobs .jhb-jobs-wrap .feature p{
  color:#374151; /* slate-700 for better readability */
}
.page-jhb-jobs .jhb-jobs-wrap .feature p strong,
.page-jhb-jobs .jhb-jobs-wrap .feature p b{
  color:#111827; /* near-black for emphasis */
}