/* =========================================================
   ZCI Modern UI (Cards + Chips + Detail w/ Sidebar + Forms)
   For GeneratePress: paste or upload as a single CSS file
   ========================================================= */

/* ---------------------------------------------------------
   Design tokens
   --------------------------------------------------------- */
:root{
  --zci-bg: #ffffff;
  --zci-surface: #ffffff;

  --zci-text: #0f172a;                 /* slate-900 */
  --zci-muted: #64748b;                /* slate-500 */
  --zci-border: rgba(2, 6, 23, .10);

  --zci-shadow: 0 10px 30px rgba(2, 6, 23, .10);
  --zci-shadow2: 0 16px 60px rgba(2, 6, 23, .14);

  --zci-radius: 18px;
  --zci-radius2: 24px;
  --zci-radius-sm: 12px;

  /* Accent / Primary
     Uses GeneratePress var if available, else fallback */
  --zci-primary: #45aaff;
  --zci-primary2: #228fd6;

  /* Used by form focus rings etc. */
  --zci-accent: #45aaff;
  --zci-accent-weak: rgba(37,99,235,.14); /* fallback */
  --zci-success: #16a34a;
  --zci-wapp: #25D366;

  --zci-gap: 18px;
  --zci-max: 1180px;
}

/* ---------------------------------------------------------
   Cross-browser background + blur fallbacks
   Some browsers render translucent/backdrop-filter layers as
   solid dark surfaces when the blur is unsupported.
   --------------------------------------------------------- */

/* Ensure the jobs UI always sits on a light page background */
.zci-wrap{ position: relative; }
.zci-wrap::before{
  content: "";
  position: fixed;
  inset: 0;
  background: #f6f8fb;
  z-index: -1;
}

/* Default: no blur. Provide readable fallback surfaces. */
.zci-toolbar__actions,
.zci-view-toggle,
.zci-card__badge{
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .zci-toolbar__actions,
  .zci-view-toggle,
  .zci-card__badge{
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/* Progressive enhancement for browsers that support color-mix() */
@supports (color: color-mix(in srgb, #000 10%, transparent)){
  :root{
    --zci-accent-weak: color-mix(in srgb, var(--zci-accent) 14%, transparent);
  }
}

/* ---------------------------------------------------------
   Base container
   --------------------------------------------------------- */
.zci-wrap{
  max-width: var(--zci-max);
  /* Fallback for older browsers that don't support logical properties */
  margin-left: auto;
  margin-right: auto;
  margin-inline: auto;
  padding: 14px 16px 24px;
  color: var(--zci-text);
}

.zci-wrap *{ box-sizing: border-box; }

.zci-section-title{
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 4px 0 14px;
}

/* =========================================================
   Filters (Chips / Search / Sort)
   ========================================================= */
.zci-filters{
  background: linear-gradient(180deg, rgba(37,99,235,.08), rgba(37,99,235,.03));
  border: 1px solid var(--zci-border);
  border-radius: var(--zci-radius2);
  padding: 14px;
  margin-bottom: 18px;
  box-shadow: 0 1px 0 rgba(2,6,23,.04);
}

.zci-filters__row{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 780px){
  .zci-filters__row{
    grid-template-columns: 1.2fr .8fr;
    align-items: start;
  }
}

.zci-search{
  display: flex;
  gap: 10px;
  align-items: center;
}

.zci-search input[type="search"],
.zci-search input[type="text"],
.zci-sort select{
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid var(--zci-border);
  background: rgba(255,255,255,.9);
  border-radius: 14px;
  padding: 12px 12px;
  outline: none;
  font-size: 15px;
  box-shadow: 0 8px 24px rgba(2,6,23,.06);
}

.zci-search input:focus,
.zci-sort select:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.18), 0 10px 30px rgba(2,6,23,.10);
}

.zci-sort{
  display: flex;
  gap: 10px;
  align-items: center;
}

.zci-sort label{
  font-size: 13px;
  color: var(--zci-muted);
  white-space: nowrap;
}

/* Filter controls (selects + actions): 2-column grid on desktop to save height */
.zci-chip-group{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}

@media (min-width: 780px){
  .zci-chip-group{
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.zci-filter-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

@media (min-width: 780px){
  .zci-filter-actions{
    grid-column: 1 / -1;
  }
}

.zci-chip{
  border: 1px solid var(--zci-border);
  background: rgba(255,255,255,.85);
  color: var(--zci-text);
  border-radius: 999px;
  padding: 9px 12px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  box-shadow: 0 6px 18px rgba(2,6,23,.08);
}

.zci-chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(2,6,23,.12);
}

.zci-chip.is-active{
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 4px rgba(37,99,235,.14), 0 12px 30px rgba(2,6,23,.12);
}

.zci-chip:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(37,99,235,.22), 0 12px 30px rgba(2,6,23,.12);
}

/* =========================================================
   Cards Grid
   ========================================================= */

/* Toolbar: View switcher (Cards/Liste) */
.zci-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 10px;
  margin: -6px 0 14px;
}

