<h1 class="text-align-center">Weil Erfolg in der Region beginnt <strong style="color:#F2A900;">#Schwarzwald-JOBS.de</strong></h1>

<p>#azubi #zukunft #karrierestart&nbsp;</p><p>Starte Deine Karriere jetzt – mit einer Ausbildung für Deine Zukunft!</p>

<h2>Jobbörse für Schwarzwald und Umgebung&nbsp;</h2><h3 style="color:white;">Regionale Stellenangebote, Ausbildungsplätze und Minijobs</h3><p>&nbsp;</p>

Kandidatenpool - Arbeitgeber kommen auf dich zu - Jetzt kostenlos registrieren

Modenäher/innen und Modeschneider/innen Garment Maker/ Garment Tailor (m/w/d) Lingerie/Swimwear

Kaufmännischer Mitarbeiter (m/w/d) –Vertriebsinnendienst 80-100 %

Mechaniker (m/w/d)

Montagemitarbeiter /Helfer Metallbau (m/w/d)

Zerspanungs- oder Industriemechaniker:in (m/w/d) für den Bereich Schlosserei / Instandhaltung

Kundenversteher/in (m/w/d) Fachverkäufer Bäckerei und Café (Teilzeit/Vollzeit)

Servicekraft (m/w/d)

Kaufmann/-frau (m/w/d)

Servicetechniker Frankfurt / Mannheim (m/w/d)

Disponent für Betonfertigteile (m/w/d)

Elektroniker in der Fertigungsreparatur (m/w/d)

Rettungsschwimmer/-in (m/w/d)

Kaufmännischer Mitarbeiter (W/M/D) Auftragsbearbeitung & Einkauf

<script>
  /* ---- Configuration ----
     The portal is detected automatically from the domain, so this same block
     works unchanged on every Recruiting Now portal — including through a single
     shared Tag Manager container. Only set portalName to override detection. */
  window.kandidatenpoolButtonConfig = {
    registrationUrl: 'https://pool.recruiting-now.de/',

    title: 'Kandidatenpool',
    subtitle: 'Jetzt kostenlos registrieren',
    ariaLabel: 'Kandidatenpool – Jetzt kostenlos registrieren'
  };
</script>

<script>
/**
 * Kandidatenpool Button — Recruiting Now
 * ---------------------------------------------------------------------------
 * Floating CTA for Jobiqo portals (Badische-JOBS.de and siblings).
 *
 * Built for a headless Next.js frontend, which means two things the previous
 * version got wrong:
 *   1. Page navigation happens via history.pushState — DOMContentLoaded fires
 *      ONCE per hard load and never again. We watch route changes instead.
 *   2. The "Bewerben" button is type="submit" and navigates away, so a click
 *      handler with a delay never survives. We detect the resulting URL.
 *
 * Behaviour (confirmed with S. Hofmann, 2026-08):
 *   Desktop — no frequency cap; shows on every qualifying page.
 *   Mobile  — once per calendar day.
 *   Click or ✕ — hidden for the rest of the browser session.
 *   Never auto-hides on a timer.
 *
 * Tracking goes to GTM's dataLayer only (container GTM-NC533BZ → GA4
 * G-6Y2DEE4VSQ). We deliberately do NOT call gtag directly: pushing to
 * dataLayer means the portal's existing consent tool governs whether anything
 * is sent, so this script inherits their compliance posture and adds no risk.
 *
 * Test helpers:
 *   ?kp_force=1                            force it visible, ignoring all rules
 *   window.kandidatenpoolButton.show()     render immediately
 *   window.kandidatenpoolButton.reset()    clear stored session/day state
 *   window.kandidatenpoolButton.state()    inspect current decision inputs
 */
