/* Akzent = dunkles Zinc wie die join.com-Vorlage (Überschriften rgb(39,39,42),
   Bewerben-Button rgb(39,39,42)/weiß). Die Bullet-Punkte sind in der Vorlage
   BLAU (#2563EB) mit einem hellblauen Ring (#dbeafe) — eigene Variablen, damit
   Überschriften/Button dunkel bleiben (Betreiber-Echtlauf O-172732). */
:root{--ink:#23272e;--muted:#5b626b;--accent:#27272a;--accent-soft:#f4f4f5;
  --bullet:#2563EB;--bullet-ring:#dbeafe;--icon:#3f3f46;--line:#e4e7ec;--bg:#f4f6f8;}
/* Inter (Variable Font, latin) — die echte join.com-Schrift, gebündelt in
   fonts/Inter.woff2 (Betreiber-Echtlauf O-172732). */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/Inter.woff2') format('woff2');}
*{box-sizing:border-box;}
/* Größen/Stärken exakt wie die join.com-Vorlage gemessen (O-172732): Fließtext
   14px/400, h1 32px/600 (ls -.03em), h2 20px/500 (ls -.02em). Inter ist relativ
   schmal — ohne diese Werte wirken Browser-Default-Überschriften (700) zu fett. */
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;font-size:14px;}
#wrapper{max-width:900px;margin:0 auto;background:#fff;}
.jx-logo{padding:28px 40px 6px;}
.jx-logo a,.jx-logo img{display:block;}
.jx-logo img{width:128px;max-width:55%;height:auto;}
.jx-head{padding:18px 40px 22px;border-bottom:1px solid var(--line);}
.jx-head h1{margin:0 0 8px;font-size:32px;font-weight:600;letter-spacing:-.03em;
  line-height:1.22;color:var(--ink);}
/* Job-Meta-Zeile (Einsatzort · Anstellungsart · Kategorie) mit Icons. */
.jx-meta{margin:0;display:flex;flex-wrap:wrap;gap:6px 22px;color:var(--muted);font-size:14px;}
.jx-meta .jx-fact{display:inline-flex;align-items:center;gap:7px;}
.jx-sec{padding:24px 40px;border-bottom:1px solid var(--line);}
.jx-sec:last-of-type{border-bottom:0;}
.jx-sec h2{font-size:20px;font-weight:500;letter-spacing:-.02em;margin:0 0 12px;color:var(--accent);}
.jx-intro h2{font-weight:600;}   /* Firmenname etwas kräftiger (Vorlage: 600) */
.jx-facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 14px;color:var(--muted);font-size:14px;}
.jx-fact{display:inline-flex;align-items:center;gap:7px;}
/* Icons dunkelgrau wie im Original (nicht in der Akzentfarbe). */
.jx-ic{width:17px;height:17px;flex:0 0 auto;color:var(--icon);}
.jx-sec h3{font-size:15px;font-weight:600;margin:18px 0 8px;}
.jx-sec p{margin:0 0 12px;}
/* Bullets wie im Original: kleine dunkle Punkte, an der ersten Textzeile
   ausgerichtet (NICHT zentriert, kein Ring) — Betreiber-Echtlauf O-172732. */
.jx-sec ul{margin:0 0 14px;padding-left:2px;list-style:none;}
.jx-sec ol{margin:0 0 14px;padding-left:22px;}
.jx-sec ul li{position:relative;padding-left:20px;margin:0 0 10px;}
.jx-sec ul li::before{content:"";position:absolute;left:4px;top:.8em;width:6px;height:6px;
  border-radius:50%;background:var(--bullet);box-shadow:0 0 0 3px var(--bullet-ring);}
.jx-sec ol li{margin:0 0 8px;}
/* Footer-Links als neutrale Pillen MIT Icon (Globe/Facebook/LinkedIn …) — wie im
   Original (hellgrau, dunkler Text + Icon), nicht in einer Akzentfarbe. */
.jx-footer{padding:22px 40px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 12px;}
.jx-footer a{display:inline-flex;align-items:center;gap:8px;color:var(--ink);background:var(--accent-soft);
  border:1px solid var(--line);border-radius:999px;padding:7px 16px;text-decoration:none;
  font-weight:600;font-size:14px;}
.jx-footer a:hover{background:#e9eaec;}
.jx-footer .jx-pic{width:16px;height:16px;flex:0 0 auto;}
/* Firmen-Bild-Slideshow: kleiner, mehrere nebeneinander, durchlaufend (Marquee);
   pro Ansicht 3 / responsiv 2 / 1 (Slide-Breite per JS gesetzt), pausiert bei Hover. */
.jx-slideshow{overflow:hidden;}
.jx-slideshow.jx-top{margin:8px 0 0;border-top:1px solid var(--line);}
.jx-slide-track{display:flex;width:max-content;animation:jx-marquee 34s linear infinite;}
.jx-slideshow:hover .jx-slide-track{animation-play-state:paused;}
.jx-slide{flex:0 0 auto;width:270px;margin-right:14px;}
.jx-slide img{display:block;width:100%;height:190px;object-fit:cover;
  border:1px solid var(--line);background:#fff;}
@keyframes jx-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){
  .jx-slide-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;transform:none!important;}}
.jx-contact{background:var(--bg);}
.jx-contact .jx-name{font-weight:700;margin:0;}
.jx-contact .jx-role{color:var(--muted);margin:2px 0 0;}
.jx-jobid{color:var(--muted);font-size:14px;padding:14px 40px 0;}
.jx-apply-wrap{padding:28px 40px 40px;text-align:center;}
.jx-apply{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  font-weight:700;font-size:18px;padding:14px 40px;border-radius:8px;}
.jx-apply:hover{filter:brightness(.94);}
@media (max-width:560px){.jx-head,.jx-sec,.jx-apply-wrap{padding-left:20px;padding-right:20px;}
  .jx-jobid{padding-left:20px;}}
@media print{body{background:#fff;}*{box-shadow:none!important;}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

b, strong { font-weight: bold; }