/* Mobile: stack resultsline above toggle buttons */
@media (max-width: 640px){
  .zci-toolbar{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .zci-toolbar__spacer{ display:none; }
  .zci-resultsline{ width: 100%; }
  .zci-toolbar__actions{
    width: 100%;
    justify-content: space-between;
  }
}

/* Resultsline: slightly smaller typography */
.zci-resultsline{
  font-size: 13px;
  line-height: 1.25;
  color: var(--zci-muted);
}

/* Group the toolbar buttons in a single container aligned to the filter box width */
.zci-toolbar__actions{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 18px;
  border: 1px solid var(--zci-border);
  background: rgba(255,255,255,.75);
  box-shadow: 0 8px 24px rgba(2,6,23,.06);
}

.zci-toolbar__actions .zci-view-toggle{
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.zci-toolbar__spacer{flex:1;}

.zci-view-toggle{
  display:inline-flex;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--zci-border);
  background: rgba(255,255,255,.75);
  box-shadow: 0 8px 24px rgba(2,6,23,.06);
}

.zci-viewbtn{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance:none;
  border: 0;
  background: transparent;
  color: var(--zci-muted);
  font-weight: 750;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.zci-viewbtn:hover{ transform: translateY(-1px); }

.zci-viewbtn.is-active{
  background: linear-gradient(180deg, var(--zci-primary), var(--zci-primary2));
  color: #fff;
  box-shadow: 0 10px 18px rgba(37,99,235,.22);
}

.zci-viewbtn:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px rgba(37,99,235,.22), 0 10px 18px rgba(37,99,235,.22);
}


/* --- View toggle: ensure active state is visibly blue --- */
.zci-view-toggle .zci-viewbtn.is-active,
.zci-view-toggle .zci-viewbtn[aria-pressed="true"]{
  background: linear-gradient(180deg, var(--zci-primary), var(--zci-primary2)) !important;
  color: #fff !important;
  box-shadow: 0 10px 18px rgba(37,99,235,.22) !important;
}
.zci-view-toggle .zci-viewbtn{
  border: 1px solid rgba(69,170,255,.35);
  background: rgba(255,255,255,.6);
  color: var(--zci-text);
}

/* Favourites-only filter */
[data-zci-favs-only="1"] .zci-card:not(.is-favourite){
  display: none !important;
}

.zci-grid{
  display: grid;
  gap: var(--zci-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 620px){
  .zci-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 980px){
  .zci-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* List view (Switcher on /jobs/) */
[data-zci-view="list"] .zci-grid{
  display: flex;
  flex-direction: column;
}

[data-zci-view="list"] .zci-card{
  display: grid;
  grid-template-columns: 260px 1fr;
  align-items: stretch;
}

[data-zci-view="list"] .zci-card:hover{
  transform: translateY(-2px);
}

[data-zci-view="list"] .zci-card__media{
  aspect-ratio: auto;
  min-height: 180px;
  height: 100%;
  position: relative;
  overflow: hidden;
}

[data-zci-view="list"] .zci-card__media{ grid-column: 1; grid-row: 1 / span 3; }
[data-zci-view="list"] .zci-card__body{ grid-column: 2; grid-row: 1; padding: 14px 16px 10px; }
[data-zci-view="list"] .zci-card__actions{
  grid-column: 2;
  grid-row: 2;
  padding: 0 16px 14px;
  justify-content: flex-start;
}

[data-zci-view="list"] .zci-card__actions /* Button icons (Lucide-style) */
.zci-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Ensure icons follow text color on white buttons (theme-safe) */
.zci-btn svg,
.zci-btn__icon{
  stroke: currentColor !important;
  fill: none !important;
}

/* Search: RESET button must remain legible even when disabled */
button.zci-btn[data-zci-reset]{
  background: #fff;
  border-color: rgba(15, 35, 60, 0.18);
  color: #0f233c;
}
button.zci-btn[data-zci-reset][disabled],
button.zci-btn[data-zci-reset][aria-disabled="true"]{
  opacity: .75;
  color: #0f233c;
  cursor: default;
}

/* List view: keep CTA buttons at the bottom without breaking the grid layout */
[data-zci-view="list"] .zci-card{
  grid-template-rows: 1fr auto;
}
[data-zci-view="list"] .zci-card__media{
  grid-row: 1 / span 2;
}
[data-zci-view="list"] .zci-card__body{
  grid-row: 1;
}
[data-zci-view="list"] .zci-card__actions{
  grid-row: 2;
  align-self: end;
}


.zci-btn__icon{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.zci-btn{
  width: auto;
  padding: 11px 14px;
}

@media (max-width: 760px){
  [data-zci-view="list"] .zci-card{
    grid-template-columns: 1fr;
  }
  [data-zci-view="list"] .zci-card__media{ grid-column: 1; grid-row: 1; }
  [data-zci-view="list"] .zci-card__body{ grid-column: 1; grid-row: 2; }
  [data-zci-view="list"] .zci-card__actions{ grid-column: 1; grid-row: 3; }
  [data-zci-view="list"] .zci-card__actions .zci-btn{ width: 100%; }
}

.zci-card{
  background: var(--zci-surface);
  border: 1px solid var(--zci-border);
  border-radius: var(--zci-radius2);
  overflow: hidden;
  box-shadow: var(--zci-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
}

.zci-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--zci-shadow2);
  border-color: rgba(37,99,235,.28);
}

.zci-card__media{
  position: relative;
  aspect-ratio: 16/9;
  background: #f1f5f9;
  overflow: hidden;
}

.zci-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform .25s ease;
}

.zci-card:hover .zci-card__media img{
  transform: scale(1.06);
}

.zci-card__badge{
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(15, 23, 42, .78);
  color: #fff;
}

/* Favourite toggle (heart) */
.zci-fav{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  /* Cross-browser: ensure theme/button resets don't hide the icon */
  -webkit-appearance: none;
  appearance: none;
  border: 2px solid #45aaff !important;
  background: #fff !important;
  color: #45aaff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 10px 18px rgba(2,6,23,.10);
  transition: transform .08s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.zci-fav:active{ transform: translateY(1px); }

/* Use the same inline SVG everywhere (list + detail hero) */
.zci-fav__icon{
  width: 20px;
  height: 20px;
  display: block !important;
  pointer-events: none;
  /* Harden against global theme SVG resets */
  stroke: currentColor !important;
  fill: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.zci-fav__icon *{
  stroke: currentColor !important;
  fill: none !important;
}



/* ---------------------------------------------------------
   Favourite icon fallback (CSS-only)
   --------------------------------------------------------- */
.zci-fav svg,
.zci-fav__icon,
.zci-mini__icon{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.zci-fav::before{ display:none !important; content:""; }

.zci-fav[aria-pressed="true"]{
  background: #45aaff !important;
  border-color: #45aaff !important;
  color: #ffffff !important;
}

/* Favourite button on the detail hero */
.zci-job-header .zci-fav--detail{
  top: 16px;
  right: 16px;
  z-index: 6;
}

/* Pills overlayed on the card image */
.zci-card__pills{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  z-index: 2;
}

/* Explicit modifiers */
.zci-card__pills--overlay{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
}

.zci-card__pills--below{
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  margin: 0 0 10px;
}

.zci-card__media--bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35));
  pointer-events:none;
}

.zci-card__media .zci-pill{
  background: rgba(255,255,255,.88);
  border-color: rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1 / 1){
  .zci-card__media{
    height: 0;
    padding-top: 56.25%; /* 16:9 */
  }
  .zci-card__media img{
    position: absolute;
    inset: 0;
  }
}

.zci-card__body{
  padding: 14px 14px 12px;
}

.zci-card__title{
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.01em;

  /* Keep all titles visually aligned (same height) */
  min-height: 2.5em; /* 2 lines * 1.25 line-height */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.zci-card__title a{
  color: inherit;
  text-decoration: none;
}

.zci-card__title a:hover{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.zci-excerpt{
  margin: 0;
  color: rgba(15,23,42,.85);
  line-height: 1.5;
}

.zci-excerpt__more{
  margin-left: 6px;
  font-weight: 700;
  color: var(--zci-primary2);
  text-decoration: none;
  white-space: nowrap;
}

.zci-excerpt__more:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.zci-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
  color: var(--zci-muted);
  font-size: 12px; /* wie Veröffentlichungsdatum */
}

/* 3-line key facts (Arbeitszeit, Ort, Verdienst) */
.zci-introtitle{
  font-size: 1.5em;
  font-weight: 850;
  line-height: 1.15;
  margin: 0 0 12px;
}
.zci-kpis{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.zci-kpi{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1em;
  font-weight: 650;
  line-height: 1.2;
  color: var(--zci-text);
}
.zci-kpi__icon{
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #45aaff;
  flex: 0 0 22px;
}
.zci-kpi__svg{
  width: 20px;
  height: 20px;
  display: block;
}

/* Intro box spacing in job details */
.zci-introbox{
  margin: 0 0 14px;
}

/* Intro top row: title (left) + favourite button (right) */
.zci-introtop{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 10px;
}
@media (min-width: 900px){
  .zci-introtop{
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
  }
  .zci-introtop__text{
    flex: 1 1 auto;
    min-width: 0;
  }
}



/* Share button (icon-only by default; label appears on hover/focus/click) */
.zci-sharebtn{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.16);
  background: rgba(255,255,255,.92);
  color: var(--zci-text);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(2,6,23,.10);
  -webkit-appearance: none;
  appearance: none;
  user-select: none;
}

.zci-sharebtn__icon{
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: #45aaff;
  flex: 0 0 auto;
}

.zci-sharebtn__icon .zci-kpi__svg{
  width: 22px;
  height: 22px;
}

.zci-sharebtn:hover .zci-sharebtn__text,
.zci-sharebtn:focus-visible .zci-sharebtn__text,
.zci-sharebtn.is-open /* Keep share button compact on desktop, similar to fav button */
@media (min-width: 900px){
  .zci-sharebtn{
    width: 50%;
    min-width: 260px;
    max-width: 520px;
  }
}

.zci-favbtn{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.16);
  background: rgba(255,255,255,.92);
  color: var(--zci-text);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(2,6,23,.10);
  -webkit-appearance: none;
  appearance: none;
}

/* Make the "Speichern als Favorit" button compact on desktop */
@media (min-width: 900px){
  .zci-favbtn{
    width: 50%;
    min-width: 260px;
    max-width: 520px;
  }
}

.zci-favbtn__icon{
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: #45aaff;
}

.zci-favbtn__icon .zci-kpi__svg{
  width: 22px;
  height: 22px;
}

.zci-favbtn[aria-pressed="true"]{
  background: #45aaff;
  border-color: #45aaff;
  color: #fff;
}

.zci-favbtn[aria-pressed="true"] .zci-favbtn__icon{
  color: #fff;
}

.zci-favbtn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(69,170,255,.22), 0 10px 18px rgba(2,6,23,.10);
}


.zci-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid var(--zci-border);
  background: rgba(2,6,23,.02);
}