(function () {
  'use strict';

  if (window.__kandidatenpoolLoaded) return;   // survive double inclusion
  window.__kandidatenpoolLoaded = true;

  /**
   * One GTM container appears to serve every Recruiting Now portal, so a tag
   * firing on all pages would otherwise report six portals as one. Deriving the
   * portal from the hostname makes that impossible: each site labels itself
   * correctly with no per-portal configuration.
   *
   * An unknown host falls back to its own hostname rather than to a default —
   * mislabelling one portal as another would quietly corrupt the other's
   * reporting, which is worse than an unfamiliar label showing up in GA4.
   */
  var PORTAL_BY_HOST = {
    'badische-jobs.de':    'badische-jobs',
    'allgaeuer-jobs.de':   'allgaeu-jobs',
    'oberland-jobs.de':    'oberland-jobs',
    'schwarzwald-jobs.de': 'schwarzwald-jobs',
    'jobsambodensee.de':   'bodensee-jobs',
    'ulm.jobs':            'ulm-jobs'
  };

  function portalForHost(host) {
    var h = String(host || '').replace(/^www\./, '').toLowerCase();
    return PORTAL_BY_HOST[h] || h || 'unknown-portal';
  }

  var CFG = Object.assign({
    // Explicit config still wins; omit it and the portal is detected.
    portalName:      portalForHost(location.hostname),
    registrationUrl: 'https://pool.recruiting-now.de/',

    // Copy chosen by S. Hofmann: "Kandidatenpool – Jetzt kostenlos registrieren",
    // split across the pill's two lines.
    title:    'Kandidatenpool',
    subtitle: 'Jetzt kostenlos registrieren',
    // Matches the visible text rather than adding to it — WCAG 2.5.3 wants the
    // accessible name to contain what's on screen, which also keeps voice
    // control ("click Kandidatenpool…") working.
    ariaLabel: 'Kandidatenpool – Jetzt kostenlos registrieren',

    // Recruiting Now design tokens (supplied by S. Hofmann):
    //   --color-fg-strong    #5B676C   pill background   (white on it = 5.83:1, AA pass)
    //   --color-fg-on-accent #FFFFFF   text
    //   --color-accent       #EF7F1A   accent
    // The accent is used for the icon and focus ring only — white text directly
    // on #EF7F1A is 2.72:1 and fails contrast, so no copy sits on it.
    colorBg: '#5B676C',
    colorText: '#FFFFFF',
    colorAccent: '#EF7F1A',

    // "Opens in a new tab with navigation back after registration" — passes the
    // current page so the pool site can send the candidate back afterwards.
    sendReturnUrl: true,

    mobileQuery: '(max-width: 767px)',

    // Consent dialogs own the bottom of the screen and must not be covered.
    // `#cmpbox` is consentmanager.net, confirmed live on Badische-JOBS.de — it
    // sits at z-index 9999999, comfortably above this widget, so the banner wins
    // the stacking order regardless. This guard is belt-and-braces on top of that.
    // `.cmp-root-container` is Jobiqo's own mount point. Both live in the DOM
    // permanently and only gain size once the dialog opens.
    consentSelectors: '#cmpbox,.cmp-root-container,#usercentrics-root,' +
                      '#CybotCookiebotDialog,#BorlabsCookieBox,[id*="cookie-banner"],' +
                      '[class*="cookie-banner"],[aria-modal="true"][class*="consent"]',
    // consentmanager marks its own closed state, which beats measuring geometry.
    consentClosedSelectors: '.cmpboxclosed',

    forceParam: 'kp_force'
  }, window.kandidatenpoolButtonConfig || {});

  var EL_ID    = 'kp-fab';
  var STYLE_ID = 'kp-fab-styles';
  var SESSION_KEY = 'kp_closed_' + CFG.portalName;   // clicked or dismissed
  var DAY_KEY     = 'kp_day_'    + CFG.portalName;   // mobile once-per-day

  /* ---------------------------------------------------------------- storage */
  // Safari private mode throws on storage access; never let that break the page.
  function read(store, key) {
    try { return window[store].getItem(key); } catch (e) { return null; }
  }
  function write(store, key, val) {
    try { window[store].setItem(key, val); } catch (e) { /* no-op */ }
  }
  function drop(store, key) {
    try { window[store].removeItem(key); } catch (e) { /* no-op */ }
  }

  function today() {
    var d = new Date();
    return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
  }

  /* -------------------------------------------------------------- decisions */
  function isMobile() {
    return window.matchMedia(CFG.mobileQuery).matches ||
           /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  }

  function isForced() {
    return new URLSearchParams(location.search).get(CFG.forceParam) === '1';
  }

  /**
   * Which pages qualify. Verified against the live URL patterns:
   *   /jobs                          browse + search results
   *   /jobs?search=bäcker            search results
   *   /job/apply/1972533             application entry point
   *   /job/apply/wizard/...          multi-step form — deliberately excluded so
   *                                  we don't interrupt an application in progress
   */
  function isQualifyingPath() {
    if (typeof CFG.isQualifyingPath === 'function') return CFG.isQualifyingPath(location);
    var p = location.pathname;
    if (/^\/job\/apply\/wizard\//.test(p)) return false;
    if (/^\/jobs(\/|$)/.test(p)) return true;
    if (/^\/job\/apply\/\d+/.test(p)) return true;
    return false;
  }

  /**
   * True only when a consent dialog is genuinely on screen.
   *
   * Measuring the CMP root alone is not enough: its dialog is usually
   * position:fixed, which takes it out of flow and leaves the root at zero
   * height even while the dialog is visible. So we also look at descendants.
   *
   * The size floor matters. A false positive here means the button never
   * appears at all, which is a worse outcome than briefly overlapping a
   * banner — so only a substantial overlay counts. Diagnose via
   * kandidatenpoolButton.state().consentDialogVisible.
   */
  function consentDialogVisible() {
    if (!CFG.consentSelectors) return false;
    var MIN_H = 60, MIN_W = 200;
    var roots = document.querySelectorAll(CFG.consentSelectors);
    for (var i = 0; i < roots.length; i++) {
      // Explicit closed-state marker wins over geometry when the CMP offers one.
      if (CFG.consentClosedSelectors && roots[i].matches(CFG.consentClosedSelectors)) continue;
      var big = function (el) {
        var r = el.getBoundingClientRect();
        return r.height >= MIN_H && r.width >= MIN_W &&
               getComputedStyle(el).visibility !== 'hidden';
      };
      if (big(roots[i])) return true;
      var kids = roots[i].querySelectorAll('*');
      for (var j = 0; j < kids.length; j++) if (big(kids[j])) return true;
    }
    return false;
  }

  function shouldShow() {
    if (isForced()) return true;
    if (!isQualifyingPath()) return false;
    if (read('sessionStorage', SESSION_KEY)) return false;   // clicked or dismissed
    if (consentDialogVisible()) return false;                // never cover consent
    if (isMobile() && read('localStorage', DAY_KEY) === today()) return false;
    return true;
  }

  /* ------------------------------------------------------------------ render */
  function injectStyles() {
    if (document.getElementById(STYLE_ID)) return;
    var s = document.createElement('style');
    s.id = STYLE_ID;
    s.textContent = [
      '#' + EL_ID + '{position:fixed;bottom:42px;left:50%;transform:translateX(-50%);',
        'z-index:1000000;max-width:calc(100vw - 32px);',
        '--kp-bg:' + CFG.colorBg + ';--kp-text:' + CFG.colorText + ';--kp-accent:' + CFG.colorAccent + ';',
        'font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;',
        'animation:kpRise .38s cubic-bezier(.34,1.4,.64,1) both}',

      '@keyframes kpRise{from{opacity:0;transform:translateX(-50%) translateY(14px)}',
        'to{opacity:1;transform:translateX(-50%) translateY(0)}}',
      '@keyframes kpFade{to{opacity:0;transform:translateX(-50%) translateY(14px)}}',

      '#' + EL_ID + '.kp-leaving{animation:kpFade .26s ease-out both}',

      // Solid, not translucent: a 95% fill over a white page lifts the grey and
      // would drop white text below the accessible contrast threshold.
      '#' + EL_ID + ' .kp-pill{display:flex;align-items:center;gap:10px;',
        'background:var(--kp-bg);color:var(--kp-text);border:1px solid rgba(255,255,255,.14);',
        'border-radius:999px;padding:14px 18px;box-shadow:0 12px 30px rgba(29,37,40,.32)}',

      '#' + EL_ID + ' .kp-cta{display:flex;align-items:center;gap:10px;background:none;border:0;',
        'padding:0;margin:0;color:inherit;font:inherit;cursor:pointer;text-align:left;',
        'transition:transform .2s ease}',
      '#' + EL_ID + ' .kp-cta:hover{transform:translateY(-2px)}',
      '#' + EL_ID + ' .kp-cta:focus-visible{outline:2px solid var(--kp-accent);outline-offset:4px;border-radius:999px}',

      '#' + EL_ID + ' .kp-icon{width:42px;height:42px;border-radius:999px;flex:0 0 auto;',
        'display:flex;align-items:center;justify-content:center;',
        'background:var(--kp-accent);color:var(--kp-text)}',
      '#' + EL_ID + ' .kp-icon svg{width:23px;height:23px;display:block}',

      '#' + EL_ID + ' .kp-title{display:block;font-size:16px;font-weight:800;line-height:1.15;',
        'letter-spacing:-.01em;white-space:nowrap}',
      '#' + EL_ID + ' .kp-sub{display:block;font-size:13px;font-weight:600;line-height:1.25;',
        'opacity:.9;margin-top:2px;white-space:nowrap}',

      '#' + EL_ID + ' .kp-close{flex:0 0 auto;width:28px;height:28px;margin-left:2px;',
        'display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.16);',
        'border:0;border-radius:999px;color:var(--kp-text);font-size:15px;line-height:1;cursor:pointer;',
        'opacity:.85;transition:opacity .2s ease,background .2s ease}',
      '#' + EL_ID + ' .kp-close:hover{opacity:1;background:rgba(255,255,255,.30)}',
      '#' + EL_ID + ' .kp-close:focus-visible{outline:2px solid var(--kp-accent);outline-offset:2px}',

      '@media (max-width:767px){',
        '#' + EL_ID + '{bottom:20px}',
        '#' + EL_ID + ' .kp-pill{padding:11px 14px;gap:9px}',
        '#' + EL_ID + ' .kp-icon{width:36px;height:36px}',
        '#' + EL_ID + ' .kp-icon svg{width:20px;height:20px}',
        '#' + EL_ID + ' .kp-title{font-size:15px}',
        // Stays on one line down to ~320px; wrapping here made the pill look broken.
        '#' + EL_ID + ' .kp-sub{font-size:12px}',
      '}',
      // Last resort on genuinely tiny screens, so text never spills out of the pill.
      '@media (max-width:339px){',
        '#' + EL_ID + ' .kp-title,#' + EL_ID + ' .kp-sub{white-space:normal}',
      '}',

      '@media (prefers-reduced-motion:reduce){',
        '#' + EL_ID + ',#' + EL_ID + '.kp-leaving,#' + EL_ID + ' .kp-cta{animation:none;transition:none}',
      '}'
    ].join('');
    document.head.appendChild(s);
  }

  function build() {
    var wrap = document.createElement('div');
    wrap.id = EL_ID;

    var pill = document.createElement('div');
    pill.className = 'kp-pill';

    var cta = document.createElement('button');
    cta.type = 'button';
    cta.className = 'kp-cta';
    cta.setAttribute('aria-label', CFG.ariaLabel);

    // A white glyph on the accent, per --color-fg-on-accent. An emoji here
    // carries its own colours and muddies the orange; a group-of-people mark
    // also says "pool" rather than leaving it to the text alone.
    var icon = document.createElement('span');
    icon.className = 'kp-icon';
    icon.setAttribute('aria-hidden', 'true');
    icon.innerHTML =
      '<svg viewBox="0 0 24 24" fill="currentColor" focusable="false">' +
        '<circle cx="9" cy="8" r="3.2"/>' +
        '<path d="M9 13c-3.3 0-6 1.9-6 4.3 0 .6.5 1.1 1.1 1.1h9.8c.6 0 1.1-.5 1.1-1.1C15 14.9 12.3 13 9 13Z"/>' +
        '<circle cx="17.2" cy="9.1" r="2.4" opacity=".72"/>' +
        '<path d="M17.2 13c-.7 0-1.4.1-2 .3 1.2.9 1.9 2.2 1.9 3.7v.4h3.5c.5 0 .9-.4.9-1 0-1.9-1.9-3.4-4.3-3.4Z" ' +
          'opacity=".72"/>' +
      '</svg>';

    var text = document.createElement('span');
    var t = document.createElement('strong');
    t.className = 'kp-title';
    t.textContent = CFG.title;
    var sub = document.createElement('small');
    sub.className = 'kp-sub';
    sub.textContent = CFG.subtitle;
    text.appendChild(t);
    text.appendChild(sub);

    cta.appendChild(icon);
    cta.appendChild(text);

    var close = document.createElement('button');
    close.type = 'button';
    close.className = 'kp-close';
    close.setAttribute('aria-label', 'Hinweis schließen');
    close.innerHTML = '&#10005;';

    pill.appendChild(cta);
    pill.appendChild(close);
    wrap.appendChild(pill);

    cta.addEventListener('click', onClick);
    close.addEventListener('click', onDismiss);

    return wrap;
  }

  /* ----------------------------------------------------------------- actions */
  function track(event) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: event,
      kp_portal: CFG.portalName,
      kp_page: location.pathname,
      kp_device: isMobile() ? 'mobile' : 'desktop'
    });
  }

  function show() {
    if (document.getElementById(EL_ID)) return;
    injectStyles();
    document.body.appendChild(build());
    if (isMobile()) write('localStorage', DAY_KEY, today());
    track('kp_button_displayed');
  }

  function remove(animated) {
    var el = document.getElementById(EL_ID);
    if (!el) return;
    if (!animated) { el.remove(); return; }
    el.classList.add('kp-leaving');
    setTimeout(function () { if (el.parentNode) el.remove(); }, 280);
  }

  function onClick() {
    track('kp_button_clicked');
    write('sessionStorage', SESSION_KEY, '1');

    var url = new URL(CFG.registrationUrl);
    url.searchParams.set('source', CFG.portalName);
    if (CFG.sendReturnUrl) url.searchParams.set('returnUrl', location.href);
    window.open(url.toString(), '_blank', 'noopener');

    remove(true);
  }

  function onDismiss() {
    track('kp_button_dismissed');
    write('sessionStorage', SESSION_KEY, '1');
    remove(true);
  }

  /* ------------------------------------------------------------- evaluation */
  function evaluate() {
    if (shouldShow()) show();
    else remove(false);          // left a qualifying page, or rules now say no
  }

  var pending = null;
  function scheduleEvaluate() {
    clearTimeout(pending);
    // Next.js swaps the DOM after the URL changes; a short beat avoids racing it.
    pending = setTimeout(evaluate, 120);
  }

  /**
   * Route awareness. This is the piece the old script lacked entirely: on a
   * Next.js portal, searching does not reload the page, so nothing re-fires.
   */
  function watchRoutes() {
    ['pushState', 'replaceState'].forEach(function (m) {
      var orig = history[m];
      if (orig.__kpPatched) return;
      var patched = function () {
        var r = orig.apply(this, arguments);
        scheduleEvaluate();
        return r;
      };
      patched.__kpPatched = true;
      history[m] = patched;
    });
    window.addEventListener('popstate', scheduleEvaluate);
    window.addEventListener('hashchange', scheduleEvaluate);
    window.addEventListener('orientationchange', scheduleEvaluate);
  }

  function start() {
    watchRoutes();
    evaluate();
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', start);
  } else {
    start();                     // already parsed — run now, don't wait forever
  }

  /* -------------------------------------------------------- public test API */
  window.kandidatenpoolButton = {
    show: function () { injectStyles(); if (!document.getElementById(EL_ID)) { document.body.appendChild(build()); } },
    hide: function () { remove(false); },
    reset: function () {
      drop('sessionStorage', SESSION_KEY);
      drop('localStorage', DAY_KEY);
      remove(false);
      evaluate();
    },
    portalFor: portalForHost,        // exposed so the host mapping is testable
    state: function () {
      return {
        portal: CFG.portalName,
        path: location.pathname,
        qualifyingPage: isQualifyingPath(),
        device: isMobile() ? 'mobile' : 'desktop',
        closedThisSession: !!read('sessionStorage', SESSION_KEY),
        mobileDayUsed: read('localStorage', DAY_KEY),
        consentDialogVisible: consentDialogVisible(),
        forced: isForced(),
        wouldShow: shouldShow(),
        rendered: !!document.getElementById(EL_ID)
      };
    },
    config: CFG
  };
})();
</script>

Weil Erfolg in der Region beginnt #Schwarzwald-JOBS.de

Jobbörse für Schwarzwald und Umgebung

Regionale Stellenangebote, Ausbildungsplätze und Minijobs

TopJobs

Jobs im Blick