/* WorkExpert Webjobs – Card Layout */

.woex-wrap { margin: 10px 0; }

/* Header */
.woex-header{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin: 0 0 18px 0;
}

.woex-count {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
}

/* =========================================
   Suche – volle Breite + "Card" Design
   ========================================= */

.woex-searchbar{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:14px;
  background:#ffffff;
  box-shadow: 0 1px 10px rgba(0,0,0,.06);
  box-sizing:border-box;
}

/* Input füllt die Breite */
.woex-searchbar input[type="search"]{
  flex: 1 1 auto;
  width:100%;
  min-width: 240px;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
  outline: none;
  box-sizing:border-box;
}

.woex-searchbar input[type="search"]:focus{
  border-color:#bbb;
}

/* Reset Button */
.woex-btn.woex-btn-secondary{
  background:#111;
  color:#fff;
}

.woex-btn.woex-btn-secondary:hover{
  opacity:.92;
}

/* Mobile: Suche untereinander */
@media (max-width: 700px){
  .woex-searchbar{
    flex-direction:column;
    align-items:stretch;
  }
  .woex-searchbar input[type="search"]{
    min-width: 0;
  }
}

/* =========================================
   Jobliste – 3 Kacheln nebeneinander (Flex)
   ========================================= */

.woex-list{
  display:flex !important;
  flex-wrap:wrap;
  gap:18px;
}

/* Kachel-Breite fix (Divi/Theme Overrides) */
.woex-list > .woex-card{
  box-sizing:border-box;
  width:auto !important;
  flex: 0 1 calc(33.333% - 12px);
  min-width: 280px; /* damit es nicht zu eng wird */
}

/* Tablet: 2 Spalten */
@media (max-width: 980px){
  .woex-list > .woex-card{
    flex: 0 1 calc(50% - 9px);
  }
}

/* Mobile: 1 Spalte */
@media (max-width: 700px){
  .woex-list > .woex-card{
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* Karte */
.woex-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 22px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 1px 10px rgba(0,0,0,.06);
}

/* Damit Titel/Meta nicht aus dem Card-Layout laufen */
.woex-card-main {
  min-width: 0;
}

/* Titel */
.woex-title {
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.25;
}

.woex-title:hover {
  text-decoration: underline;
}

.woex-id {
  font-weight: 600;
  opacity: .7;
  margin-left: 8px;
}

/* Subline */
.woex-subline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 15px;
  opacity: .95;
  flex-wrap: wrap;
}

/* Icons */
.woex-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  opacity: .9;
}

.woex-icon-arrow {
  width: 22px;
  height: 22px;
}

/* CTA rechts */
.woex-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  text-decoration: none;
  flex: 0 0 auto;
}

.woex-card-cta:hover {
  background: rgba(0,0,0,.04);
}

.woex-dot {
  opacity: .55;
}

/* States */
.woex-error {
  padding: 12px;
  border: 1px solid #c00;
  background: #fff5f5;
  border-radius: 10px;
}

.woex-empty {
  padding: 12px;
  opacity: .8;
}

/* Debug */
.woex-debug-box { margin-top: 16px; }

.woex-debug {
  white-space: pre-wrap;
  border: 1px solid #ddd;
  padding: 12px;
  border-radius: 10px;
  background: #fafafa;
}

/* =========================================================
   WorkExpert Webjobs – Formular Styling (ohne CSS Grid)
   ========================================================= */

.woex-form {
  margin-top: 14px;
}

.woex-form label {
  display: block;
  font-weight: 600;
  margin: 0 0 6px 0;
}

.woex-form input[type="text"],
.woex-form input[type="email"],
.woex-form input[type="tel"],
.woex-form input[type="date"],
.woex-form select,
.woex-form input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  outline: none;
}

.woex-form input[type="file"] {
  padding: 10px;
}

.woex-form input:focus,
.woex-form select:focus {
  border-color: #bbb;
}

/* 2 Spalten Layout via Flexbox */
.woex-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.woex-grid > div {
  flex: 1 1 calc(50% - 14px);
  min-width: 240px;
}

/* Mobile */
@media (max-width: 700px) {
  .woex-grid > div {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* Button */
.woex-btn {
  display: inline-block;
  padding: 12px 16px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  background: #111;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}

.woex-btn:hover {
  opacity: 0.92;
}

/* Success Box (du hast woex-error schon) */
.woex-success {
  padding: 12px;
  border-radius: 12px;
  background: #e8fff0;
  border: 1px solid rgba(0,0,0,.08);
}

/* kleine Hinweise */
.woex-hint {
  font-size: 13px;
  opacity: 0.8;
}

/* ---------- Bewerben Button im Detail-Header ---------- */
.woex-detail-header{
  align-items: stretch;
}

.woex-detail-cta{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-left: 16px;
}

.woex-btn-primary{
  background:#111;
  color:#fff;
}

.woex-btn-apply{
  background:#111;
  color:#fff;
  font-size:18px;
  padding:16px 22px;
  border-radius:16px;
}

/* ---------- Bewerbungsformular (Flexbox, kein CSS Grid) ---------- */
.woex-radio-group {
  display: flex;
  gap: 16px;
  margin-top: 6px;
}

.woex-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.woex-radio input[type="radio"] {
  accent-color: #2563eb;
}