.zci-pill strong{
  color: var(--zci-text);
  font-weight: 600;
}

/* Card actions */
.zci-card__actions{
  display: flex;
  gap: 10px;
  padding: 0 14px 14px;
}

.zci-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px;
  padding: 11px 12px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  border: 1px solid var(--zci-border);
  background: rgba(255,255,255,.92);
  color: var(--zci-text);
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
  width: 100%;
}

.zci-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(2,6,23,.14);
}

.zci-btn--primary{
  background: linear-gradient(180deg, var(--zci-primary), var(--zci-primary2));
  color: #fff;
  border-color: rgba(37,99,235,.55);
}

.zci-btn--whatsapp{
  background: linear-gradient(180deg, var(--zci-primary), var(--zci-primary2));
  color:#fff;
  border-color: rgba(37,99,235,.55);
}

.zci-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(37,99,235,.22), 0 16px 36px rgba(2,6,23,.14);
}

/* Load more */
.zci-loadmore{
  margin: 18px auto 0;
  max-width: 420px;
}

/* =========================================================
   Job Detail Layout (Content + Sidebar)
   ========================================================= */
.zci-job{
  max-width: var(--zci-max);
  margin-inline: auto;
  padding: 14px 16px 32px;
}

.zci-job__layout{
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 980px){
  .zci-job__layout{
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
  }
}

.zci-hero{
  border-radius: var(--zci-radius2);
  overflow: hidden;
  border: 1px solid var(--zci-border);
  box-shadow: var(--zci-shadow);
  background: var(--zci-surface);
}

.zci-hero__media{
  aspect-ratio: 21/9;
  background: #f1f5f9;
}

.zci-hero__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.zci-hero__body{
  padding: 16px 16px 14px;
}

.zci-job__title{
  margin: 0 0 8px;
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.zci-job__content{
  background: var(--zci-surface);
  border: 1px solid var(--zci-border);
  border-radius: var(--zci-radius2);
  box-shadow: var(--zci-shadow);
  padding: 16px;
}

/* Detail: remove outer content "box" as requested */
body.single-zci_vacancy .zci-job__content{
  /* White surface behind content, but without the "boxed" border/shadow */
  background: #fff;
  border: 0;
  box-shadow: none;
  border-radius: var(--zci-radius2);
  padding: 16px;
}

/* Back-to-overview button rows on detail pages */
.zci-backrow{
  margin: 0 0 14px;
}

/* Prev/Next navigation row on detail pages */
.zci-navrow{
  margin: 0 0 14px;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

/* Detail page short summary (moved out of hero header for better visual cleanliness) */
.zci-job__summary{
  background: var(--zci-surface);
  border: 1px solid var(--zci-border);
  border-radius: var(--zci-radius2);
  box-shadow: var(--zci-shadow);
  padding: 14px 16px;
  margin: 0 0 14px;
  color: rgba(15,23,42,.90);
  line-height: 1.55;
}

@media (min-width: 640px){
  .zci-navrow{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.zci-btn--back{
  background: linear-gradient(180deg, var(--zci-primary), var(--zci-primary2));
  color: #fff;
  border-color: rgba(37,99,235,.55);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
}

/* Prev/Next navigation buttons: neutral (not blue) */
.zci-btn--nav{
  background: rgba(255,255,255,.92) !important;
  color: rgba(15,23,42,.92) !important;
  border: 1px solid var(--zci-border) !important;
  box-shadow: 0 10px 18px rgba(2,6,23,.08) !important;
}
.zci-btn--nav:hover{
  background: #ffffff !important;
  border-color: rgba(15,23,42,.22) !important;
}

.zci-job__content h2,
.zci-job__content h3{
  margin-top: 18px;
  letter-spacing: -0.02em;
}

.zci-job__content p,
.zci-job__content li{
  color: rgba(15,23,42,.92);
  line-height: 1.6;
}

/* Sidebar */
.zci-sidebar{
  display: grid;
  gap: 12px;
}

@media (min-width: 980px){
  .zci-sidebar{
    position: sticky;
    top: 18px;
  }
}

.zci-box{
  background: var(--zci-surface);
  border: 1px solid var(--zci-border);
  border-radius: var(--zci-radius2);
  box-shadow: var(--zci-shadow);
  padding: 14px;
}

.zci-box__title{
  font-weight: 500;
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--zci-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.zci-recruiter{
  display: grid;
  gap: 10px;
}

.zci-recruiter__name{
  font-weight: 800;
  font-size: 16px;
}

.zci-recruiter__meta{
  color: var(--zci-muted);
  font-size: 14px;
  line-height: 1.4;
}

.zci-share{
  display: grid;
  gap: 10px;
}

.zci-share__row{
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

.zci-share a.zci-btn{
  width: 100%;
  padding: 11px 10px;
}



/* Sidebar favourite (no box) */
.zci-sidebar-fav{
  display: grid;
  gap: 8px;
}
.zci-sidebar-fav__title{
  font-weight: 500;
  margin: 0;
  font-size: 14px;
  color: var(--zci-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
}
/* Breadcrumbs */
.zci-breadcrumbs{
  font-size: 13px;
  color: var(--zci-muted);
  margin: 6px 0 12px;
}

.zci-breadcrumbs a{
  color: inherit;
  text-decoration: none;
}

.zci-breadcrumbs a:hover{
  text-decoration: underline;
}

/* =========================================================
   Application Form (GeneratePress-friendly)
   ========================================================= */
.zci-application-form,
.zci-form,
jobboard-application-form{
  display:block;
  max-width: 900px;
  margin: 16px 0;
}

.zci-application-form,
.zci-form{
  background: #fff;
  border: 1px solid var(--zci-border);
  border-radius: var(--zci-radius);
  box-shadow: var(--zci-shadow);
  padding: 16px;
}

.zci-application-form :where(label),
.zci-form :where(label),
jobboard-application-form :where(label){
  display:block;
  font-weight: 600;
  font-size: 13px;
  color: var(--zci-muted);
  margin: 6px 0 4px;
}

.zci-application-form :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="date"], select, textarea),
.zci-form :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="date"], select, textarea),
jobboard-application-form :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="date"], select, textarea){
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--zci-border);
  background: rgba(255,255,255,.95);
  color: var(--zci-text);
  outline: none;
  font-size: 15px;
  box-shadow: 0 8px 24px rgba(2,6,23,.06);
  transition: box-shadow .15s ease, border-color .15s ease;
}

