/* ============================================================
   Relaunch chrome: header + mobile bottom nav (ported from MoLo).
   Loaded only for partners on RELAUNCH_PARTNERS (config.php).
   Colours are variables. Defaults = mfajobs; another portal
   overrides them with a body.relaunch { --rl-...: ... } rule in
   partner/<portal>/css/relaunch-theme.css (body beats :root).
   ============================================================ */
:root {
    --rl-accent:      #144f7a;   /* links, icons, focus, active states */
    --rl-accent-dark: #0e3a5a;   /* hover on filled accent */
    --rl-accent-tint: #e8f0f6;   /* hover on outlined controls */
    --rl-accent-line: #c5d7e5;   /* border on hovered outlined controls */
    --rl-cta:         #007186;   /* the one filled primary button */
    --rl-cta-dark:    #005a6b;
    --rl-top:         #c9930e;   /* paid jobs ("Top-Stelle"): card border, badge, map pin */
    --rl-top-tint:    #fbf0d6;   /* badge background */
    --rl-top-ink:     #6e5000;   /* badge text on the tint (6:1) */
    --rl-line:        #e3e3e3;
    --rl-muted:       #888;
}

/* ---------- category navbar ----------
   The old header (meta nav, logo row, skyline) is not rendered on relaunch pages;
   the category navbar stays. On mobile it becomes a scrollable chip row instead of
   a hamburger: its login/account buttons duplicate the bottom nav.
   Note: dropdown categories would be clipped by the scrolling row - mfajobs has
   none; check a portal's main navigation before adding it to RELAUNCH_PARTNERS.
   Up to 991 px: Bootstrap collapses the navbar into a burger below 992 px; the chips keep the
   professions visible on tablets too. */
@media (max-width: 991px) {
    .relaunch .topbar .navbar { min-height: 0; margin: 0; border: 0; border-radius: 0; }
    .relaunch .topbar .navbar-header { display: none; }
    .relaunch .topbar .navbar-collapse.collapse { display: block !important; height: auto !important; margin: 0;
        padding: 0; border: 0; box-shadow: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .relaunch .topbar .navbar-collapse::-webkit-scrollbar { display: none; }
    .relaunch .topbar .navbar-nav { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0; padding: 9px 0; }
    .relaunch .topbar .navbar-nav::before, .relaunch .topbar .navbar-nav::after { content: normal; display: none; }
    .relaunch .topbar .navbar-nav > li { float: none; flex: 0 0 auto; }
    .relaunch .topbar .navbar-nav > li > a { white-space: nowrap; padding: 6px 14px; line-height: 1.3; font-size: 14px;
        border: 1px solid rgba(255,255,255,.55); border-radius: 999px; }
    .relaunch .topbar .navbar-nav > li.active > a { background: #fff; color: var(--rl-accent); }
}

/* small desktops: the four categories on one line */
@media (min-width: 992px) and (max-width: 1199px) {
    body.relaunch .topbar .navbar-nav > li > a { padding-left: 8px; padding-right: 8px; font-size: 13px; }
}

/* ---------- header: mobile (default) ---------- */
.rl-head { display: none; }
.rl-mhead { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--rl-line); }
.rl-logo { display: inline-block; text-decoration: none; flex: 0 0 auto; }
.rl-logo img { height: 30px; width: auto; display: block; }
/* long logos (krankenpflegejobs24 ...) leave the phone's search field its room */
.rl-mhead .rl-logo img { max-width: 44vw; object-fit: contain; object-position: left center; }
.rl-search {
    flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px;
    background: #f1f1f1; border: 1.5px solid #ddd; border-radius: 999px;
    padding: 9px 14px; color: #777; font-size: 14px; text-align: left; cursor: pointer;
    white-space: nowrap; overflow: hidden;
}
.rl-search span { overflow: hidden; text-overflow: ellipsis; }

/* ---------- header: desktop ---------- */
@media (min-width: 768px) {
    .rl-mhead { display: none; }
    .rl-head { display: block; background: #fff; border-bottom: 1px solid var(--rl-line); }
    /* BS .container clearfix pseudo elements would become flex items */
    .rl-head__in::before, .rl-head__in::after { content: normal; display: none; }
    .rl-head__in { display: flex; align-items: center; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
    .rl-head .rl-logo img { height: 44px; }

    /* location pill: ZIP/city input + attached "near me" button */
    .rl-loc { flex: 1 1 auto; max-width: 520px; min-width: 0; display: flex; align-items: center; gap: 8px; height: 40px;
        background: #fff; border: 1.5px solid #ddd; border-radius: 999px; padding-left: 14px; position: relative; }
    .rl-loc:focus-within { border-color: var(--rl-accent); }
    .rl-loc > i.fa-map-marker { color: #999; flex: 0 0 auto; }
    .rl-loc input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none;
        font-size: 14px; color: #333; height: 100%; }
    .rl-loc .rl-ort-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 280px; max-width: 380px; }
    .rl-loc__near { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 14px;
        border: 0; border-left: 1.5px solid #ddd; background: #fff; color: var(--rl-accent); border-radius: 0 999px 999px 0;
        font-size: 13px; font-weight: bold; white-space: nowrap; cursor: pointer; }
    .rl-loc__near:hover { background: var(--rl-accent); color: #fff; }
    /* tablets: no room for the place field next to the actions; a search button opens the search sheet */
    .rl-ico--search { display: none !important; }

    /* actions: one control language - same height, rounding and outline; one filled primary */
    .rl-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
    .rl-actions .rl-lang > .btn,
    .rl-actions .rl-ico,
    .rl-actions .rl-btn {
        height: 40px; margin: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
        gap: 8px; font-size: 15px; font-weight: bold; line-height: 1; white-space: nowrap; text-decoration: none;
        border: 1px solid #e4e4e7; background: #fff; background-image: none; color: var(--rl-accent); box-shadow: none;
        transition: background .15s, border-color .15s; }
    .rl-actions .rl-btn { padding: 0 18px; }
    .rl-actions .rl-lang > .btn { padding: 0 14px; }
    .rl-actions .rl-ico { width: 40px; padding: 0; font-size: 18px; position: relative; }
    .rl-actions .rl-lang > .btn:hover, .rl-actions .rl-lang.open > .btn,
    .rl-actions .rl-ico:hover,
    .rl-actions .rl-btn--ghost:hover { background: var(--rl-accent-tint); border-color: var(--rl-accent-line); color: var(--rl-accent); }
    .rl-actions .rl-btn--solid { background: var(--rl-cta); border-color: var(--rl-cta); color: #fff; }
    .rl-actions .rl-btn--solid:hover { background: var(--rl-cta-dark); border-color: var(--rl-cta-dark); color: #fff; }
    /* watchlist counter on the heart button */
    .rl-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px;
        background: var(--rl-cta); color: #fff; font-size: 10px; font-weight: bold; border-radius: 999px;
        display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; }
}

/* ---------- typeahead menu (header + sheet) ---------- */
.rl-ort-menu { display: none; z-index: 1700; background: #fff; border: 1px solid var(--rl-line); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18); overflow: hidden; }
.rl-ort-item { display: block; padding: 10px 14px; text-decoration: none; color: #333; font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid #f2f2f2; }
.rl-ort-item:last-child { border-bottom: 0; }
.rl-ort-item:hover, .rl-ort-item:focus { background: var(--rl-accent); color: #fff; text-decoration: none; }
.rl-ort-whole { background: #f7f7f7; font-weight: bold; }
.rl-ort-none { padding: 10px 14px; color: #999; font-size: 14px; }

/* ---------- place suggestions of the job search (js/relaunch/search-form.js): start page and search sheet ---------- */
.rh-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; margin: 0; padding: 4px 0; list-style: none;
    max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid #e1e5e9; border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16); }
.rh-menu[hidden] { display: none; }
.rh-menu [role="option"] { padding: 11px 14px; font-size: 15px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-menu [role="option"][aria-selected="true"], .rh-menu [role="option"]:hover { background: var(--rl-accent); color: #fff; }
.rh-menu .rh-menu__whole { font-weight: 700; }
.rh-menu__none { padding: 11px 14px; color: #5f6b76; }

/* ---------- many categories (arztjobs): a button in the band, a panel below it; full height on phones (js/relaunch/chrome.js) ---------- */
/* the old page's jump button: the panel replaces it */
.relaunch .topbar .nav-filter { display: none; }
.relaunch .topbar .rl-navbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin: 8px 0; padding: 0 14px; border: 1.5px solid #fff; border-radius: 999px;
    background: transparent; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.relaunch .topbar .rl-navbtn:hover, .relaunch .topbar .rl-navbtn:focus-visible { background: rgba(255, 255, 255, .18); }
.rl-navpanel { position: absolute; left: 15px; right: 15px; z-index: 1100; max-height: 70vh; overflow: auto; padding: 14px 16px 16px; background: #fff;
    border: 1px solid var(--rl-line); border-radius: 12px; box-shadow: 0 10px 28px rgba(16, 42, 67, .2); color: #2b2f33; }
.rl-navpanel[hidden] { display: none; }
.rl-navpanel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 16px; }
.rl-navpanel__close { width: 40px; height: 40px; border: 0; background: none; color: #2b2f33; font-size: 26px; line-height: 1; cursor: pointer; }
.rl-navpanel__search { width: 100%; height: 44px; margin-bottom: 10px; padding: 0 14px; border: 1.5px solid #ddd; border-radius: 10px; font-size: 16px; }
.rl-navpanel__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; margin: 0; padding: 0; list-style: none; }
.rl-navpanel__list li[hidden] { display: none; }
.rl-navpanel__list a { display: flex; align-items: center; min-height: 40px; color: var(--rl-accent); font-size: 14px; line-height: 1.25; }
.rl-navpanel__list li.active a { font-weight: 700; }
@media (min-width: 768px) { .rl-navpanel__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .rl-navpanel__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rl-navpanel__list a { min-height: 32px; } }
@media (max-width: 767px) {
    .rl-navpanel { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1300; max-height: none; padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 0; }
}

/* ---------- search panel (below 992 px; blocks/relaunch/bottom-nav.html.twig) ----------
   Full screen on phones, fields at the top: the keyboard takes the lower half, so the place suggestions open
   between the field and the keyboard and nothing jumps (as the search views of Indeed, StepStone, Maps).
   The button sits at the panel's foot; picking a place closes the keyboard and reveals it. */
.rl-qsearch[hidden] { display: none; }
.rl-qsearch__backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1399; }
.rl-qsearch__panel { position: fixed; inset: 0; z-index: 1400; display: flex; flex-direction: column; background: #fff;
    padding-top: env(safe-area-inset-top, 0px); }
.rl-qsearch__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 4px; font-size: 17px; }
.rl-qsearch__close { border: 0; background: none; color: var(--rl-muted); font-size: 30px; line-height: 1;
    cursor: pointer; padding: 0 4px; margin: 0; }
.rl-qsearch__close:hover { color: var(--rl-accent); }
.rl-sform { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; margin: 0; }
.rl-sform__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 14px; padding: 8px 16px 16px; overflow-y: auto; }
.rl-sform__field { display: flex; flex-direction: column; gap: 5px; }
.rl-sform__field > label { margin: 0; font-size: 13px; font-weight: 700; color: #3a4550; }
/* 16px keeps iOS from zooming into the fields */
.rl-sform__field select { width: 100%; height: 48px; padding: 0 12px; border: 1.5px solid #c9d1d8; border-radius: 10px;
    background: #fff; font-size: 16px; color: #1f2933; }
.rl-sform__where { display: flex; align-items: center; gap: 8px; height: 48px; padding-left: 12px; border: 1.5px solid #c9d1d8;
    border-radius: 10px; background: #fff; }
.rl-sform__field select:focus, .rl-sform__where:focus-within { border-color: var(--rl-accent); outline: 2px solid rgba(20, 79, 122, .18); outline-offset: 0; }
.rl-sform__where > i.fa-map-marker { color: #5f6b76; }
.rl-sform__where input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font-size: 16px; color: #1f2933; }
.rl-sform__near { flex: 0 0 auto; height: 100%; padding: 0 12px; border: 0; border-left: 1.5px solid #c9d1d8; border-radius: 0 10px 10px 0;
    background: #fff; color: var(--rl-accent); font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.rl-sform__near:hover, .rl-sform__near:focus-visible { background: var(--rl-accent); color: #fff; }
.rl-sform__near.is-loading { opacity: .6; }
.rl-sform .rl-sform__menu { position: static; max-height: 240px; box-shadow: none; }
.rl-sform__foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rl-line); }
.rl-sform__submit { width: 100%; height: 50px; border: 0; border-radius: 10px; background: var(--rl-cta); color: #fff;
    font-size: 17px; font-weight: 700; cursor: pointer; }
.rl-sform__submit:hover, .rl-sform__submit:focus-visible { background: var(--rl-cta-dark); }
@media (min-width: 992px) { .rl-qsearch { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) {
    .rl-head .rl-loc { display: none; }
    .rl-head .rl-ico--search { display: inline-flex !important; }
    /* tablets: a card at the top, the keyboard below it */
    .rl-qsearch__panel { bottom: auto; left: 50%; right: auto; width: 560px; max-height: 60vh; margin-left: -280px;
        border-radius: 0 0 16px 16px; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
}

/* ---------- mobile bottom nav ---------- */
.rl-bnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300;
    background: #fff; border-top: 1px solid var(--rl-line);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 8px rgba(0,0,0,.06);
}
.rl-bnav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    text-decoration: none; color: var(--rl-muted); font-size: 11px; position: relative;
}
.rl-bnav a i { font-size: 20px; line-height: 1.2; }
.rl-bnav a:hover, .rl-bnav a:focus, .rl-bnav a.active { color: var(--rl-accent); text-decoration: none; }
.rl-bnav-badge {
    position: absolute; top: -3px; right: 26%;
    background: var(--rl-cta); color: #fff; font-size: 10px; font-weight: bold;
    border-radius: 999px; padding: 0 5px;
}
/* room below the content so the fixed bar does not cover the footer */
body.relaunch { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) {
    .rl-bnav { display: none; }
    body.relaunch { padding-bottom: 0; }
}

/* ---------- footer (blocks/footer/footer.html.twig) ----------
   Below 992 px Bootstrap stacks the footer navbar into one link per row. Instead: phones get the links in
   two columns, tablets one wrapped row; the copyright line stays first. */
@media (max-width: 991px) {
    .relaunch #footer .navbar { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 18px; }
    .relaunch #footer .navbar::before, .relaunch #footer .navbar::after { content: normal; display: none; }
    .relaunch #footer .navbar-header, .relaunch #footer .navbar-brand { float: none; height: auto; margin: 0; padding: 0; }
    .relaunch #footer .navbar-brand { font-size: 13px; opacity: .85; }
    .relaunch #footer .navbar-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; float: none; margin: 0; }
    .relaunch #footer .navbar-nav::before, .relaunch #footer .navbar-nav::after { content: normal; display: none; }
    .relaunch #footer .navbar-nav > li { float: none; }
    /* 44 px touch targets on phones */
    .relaunch #footer .navbar-nav > li > a { display: flex; align-items: center; min-height: 44px; padding: 0; line-height: 1.3; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .relaunch #footer .navbar-nav { display: flex; flex-wrap: wrap; gap: 0 28px; }
    .relaunch #footer .navbar-nav > li > a { min-height: 40px; }
}

/* ---------- detail map section (blocks/relaunch/map-facade.html.twig, js/relaunch/detail-map.js) ----------
   MoLo's sedcard map: a preview tile; a click turns the same section into a full-screen map. */
.rl-sedmap-wrap { position: relative; margin-top: 12px; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--rl-line); cursor: zoom-in; background: #eef0f2; }
.rl-sedmap-wrap:focus-visible { outline: 3px solid var(--rl-accent); outline-offset: 2px; }
.rl-sedmap-wrap--still { cursor: default; }
/* DJM's static map is 360x180: shown at its own ratio, uncropped, so its attribution stays visible */
.rl-sedmap-facade { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; }
.rl-sedmap-credit { position: absolute; right: 0; bottom: 0; z-index: 500; padding: 1px 5px; background: rgba(255, 255, 255, .8); color: #333; font-size: 10px; line-height: 1.4; }
.rl-sedmap-credit a { color: #333; }
.rl-sedmap-wrap.is-full .rl-sedmap-credit { display: none; }
.rl-sedmap { width: 100%; aspect-ratio: 2 / 1; background: #eef0f2; }
.rl-sedmap-hint { position: absolute; left: 8px; top: 8px; z-index: 500; padding: 3px 9px; border-radius: 999px;
    background: rgba(255,255,255,.92); color: #333; font-size: 12px; font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,.15); pointer-events: none; }
.rl-sedmap-close { display: none; }
.rl-sedmap-wrap.is-full { position: fixed; inset: 0; z-index: 1800; margin: 0; border: 0; border-radius: 0; cursor: default; }
.rl-sedmap-wrap.is-full .rl-sedmap { height: 100%; aspect-ratio: auto; }
.rl-sedmap-wrap.is-full .rl-sedmap-facade, .rl-sedmap-wrap.is-full .rl-sedmap-hint { display: none; }
.rl-sedmap-wrap.is-full .rl-sedmap-close { display: flex; align-items: center; justify-content: center;
    position: absolute; top: 12px; right: 12px; z-index: 1810; width: 44px; height: 44px; border: 0; border-radius: 999px;
    background: #fff; color: #333; font-size: 28px; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.25); cursor: pointer; }
.rl-sedmap-close:hover, .rl-sedmap-close:focus-visible { background: #f2f2f2; }
/* exact address: a classic map pin in red, white dot, soft shadow */
.rl-sedmap-pin { background: none; border: 0; }
.rl-sedmap-pin svg { display: block; overflow: visible; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.rl-sedmap-pin path { fill: #d93025; stroke: #a51d14; stroke-width: 1.5; }
.rl-sedmap-pin circle { fill: #fff; }
.rl-sedmap-route { display: flex; width: fit-content; margin: 8px 0 4px auto; align-items: center; gap: 6px; font-weight: 700; color: var(--rl-accent); }
body.rl-sedmap-open { overflow: hidden; }