/* ==========================================================
   Infinex Jobs – Bootstrap 5
   Ziel: möglichst nah an der alten Jobseiten-Optik
   - DINOT (regular/medium/bold)
   - schmaler, zentrierter Content
   - H2/H1 nicht fett (wie vorher)
   - blaue Bulletpoints
   - Footer als blauer Balken
   ========================================================== */


/* ==============================
   DINOT Fonts
   ============================== */
@font-face{
  font-family: 'DINOT-regular';
  src: url('../fonts/DINOT-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face{
  font-family: 'DINOT-medium';
  src: url('../fonts/DINOT-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}
@font-face{
  font-family: 'DINOT-bold';
  src: url('../fonts/DINOT-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}


/* ==============================
   Root / CI
   ============================== */
:root{
  --ix-blue: #0078BF;
  --ix-blue-dark: #0066a3;

  --ix-text: #333;
  --ix-muted: #6f6f6f;
  --ix-line: #e8e8e8;
}


/* ==============================
   Base
   ============================== */
body.job-page{
  background: #fff;
  color: var(--ix-text);
  font-family: "DINOT-regular", sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

/* Überschriften-Defaults ent-bolden (Bootstrap setzt teils kräftiger) */
body.job-page h1,
body.job-page h2,
body.job-page h3{
  font-weight: 400;
}

/* Links klassisch */
body.job-page a{
  color: var(--ix-blue);
  text-decoration: none;
}
body.job-page a:hover{
  text-decoration: underline;
}


/* ==============================
   Layout / Container
   ============================== */
/* alter Look: recht schmal & zentriert */
body.job-page .container.job-wrap{
  max-width: 760px;
}

/* etwas mehr “Luft” links/rechts wie früher */
@media (max-width: 576px){
  body.job-page .container.job-wrap{
    padding-left: 16px;
    padding-right: 16px;
  }
}


/* ==============================
   Header / Logo
   ============================== */
header.job-wrap{
  padding-top: 25px;
}

.nav-logo{
  height: 70px;
  width: auto;
  display: block;
}

/* oben eher „luftig“ aber nicht zu hoch */
.job-nav{
  padding: 16px 0 8px;
}


/* ==============================
   Job Hero (oben)
   ============================== */
.job-hero{
  padding: 26px 0 18px;
  border-bottom: 1px solid var(--ix-line);
}

/* Titel oben: NICHT fett (wie du gezeigt hast) */
.job-hero h2{
  margin: 0;
  font-size: 34px;                 /* näher am alten Look als 36 */
  line-height: 1.2;
  font-family: "DINOT-regular", sans-serif;
  color: #111;
}

/* Meta rechts, klein & dezent */
.job-meta{
  margin-top: 6px;
  color: var(--ix-muted);
  font-size: 14px;
  text-align: right;
}


/* ==============================
   CTA Buttons
   ============================== */
.cta{
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Buttons: eher „Bootstrap 3“-Gefühl */
/* Buttons */
.job-page .btn{
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-family: "DINOT-medium", sans-serif;
  text-decoration: none !important;
}

/* Blauer Button */
.job-page .btn-primary{
  background-color: var(--ix-blue);
  border-color: var(--ix-blue);
  color: #ffffff !important;   /* <-- erzwingen */
}

/* Hover */
.job-page .btn-primary:hover,
.job-page .btn-primary:focus,
.job-page .btn-primary:active{
  background-color: var(--ix-blue-dark);
  border-color: var(--ix-blue-dark);
  color: #ffffff !important;   /* <-- erzwingen */
}



/* ==============================
   Content
   ============================== */
.job-content{
  margin-top: 20px;
}

/* Blaue Stellenbezeichnung im Content: NICHT fett */
.job-content h1{
  color: var(--ix-blue);
  font-family: "DINOT-medium", sans-serif;  /* nah am Original: nicht bold */
  font-size: 34px;
  line-height: 1.2;
  margin: 16px 0 6px;
}

/* Unterzeile (meist <em>...) klassisch, klein & grau */
.job-content em{
  font-style: italic;
  font-size: 15px;
  color: #666;
}

/* Wenn direkt nach H1 ein Absatz kommt: etwas enger */
.job-content h1 + p{
  margin-top: 4px;
}

/* Fließtext eher “klassisch” */
.job-content p{
  margin: 0 0 12px;
}

/* Strong-Labels wie “Ihre Aufgaben …” nicht fett, nur medium */
.job-content p strong{
  font-family: "DINOT-medium", sans-serif;
  font-weight: 500;
  color: #333;
}

/* Listen: blaue Bullets, kompakter wie früher */
.job-content ul{
  list-style-type: disc;
  padding-left: 22px;
  margin: 0 0 16px;
}
.job-content ul li{
  margin: 0 0 6px;
}
.job-content ul li::marker{
  color: var(--ix-blue);
  font-size: 1.2em;
}

/* Trennlinien im Content */
.job-content hr,
hr{
  border: 0;
  border-top: 1px solid var(--ix-line);
  margin: 18px 0;
}


/* ==============================
   Zurück-Link
   ============================== */
.job-backlink{
  margin-top: 22px;
}


/* ==============================
   Footer – blauer Balken
   ============================== */
.job-footer{
  margin-top: 60px;
}

/* Footer-Text als Balken (wie deine alte Version) */
.job-footer small{
  display: block;
  background: var(--ix-blue);
  color: #fff;
  text-align: center;
  padding: 14px 10px;
  font-family: "DINOT-regular", sans-serif;
  font-size: 13px;
}


/* ==============================
   Mobile
   ============================== */
@media (max-width: 576px){

  .nav-logo{
    height: 60px;
  }

  .job-hero{
    padding: 22px 0 16px;
  }

  .job-meta{
    text-align: left;
    margin-top: 8px;
  }

  .job-hero h2{
    font-size: 28px;
  }

  .job-content h1{
    font-size: 28px;
    margin-top: 14px;
  }

  .btn{
    padding: 8px 14px;
    font-size: 13px;
  }
}

/* Buttons dürfen NIE unterstrichen werden */
.job-page .btn,
.job-page .btn:hover,
.job-page .btn:focus,
.job-page .btn:active{
  text-decoration: none !important;
}