.zci-application-form :where(textarea),
.zci-form :where(textarea),
jobboard-application-form :where(textarea){
  min-height: 90px;
  resize: vertical;
}

.zci-application-form :where(input, select, textarea):focus,
.zci-form :where(input, select, textarea):focus,
jobboard-application-form :where(input, select, textarea):focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.18), 0 10px 30px rgba(2,6,23,.10);
}

.zci-application-form :where(input[type="file"]),
.zci-form :where(input[type="file"]),
jobboard-application-form :where(input[type="file"]){
  width: 100%;
  padding: 10px;
  border-radius: var(--zci-radius-sm);
  border: 1px dashed var(--zci-border);
  background: rgba(2,6,23,.02);
}

.zci-application-form :where(button, input[type="submit"]),
.zci-form :where(button, input[type="submit"]),
jobboard-application-form :where(button, input[type="submit"]){
  border: 0;
  border-radius: 999px;
  padding: 11px 14px;
  font-weight: 700;
  cursor: pointer;
  background: var(--zci-accent);
  color: #fff;
  transition: transform .06s ease, filter .15s ease;
  width: 100%;
  margin-top: 12px;
  box-shadow: 0 10px 18px rgba(37, 99, 235, .22);
}

.zci-application-form :where(button:active, input[type="submit"]:active),
.zci-form :where(button:active, input[type="submit"]:active),
jobboard-application-form :where(button:active, input[type="submit"]:active){
  transform: translateY(1px);
}

.zci-application-form :where(.error, .field-error, .validation-error),
.zci-form :where(.error, .field-error, .validation-error),
jobboard-application-form :where(.error, .field-error, .validation-error){
  color: #dc2626;
  font-weight: 600;
  margin-top: 8px;
}

/* =========================================================
   Motion + Dark Mode niceties
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .zci-card,
  .zci-btn,
  .zci-chip,
  .zci-card__media img{
    transition: none !important;
  }
}

@media (prefers-color-scheme: dark){
  :root{
    --zci-bg:#0b1220;
    --zci-surface:#0f172a;
    --zci-text:#e2e8f0;
    --zci-muted:#94a3b8;
    --zci-border: rgba(148,163,184,.22);
    --zci-shadow: 0 10px 30px rgba(0,0,0,.35);
    --zci-shadow2: 0 16px 60px rgba(0,0,0,.45);
  }

  .zci-search input[type="search"],
  .zci-search input[type="text"],
  .zci-sort select{
    background: rgba(15,23,42,.85);
    color: var(--zci-text);
  }

  .zci-pill{ background: rgba(148,163,184,.06); }
  .zci-card__badge{ background: rgba(2,6,23,.70); }

  .zci-application-form,
  .zci-form{
    background: rgba(15,23,42,.95);
  }

  .zci-application-form :where(input, select, textarea),
  .zci-form :where(input, select, textarea){
    background: rgba(15,23,42,.85);
    color: var(--zci-text);
  }
}

@media (max-width: 640px){
  .zci-application-form,
  .zci-form{
    padding: 16px;
    border-radius: 14px;
  }
}


/* Bewerbungsseite: Wrapper + Webcomponent host */
.zci-apply-wrap{max-width:900px;margin:0 auto;padding:12px 16px 18px;}
.zci-apply-wrap .zci-form{max-width:900px;margin:0 auto;}
.zci-apply-wrap jobboard-application-form{display:block;width:100%;}

/* Initiativbewerbung (Open Enrollment): gleicher Look wie Bewerbungsseite */
.zci-open-wrap{max-width:900px;margin:0 auto;padding:12px 16px 18px;}
.zci-open-wrap .zci-form{margin:0;}
.zci-open-wrap recruitnow-open-enrollment-widget{display:block;width:100%;}

/* 2-Spalten-Layout (wird per JS-Klasse aktiviert, falls Light-DOM genutzt wird) */
.zci-apply-wrap form.zci-grid,
.zci-open-wrap form.zci-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  align-items: start;
}
.zci-apply-wrap .zci-field,
.zci-open-wrap .zci-field{display:flex;flex-direction:column;}
.zci-apply-wrap .zci-span-2,
.zci-open-wrap .zci-span-2{grid-column: 1 / -1;}

@media (max-width: 760px){
  .zci-apply-wrap form.zci-grid,
  .zci-open-wrap form.zci-grid{grid-template-columns: 1fr;}
}

/* Best effort: falls das Widget Light-DOM nutzt */
.zci-open-wrap recruitnow-open-enrollment-widget :where(label){display:block;font-weight:600;margin:10px 0 4px;color:var(--zci-text);}
.zci-open-wrap recruitnow-open-enrollment-widget :where(input,select,textarea){
  width:100%;padding:10px 12px;border-radius:var(--zci-radius-sm);
  border:1px solid var(--zci-border);background:#fff;color:var(--zci-text);
  outline:none;transition:box-shadow .15s ease,border-color .15s ease;
}

.zci-open-wrap recruitnow-open-enrollment-widget :where(textarea){min-height:90px;resize:vertical;}
.zci-open-wrap recruitnow-open-enrollment-widget :where(input,select,textarea):focus{
  border-color:rgba(37,99,235,.85);box-shadow:0 0 0 4px var(--zci-accent-weak);
}
.zci-open-wrap recruitnow-open-enrollment-widget :where(button,input[type="submit"]){
  width:100%;border:0;border-radius:999px;padding:11px 14px;font-weight:700;cursor:pointer;
  background: linear-gradient(180deg, var(--zci-primary), var(--zci-primary2));
  color:#fff;margin-top:12px;
}

/* ::part Fallback (harmlos, falls nicht vorhanden) */
.zci-open-wrap recruitnow-open-enrollment-widget::part(button),
.zci-open-wrap recruitnow-open-enrollment-widget::part(submit),
.zci-open-wrap recruitnow-open-enrollment-widget::part(send),
.zci-open-wrap recruitnow-open-enrollment-widget::part(primary-button){
  width:100%;
}


