/* ======= MCU Jobliste – modernes Layout ======= */
:root{
  --job-bg: var(--bg-color, #1E1F11);
  --job-panel: var(--bg-color2, #343528);
  --job-ink: var(--font-color, #A4998A);
  --job-accent: var(--akzent-color2, #93946C);
  --job-accent2: var(--akzent-color3, #A4998A);
  --job-radius: 14px; --job-gap: 14px;
}
*{box-sizing:border-box}

/* Rahmen + Kopf */
.job-wrap{max-width:min(1200px,96vw);margin:26px auto;padding:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid var(--job-panel);border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
  color:var(--job-ink);
}
.job-head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--job-panel);}
.job-title{font:700 26px/1 Antonio, sans-serif; letter-spacing:3px; text-transform:uppercase; color:var(--job-accent2)}

/* Formkarten */
.job-forms{display:grid;gap:var(--job-gap);grid-template-columns:1fr 1fr 1fr;padding:16px}
@media (max-width:1000px){.job-forms{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.job-forms{grid-template-columns:1fr}}
.form-card{background:var(--job-panel);border:1px solid color-mix(in srgb, var(--job-panel) 70%, #000);
  border-radius:var(--job-radius);padding:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 12px 30px rgba(0,0,0,.25)}
.form-card .h{font:800 12px/1 Antonio;letter-spacing:2px;text-transform:uppercase;color:var(--job-accent2);margin:0 0 10px}
.form-card table{width:100%;border-collapse:separate;border-spacing:0 10px}
.form-card td{background:#202214;border:1px solid var(--job-panel);padding:10px;border-radius:10px}
.form-card select,.form-card input[type=text],.form-card textarea{
  width:100%;background:#13140d;color:var(--job-ink);border:1px solid var(--job-panel);
  border-radius:10px;padding:8px 10px;font:15px/1.4 Rajdhani,system-ui;outline:none}
.form-card textarea{min-height:70px;resize:vertical}
.form-card .button{font:800 11px/1 Antonio;text-transform:uppercase;letter-spacing:2px;background:var(--job-accent);color:#15160f;border:1px solid var(--job-accent);border-radius:10px;padding:8px 12px;cursor:pointer}

/* Grid mit Jobkarten */
.jobs-grid{display:grid;gap:var(--job-gap);grid-template-columns:repeat(auto-fit,minmax(360px,1fr));padding:0 16px 16px}

/* Jobkarte */
.job-card{background:#17180f;border:1px solid var(--job-panel);border-radius:14px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.25)}
.job-card .card-head{display:flex;gap:12px;align-items:center;padding:12px;border-bottom:1px solid var(--job-panel);background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.08))}
.logo{width:50px;height:50px;border-radius:10px;overflow:hidden;border:2px solid #2e3522;background:#222}
.logo img{width:100%;height:100%;object-fit:cover;display:block}
.head-txt{display:grid;gap:2px}
.job-name{font:800 18px/1 Antonio;text-transform:uppercase;letter-spacing:2px;color:var(--job-accent2)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:800 10px/1 Antonio;letter-spacing:1px;text-transform:uppercase;border:1px solid var(--job-accent);color:var(--job-accent);padding:2px 8px;border-radius:999px}

.job-card .card-body{display:grid;grid-template-columns:1fr 280px;gap:12px;padding:12px}
@media (max-width:740px){.job-card .card-body{grid-template-columns:1fr}}
.desc{max-height:190px;overflow:auto;padding-right:8px;text-align:justify}
.meta{display:grid;gap:8px}
.meta .row{display:grid;grid-template-columns:90px 1fr;gap:8px;background:#1f2114;border:1px solid var(--job-panel);border-radius:10px;padding:8px}
.meta .k{font:700 11px/1 Antonio;color:var(--job-accent);letter-spacing:1px;text-transform:uppercase}
.meta .v{font:700 13px/1 Rajdhani;color:var(--job-ink)}
.staff{display:flex;flex-wrap:wrap;gap:6px;max-height:160px;overflow:auto;padding-right:6px}
.pill{display:inline-flex;gap:6px;align-items:center;background:#2b2e1c;border:1px solid var(--job-panel);border-radius:999px;padding:6px 10px;font:700 12px/1 Antonio;color:var(--job-ink);text-decoration:none}
.pill .role{opacity:.85;font:700 11px/1 Rajdhani}

/* Scrollbar */
.desc::-webkit-scrollbar,.staff::-webkit-scrollbar{width:6px;height:6px}
.desc::-webkit-scrollbar-thumb,.staff::-webkit-scrollbar-thumb{background:var(--job-panel)}
.desc::-webkit-scrollbar-track,.staff::-webkit-scrollbar-track{background:var(--job-accent)}


/* ===== Fix: linke Spalte breiter, rechte Spalte fix ===== */
.job-card .card-body{
  display: grid;
  /* links flexibel, rechts fix 300px (anpassen: 280–340px) */
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  align-items: start;
}
.job-card .card-body > *{ min-width: 0; }  /* Überlaufen verhindern */
.meta{ width: 300px; min-width: 0; overflow: hidden; } /* rechte Spalte bleibt kompakt */

/* Beschreibung: größerer Scrollbereich, sauberer Textfluss */
.desc{
  max-height: 240px;           /* Höhe gern anpassen */
  overflow: auto;
  padding-right: 8px;
  text-align: justify;
}

/* Mitarbeiterliste: mehr Zeilen, scrollbar, nichts ragt raus */
.staff{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 180px;           /* Höhe gern anpassen */
  overflow: auto;
  padding-right: 6px;
  min-width: 0;
}
.pill{ white-space: nowrap; max-width: 100%; } /* einzeilig je Pill */

/* Scrollbar (optisch passend) */
.desc::-webkit-scrollbar,
.staff::-webkit-scrollbar{ width:6px; height:6px }
.desc::-webkit-scrollbar-thumb,
.staff::-webkit-scrollbar-thumb{ background: var(--job-panel) }
.desc::-webkit-scrollbar-track,
.staff::-webkit-scrollbar-track{ background: var(--job-accent) }

/* ===== Optionaler Schutz: falls noch alte .trow1-Blöcke in der Staff-Liste landen ===== */
.staff .trow1{ background:transparent; border:0; padding:0; margin:0 }
.staff .trow1 h14{ font:inherit }


/* Jede Karte min. 560px breit → i. d. R. 2 Spalten statt 3 */
.jobs-grid{
  grid-template-columns: repeat(auto-fit, minmax(560px, 1fr));
}

/* Optional feiner abstufen */
@media (max-width: 1200px){
  .jobs-grid{ grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)); }
}

/* Links flexibel, rechts 240–320px (je nach Kartenbreite) */
.job-card .card-body{
  display: grid;
  grid-template-columns: 1fr clamp(240px, 30%, 320px);
  gap: 14px;
  align-items: start;
}
.job-card .card-body > *{ min-width: 0; }  /* verhindert Überlaufen */
.meta{ min-width: 0; overflow: hidden; }   /* rechte Spalte bleibt kompakt */

/* Unter ~780px Viewport die Karte innen stapeln */
@media (max-width: 780px){
  .job-card .card-body{ grid-template-columns: 1fr; }
}

.desc{
  max-height: 240px;          /* anpassen nach Geschmack */
  overflow: auto;
  padding-right: 8px;
  text-align: justify;
}

.staff{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 180px;          /* anpassen */
  overflow: auto;
  padding-right: 6px;
}

/* Scrollbar passend zu deinem Theme */
.desc::-webkit-scrollbar,.staff::-webkit-scrollbar{ width:6px; height:6px }
.desc::-webkit-scrollbar-thumb,.staff::-webkit-scrollbar-thumb{ background: var(--job-panel) }
.desc::-webkit-scrollbar-track,.staff::-webkit-scrollbar-track{ background: var(--job-accent) }

/* Alte trow1-Einträge innerhalb der Mitarbeiterliste als Pills darstellen */
.staff .trow1{ 
  display:inline-flex; align-items:center; gap:6px;
  margin:0 6px 6px 0; padding:6px 10px;
  background:#2b2e1c; border:1px solid var(--job-panel); border-radius:999px;
  font:700 12px/1 Antonio, sans-serif; color:var(--job-ink);
}
.staff .trow1 h14{ font:inherit; margin:0; }


/* Linke Beschreibung flexibel, rechte Spalte adaptiv (mind. 280, max. 360) */
.job-card .card-body{
  display: grid;
  grid-template-columns: 1fr clamp(280px, 30%, 360px);
  gap: 14px;
  align-items: start;
}
.job-card .card-body > *{ min-width: 0; } /* verhindert Überlaufen */
.meta{ min-width: 0; overflow: visible; }  /* nicht hart abschneiden */


/* Liste senkrecht, mit Scroll – Höhe nach Wunsch */
.staff{
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;   /* <- anpassen */
  overflow: auto;
  padding-right: 6px;
}

/* Einheitliche „Zeile“ je Mitarbeiter */
.staff a,
.staff .trow1{                    /* .trow1 = Fallback für altes Template */
  display: block;
  background: #232515;
  border: 1px solid var(--job-panel);
  border-radius: 10px;
  padding: 6px 10px;
  color: var(--job-ink);
  text-decoration: none;
  white-space: normal;            /* darf umbrechen */
}

/* Rolle optisch etwas absetzen (wenn du » Rolle ausgibst) */
.staff .role{ opacity: .85; }

/* Scrollbar passend zum Theme */
.staff::-webkit-scrollbar{ width:6px; height:6px }
.staff::-webkit-scrollbar-thumb{ background: var(--job-panel) }
.staff::-webkit-scrollbar-track{ background: var(--job-accent) }


/* Nichts vor den Namen rendern – weder Marker noch ::before */
.staff, .staff *{ list-style: none; }
.staff li::marker{ content: none; }
.staff a::before,
.staff .trow1::before,
.staff h14::before{ content: none !important; }

/* Eventuelle runden Toggle-Hintergründe killen */
.staff a,
.staff .trow1{
  background-image: none !important;
  box-shadow: none !important;
}

/* Mindestens zwei „luftige“ Karten pro Reihe */
.jobs-grid{
  grid-template-columns: repeat(auto-fit, minmax(560px, 1fr));
}

/* Zeilenstil (falls du statt <a> ein <div> nutzt) */
.staff-line{
  background:#232515;border:1px solid var(--job-panel);border-radius:10px;
  padding:6px 10px;
}

/* ===== Mitarbeiter: untereinander, nur vertikal scrollen ===== */
.job-card .meta .v.staff{
  display: grid !important;              /* 1 Spalte = untereinander */
  grid-template-columns: 1fr !important;
  gap: 8px;
  max-height: 240px;                      /* Höhe nach Wunsch */
  overflow-y: auto;
  overflow-x: hidden;                     /* keine horizontale Scrollbar */
  padding-right: 6px;
  min-width: 0;
}

/* Jede Zeile als „Chip-Row“ über die volle Breite */
.job-card .meta .v.staff a,
.job-card .meta .v.staff .pill,
.job-card .meta .v.staff .trow1{         /* .trow1 = Fallback altes Template */
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: #232515;
  border: 1px solid var(--job-panel);
  border-radius: 10px;
  padding: 6px 10px;
  color: var(--job-ink);
  text-decoration: none;
  white-space: normal;                    /* darf umbrechen */
  overflow-wrap: anywhere;                /* bricht lange Rollen */
  box-shadow: none !important;            /* Artefakte weg */
  background-image: none !important;
}
.job-card .meta .v.staff .role{ opacity:.85; }

/* Falls Marker/Symbole per Theme davor eingefügt wurden → komplett deaktivieren */
.job-card .meta .v.staff, 
.job-card .meta .v.staff *{ list-style: none; }
.job-card .meta .v.staff li::marker{ content: none; }
.job-card .meta .v.staff a::before,
.job-card .meta .v.staff .trow1::before,
.job-card .meta .v.staff h14::before{ content: none !important; }

/* ===== Spalten in der Karte: links groß, rechts genügend Platz ===== */
.job-card .card-body{
  display: grid;
  grid-template-columns: 1fr clamp(280px, 30%, 360px); /* rechts adaptiv */
  gap: 14px;
  align-items: start;
}
.job-card .card-body > *{ min-width: 0; }  /* kein Überlaufen */
.meta{ min-width: 0; overflow: visible; }  /* nicht „abschneiden“ */

/* Beschreibung: größerer vertikaler Scrollbereich */
.desc{
  max-height: 260px; 
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  text-align: justify;
}

/* Scrollbar passend zum Theme */
.desc::-webkit-scrollbar,
.job-card .meta .v.staff::-webkit-scrollbar{ width:6px; height:6px }
.desc::-webkit-scrollbar-thumb,
.job-card .meta .v.staff::-webkit-scrollbar-thumb{ background: var(--job-panel) }
.desc::-webkit-scrollbar-track,
.job-card .meta .v.staff::-webkit-scrollbar-track{ background: var(--job-accent) }