
/* =====================================================================
   BRIT | Karriere & Bewerbung
   ===================================================================== */

.career-page,
.application-page { background: linear-gradient(180deg,#f8f9f4 0,#f3f6ee 100%); }

.career-hero,
.application-hero {
  position: relative;
  overflow: hidden;
  padding: 84px 0 92px;
  background:
    radial-gradient(circle at top right, rgba(132,180,19,.16), transparent 28%),
    linear-gradient(160deg, #f9fbf6 0%, #eef4e7 58%, #f7f9f4 100%);
}
.career-hero::before,
.application-hero::before {
  content:''; position:absolute; inset:auto auto -60px -120px; width:420px; height:180px;
  background:linear-gradient(90deg,rgba(132,180,19,.22),rgba(132,180,19,0)); border-radius:999px; filter:blur(12px);
}
.career-hero-grid,
.application-hero-grid { display:grid; grid-template-columns: minmax(0,1.08fr) minmax(360px,.92fr); gap:48px; align-items:center; }
.career-kicker,
.application-kicker { display:flex; align-items:center; gap:10px; margin-bottom:18px; color:#739d12; font-size:.84rem; letter-spacing:.16em; text-transform:uppercase; font-weight:800; }
.career-kicker::before,
.application-kicker::before { content:''; width:22px; height:2px; background:currentColor; }
.career-intro h1,
.application-intro h1 { margin:0 0 24px; max-width:800px; font-size:clamp(3.1rem,5vw,5.5rem); }
.career-intro .lead,
.application-intro .lead { max-width:760px; margin-bottom:32px; }
.career-actions,
.application-actions { display:flex; flex-wrap:wrap; gap:14px; }
.career-hero-panel,
.application-hero-panel {
  position:relative; padding:34px; border:1px solid rgba(132,180,19,.18); border-radius:28px;
  background:rgba(255,255,255,.92); box-shadow:0 24px 55px rgba(9,31,23,.08);
}
.career-hero-panel::after,
.application-hero-panel::after {
  content:''; position:absolute; inset:18px; border:1px dashed rgba(132,180,19,.2); border-radius:20px; pointer-events:none;
}
.career-hero-panel h2,
.application-hero-panel h2 { position:relative; margin:0 0 12px; font-size:clamp(1.7rem,2vw,2.3rem); }
.career-hero-panel p,
.application-hero-panel p,
.application-summary p { position:relative; margin:0; color:#44554f; }
.hero-mini-stats { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:28px; }
.hero-mini-stats article {
  padding:18px 18px 16px; border-radius:18px; background:#f6f9f1; border:1px solid #e0e8d7;
}
.hero-mini-stats strong { display:block; font-size:1.75rem; line-height:1; margin-bottom:6px; }
.hero-mini-stats span { color:#52635c; font-size:.95rem; }
.hero-panel-note { position:relative; display:flex; align-items:center; gap:12px; margin-top:22px; padding-top:22px; border-top:1px solid #e1e7db; color:#34443e; }
.hero-panel-note .icon { color:#7ead14; width:24px; height:24px; }

.career-overview-grid { display:grid; grid-template-columns: minmax(0,.95fr) minmax(300px,.75fr); gap:38px; }
.career-highlight-box,
.application-support,
.form-side-card,
.benefit-card,
.job-card,
.process-card,
.contact-person-card {
  background:#fff; border:1px solid #e1e7db; border-radius:24px; box-shadow:0 18px 46px rgba(14,32,29,.06);
}
.career-highlight-box { padding:32px; }
.career-highlight-box h2 { margin:0 0 14px; font-size:clamp(2rem,3vw,3rem); }
.career-highlight-box p { margin-bottom:0; }
.opening-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.opening-stats article { padding:20px; background:#0f251e; color:#fff; border-radius:22px; }
.opening-stats strong { display:block; font-size:2.15rem; line-height:1; margin-bottom:8px; }
.opening-stats span { display:block; color:#dbe8d9; line-height:1.45; }
.opening-stats .accent { background:linear-gradient(135deg,#84b413,#6d940e); color:#fff; }
.opening-stats .accent span { color:#f8ffe7; }

.filter-toolbar { display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 34px; }
.filter-chip {
  appearance:none; border:1px solid #cfdac6; background:#fff; color:#18302b; padding:12px 16px; border-radius:999px; font-weight:700;
  display:inline-flex; align-items:center; gap:10px; transition:all .2s ease;
}
.filter-chip .count { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; padding:0 7px; border-radius:999px; background:#eef4e7; color:#4f6d12; font-size:.84rem; }
.filter-chip:hover, .filter-chip:focus-visible { border-color:#84b413; color:#4a670e; transform:translateY(-1px); }
.filter-chip.is-active { background:#102b21; color:#fff; border-color:#102b21; }
.filter-chip.is-active .count { background:#d7ef89; color:#173125; }

.jobs-headline { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px; }
.jobs-headline h2 { margin:0; font-size:clamp(2rem,3vw,3rem); }
.jobs-meta { color:#52625c; font-weight:600; }
.jobs-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.job-card { display:flex; flex-direction:column; padding:28px; }
.job-card-top { display:flex; justify-content:space-between; gap:20px; margin-bottom:18px; }
.job-card .dept { display:inline-flex; padding:8px 12px; border-radius:999px; background:#eef4e7; color:#557414; font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.job-card .job-total { display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
.job-card .job-total strong { font-size:2rem; line-height:1; color:#10201d; }
.job-card .job-total span { color:#5d6c65; font-size:.92rem; }
.job-card h3 { margin:0 0 12px; font-size:1.55rem; letter-spacing:-.045em; }
.job-card p { margin-bottom:16px; }
.job-focus { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px; padding:0; list-style:none; }
.job-focus li { padding:8px 11px; border-radius:999px; background:#f4f7ef; color:#31433d; font-size:.9rem; }
.availability-list { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.availability-pill {
  display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border-radius:14px; background:#f7f9f3; border:1px solid #e2e8dd; color:#23352f;
}
.availability-pill strong { font-size:1rem; }
.job-actions { margin-top:auto; display:flex; flex-wrap:wrap; gap:12px; }
.job-actions .btn { padding-left:18px; padding-right:18px; }
.empty-jobs {
  padding:32px; background:#fff; border:1px dashed #cfdac6; border-radius:22px; text-align:center;
}
.empty-jobs strong { display:block; margin-bottom:8px; font-size:1.2rem; }

.benefits-section { background:#eef4e6; }
.benefit-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.benefit-card { padding:28px 24px; }
.benefit-card .benefit-icon {
  display:inline-flex; width:58px; height:58px; align-items:center; justify-content:center; border-radius:18px; background:#f5fbec; color:#7cab14; margin-bottom:18px;
}
.benefit-card .benefit-icon .icon { width:28px; height:28px; }
.benefit-card h3 { margin:0 0 10px; font-size:1.22rem; }
.benefit-card p { margin:0; }

.process-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.process-card { padding:28px 24px; position:relative; }
.process-card .step-no { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:999px; background:#102b21; color:#fff; font-weight:800; margin-bottom:18px; }
.process-card h3 { margin:0 0 10px; }
.process-card p { margin:0; }

.contact-slab {
  background:linear-gradient(135deg,#102820 0%,#173327 100%); color:#fff; border-radius:34px; padding:38px; display:grid; grid-template-columns:minmax(0,.9fr) minmax(320px,.8fr); gap:32px; align-items:center;
}
.contact-slab h2 { color:#fff; margin:10px 0 16px; font-size:clamp(2.1rem,3vw,3.2rem); }
.contact-slab p { color:#dbe6d8; }
.contact-person-card { padding:24px; display:grid; grid-template-columns:128px 1fr; gap:22px; align-items:center; }
.contact-person-card img { width:128px; height:156px; object-fit:cover; object-position:center top; border-radius:22px; }
.contact-person-card h3 { margin:0 0 6px; font-size:1.5rem; }
.contact-person-card .role { color:#5f7423; font-weight:700; margin-bottom:14px; }
.contact-person-card .contact-lines { display:grid; gap:12px; }
.contact-person-card .contact-lines a,
.contact-person-card .contact-lines span { display:flex; align-items:flex-start; gap:10px; color:#2b3b35; }
.contact-person-card .contact-lines .icon { width:20px; height:20px; margin-top:2px; color:#84b413; }
.contact-person-card .contact-lines strong { display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:#6a786f; }

.application-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); gap:30px; align-items:start; }
.career-form-panel { padding:32px; background:#fff; border:1px solid #e1e7db; border-radius:28px; box-shadow:0 20px 52px rgba(14,32,29,.07); }
.career-form-panel h2 { margin:0 0 10px; font-size:clamp(2rem,3vw,3rem); }
.career-form-panel p { margin-bottom:24px; }
.career-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.career-field-grid .full { grid-column:1 / -1; }
.career-form-panel label { display:block; margin-bottom:8px; color:#33443d; font-weight:700; }
.career-form-panel input,
.career-form-panel select,
.career-form-panel textarea {
  width:100%; padding:14px 15px; border-radius:16px; border:1px solid #cfd8c6; background:#fbfcf8; color:#10201d;
}
.career-form-panel input:focus,
.career-form-panel select:focus,
.career-form-panel textarea:focus { border-color:#84b413; outline:none; box-shadow:0 0 0 4px rgba(132,180,19,.12); }
.career-form-panel textarea { min-height:140px; resize:vertical; }
.employment-options { display:flex; flex-wrap:wrap; gap:10px; }
.employment-options label {
  margin:0; display:inline-flex; align-items:center; gap:8px; padding:11px 14px; border-radius:14px; border:1px solid #d5ddcd; background:#fff; font-weight:600; cursor:pointer;
}
.employment-options input { width:18px; height:18px; margin:0; }
.employment-options .option-count { color:#668a14; font-weight:800; }
.file-drop {
  display:grid; place-items:center; gap:12px; min-height:170px; padding:24px; text-align:center; border:2px dashed #cfd8c6; border-radius:22px; background:#f9fbf6; color:#54645f;
}
.file-drop.is-dragover { border-color:#84b413; background:#f1f8e5; }
.file-drop .icon { width:34px; height:34px; color:#84b413; }
.file-drop strong { display:block; color:#18302b; }
.file-drop button { appearance:none; border:0; background:none; color:#4e7d0b; font-weight:800; text-decoration:underline; }
.file-list { display:grid; gap:10px; margin-top:14px; }
.file-chip { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:12px 14px; border-radius:14px; background:#f5f8ef; border:1px solid #dee6d6; }
.file-chip button { appearance:none; border:0; background:none; color:#9d3f35; font-weight:800; cursor:pointer; }
.form-meta { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-top:18px; }
.check-stack { display:grid; gap:10px; }
.check-stack label { margin:0; display:flex; align-items:flex-start; gap:10px; font-weight:500; }
.check-stack input { width:18px; height:18px; margin-top:2px; }
.form-notice { min-height:24px; color:#7c3c00; font-weight:600; }
.form-notice.success { color:#2f7a26; }
.form-submit-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:24px; }
.form-submit-row .form-hint { margin:0; max-width:420px; font-size:.93rem; }
.form-side-stack { display:grid; gap:20px; }
.form-side-card { padding:26px; }
.form-side-card h3 { margin:0 0 12px; font-size:1.35rem; }
.form-side-card p { margin-bottom:0; }
.application-summary-title { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.application-summary .availability-list { margin-bottom:0; }
.application-summary .availability-pill { background:#f4f7ef; }
.form-small-list { display:grid; gap:10px; }
.form-small-list li { display:flex; gap:10px; color:#33453f; }
.form-small-list .icon { color:#84b413; width:18px; height:18px; margin-top:4px; }

@media (max-width:1080px) {
  .career-hero-grid,
  .application-hero-grid,
  .career-overview-grid,
  .application-grid,
  .contact-slab { grid-template-columns:1fr; }
  .jobs-grid, .benefit-grid, .process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .career-hero,
  .application-hero { padding:64px 0 72px; }
  .career-hero-panel,
  .application-hero-panel,
  .career-highlight-box,
  .career-form-panel,
  .form-side-card,
  .job-card,
  .benefit-card,
  .process-card { padding:24px; }
  .hero-mini-stats,
  .opening-stats,
  .jobs-grid,
  .benefit-grid,
  .process-grid,
  .career-field-grid { grid-template-columns:1fr; }
  .contact-person-card { grid-template-columns:1fr; }
  .contact-person-card img { width:100%; max-width:240px; height:auto; }
  .form-meta,
  .form-submit-row { flex-direction:column; align-items:flex-start; }
}

/* 320px fix – prevent min-content widths from forcing a horizontal scroll. */
.career-page main *, .application-page main * {min-width:0}
.career-page main h1, .career-page main h2, .career-page main h3,
.application-page main h1, .application-page main h2, .application-page main h3,
.application-page main code, .career-page main code {overflow-wrap:anywhere}
.career-page .job-card .text-link {white-space:normal}
@media(max-width:760px) {
  .career-hero-grid,.application-hero-grid,.career-overview-grid,.application-grid,
  .contact-slab,.jobs-grid,.benefit-grid,.process-grid,.career-field-grid,
  .hero-mini-stats,.opening-stats {grid-template-columns:minmax(0,1fr)}
  .jobs-headline {flex-direction:column;align-items:flex-start}
  .job-card-top {flex-wrap:wrap}
  .job-actions {align-items:flex-start}
}

/* 2026-11-05: Bewerbung – responsive form footer and contact detail card */
.application-page .career-form-panel,
.application-page .form-side-stack,
.application-page .form-side-card,
.application-page .contact-person-card,
.application-page .contact-person-card > div { min-width: 0; }
.application-page .form-submit-row { flex-wrap: wrap; align-items: center; }
.application-page .form-submit-row .form-hint { min-width: 0; flex: 1 1 260px; }
.application-page .form-submit-row > button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; flex: 0 1 auto; min-width: 0;
  white-space: normal; text-align: center; line-height: 1.3;
}
.application-page .form-submit-row > button[type="submit"] .icon { flex: 0 0 auto; }
/* Global .contact-lines styles are intended for the separate Kontakt page.
   Scope these rules so labels, values and icons don't collide in Karriere. */
.career-page .contact-person-card .contact-lines,
.application-page .contact-person-card .contact-lines { display: grid; gap: 0; min-width: 0; }
.career-page .contact-person-card .contact-lines > a,
.application-page .contact-person-card .contact-lines > a,
.career-page .contact-person-card .contact-lines > span,
.application-page .contact-person-card .contact-lines > span {
  display: grid; grid-template-columns: 20px minmax(0,1fr);
  align-items: start; column-gap: 12px; padding: 12px 0;
  border-bottom: 1px solid #e1e7db; font-weight: 500;
  color: #2b3b35; text-decoration: none; min-width: 0;
}
.career-page .contact-person-card .contact-lines > :last-child,
.application-page .contact-person-card .contact-lines > :last-child { border-bottom: 0; }
.career-page .contact-person-card .contact-lines > a > .icon,
.application-page .contact-person-card .contact-lines > a > .icon,
.career-page .contact-person-card .contact-lines > span > .icon,
.application-page .contact-person-card .contact-lines > span > .icon {
  width: 20px; height: 20px; margin: 1px 0 0; color: #84b413;
}
.career-page .contact-person-card .contact-lines > a > span,
.application-page .contact-person-card .contact-lines > a > span,
.career-page .contact-person-card .contact-lines > span > span,
.application-page .contact-person-card .contact-lines > span > span {
  display: block; min-width: 0; overflow-wrap: anywhere; line-height: 1.5;
}
.career-page .contact-person-card .contact-lines strong,
.application-page .contact-person-card .contact-lines strong {
  display:block; margin: 0 0 3px; font-size: .75rem; font-weight: 800;
}
.application-page .contact-person-card {
  grid-template-columns: minmax(95px, 112px) minmax(0, 1fr);
  gap: 18px; padding: 20px;
}
.application-page .contact-person-card img { width: 112px; max-width: 100%; height: 142px; }
.application-page .contact-person-card h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
@media (max-width: 760px) {
  .application-page .form-submit-row { align-items: stretch; }
  .application-page .form-submit-row > button[type="submit"] { align-self: flex-start; }
}
@media (max-width: 450px) {
  .application-page .contact-person-card { grid-template-columns: minmax(0,1fr); }
  .application-page .contact-person-card img { width: 112px; height: 136px; }
  .application-page .form-submit-row > button[type="submit"] { width: 100%; }
}

/* Keep application notice below checkboxes, not alongside them. */
.application-page #application-form .form-meta {display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:14px}
.application-page #application-form .check-stack,.application-page #application-form .check-stack label{min-width:0}
.application-page #application-form .check-stack label{display:flex;align-items:flex-start;gap:12px;margin:0;line-height:1.55;font-weight:500}
.application-page #application-form .check-stack input[type="checkbox"]{flex:0 0 18px;width:18px;height:18px;margin:4px 0 0;accent-color:#84b413}
.application-page #application-form .check-stack label>span{min-width:0;flex:1 1 auto;overflow-wrap:break-word}
.application-page #application-form .form-notice{width:100%;min-width:0;min-height:0;margin:0;overflow-wrap:anywhere;font-size:.92rem;line-height:1.55}
.application-page #application-form .form-notice:empty{display:none}
.application-page #application-form .form-notice:not(:empty){padding:14px 16px;border:1px solid #ebd4ae;background:#fff9ed;border-radius:12px;color:#7c3c00}
.application-page #application-form .form-notice.success{border-color:#c8e2b6;background:#f2f9ed;color:#2f702b}
.application-page #application-form .form-submit-row>button[type="submit"]:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}


/* Karriere-Neustrukturierung: Hero / Benefits / Bewerbungsprozess / Stellen */
.career-page .career-hero-panel {overflow: hidden;}
.career-page .career-panel-eyebrow {
  display: inline-block; margin-bottom: 12px; color: #668e0c;
  font-size: .77rem; font-weight: 800; text-transform: uppercase; letter-spacing: .13em;
}
.career-page .career-panel-values { display: grid; gap: 11px; margin-top: 24px; }
.career-page .career-panel-values > div {
  display: flex; align-items: center; gap: 13px; min-width: 0;
  padding: 13px 15px; border: 1px solid #e5ecd9; border-radius: 15px;
  background: #f7faf3; color: #294039; font-weight: 650; line-height: 1.45;
}
.career-page .career-value-icon {
  display: inline-flex; justify-content: center; align-items: center;
  flex: 0 0 35px; height: 35px; border-radius: 11px;
  background: #e9f5cd; color: #5d840b;
}
.career-page .career-value-icon .icon { width: 20px; height: 20px; }
.career-page .career-process-section { background: #fff; }
.career-page .career-jobs-section { background: #f7f9f3; }
.career-page .career-jobs-section .jobs-headline { margin-bottom: 24px; }
.career-page .career-jobs-section .jobs-headline p {
  margin: 12px 0 0; max-width: 660px; color: #51645a;
}
.career-page .jobs-filter-panel {
  padding: 24px 28px 22px; margin: 0 0 28px;
  border: 1px solid #dce7cf; border-radius: 23px;
  background: linear-gradient(135deg, #f4faea 0%, #ffffff 100%);
}
.career-page .jobs-filter-heading { display: flex; align-items: center; gap: 13px; }
.career-page .jobs-filter-heading strong { display: block; color: #1e3529; line-height: 1.45; }
.career-page .jobs-filter-heading span:not(.jobs-filter-icon) {
  display: block; color: #5c6e62; font-size: .91rem; line-height: 1.5;
}
.career-page .jobs-filter-icon {
  width: 42px; height: 42px; flex: 0 0 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e4f3c4; color: #53770b; border-radius: 13px;
}
.career-page .jobs-filter-icon .icon { width: 21px; height: 21px; }
.career-page .jobs-filter-panel .filter-toolbar { margin: 20px 0 0; gap: 10px; }
.career-page .jobs-filter-panel .filter-chip { cursor: pointer; }
.career-page .jobs-filter-panel .filter-chip:focus-visible {
  outline: 3px solid #83b50f; outline-offset: 3px;
}
.career-page .jobs-grid { margin-bottom: 50px; }
.career-page .job-card .job-card-top { margin-bottom: 15px; }
.career-page .job-card .availability-pill { color: #486b0a; background: #eff7df; border-color: #dcebc8; font-weight: 700; }
.career-page .career-jobs-contact { margin-top: 8px; }
.career-page .career-contact-eyebrow { color: #d7ef89; }
@media (max-width: 760px) {
  .career-page .jobs-filter-panel { padding: 20px; }
  .career-page .jobs-filter-panel .filter-toolbar { gap: 9px; }
  .career-page .jobs-filter-panel .filter-chip { padding: 11px 14px; }
  .career-page .career-panel-values > div { padding: 12px; }
  .career-page .jobs-grid { margin-bottom: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .career-page .filter-chip { transform: none !important; transition: none; }
}