/* Cards: Background image (statt <img>) */
.zci-card__media--bg{background-size:cover;background-position:center;background-repeat:no-repeat;}
.zci-card__media--bg img{display:none !important;}
.zci-card__media--bg::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 55%);
  pointer-events:none;
}


/* Detailseite: HeaderImage als Background (cover) */
.zci-hero__media--bg{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Share buttons smaller */
.zci-btn--sm{
  padding: 9px 10px;
  font-size: 13px;
}


/* Icons in buttons */
.zci-icon{width:18px;height:18px;display:inline-block;vertical-align:-0.2em;flex:0 0 auto;}
.zci-btn{gap:10px;}

/* Top header on detail pages */
.zci-topheader{
  position:relative;
  min-height: 240px;
  overflow:hidden;
  background: #0b1220;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.zci-topheader::before{
  content:"";
  position:absolute;inset:0;
  background: linear-gradient(180deg, rgba(2,6,23,.72), rgba(2,6,23,.28));
}
.zci-topheader__inner{
  position:relative;
  max-width: var(--zci-max);
  margin-inline:auto;
  padding: 28px 16px 22px;
  color:#fff;
}
.zci-topheader__title{
  margin:10px 0 10px;
  font-size: clamp(24px, 3vw, 40px);
  letter-spacing:-0.03em;
  line-height:1.08;
}
.zci-topheader__meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
  color:rgba(255,255,255,.86);
}
.zci-topheader__meta .zci-pill{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.92);
}
.zci-topheader__actions{margin-top:14px;max-width:520px;}
.zci-topheader__actions .zci-btn{width:100%;}

/* =========================================================
   RecruitNow Bewerbungsformular: Light DOM + ::part Fallback
   (Wenn das Widget keinen offenen Shadow DOM nutzt)
   ========================================================= */
.zci-apply-wrap jobboard-application-form{display:block;width:100%;max-width:900px;margin:0 auto;}
.zci-apply-wrap jobboard-application-form :where(label){display:block;font-weight:600;margin:10px 0 4px;color:var(--zci-text);}
.zci-apply-wrap jobboard-application-form :where(input,select,textarea){
  width:100%;padding:10px 12px;border-radius:var(--zci-radius-sm);
  border:1px solid var(--zci-border);background:#fff;color:var(--zci-text);
  outline:none;transition:box-shadow .15s ease,border-color .15s ease;
}
.zci-apply-wrap jobboard-application-form :where(textarea){min-height:90px;resize:vertical;}
.zci-apply-wrap jobboard-application-form :where(input,select,textarea):focus{
  border-color:rgba(37,99,235,.85);box-shadow:0 0 0 4px var(--zci-accent-weak);
}
.zci-apply-wrap jobboard-application-form :where(button,input[type="submit"]){
  width:100%;border:0;border-radius:999px;padding:11px 14px;font-weight:700;cursor:pointer;
  background: linear-gradient(180deg, var(--zci-primary), var(--zci-primary2));
  color:#fff;margin-top:12px;
}

/* ::part Fallback (harmlos, falls nicht vorhanden) */
.zci-apply-wrap jobboard-application-form::part(button),
.zci-apply-wrap jobboard-application-form::part(submit),
.zci-apply-wrap jobboard-application-form::part(apply-button){
  width:100%;
}


/* Detailseite: Top Header Banner */
.zci-job-header{
  position: relative;
  border-radius: var(--zci-radius2);
  overflow:hidden;
  border: 1px solid var(--zci-border);
  box-shadow: var(--zci-shadow);
  background: #0f172a;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: clamp(320px, 34vw, 600px); /* ~2x higher hero */
  margin: 10px 0 18px;
}
.zci-job-header__overlay{
  /* Best readability: brand-blue overlay + darker bottom for contrast */
  background: linear-gradient(
    180deg,
    rgba(69,170,255,.55) 0%,
    rgba(15,23,42,.68) 70%,
    rgba(15,23,42,.86) 100%
  );
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 100%;
  display: flex;
  align-items: flex-end;
}
.zci-job-header__inner{
  /* Full-width header block (title + pills) inside the hero */
  padding: 18px 16px 16px;
  width: 100%;
  max-width: none;
  margin: 0;
  color: #fff;
}

