/* ============================================================
   Relaunch home (home-relaunch.html.twig). Mobile first.
   Colours from relaunch-chrome.css (--rl-*), fallbacks = mfajobs.
   ============================================================ */
.rh { --rh-accent: var(--rl-accent, #144f7a); --rh-cta: var(--rl-cta, #007186); --rh-cta-dark: var(--rl-cta-dark, #005a6b);
    --rh-line: #e1e5e9; --rh-muted: #5f6b76; color: #2b2f33; padding-bottom: 24px; }
.rh a { text-decoration: none; }
.rh h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--rh-cta); }
.rh-h3 { margin: 18px 0 10px; font-size: 15px; font-weight: 700; color: #1f2933; }

/* ---------- hero ---------- */
.rh-hero { margin: 6px 0 8px; }
/* phones 22 px: smaller only shortens the lines a little (the long words decide where they break) and would come
   down to the 20 px of the section headings */
.rh-h1 { margin: 0 0 12px; font-size: 22px; line-height: 1.2; font-weight: 700; color: var(--rh-accent); }
/* the old layout.css makes every h1 sticky (>= 768 px); not on the relaunch start page */
.rh-h1 { position: static; padding: 0; background: none; z-index: auto; }
/* region hubs: a small Germany map, the state highlighted (two images in one frame), at the right end of the breadcrumb
   below 992 px (state/state-relaunch.html.twig); from 992 px the state's photo shows the map. The breadcrumb keeps room
   for it and wraps before it */
.rl-crumbs { position: relative; }
.rl-mapbadge { width: 36px; height: 48px; }
.rl-mapbadge img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.rl-crumbs__badge { position: absolute; top: 2px; right: 15px; }
.rl-crumbs .breadcrumb { padding-right: 46px; min-height: 52px; }
/* the bootstrap container is 750 px wide here: align with its right edge */
@media (min-width: 768px) {
    .rl-crumbs__badge { right: calc((100% - 750px) / 2 + 15px); }
}
@media (min-width: 992px) {
    .rl-crumbs__badge { display: none; }
    .rl-crumbs .breadcrumb { padding-right: 0; min-height: 0; }
}
@media (max-width: 767px) {
    /* no search band on phones (start page and hubs): the bottom nav's "Suche" opens the same search; so the
       headline ends the hero */
    .rh-hero .rh-band { display: none; }
    .rh-hero .rh-h1 { margin-bottom: 0; }
    .rh-hero + .rh-section { margin-top: 18px; }
}

.rh-search { display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--rh-line);
    border-radius: 14px; padding: 14px; box-shadow: 0 2px 10px rgba(16, 42, 67, .06); }
