:root {
    /* Farbpalette JobRegio */
    --jr-primary: #000000 !important;      /* Vertrauensvolles Schwarz */
    --jr-primary-hover: #d6f4de !important;
    --jr-accent: #10b981 !important;       /* Frisches Gruen */
    --jr-accent-hover: #059669 !important;
    
    --jr-bg-body: #ffffff !important; /*weiss Hintergund aussen */
    --jr-bg-card: #d6f4de !important;
    
    --jr-text-main: #0f172a !important;
    --jr-text-muted: #cbd5e1 !important;
    --jr-border: #e2e8f0 !important;
    --jr-text-jobdescription: #000000 !important;
    
    /* Radien & Schatten */
    --jr-radius-sm: 4px !important;
    --jr-radius-md: 8px !important;
    --jr-radius-lg: 12px !important;
    --jr-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    --jr-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    --jr-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* 1. Generelles Layout & Body */

body {
    background-color: var(--jr-bg-body);
}

#sp-main-body {
    padding: 100px 0px;
  background-color: var(--jr-bg-body);
    color: var(--jr-text-main);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#sp-header .logo a {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-text-main);
    letter-spacing: -0.5px;
}

/* 2. Header / Navigation (Helix Ultimate) */
#sp-header {
    background-color: var(--jr-bg-body);
/*    box-shadow: var(--jr-shadow-sm); */
/*    border-bottom: 1px solid var(--jr-border); */
}

.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
    color: var(--jr-text-primary) !important;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li:hover > a {
    color: var(--jr-text-muted) !important;
    font-weight: 800;
    letter-spacing: -0.5px;
}

div#js_menu_wrapper {
   /* display: inline-block; */
      display: none;
  align-items: flex-start;
  justify-content: center; 
    width: 100%;
    float: left;
    padding: 8px 10px;
    visibility: hidden;
}

/*ERSTER CONTAINER*/
div#js_jobs_main_wrapper {
  background-color: var(--jr-bg-body);
    padding: 10px;
  /*  border: 1px dashed #e5e5e5;
    border-radius: 10px; */
   display: Block;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  clear: both; 
}

/*Zweiter Container*/
div#jsjobs-main-wrapper {
  background-color: var(--jr-bg-body);
/*  background: linear-gradient(135deg, #1e293b 0%, #0f172a 0%);*/
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 0%);
  border-radius: 40px 40px 40px 40px;
  border: 1px solid var(--jr-border) !important;
  width: 100%;
  float: left;
  display: block;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 20px;
  box-sizing: border-box;
}

div#jsjobs-main-wrapper div.jsjobs-job-info, .jsjobs-field-main-wrapper, .jssectionwrapper, div#jsjobs-main-wrapper div.jsjobs-job-information-data div.jsjobs-left-area, div#jsjobs-main-wrapper div.jsjobs-job-data div.jsjobs_description_data, div#jsjobs-main-wrapper div.jsjobs-job-information-data div.jsjobs-map-wrap {
    border: 0px dashed var(--jsjobs-border-color);
    background: #fff;
}


/* Login Menu von JSJobs ausblenden*/

div#js_menu_wrapper a.js_menu_link.js_menu_right_link {
  float: right;
  visibility: hidden;
}


/* Text Abstand über Jobsuche verstecken */

div.jsjobs-breadcrunbs-wrp {
  float: left;
  width: 100%;
  padding: 30px 0px 0px;
  font-size: 0px;
  visibility: hidden;
}


/* Text Navigation über Jobsuche verstecken */

div#jsjobs-main-wrapper span.jsjobs-main-page-title {

  font-size: 4rem !important;
    font-weight: 800 !important;
  letter-spacing: -0.5px;
/*    color: var(--jr-bg-card) !important;
        margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px; */
    display: block;
      unicode-bidi: isolate;
 /*  visibility: hidden; */
}

/* Bezeichnung über Feld Jobsuche */

div#jsjobs-main-wrapper div.jsjobs-fieldwrapper div.jsjobs-fieldtitle {
    display: flex;
    float: left;
            width: 100%;
          padding: 0;
      align-items: center;
  justify-content: center;
    align-content: center;
      font-weight: bold;
 /*     font-size: 1.1rem; */
/*    color: var(--jr-text-muted); */
 /*   margin-bottom: 15px; */

}

/*Umrandung Felder weg */
div#jsjobs-main-wrapper div.fieldwrapper-btn {
    border-top: 0px solid var(--jsjobs-primary);
}

/* Text Feld Startseite Jobsuche - Form etc. */

div#jsjobs-main-wrapper div.jsjobs-fieldwrapper div.jsjobs-fieldvalue {
    
    display: flex;
    width: 100%;
    padding: 12px 15px !important;
    border: 0px solid var(--jr-border) !important;
    border-radius: var(--jr-radius-md) !important;
    font-size: 1rem !important;
    color: var(--jr-text-main) !important;
    background-color: var(--jr-bg-body) !important;
    transition: all 0.2s ease;
    margin-bottom: 15px;
    align-items: center;
   justify-content: center;
   
}

/* INPUT Text Feld Startseite Jobsuche - Form, Breite etc. */
div#jsjobs-main-wrapper div.jsjobs-fieldwrapper div.jsjobs-fieldvalue input {
  
    display: flex;
    width: 100%;
    max-width: 600px;
    padding: 12px 15px !important;
    border: 1px solid var(--jr-border) !important;
    border-radius: var(--jr-radius-md) !important;
    font-size: 1rem !important;
    color: var(--jr-text-main) !important;
    transition: all 0.2s ease;
/*   margin-bottom: 15px; */
    align-content: center;
    justify-content: center;
    align-items: center;
    
}
/*Feld Städtesuche */
div#city ul.jsjobs-input-list-jsjobs {
        display: flex;
    width: 100%;
    max-width: 600px;
/*    padding: 12px 15px !important; */
    border: 1px solid var(--jr-border) !important;
    border-radius: var(--jr-radius-md) !important;
    font-size: 1rem !important;
    color: var(--jr-text-main) !important;
    transition: all 0.2s ease;
/*    margin-bottom: 15px; */
    align-content: center;
    justify-content: center;
    align-items: center;
}

/*Suchbutton Startseite */

div#jsjobs-main-wrapper form#adminForm input.jsjobs_button {

      /* 1. Reset: Browser-Standards entfernen */
  appearance: none;
  -webkit-appearance: none; /* Für ältere Safari/iOS Versionen */
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* 2. Unser Design (Beispielwerte) */
    background-color: var(--jr-primary) !important;
    border: none !important;
    color: #fff !important;
    padding: 12px 24px !important;
    border-radius: var(--jr-radius-md) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    box-shadow: var(--jr-shadow-sm) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-block;
  
  /* 3. Browser-Fixes für Konsistenz */
  line-height: 1.2; /* Verhindert vertikale Verschiebung in Firefox */
  white-space: nowrap; /* Verhindert hässliche Zeilenumbrüche */
  user-select: none; /* Verhindert Textmarkierung beim Klicken */
  touch-action: manipulation; /* Optimiert Klicks auf Mobile */

  margin-bottom: 15px;
}

div#jsjobs-main-wrapper form#adminForm input.jsjobs_button:hover {

      background-color: var(--jr-primary-hover) !important;
    box-shadow: var(--jr-shadow-md) !important;
    transform: translateY(-2px) !important;
    color: #000000 !important;
      
}


/* JS Jobs Footer AUSBLENDEN */

div#jsjobsfooter {
  /*  float: left; */
/*  width: 100%; */
/*  padding: 30px 0px 0px; */
  background-color: var(--jr-bg-body);
  font-size: 10px;
 visibility: hidden;
}

/*Ausgabe Liste Inserate*/
div#js-jobs-wrapper {
    display: inline-block;
    width: calc(100% - 40px);
    margin: 0 20px 9px;
    margin-top: 0px;
    margin-right: 20px;
    margin-bottom: 9px;
    margin-left: 20px;
    border: 1px solid var(--jr-primary) !important;
    border-radius: var(--jr-radius-md) !important;
}

/*Bewerben Link Liste */
div#js-jobs-wrapper div.js-bottomrow div.js-actions a.js-btn-apply {
    padding: 12px 18px;
    text-decoration: none;
    display: inline-block;
    background-color: var(--jr-primary) !important;
    color: #fff !important;
}


/*Inseratdetail - Kopf*/
div#jsjobs-main-wrapper div.jsjobs-job-info {
    width: 100%;
    float: left;
    display: inline-block;
    text-align: center;
    padding: 17px;
    position: relative;
    margin-top: 15px;
  color: var(--jr-text-jobdescription);
}

/*Inseratdetail - Text*/
div#jsjobs-main-wrapper div.jsjobs-job-data div.jsjobs_description_data {
    width: 100%;
    float: left;
    display: inline-block;
    padding: 25px 15px 10px;
    color: var(--jr-text-jobdescription);
      text-align: justify;
  /* Optional: Verbessert den Blocksatz durch Silbentrennung */
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

div#jsjobs-main-wrapper div.jsjobs-job-information-data span.js_controlpanel_section_title {
    width: 100%;
    float: left;
    display: inline-block;
    padding: 5px;
    font-weight: bold;
    font-size: 25px;
    color: var(--jr-text-jobdescription);
}

/*Inseratedetail - Infofelder */
div#jsjobs-main-wrapper div.jsjobs-job-information-data div.jsjobs-left-area div.jsjobs-jobs-overview-area {
    width: 100%;
    float: left;
    display: inline-block;
    padding-top: 15px;
    color: var(--jr-text-jobdescription);
}

div#jsjobs-main-wrapper div.jsjobs-job-information-data {
    width: 100%;
    float: left;
    display: inline-block;
    color: var(--jr-text-jobdescription);

}

/*Inseratedetail - Bewerben Button */
div#jsjobs-main-wrapper div.jsjobs-job-information-data div.jsjobs-jobmore-info div.js_job_apply_button a.js_job_button {
    display: inline-block;
    padding: 15px 17px;
    text-decoration: none;
    min-width: 150px;
    font-size: 16px;
   background-color: var(--jr-primary) !important;
    color: #fff !important;
}