/* Improve legibility on image backgrounds */
.zci-job-header__title,
.zci-job-header .zci-breadcrumbs,
.zci-job-header .zci-meta{
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.zci-job-header .zci-breadcrumbs a{ text-decoration: underline; text-underline-offset: 3px; }
.zci-job-header__title{
  margin: 8px 0 10px;
  font-size: clamp(24px, 2.8vw, 38px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-shadow: 0 3px 18px rgba(0,0,0,.50);
}

/* Short summary under title (before pills) */
.zci-job-header__summary{
  margin: 0 0 12px;
  max-width: 72ch;
  color: rgba(255,255,255,.92);
  font-size: 15px;
  line-height: 1.45;
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.zci-job-header .zci-breadcrumbs{
  color: rgba(255,255,255,.8);
  margin: 0 0 6px;
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.zci-job-header .zci-breadcrumbs a{color: inherit;}
.zci-job-header .zci-meta{
  color: rgba(255,255,255,.88);
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.zci-job-header__inner a:not(.zci-btn){
  color: rgba(255,255,255,.95);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.zci-job-header .zci-pill{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}
.zci-job-header .zci-pill strong{color:#fff;}
.zci-job-header__cta{margin-top: 14px; max-width: 520px;}
.zci-job-header .zci-btn--applyheader{
  text-transform: uppercase;
  letter-spacing: 2px;
}
/* Smaller share buttons */
.zci-btn--sm{ padding: 9px 10px; font-size: 13px; }


/* === 1.6.2 Tweaks === */

/* Sidebar titles: sichtbar + Versalien */
.zci-sidebar .zci-box__title{
  font-weight: 500;
  display: block !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  color: var(--zci-muted);
}

/* Detail: Links ebenfalls im Highlight */
.zci-job__content a{ color: var(--zci-primary); }
.zci-job__content a:hover{ color: var(--zci-primary2); }

/* Detail: CTA nicht künstlich begrenzen */
.zci-job-header__cta{ max-width: 100% !important; width:100%; }

/* Filter-Actions: über volle Breite + Reset/Filtern nebeneinander */
.zci-filter-actions{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.zci-filter-actions .zci-btn{ width:100%; letter-spacing: 2px; }

/* Filter-Selects im Chip-Bereich */
.zci-chip-group select{
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid var(--zci-border);
  background: rgba(255,255,255,.9);
  border-radius: 14px;
  padding: 12px 12px;
  outline: none;
  font-size: 15px;
  box-shadow: 0 8px 24px rgba(2,6,23,.06);
}
.zci-chip-group select:focus{
  border-color: rgba(69,170,255,.65);
  box-shadow: 0 0 0 4px rgba(69,170,255,.18), 0 10px 30px rgba(2,6,23,.10);
}


/* ---------------------------------------------------------
   Recruiter / Contact box
   --------------------------------------------------------- */
.zci-contact{
  display:block;
}
.zci-contact__avatar{
  width:64px;
  height:64px;
  border-radius:999px;
  object-fit:cover;
  border:1px solid var(--zci-border);
  margin: 2px 0 10px;
}
.zci-contact__name{
  font-weight: 750;
  font-size: 16px;
  margin-bottom: 8px;
}
.zci-contact__lines{
  display:block;
}
.zci-contact__line{
  font-size: 14px;
  line-height: 1.45;
  margin: 6px 0;
  color: rgba(15,23,42,.9);
}
.zci-contact__line a{
  text-decoration: none;
}
.zci-contact__line a:hover{
  text-decoration: underline;
}

/* Recruiter email link (icon + text) */
.zci-mail-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(69,170,255,.28);
  background: rgba(69,170,255,.08);
  color: var(--zci-primary);
  text-decoration: none !important;
}
.zci-mail-link__icon .zci-kpi__svg{
  width: 18px;
  height: 18px;
  display: block;
}
.zci-mail-link:hover{
  background: rgba(69,170,255,.12);
  border-color: rgba(69,170,255,.45);
}

/* Recruiter contact buttons (phone + mail) */
.zci-contact__actions{
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  margin-top: 14px;
}
@media (max-width: 520px){
  .zci-contact__actions{ flex-wrap: wrap; }
}
.zci-contact-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px; /* less tall */
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: rgba(15,23,42,.92);
  text-decoration: none !important;
  font-size: 13px;
  line-height: 1.2;
  transition: background .15s ease, transform .15s ease;
}
.zci-contact-btn:hover{ background: rgba(69,170,255,.12); }
.zci-contact-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(69,170,255,.18);
  background: rgba(69,170,255,.12);
}
.zci-contact-btn__icon{
  color: var(--zci-primary);
}
.zci-contact-btn__icon .zci-kpi__svg{
  width: 18px;
  height: 18px;
  display: block;
}
.zci-contact-btn__icon .zci-kpi__svg{
  width: 18px;
  height: 18px;
  display: block;
}
/* hover handled above */
.zci-contact__divider{
  height:1px;
  background: var(--zci-border);
  margin: 12px 0;
}
.zci-contact__office{
  font-size: 13px;
  line-height: 1.25;
  margin: 2px 0 2px;
  color: var(--zci-muted);
}

.zci-contact__address{
  font-size: 13px;
  line-height: 1.25;
  margin: 0;
  color: var(--zci-muted);
}


/* Result count (Jobs gefunden) */
.zci-results{font-size:13px!important;font-weight:750;color:var(--zci-muted,#64748b);}


.zci-contact__cta{margin-top:12px;}
/* Sidebar favorite button */
.zci-favbtn--sidebar{
  width: 100%;
  font-size: 13px;
  padding: 9px 12px;
  box-shadow: 0 8px 14px rgba(2,6,23,.08);
  border-color: rgba(15,23,42,.14);
}

.zci-favbtn--sidebar .zci-favbtn__icon{
  width: 18px;
  height: 18px;
}

.zci-favbtn--sidebar .zci-favbtn__icon .zci-kpi__svg{
  width: 18px;
  height: 18px;
  display: block;
}
.zci-box--fav .zci-box__title{
  font-weight: 500;
  margin-bottom: 10px;
}


/* Share links as subtle list */
.zci-sharelist{
  margin-top: 12px;
}
.zci-sharelist__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.zci-sharelist__list::-webkit-scrollbar{ display:none; }
.zci-sharelist__list{ scrollbar-width: none; }
.zci-sharelist__list a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--zci-muted);
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
}
.zci-sharelist__list a:hover{
  color: var(--zci-text);
  text-decoration: underline;
}


/* Make headings inside job description consistent with box titles */
.zci-job__content h2,
.zci-job__content h3,
.zci-job__content h4{
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--zci-muted);
  margin: 22px 0 10px;
}


/* Sidebar favourite button text */
.zci-favbtn__text{
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
}


@media (max-width: 520px){
  .zci-sharelist__list{ flex-wrap: wrap; overflow-x: visible; }
}

/* Map result background */
.oe_mapResult{background-color:#f5f5f5 !important;}

/* Diamond / Raute für WordPress-Bilder (GeneratePress/Gutenberg)
   Klasse im Editor unter "Erweitert" → "Zusätzliche CSS-Klasse(n)" setzen: zci-diamond
   Hinweis: Für eine echte Rauten-Kontur muss die Klasse auf einem Wrapper (z.B. <figure>) sitzen.
   Dieses Snippet unterstützt Wrapper-Klasse (empfohlen) und img-Klasse (Classic Editor).
*/
:where(.zci-diamond, .wp-block-image.zci-diamond){
  --zci-diamond-size: clamp(56px, 12vw, 140px);
  --zci-diamond-border: 2px;
  --zci-diamond-color: currentColor;

  display: inline-block;
  inline-size: var(--zci-diamond-size);
  aspect-ratio: 1 / 1;
  transform: rotate(45deg);
  border: var(--zci-diamond-border) solid var(--zci-diamond-color);
  overflow: hidden;
  box-sizing: border-box;
  flex: 0 0 auto;
}

:where(.zci-diamond, .wp-block-image.zci-diamond) img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: rotate(-45deg) scale(1.1);
}

/* Fallback wenn die Klasse direkt auf <img> sitzt (Classic Editor):
   Kontur ist dann nicht sauber als Raute möglich (img hat keine ::before/::after),
   deshalb nur Zuschnitt/Optik – für Kontur bitte Wrapper-Klasse verwenden. */
img.zci-diamond{
  inline-size: var(--zci-diamond-size, clamp(56px, 12vw, 140px));
  aspect-ratio: 1 / 1;
  object-fit: cover;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  display: block;
}

/* Screen-reader only */
.zci-sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}


/* CSS fallback: open share menu on hover/focus (JS toggles [hidden] as primary) */
/* Masonry layout for card view */
[data-zci-view="cards"] .zci-cards{
  column-gap: 18px;
  column-count: 1;
}
@media (min-width: 720px){
  [data-zci-view="cards"] .zci-cards{ column-count: 2; }
}
@media (min-width: 1100px){
  [data-zci-view="cards"] .zci-cards{ column-count: 3; }
}
[data-zci-view="cards"] .zci-card{
  break-inside: avoid;
  margin: 0 0 18px;
  width: 100%;
}



.zci-btn--primary{ color: #fff; }
.zci-btn--primary .zci-btn__icon{ color: currentColor; }


/* Share menu: row under the button (opens on click; no slide) */
.zci-sidebar-share{ display:flex; justify-content:flex-start; }

.zci-share{
  position: relative;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.zci-sharemenu--row{
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(15,23,42,.14);
  box-shadow: 0 18px 30px rgba(2,6,23,.14);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 60;
}

.zci-share.is-open .zci-sharemenu--row{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.zci-shareitem{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  color: inherit;
  text-decoration: none;
}

.zci-shareitem:hover{
  border-color: rgba(69,170,255,.55);
  box-shadow: 0 10px 18px rgba(2,6,23,.08);
}

.zci-shareitem__icon{
  width: 18px;
  height: 18px;
  color: #45aaff;
  display: inline-flex;
  flex: 0 0 auto;
}
.zci-shareitem__icon .zci-kpi__svg{
  width: 18px;
  height: 18px;
}

.zci-shareitem__label{
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12px;
}


/* Job description headings: grey info icon */
.zci-content h2,
.zci-content h3,
.zci-content h4{
  position: relative;
  padding-left: 30px;
}

.zci-content h2::before,
.zci-content h3::before,
.zci-content h4::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 18px;
  height: 18px;
  background-color: rgba(100,116,139,.9);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%2016v-5%22/%3E%3Cpath%20d%3D%22M12%208h.01%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%2016v-5%22/%3E%3Cpath%20d%3D%22M12%208h.01%22/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}




/* Header apply button under chips */
.zci-header-apply{
  margin-top: 12px;
}



/* Share button text must always be visible */
.zci-sharebtn__text{
  display: inline;
  opacity: 1;
  max-width: none;
  overflow: visible;
}

/* Share button: blue icon, black text */
.zci-sidebar-actions .zci-sharebtn__icon{
  color: #45aaff;
}
.zci-sidebar-actions .zci-sharebtn__text{
  color: inherit;
}


/* Single sidebar: stack Favourite + Share full width, left aligned */
.zci-sidebar-actions{
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

.zci-sidebar-actions .zci-sidebar-fav,
.zci-sidebar-actions .zci-sidebar-share{
  width: 100%;
}

.zci-sidebar-actions .zci-favbtn--sidebar,
.zci-sidebar-actions .zci-sharebtn--sidebar{
  width: 100%;
  font-size: 13px;
  padding: 9px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border-radius: 999px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 800;
  text-align: left;
}

.zci-sidebar-actions .zci-favbtn__icon,
.zci-sidebar-actions .zci-sharebtn__icon{
  width: 18px;
  height: 18px;
  display: inline-flex;
  flex: 0 0 auto;
}
.zci-sidebar-actions .zci-favbtn__icon .zci-kpi__svg,
.zci-sidebar-actions .zci-sharebtn__icon .zci-kpi__svg{
  width: 18px;
  height: 18px;
}

.zci-sidebar-actions .zci-sharebtn__icon{ color: #45aaff; }
.zci-sidebar-actions .zci-sharebtn__text{ color: inherit; }

/* Single sidebar: Initiativbewerbung as clickable tile (not a button) */
.zci-initiative-tile{
  display: flex;
  width: 100%;
  margin-top: 12px;
  border-radius: 18px;
  background-color: #f1f2f4;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.06);

  /* Half-size tile */
  aspect-ratio: 2 / 1;
  min-height: 120px;

  /* Background artwork */
  background-image: url("/wp-content/uploads/2026/02/show_Initiativ-2.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  /* Text placement */
  padding: 18px;
  align-items: flex-end;
  justify-content: flex-start;
}
.zci-initiative-tile:hover{ filter: brightness(0.985); }
.zci-initiative-tile__text{
  display: inline-block;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 800;
  color: inherit;
}





/* -------- Table view (compact + responsive) -------- */
[data-zci-root][data-zci-view="table"] .zci-grid{ display:none; }
[data-zci-root][data-zci-view="table"] #zci-tablewrap{ display:block; }

#zci-tablewrap{ display:none; margin-top: 12px; }

/* Desktop: fit without horizontal scrollbars */
.zci-table-scroll{
  overflow: visible;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
}

.zci-table{
  width:100%;
  border-collapse: collapse;
  min-width: 0;
  table-layout: fixed;
}

.zci-table th, .zci-table td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  vertical-align: top;
  font-size: 13px;
}

.zci-table th{
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
  text-align: left;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.zci-table th:nth-child(1){ width: 50%; }
.zci-table th:nth-child(2){ width: 22%; }
.zci-table th:nth-child(3){ width: 18%; }
.zci-th--actions{ width: 110px; }

.zci-table td{
  overflow: hidden;
  text-overflow: ellipsis;
}

.zci-tablelink{ text-decoration: none; font-weight: 800; }
.zci-tablelink:hover{ text-decoration: underline; }

.zci-tabletitlemeta{
  font-weight: 500;
  color: rgba(15,23,42,.75);
}

.zci-td--actions{ white-space: nowrap; }
.zci-mini{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius: 999px; border:1px solid rgba(0,0,0,.10); margin-right: 6px; }

/* Mobile: stack rows (no horizontal scroll) */
@media (max-width: 860px){
  .zci-table-scroll{ overflow: visible; }
  .zci-table, .zci-table thead, .zci-table tbody, .zci-table th, .zci-table td, .zci-table tr{
    display: block;
    width: 100%;
  }
  .zci-table thead{ display:none; }
  .zci-table tr{
    border-bottom: 1px solid rgba(0,0,0,.08);
    padding: 10px 12px;
  }
  .zci-table td{
    border: 0;
    padding: 8px 0;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
  }
  .zci-table td::before{
    content: attr(data-label);
    font-size: 12px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: rgba(15,23,42,.65);
    flex: 0 0 42%;
    max-width: 42%;
  }
  .zci-table td > *{
    flex: 1 1 auto;
    min-width: 0;
  }
  .zci-td--actions{
    justify-content: flex-end;
  }
  .zci-td--actions::before{ content: ""; }
}

zci-mini--apply{ background: #45aaff; border-color: transparent; color:#fff; }
.zci-mini--apply:hover{ filter: brightness(0.95); }



/* Table view fav button (inline, no absolute positioning) */
#zci-tablewrap .zci-fav{ position: static; top:auto; right:auto; width:34px; height:34px; box-shadow:none; }
#zci-tablewrap .zci-fav[aria-pressed="true"]{ background:#45aaff !important; color:#fff !important; border-color: #45aaff !important; }
#zci-tablewrap .zci-fav__icon{ width:18px; height:18px; }


/* Pagination styling */
.zci-pagination{display:flex;gap:8px;align-items:center;justify-content:center;margin:18px 0;flex-wrap:wrap;}
.zci-pagebtn{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;border:1px solid rgba(0,0,0,.10);border-radius:999px;text-decoration:none;font-weight:800;}
.zci-pagebtn--current{background:#45aaff;color:#fff;border-color:transparent;}
.zci-pagebtn--disabled{opacity:.35;}
.zci-pagebtn--dots{border-color:transparent;}
/* hide load more when pagination is present */
#zci-pagination:not(:empty) + .zci-loadmore{display:none;}



/* --- Requested adjustments (2026-02-06) --- */

/* Table view: removed Arbeitszeitmodell column; keep table responsive without horizontal scroll */
.zci-table{ table-layout: fixed; width:100%; }
.zci-table th, .zci-table td{ overflow:hidden; text-overflow: ellipsis; }
.zci-td--title, .zci-table th:first-child{ width: 46%; }
.zci-table th:nth-child(2), .zci-table td:nth-child(2){ width: 18%; } /* Arbeitsmodell */
.zci-table th:nth-child(3), .zci-table td:nth-child(3){ width: 20%; } /* Ort */
.zci-th--actions, .zci-td--actions{ width: 16%; white-space: nowrap; }

/* Search counter row: give it more breathing room (end of fieldset) */
.zci-filters__row--count{ margin-top: 16px; padding-top: 10px; padding-bottom: 6px; border-top: 1px solid rgba(0,0,0,.06); }
.zci-filters__row--count .zci-results{ font-weight:600; display:block; }

/* Cards & list: do not use zci-mini sizing rules for non-table elements */
.zci-grid .zci-mini:not(.zci-fav){ display:none !important; }

/* --- Results counter spacing (release 1.6.35.32) --- */
.zci-filters__row--count{
  margin-top: 16px !important;
  padding-top: 10px !important;
  padding-bottom: 8px !important;
  border-top: 1px solid rgba(0,0,0,.06) !important;
}


.zci-fav.zci-fav--mask::before{ display:block; }


/* --- Ensure favourite button visible on search page (cards + list) --- */
[data-zci-root] .zci-fav{ display:inline-flex !important; }
[data-zci-root][data-zci-view="list"] .zci-card__header,
[data-zci-root][data-zci-view="list"] .zci-card__top{
  display:flex;
  gap:10px;
  align-items:flex-start;
}



/* --- Favourites as text link (instead of button) --- */
.zci-favslink{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 999px;
  -webkit-appearance: none;
  appearance: none;
  border: 2px solid #45aaff !important;
  background: #fff !important;
  color: #45aaff !important;
  cursor: pointer;
  transition: transform .08s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.zci-favslink:hover{ text-decoration:none; }
.zci-favslink[aria-pressed="true"]{ background:#45aaff !important; border-color:#45aaff !important; color:#fff !important; }
.zci-favslink__icon{ width:18px; height:18px; stroke: currentColor; fill:none; }



/* --- Fav button as pill (like "Zu Favoriten") on cards/list --- */
.zci-fav--pill{
  width: auto !important;
  height: auto !important;
  padding: 8px 10px !important;
  border-radius: 999px !important;
  gap: 8px;
  box-shadow: 0 10px 18px rgba(2,6,23,.10);
}
.zci-fav--pill .zci-fav__icon{ width:18px; height:18px; }
.zci-fav__text{
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

/* Keep pill in top-right on card view */
[data-zci-root][data-zci-view="cards"] .zci-card{ position: relative; }
[data-zci-root][data-zci-view="cards"] .zci-fav--card{
  position: absolute !important;
  top: 12px;
  right: 12px;
}

/* List view: place "Mark as favourite" on the right, top */
[data-zci-root][data-zci-view="list"] .zci-card{ position: relative; }
[data-zci-root][data-zci-view="list"] .zci-fav--card{
  position: absolute !important;
  top: 12px;
  right: 12px;
  margin: 0 !important;
}

/* On very small screens, keep it compact */
@media (max-width: 520px){
  .zci-fav__text{ display:none; }
  .zci-fav--pill{ padding: 8px 9px !important; }
}



/* --- Favourite pill count badge --- */
.zci-favslink{ position: relative; }
.zci-favslink__count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: #45aaff;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
}



/* --- Prevent favourites pill jumping --- */
.zci-favslink{
  position: relative;
  transform: none !important;
}
.zci-favslink__count{
  position: absolute;
  top: -6px;
  right: -6px;
  margin-left: 0 !important;
}


/* --- Ensure view toggle buttons are clickable --- */
.zci-view-toggle{ position: relative; z-index: 5; }

/* --- View toggle: keep clickable without forcing layout --- */
.zci-view-toggle{ position: relative; }


/* --- Make whole card clickable (detail view) without blocking buttons --- */
.zci-card{ position: relative; }
.zci-card__link{
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.zci-card__actions,
.zci-fav--card,
.zci-card__actions a,
.zci-card__title a{
  position: relative;
  z-index: 2;
}



/* --- Pagination arrow icons (avoid stray '<' character) --- */
.zci-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 8px;
}
.zci-pagebtn__ico{ width:18px; height:18px; display:block; }
.zci-pagebtn--prev, .zci-pagebtn--next{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 10px;
}

/* Facets display (cards + list + single) */
.zci-card__facets{
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.35;
  opacity: .85;
}
.zci-tablemeta{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  opacity: .85;
}
.zci-facts{
  display: grid;
  gap: 10px;
}
.zci-fact{
  display: grid;
  gap: 4px;
}
.zci-fact__k{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  opacity: .75;
  text-transform: uppercase;
}
.zci-fact__v{
  font-size: 14px;
}


/* ---------------- Print (only job information, no design elements) ---------------- */
@media print{
  @page{ size:A4; margin:8mm; }
  /* Scale down slightly so job text + recruiter block typically fit on one page */
  html{ zoom:0.86; }

  /* Basic reset */
  *{ box-shadow:none !important; text-shadow:none !important; filter:none !important; }
  html, body{ background:#fff !important; font-size:10pt !important; line-height:1.25 !important; }
  a, a:visited{ color:inherit !important; text-decoration:none !important; }

  /* Hide global layout elements */
  header, nav, footer, .site-header, .site-footer, .wp-block-navigation,
  .zci-filters, .zci-resultsline, .zci-pagination, .zci-tabs,
  .zci-share, .zci-sharebtn, .zci-sidebar-print, .zci-printbtn,
  .zci-favbar, .zci-loadmore, .zci-applybar,
  .cookie-notice, .cookie-banner, .modal, .popup{
    display:none !important;
  }

  /* Single job: remove hero styling, show content full-width */
  .zci-job{ margin:0 !important; padding:0 !important; }
  .zci-job-header{
    background:none !important;
    color:#000 !important;
    padding:0 0 12px !important;
    border-bottom:1px solid #ddd !important;
  }
  .zci-job-header::before{ display:none !important; }
  .zci-job-header .zci-job-header__overlay{ display:none !important; }
  .zci-job-header img, .zci-job-header picture{ display:none !important; }

  /* Print layout: use two columns (content + recruiter/sidebar) to keep everything on one page */
  .zci-job-body{ display:flex !important; gap:12px !important; align-items:flex-start !important; }
  .zci-main{ width:68% !important; max-width:none !important; }
  .zci-sidebar{ width:32% !important; max-width:none !important; break-inside:avoid; page-break-inside:avoid; }

  /* Tighten vertical spacing */
  .zci-job-header{ padding:0 0 8px !important; margin:0 0 8px !important; }
  .zci-backrow{ display:none !important; }
  .zci-section{ margin:8px 0 !important; padding:0 !important; }
  p{ margin:0 0 6px !important; }
  ul, ol{ margin:0 0 6px 16px !important; }
  h1{ font-size:16pt !important; margin:0 0 6px !important; }
  h2{ font-size:12pt !important; margin:10px 0 6px !important; }
  h3{ font-size:11pt !important; margin:8px 0 4px !important; }
  /* Optional: keep only job facts + content; hide sidebar buttons/CTAs */
  .zci-sidebar .zci-sidebar-actions,
  .zci-sidebar .zci-sidebar-share,
  .zci-sidebar .zci-sidebar-apply,
  .zci-sidebar .zci-sharebtn{
    display:none !important;
  }

  /* Ensure descriptions print cleanly */
  .zci-section, .zci-desc, .zci-job-content, .zci-box, .zci-contact{ break-inside:avoid; page-break-inside:avoid; }
  h1,h2,h3{ page-break-after:avoid; }
}