.cpcareer-container {
    max-width: 1560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
}

/* No built-in top clearance here on purpose: this class is now applied via
   the editorial container_class field (Sections container), so it can end
   up anywhere on a page, not just directly under the (position:absolute)
   nav. Clearing the nav is a per-instance concern for whichever container
   happens to be first on its page — set via that instance's own
   space_before_class (e.g. sb-xl), same field every other content element
   already uses for this, not hardcoded here for every use of the class. */

/* .headline-2's site-wide default color (#f2f3ed, near-white) is meant for
   dark-background contexts (e.g. a Hero section) — on cp_career's plain
   light background it's practically invisible. */
.cpcareer-container .headline-2 {
    color: #202f5a !important;
}

/* .cpcareer-list__items and .cpcareer-detail__meta are plain <ul>s — the
   browser's UA default padding-left (40px) indents their "//" marker past
   every other block's left edge. Shrink the gutter to just fit the marker
   instead (list-style-position: inside was tried and reverted: it breaks
   .cpcareer-list__item, whose <li> wraps a block-level <h3> — the marker
   ends up alone on its own line before the title wraps to the next one). */
.cpcareer-list__items {
    padding-left: 1.2em;
}

.cpcareer-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 32px;
    padding-left: 1.2em;
    margin-top: 8px;
}

/* "Eintrittsbeginn: sofort" was a bare, unstyled <p> — easy to miss between
   the qualifications list and the form. Badge it like a highlight instead. */
.cpcareer-detail__immediate-start {
    display: inline-flex;
    background-color: #eb545b;
    color: #fff;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 6px;
}

.cpcareer-detail__responsibilities,
.cpcareer-detail__qualifications {
    margin-top: 0.5rem;
}

/* Visual break between the job-posting content (body text, Aufgaben/Profil,
   Eintrittsbeginn) and the embedded application form — previously the form
   just started right where the job content stopped, no boundary between
   them. */
.cpcareer-detail__application {
    margin-top: 48px;
    padding-top: 48px;
    border-top: 1px solid rgba(32, 47, 90, 0.15);
}

/* The form's own lead-in line ("Sie bewerben sich auf eine ausgeschriebene
   Stelle.", StaticText.html) — deliberately NOT headline-2: it sits right
   under the form's "Stellenbewerbung" headline-2, so matching that weight
   stacked two same-size headlines back to back. */
.cpcareer-detail__application-context {
    font-weight: 600;
}

.cpcareer-pagination {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 40px 0;
    padding: 0;
}

.cpcareer-pagination a,
.cpcareer-pagination__current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    border-radius: 6px;
    color: #202f5a;
    text-decoration: none;
    font-weight: 600;
}

.cpcareer-pagination a:hover,
.cpcareer-pagination a:focus-visible {
    background-color: rgba(235, 84, 91, 0.12);
    color: #eb545b;
}

.cpcareer-pagination a:focus-visible {
    outline: 2px solid #eb545b;
    outline-offset: 2px;
}

.cpcareer-pagination__current {
    background-color: #eb545b;
    color: #fff;
}

.cpcareer-pagination__prev,
.cpcareer-pagination__next {
    font-size: 20px;
}

.cpcareer-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    color: #202f5a;
}

/* Submit button — replaces EXT:form's unstyled Bootstrap .btn-primary look */
.cpcareer-container .btn.btn-primary {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #eb545b;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 14px 32px;
    font-family: Breuer-Medium, sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.cpcareer-container .btn.btn-primary:hover {
    background-color: #202f5a;
    color: #fff;
}

.cpcareer-container .btn.btn-primary:focus-visible {
    outline: 2px solid #202f5a;
    outline-offset: 2px;
}

.cpcareer-container .btn.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Form.html's own markup has no bottom clearance after the submit button —
   nothing between it and whatever section follows on the page. */
.cpcareer-container .form-navigation {
    margin-bottom: 40px;
}

/* File upload — native inputs render inconsistently across browsers;
   ::file-selector-button (standard) + the -webkit- alias covers current
   Chrome/Firefox/Safari without hiding/replacing the input itself. */
.cpcareer-container input[type="file"] {
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    color: #202f5a;
    padding: 0 0 8px;
}

.cpcareer-container input[type="file"]::file-selector-button,
.cpcareer-container input[type="file"]::-webkit-file-upload-button {
    appearance: none;
    -webkit-appearance: none;
    background-color: #202f5a;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    margin-right: 16px;
    font-family: Breuer-Medium, sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.cpcareer-container input[type="file"]::file-selector-button:hover,
.cpcareer-container input[type="file"]::-webkit-file-upload-button:hover {
    background-color: #eb545b;
}

.cpcareer-container input[type="file"]:focus-visible {
    outline: 2px solid #eb545b;
    outline-offset: 2px;
}

/* Field label/hint text (Bootstrap's bare `label{}` rule and `.form-text`)
   render at the same color/size/weight — a field's own hint text is visually
   indistinguishable from the next field's label, so the form reads as one
   flat list instead of grouped fields. Bold the label, mute+shrink the hint,
   widen the gap between fields. */
.cpcareer-container .form-group {
    margin-bottom: 28px;
}

.cpcareer-container textarea.form-control {
    height: 150px;
    min-height: 150px;
}

.cpcareer-container .form-group > label {
    font-weight: 600;
}

.cpcareer-container .form-text:not(.error) {
    color: #6c757d;
    font-size: 14px;
    line-height: 1.4;
}

/* Validation errors reuse the same .form-text class (Field/Field.html:
   class="error form-text") — core ships no color rule for it at all
   (Bootstrap's own error class is .invalid-feedback, unused here), so
   without this it would inherit the muted hint color above. */
.cpcareer-container .form-text.error {
    color: #eb545b;
}

/* Checkbox — native checkboxes vary in size/rendering per browser; custom
   drawn box keeps real keyboard/AT semantics (still a real input, just
   visually replaced). */
.cpcareer-container .form-check-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.cpcareer-container .form-check-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    border: 2px solid #202f5a;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    position: relative;
}

.cpcareer-container .form-check-label input[type="checkbox"]:checked {
    background-color: #eb545b;
    border-color: #eb545b;
}

.cpcareer-container .form-check-label input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.cpcareer-container .form-check-label input[type="checkbox"]:focus-visible {
    outline: 2px solid #eb545b;
    outline-offset: 2px;
}

.cpcareer-container .form-check-label span {
    font-size: 1rem;
    line-height: 1.5;
}

/* The privacy-policy link inside the checkbox label was picking up a
   larger font-size from the site's generic anchor styles; force it back
   to match the surrounding label text. */
.cpcareer-container .form-check-label span a {
    font-size: inherit;
    color: #eb545b;
}