.rh-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rh-field label { margin: 0; font-size: 13px; font-weight: 700; color: #3a4550; }
.rh-field select,
.rh-where { height: 48px; border: 1.5px solid #c9d1d8; border-radius: 10px; background: #fff; font-size: 16px; color: #1f2933; }
.rh-field select { width: 100%; padding: 0 12px; }
.rh-field select:focus, .rh-where:focus-within { border-color: var(--rh-accent); outline: 2px solid rgba(20, 79, 122, .18); outline-offset: 0; }
.rh-where { position: relative; display: flex; align-items: center; gap: 8px; padding-left: 12px; }
.rh-where > i.fa-map-marker { color: var(--rh-muted); }
/* 16px keeps iOS from zooming into the field */
.rh-where input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font-size: 16px; color: #1f2933; }
.rh-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(--rh-accent); font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.rh-near:hover, .rh-near:focus-visible { background: var(--rh-accent); color: #fff; }
.rh-near.is-loading { opacity: .6; }
.rh-submit { height: 50px; border: 0; border-radius: 10px; background: var(--rh-cta); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; }
.rh-submit:hover, .rh-submit:focus-visible { background: var(--rh-cta-dark); }


/* ---------- sections ---------- */
.rh-section { margin-top: 28px; }
.rh-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rh-more { display: none; font-weight: 700; color: var(--rh-accent); white-space: nowrap; }
.rh-button { display: flex; align-items: center; justify-content: center; height: 46px; margin-top: 12px; padding: 0 20px;
    border: 1.5px solid var(--rh-accent); border-radius: 10px; background: #fff; color: var(--rh-accent); font-weight: 700; }
.rh-button:hover, .rh-button:focus-visible { background: var(--rh-accent); color: #fff; }
.rh-button--solid { border-color: var(--rh-cta); background: var(--rh-cta); color: #fff; }
.rh-button--solid:hover, .rh-button--solid:focus-visible { border-color: var(--rh-cta-dark); background: var(--rh-cta-dark); }

/* newest jobs: a list */
.rh-jobs { margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid var(--rh-line); border-radius: 12px; overflow: hidden; }
.rh-jobs li + li { border-top: 1px solid var(--rh-line); }
.rh-job { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; color: inherit; }
.rh-job:hover, .rh-job:focus-visible { background: #f3f7fa; }
.rh-job__title { font-size: 16px; font-weight: 700; color: var(--rh-accent); line-height: 1.3; }
.rh-job__employer { font-size: 14px; }
.rh-job__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--rh-muted); }

/* regions */
.rh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rh-chips a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; background: #fff;
    border: 1px solid #c9d1d8; border-radius: 999px; color: #1f2933; font-weight: 600; }
.rh-chips a:hover, .rh-chips a:focus-visible { border-color: var(--rh-accent); color: var(--rh-accent); }
.rh-chips__n { font-size: 13px; font-weight: 400; color: var(--rh-muted); }
.rh-states { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; margin: 0; padding: 0; list-style: none; }
.rh-states a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; line-height: 1.3; color: var(--rh-accent); }
.rh-states a:hover, .rh-states a:focus-visible, .rh-states a.hover { text-decoration: underline; }
/* state map beside the list from 768 px (hover handling in base JS) */
.rh-statemap__map { display: none; }
@media (min-width: 768px) {
    .rh-statemap__in { display: flex; align-items: center; gap: 32px; }
    .rh-statemap__map { display: block; flex: 0 0 260px; }
    .rh-statemap .rh-states { flex: 1 1 auto; grid-template-columns: repeat(2, 1fr); }
    .rh-statemap .rh-states a.hover { font-weight: 700; }
}
/* cities: a plain link list in columns (production lists up to 48) */
.rh-cities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin: 0; padding: 0; list-style: none; }
.rh-cities a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; line-height: 1.3; color: var(--rh-accent); }
.rh-cities a:hover, .rh-cities a:focus-visible { text-decoration: underline; }
/* sister portals */
/* side by side at every width; on phones each takes half */
.rh-portals { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
.rh-portals li { flex: 0 1 220px; min-width: 0; }
.rh-portals a { display: flex; align-items: center; justify-content: center; height: 60px; padding: 8px 12px; background: #fff;
    border: 1px solid var(--rh-line); border-radius: 10px; }
.rh-portals a:hover, .rh-portals a:focus-visible { border-color: var(--rh-accent); }
.rh-portals img { display: block; width: auto; height: auto; max-width: 100%; max-height: 40px; }
/* right-aligned: in reach of the right thumb */
.rh-showmore { display: flex; align-items: center; gap: 6px; min-height: 44px; margin: 4px 0 0 auto; padding: 0 0 0 16px; border: 0;
    background: none; color: var(--rh-accent); font-size: 16px; font-weight: 700; cursor: pointer; }
.rh-showmore::after { content: "\f0d7"; /* caret-down */ font-family: FontAwesome; }
.rh-showmore:hover, .rh-showmore:focus-visible { text-decoration: underline; }
.rh-showmore[hidden] { display: none; }
@media (max-width: 767px) {
    .rh-cities.is-clamped > li:nth-child(n+17) { display: none; }
}
@media (min-width: 768px) {
    .rh-cities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rh-showmore { display: none; }
}
/* desktop: states (map + one list column) | sister portals and cities, as on the old start page */
@media (min-width: 992px) {
    .rh-regions { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 40px; align-items: start; }
    .rh-statemap__in { gap: 20px; align-items: flex-start; }
    .rh-statemap__map { flex-basis: 170px; margin-top: 6px; }
    .rh-statemap .rh-states { grid-template-columns: 1fr; }
    .rh-statemap .rh-states a, .rh-cities a { min-height: 0; padding: 4px 0; font-size: 14px; white-space: nowrap; }
}
@media (min-width: 1200px) {
    .rh-statemap__map { flex-basis: 230px; }
    .rh-statemap .rh-states a, .rh-cities a { font-size: 15px; }
}

/* employer portraits */
.rh-employers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rh-employers a { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; padding: 14px 10px;
    background: #fff; border: 1px solid var(--rh-line); border-radius: 12px; text-align: center; color: inherit; }
.rh-employers a:hover, .rh-employers a:focus-visible { border-color: var(--rh-accent); }
.rh-employers img { width: 100%; max-width: 140px; height: 64px; object-fit: contain; }
.rh-employers__name { font-size: 14px; font-weight: 700; line-height: 1.3; color: #1f2933; }
.rh-employers__city { font-size: 13px; color: var(--rh-muted); }

/* the employer band */
.rh-employer-band { display: flex; flex-direction: column; gap: 6px; margin-top: 32px; padding: 20px; border-radius: 14px;
    background: var(--rh-accent); color: #fff; }
.rh .rh-employer-band__title { padding: 0; border: 0; color: #fff; }
.rh-employer-band p { margin: 4px 0 0; color: #fff; }
/* on the dark band the button turns white */
.rh-employer-band .rh-button--solid { border-color: #fff; background: #fff; color: var(--rh-accent); }
.rh-employer-band .rh-button--solid:hover, .rh-employer-band .rh-button--solid:focus-visible { border-color: #fff; background: #e8f0f6; color: var(--rh-accent); }
.rh-employer-band .rh-button { margin-top: 10px; }

.rh-section--quiet { padding-top: 16px; border-top: 1px solid var(--rh-line); font-size: 14px; }
.rh-section--quiet .rh-h3 { margin-top: 0; }
.rh-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; padding: 0; list-style: none; }
.rh-section--quiet a { color: var(--rh-accent); }

/* ---------- tablet / desktop ---------- */
@media (min-width: 768px) {
    .rh-hero { margin-top: 24px; }
    .rh-h1 { font-size: 30px; }
    .rh-more { display: inline-flex; align-items: center; gap: 6px; }
    .rh-jobs + .rh-button { display: none; }
    .rh-states { grid-template-columns: repeat(4, 1fr); }
    .rh-employers { grid-template-columns: repeat(5, 1fr); }
    .rh-employer-band { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; }
    .rh-employer-band .rh-button { margin-top: 0; flex: 0 0 auto; }
}
/* tablet: one search row across the full width, no photo (it would sit behind the form) */
@media (min-width: 768px) {
    .rh-search { flex-direction: row; align-items: flex-end; }
    .rh-field--what { flex: 0 0 26%; }
    .rh-field--where { flex: 1 1 auto; }
    .rh-submit { flex: 0 0 auto; padding: 0 26px; height: 48px; }
    /* the suggestions may be wider than the field ("91074 Herzogenaurach, Beutelsdorf") */
    .rh-menu { right: auto; min-width: 100%; width: max-content; max-width: 460px; }
}
/* desktop: the teaser photo (a 1140 x 300 banner, person on the right third) behind the search band;
   the search card on its light left side, profession | place, then the button */
@media (min-width: 992px) {
    .rh-band[style] { display: flex; align-items: center; aspect-ratio: 1140 / 300; padding: 20px 24px; border-radius: 16px;
        background: #eef1f4 var(--rh-hero-img) right center / cover no-repeat; }
    .rh-band[style] .rh-search { display: grid; grid-template-columns: 2fr 3fr; width: 58%; box-shadow: 0 6px 24px rgba(16, 42, 67, .14); }
    .rh-band[style] .rh-submit { grid-column: 1 / -1; width: 100%; }
    /* region hubs: the state photos are 1140 x 200 banners (at most 200 px high), so the card is one row,
       profession | place | button, and a little wider; the person and the map stay on the right */
    .rl-hubhero .rh-band[style] { aspect-ratio: 1140 / 200; max-height: 200px; padding: 12px 20px; }
    .rl-hubhero .rh-band[style] .rh-search { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; width: 66%; padding: 12px 14px; }
    .rl-hubhero .rh-band[style] .rh-submit { grid-column: auto; width: auto; }
    /* one row leaves little room for the place: "near me" as an icon only (the text stays for screen readers) */
    .rl-hubhero .rh-band[style] .rh-near span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* small desktops: "near me" as an icon only, so the place field keeps room for its text */
@media (min-width: 992px) and (max-width: 1199px) {
    .rh-band[style] .rh-near span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    /* hub card in one row: the place gets the larger share, the button less padding */
    .rl-hubhero .rh-band[style] .rh-search { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) auto; gap: 10px; }
    .rl-hubhero .rh-band[style] .rh-submit { padding: 0 16px; }
}

/* ---------- employer portraits, compact (region hubs: blocks/relaunch/prime-portraits-compact.html.twig) ----------
   One link per card to the profile; two lines of the description. Phones stacked, from 992 px two per row. */
.rpc-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.rpc { display: flex; align-items: center; gap: 14px; height: 100%; padding: 14px 12px 14px 14px; background: #fff;
    border: 1px solid var(--rh-line); border-radius: 12px; color: inherit; }
.rpc:hover, .rpc:focus-visible { border-color: var(--rh-accent); text-decoration: none; color: inherit; }
/* name, place and text on the left, the logo right-aligned before the arrow, as on the start page's portraits. Its slot has
   one width, so the texts end alike; its size from the HTML (by area, LogoService), no frame on the white card */
.rpc__slot { order: 2; flex: 0 0 96px; display: flex; align-items: center; justify-content: flex-end; }
.rpc__logo { display: block; max-width: 100%; height: auto; object-fit: contain; }
.rpc__logo--none { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 8px; background: #f5f7f9; color: #9aa5b1; font-size: 22px; }
.rpc__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.rpc__name { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--rh-accent); }
.rpc:hover .rpc__name { text-decoration: underline; }
.rpc__city { font-size: 14px; color: var(--rh-muted); }
.rpc__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 2px;
    font-size: 14px; line-height: 1.4; color: #3a4550; }
.rpc__go { order: 3; flex: 0 0 auto; color: var(--rh-accent); font-size: 14px; }
.rpc-list.is-clamped > li:nth-child(n+5) { display: none; }
@media (min-width: 768px) {
    .rp__logo { flex-basis: 170px; }
    .rpc__slot { flex-basis: 150px; }
}
@media (min-width: 992px) {
    .rpc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
}

/* ---------- top jobs rail (home-relaunch.html.twig, js/relaunch/rail.js) ----------
   A hand-scrolled row, never auto-rotating. Phones: ~86 % per card so the next one peeks in;
   from 768 px two, from 1200 px three cards per view. */
.rl-rail__ctl { display: inline-flex; align-items: center; gap: 8px; }
.rl-rail__ctl[hidden] { display: none; }
.rl-rail__count { font-size: 13px; color: var(--rh-muted); white-space: nowrap; }
.rl-rail__btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0;
    border: 1.5px solid #c9d1d8; border-radius: 999px; background: #fff; color: var(--rh-accent); font-size: 20px; cursor: pointer; }
.rl-rail__btn:hover:not(:disabled), .rl-rail__btn:focus-visible { border-color: var(--rh-accent); background: #e8f0f6; }
.rl-rail__btn:disabled { opacity: .35; cursor: default; }
.rl-rail__track { display: flex; gap: 12px; margin: 0; padding: 2px 2px 6px; list-style: none; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.rl-rail__track::-webkit-scrollbar { display: none; }
/* min-width 0: a long employer name (one line, cut) must not widen the card past its share */
.rl-rail__item { flex: 0 0 86%; min-width: 0; scroll-snap-align: start; display: flex; }
.rr-card { display: flex; flex-direction: column; width: 100%; min-width: 0; padding: 12px 14px 14px; background: #fff; color: inherit;
    border: 1px solid var(--rh-line); border-top: 4px solid var(--rl-top, #c9930e); border-radius: 0 0 12px 12px; }
.rr-card:hover, .rr-card:focus-visible { border-color: var(--rh-accent); border-top-color: var(--rl-top, #c9930e); text-decoration: none; color: inherit; }
.rr-card__badge { align-self: flex-start; margin-bottom: 4px; padding: 1px 8px; border-radius: 999px; background: var(--rl-top-tint, #fbf0d6);
    color: var(--rl-top-ink, #6e5000); font-size: 12px; font-weight: 700; }
/* long titles: two lines across the full card, then cut */
.rr-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em;
    font-size: 16px; line-height: 1.3; font-weight: 700; color: var(--rh-accent); }
.rr-card__who { display: flex; align-items: center; gap: 10px; min-height: 60px; margin-top: 4px; }
.rr-card__id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rr-card__employer { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.3; }
.rr-card__place { margin-top: 2px; font-size: 14px; font-weight: 700; }
/* the short benefit lines beside the picture, as on the old start page */
.rr-card__body { display: block; margin-top: 8px; }
.rr-card__benefits { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; font-size: 14px; line-height: 1.35; }
.rr-card__benefit { display: flex; gap: 6px; }
.rr-card__benefit i { flex: 0 0 auto; margin-top: 2px; color: var(--rh-cta); }
.rr-card__pic { flex: 0 0 auto; max-width: 38%; height: auto; object-fit: contain; }
@media (min-width: 768px) {
    .rl-rail__item { flex-basis: calc((100% - 12px) / 2); }
}
@media (min-width: 992px) {
    .rl-rail__track { gap: 14px; }
    .rl-rail__item { flex-basis: calc((100% - 14px) / 2); }
}
@media (min-width: 1200px) {
    .rl-rail__item { flex-basis: calc((100% - 28px) / 3); }
}
@media (prefers-reduced-motion: reduce) {
    .rl-rail__track { scroll-behavior: auto; }
}
.rl-rail__btn i { font-size: 13px; }

/* ---------- employer portraits (blocks/relaunch/prime-portraits.html.twig) ----------
   One card per employer. Phones: logo and name, description, video, benefits, actions.
   From 768 px: name left, actions right; description (and video) left, highlighted benefits right. */
.rp-list { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.rp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; background: #fff; border: 1px solid var(--rh-line);
    border-radius: 14px; }
.rp:hover, .rp:focus-within { border-color: var(--rh-accent); }
.rp__head { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* sized by area in the HTML (LogoService) in a slot of one width, so the names line up; no frame on the white card */
/* name and place on the left, the logo at the right end */
.rp__logo { order: 2; flex: 0 0 30%; margin-left: auto; display: flex; align-items: center; justify-content: flex-end; color: #9aa5b1; font-size: 24px; }
.rp__logo img { display: block; max-width: 100%; height: auto; object-fit: contain; }
.rp__id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rh .rp__name { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 700; }
.rp__name a { color: var(--rh-accent); }
.rp__name a:hover, .rp__name a:focus-visible { text-decoration: underline; }
.rp__city { font-size: 14px; color: var(--rh-muted); }
.rp__main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rp__text { font-size: 15px; line-height: 1.55; color: #2b2f33; }
.rp__text p { margin: 0 0 8px; }
.rp__text > :last-child { margin-bottom: 0; }
/* benefits: the same check marks as on the job cards */
.rp__highlight { align-self: start; padding: 12px 14px; background: #eef6f7; border-radius: 10px; font-size: 15px; }
.rp__highlight p { margin: 0 0 6px; }
.rp ul { display: flex; flex-direction: column; gap: 5px; margin: 0 0 8px; padding: 0; list-style: none; }
.rp li { position: relative; padding-left: 22px; line-height: 1.4; }
.rp li::before { content: "\f00c"; /* check */ position: absolute; left: 0; top: 1px; font-family: FontAwesome; font-size: 13px; color: var(--rh-cta); }
.rp__highlight > :last-child { margin-bottom: 0; }
.rp__video { position: relative; display: block; width: 100%; max-width: 400px; aspect-ratio: 16 / 9; padding: 0; overflow: hidden;
    border: 0; border-radius: 10px; background: #1f2933; cursor: pointer; }
.rp__video img { width: 100%; height: 100%; object-fit: cover; }
.rp__play { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
    border-radius: 999px; background: rgba(0, 0, 0, .72); color: #fff; font-size: 14px; font-weight: 700; }
.rp__tri { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; }
.rp__video:hover .rp__play, .rp__video:focus-visible .rp__play { background: var(--rh-cta); }
.rp__actions { display: flex; gap: 10px; }
.rh .rp__actions .rh-button { flex: 1 1 0; height: 42px; margin-top: 0; padding: 0 16px; border-style: solid; border-width: 1.5px; }
@media (min-width: 768px) {
    .rp { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "head actions" "main aside";
        column-gap: 28px; padding: 20px 24px; }
    .rp:not(.rp--aside) { grid-template-areas: "head actions" "main main"; }
    .rp__head { grid-area: head; }
    .rp__actions { grid-area: actions; justify-self: end; align-self: center; }
    .rp__main { grid-area: main; }
    .rp:not(.rp--aside) .rp__text { max-width: 72ch; }
    .rp__highlight { grid-area: aside; }
    .rh .rp__name { font-size: 20px; }
    .rh .rp__actions .rh-button { flex: 0 0 auto; }
}

/* ---------- explanations (SEO) ---------- */
.rh-info-card { display: flex; gap: 16px; align-items: center; max-width: 560px; padding: 12px; background: #fff; color: inherit;
    border: 1px solid var(--rh-line); border-radius: 12px; }
.rh-info-card:hover, .rh-info-card:focus-visible { border-color: var(--rh-accent); text-decoration: none; color: inherit; }
.rh-info-card img { flex: 0 0 120px; width: 120px; height: 90px; object-fit: cover; border-radius: 8px; }
.rh-info-card__body { position: relative; display: flex; flex-direction: column; gap: 4px; padding-right: 24px; }
.rh-info-card__title { font-weight: 700; color: var(--rh-accent); }
.rh-info-card__text { font-size: 14px; color: #3a4550; }
.rh-info-card__go { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--rh-accent); }

/* ---------- Google Partner badge and portal logos (blocks/footer/footer-med-logos.html.twig) ---------- */
.rh-logos { padding-top: 20px; border-top: 1px solid var(--rh-line); }
.rh-logos .portal-logos { display: flex; flex-wrap: wrap; align-items: center; margin: 0; }
.rh-logos .portal-logos a { display: inline-block; margin: 8px 12px; }

/* ---------- a portal with many categories (arztjobs): all of them as links, and several explanation cards ---------- */
.rl-specialties__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; margin: 0; padding: 0; list-style: none; }
.rl-specialties__list a { display: flex; align-items: center; min-height: 40px; color: var(--rh-accent); line-height: 1.25; }
.rh-info-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 768px) {
    .rl-specialties__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rl-specialties__list a { min-height: 32px; }
    .rh-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) { .rl-specialties__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }