/* ============================================================
   Bildfunk — Karriere-Hub (Pilot 03) · Unikat, Tonalität DU
   Foundation = Design-System-Tokens + website.css (Header, Footer,
   Kicker/Signalweg, Buttons). Diese Datei ergänzt nur die
   Karriere-Sektionen (Präfix .bfk-). Anti-Repetition: jede Sektion
   hat ein eigenes Layout; wärmere Anmutung über Menschen-Bildplätze,
   großzügige Radien (12 px) und einen dezenten Warmton bei Zitaten.
   ============================================================ */

/* ---------- markierte Bild-Platzhalter (hell + dunkel) ---------- */
.bfk-ph { position: relative; background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; color: var(--bf-text-muted); font-size: 13px; line-height: 1.6; overflow: hidden; }
.bfk-ph-tag { font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-blue); display: inline-flex; align-items: center; gap: 8px; }
.bfk-ph-tag::before { content: ""; width: 7px; height: 7px; background: var(--bf-orange); transform: rotate(45deg); flex-shrink: 0; }
.bfk-ph-dark { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.14); color: #8FA8CC; }
.bfk-ph-dark .bfk-ph-tag { color: #9DB8DD; }

/* ============================================================
   S1 — Hero (Du) · heller Split: Copy links, Foto-Collage rechts,
   Fakten-Leiste unten (bewusst NICHT das 100vh-Full-bleed-Muster)
   ============================================================ */
.bfk-hero { background: #fff; border-bottom: 1px solid var(--bf-border); }
.bfk-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: center; padding: 84px 0 76px; }
.bfk-hero-eyebrow { margin: 0 0 24px; }
.bfk-h1 { font-size: clamp(42px, 5vw, 64px); font-weight: 700; line-height: 1.04; letter-spacing: -0.03em; color: var(--bf-text); margin: 0 0 22px; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.bfk-hero-sub { font-size: 19px; line-height: 1.6; color: var(--bf-text-muted); max-width: 560px; margin: 0 0 36px; text-wrap: pretty; }
.bfk-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.bfk-hero-fig { position: relative; }
.bfk-hero-fig .bfk-ph-main { min-height: 460px; }
.bfk-hero-fig .bfk-ph-sub { position: absolute; left: -40px; bottom: -40px; width: 300px; min-height: 196px; background: #fff; box-shadow: var(--bf-shadow-md); padding: 18px; font-size: 12px; }
/* Fakten-Leiste */
.bfk-hero-facts { border-top: 1px solid var(--bf-border); display: grid; grid-template-columns: repeat(3, 1fr); }
.bfk-fact { display: flex; flex-direction: column; gap: 4px; padding: 22px 28px; }
.bfk-fact + .bfk-fact { border-left: 1px solid var(--bf-border); }
.bfk-fact-k { font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bf-text-muted); }
.bfk-fact-v { font-size: 16px; font-weight: 600; color: var(--bf-text); letter-spacing: -0.01em; }

/* ============================================================
   S2 — Warum Bildfunk · EVP-Bento (12-col, gespiegelte breite Karten)
   ============================================================ */
.bfk-evp { background: var(--bf-surface); padding: 96px 0; }
.bfk-evp-head { max-width: 720px; margin-bottom: 48px; }
.bfk-evp-head .bf-h2 { margin: 18px 0 14px; }
.bfk-evp-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.bfk-evp-card { grid-column: span 3; background: #fff; border: 1px solid var(--bf-border); border-radius: 12px; padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; transition: box-shadow var(--bf-dur-base) var(--bf-ease-standard), border-color var(--bf-dur-base) var(--bf-ease-standard); }
.bfk-evp-card:hover { box-shadow: var(--bf-shadow-md); border-color: var(--bf-border-strong); }
.bfk-evp-card.is-wide { grid-column: span 6; }
.bfk-evp-ico { display: flex; }
.bfk-evp-title { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--bf-text); margin: 0; }
.bfk-evp-body { font-size: 15px; line-height: 1.6; color: var(--bf-text-muted); margin: 0; max-width: 480px; }
.bfk-evp-card.is-wide .bfk-evp-body { font-size: 16px; }

/* ============================================================
   S3 — Deine Benefits · rahmenloses Icon-Grid neben statischer Spalte
   (bewusst ohne Cards, ohne Hairline-Matrix)
   ============================================================ */
.bfk-benefits { background: #fff; padding: 96px 0; }
.bfk-benefits-grid { display: grid; grid-template-columns: 340px 1fr; gap: 72px; align-items: start; }
.bfk-benefits-aside .bf-h2 { margin: 20px 0 16px; }
.bfk-benefits-aside .bf-lead { font-size: 16px; }
.bfk-benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 36px; }
.bfk-benefit { display: flex; flex-direction: column; gap: 12px; }
.bfk-benefit-ico { display: flex; }
.bfk-benefit-label { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--bf-text); line-height: 1.35; }
.bfk-benefit-note { font-size: 13px; line-height: 1.5; color: var(--bf-text-muted); }
.bfk-fsbox { margin-top: 28px; padding: 22px 24px; display: flex; flex-direction: column; gap: 10px;
  background: var(--bf-surface); border: 1px solid var(--bf-border); border-left: 3px solid var(--bf-orange-600); border-radius: var(--bf-radius-md); }
.bfk-fsbox-k { font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bf-text-muted); }
.bfk-fsbox-title { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--bf-text); }
.bfk-fsbox-body { margin: 0; font-size: 13px; line-height: 1.5; color: var(--bf-text-muted); }

/* ============================================================
   S4 — Ausbildung · dunkle Feature-Sektion: Groß-Kennzahl + Paten-
   Punkte links, Berufsrichtungen + Bildplatz rechts
   ============================================================ */
.bfk-ausb { background: var(--bf-dark); color: #fff; padding: 104px 0; }
.bfk-ausb-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 80px; align-items: start; }
.bfk-ausb-l .bf-h2 { margin: 20px 0 30px; }
.bfk-stat { display: flex; flex-direction: column; gap: 8px; padding: 26px 0; border-top: 1px solid rgba(255,255,255,0.14); border-bottom: 1px solid rgba(255,255,255,0.14); margin-bottom: 30px; }
.bfk-stat-v { font-size: clamp(56px, 6vw, 84px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: #fff; }
.bfk-stat-v em { font-style: normal; color: var(--bf-orange-600); }
.bfk-stat-k { font-family: var(--bf-font-mono); font-size: 13px; line-height: 1.5; color: #8FA8CC; max-width: 420px; }
.bfk-ausb-copy { font-size: 17px; line-height: 1.7; color: #C7D4E6; margin: 0 0 30px; max-width: 520px; text-wrap: pretty; }
.bfk-ausb-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bfk-ausb-points li { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 500; color: #E4EAF2; }
.bfk-ausb-points li svg { flex-shrink: 0; }
.bfk-berufe-k { font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #7E94B5; display: block; margin-bottom: 6px; }
.bfk-berufe { display: flex; flex-direction: column; margin-bottom: 28px; }
.bfk-beruf { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,0.14); text-decoration: none; transition: padding-left var(--bf-dur-base) var(--bf-ease-standard); }
.bfk-beruf:hover { padding-left: 8px; text-decoration: none; }
.bfk-beruf-title { font-size: 17px; font-weight: 600; color: #fff; }
.bfk-beruf-meta { grid-column: 1; font-family: var(--bf-font-mono); font-size: 12px; color: #8FA8CC; }
.bfk-beruf-arrow { grid-column: 2; grid-row: 1 / span 2; color: var(--bf-orange-600); display: flex; align-items: center; transition: transform var(--bf-dur-base) var(--bf-ease-standard); }
.bfk-beruf:hover .bfk-beruf-arrow { transform: translateX(4px); }
.bfk-ausb-r .bfk-ph { min-height: 232px; }

/* ============================================================
   S5 — Einblicke · Foto-Mosaik (12-col) mit warmen Zitat-Kacheln
   ============================================================ */
.bfk-blicke { background: #fff; padding: 96px 0; }
.bfk-blicke-head { max-width: 720px; margin-bottom: 44px; }
.bfk-blicke-head .bf-h2 { margin: 18px 0 14px; }
.bfk-mosaik { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.bfk-mosaik .bfk-ph { min-height: 250px; }
.bfk-m5 { grid-column: span 5; }
.bfk-m4 { grid-column: span 4; }
.bfk-m3 { grid-column: span 3; }
.bfk-quote { grid-column: span 3; background: rgba(240,125,0,0.06); border: 1px solid rgba(240,125,0,0.22); border-radius: 12px; padding: 26px 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.bfk-quote p { font-size: 15px; line-height: 1.6; color: var(--bf-text); margin: 0; text-wrap: pretty; }
.bfk-quote-src { font-family: var(--bf-font-mono); font-size: 12px; color: var(--bf-text-muted); display: inline-flex; align-items: center; gap: 8px; }
.bfk-quote-src::before { content: ""; width: 6px; height: 6px; background: var(--bf-orange); transform: rotate(45deg); flex-shrink: 0; }

/* ============================================================
   S6 — Offene Stellen · Job-Zeilenkarten mit Typ-Marker
   (keine Nummern-Directory wie Startseite S4)
   ============================================================ */
.bfk-jobs { background: var(--bf-surface); padding: 96px 0; }
.bfk-jobs-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 40px; }
.bfk-jobs-head .bf-h2 { margin: 18px 0 0; }
.bfk-jobs-head .bf-lead { font-size: 16px; max-width: 460px; justify-self: end; }
.bfk-job-list { display: flex; flex-direction: column; gap: 12px; }
.bfk-job { display: grid; grid-template-columns: 1fr auto auto; gap: 28px; align-items: center; background: #fff; border: 1px solid var(--bf-border); border-radius: 10px; padding: 24px 28px; text-decoration: none; box-shadow: var(--bf-shadow-xs); transition: box-shadow var(--bf-dur-base) var(--bf-ease-standard), border-color var(--bf-dur-base) var(--bf-ease-standard); }
.bfk-job:hover { box-shadow: var(--bf-shadow-md); border-color: var(--bf-border-strong); text-decoration: none; }
.bfk-job-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--bf-text); margin: 0 0 5px; }
.bfk-job-loc { font-family: var(--bf-font-mono); font-size: 12px; color: var(--bf-text-muted); }
.bfk-job-type { font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-text-muted); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.bfk-job-type::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--bf-border-strong); flex-shrink: 0; }
.bfk-job-type.is-ausbildung::before { background: var(--bf-orange); }
.bfk-job-type.is-vollzeit::before { background: var(--bf-blue); }
.bfk-job-arrow { color: var(--bf-blue); display: flex; transition: transform var(--bf-dur-base) var(--bf-ease-standard); }
.bfk-job:hover .bfk-job-arrow { transform: translateX(4px); }
.bfk-jobs-foot { margin: 24px 0 0; font-size: 15px; color: var(--bf-text-muted); }
.bfk-jobs-foot a { color: var(--bf-blue); font-weight: 600; text-decoration: none; }
.bfk-jobs-foot a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   S7 — So bewirbst du dich · dunkler Abschlussblock, eine
   Bewerbungskarte (Formular + Kanäle), ohne namentlichen Kontakt
   ============================================================ */
.bfk-bewerben { background: var(--bf-dark); color: #fff; padding: 100px 0; }
.bfk-bewerben-head { max-width: 640px; margin-bottom: 44px; }
.bfk-bewerben-head .bf-h2 { margin: 20px 0 16px; }
.bfk-bewerben-sub { font-size: 18px; line-height: 1.6; color: #C7D4E6; margin: 0; text-wrap: pretty; }
.bfk-apply { display: grid; grid-template-columns: 1.5fr 1fr; background: #fff; color: var(--bf-text); border-radius: 14px; overflow: hidden; box-shadow: var(--bf-shadow-lg); }
.bfk-apply-form { padding: 38px 40px; display: flex; flex-direction: column; gap: 14px; }
.bfk-apply-title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 4px; color: var(--bf-text); }
.bfk-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bfk-apply-form label { display: flex; flex-direction: column; gap: 6px; font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bf-text-muted); min-width: 0; }
.bfk-apply-form input, .bfk-apply-form select, .bfk-apply-form textarea { font-family: var(--bf-font-sans); font-size: 15px; padding: 11px 13px; border-radius: 6px; border: 1px solid var(--bf-border-strong); background: #fff; color: var(--bf-text); font-weight: 400; text-transform: none; letter-spacing: 0; width: 100%; min-width: 0; }
.bfk-apply-form textarea { resize: vertical; }
.bfk-apply-form input:focus, .bfk-apply-form select:focus, .bfk-apply-form textarea:focus { outline: none; border-color: var(--bf-blue); box-shadow: 0 0 0 3px rgba(0,80,160,0.18); }
.bfk-apply-form input[type="file"] { padding: 9px 11px; font-size: 13px; color: var(--bf-text-muted); }
.bfk-form-hint { font-family: var(--bf-font-mono); font-size: 11px; color: var(--bf-text-muted); margin: 4px 0 0; text-align: center; letter-spacing: 0.02em; }
.bfk-form-sent { text-align: center; padding: 44px 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bfk-form-sent-icon { width: 56px; height: 56px; border-radius: 999px; background: #E4F4EB; color: #0B8A4B; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.bfk-form-sent h3 { font-size: 22px; font-weight: 700; margin: 0; color: var(--bf-text); }
.bfk-form-sent p { font-size: 15px; color: var(--bf-text-muted); margin: 0; }
.bfk-apply-aside { background: var(--bf-surface); border-left: 1px solid var(--bf-border); padding: 38px 34px; display: flex; flex-direction: column; gap: 26px; }
.bfk-aside-block { display: flex; flex-direction: column; gap: 6px; }
.bfk-aside-k { font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-text-muted); }
.bfk-aside-v { font-size: 15px; line-height: 1.55; color: var(--bf-text); }
.bfk-aside-v a { color: var(--bf-blue); text-decoration: none; }
.bfk-aside-v a:hover { text-decoration: underline; text-underline-offset: 2px; }
.bfk-aside-v.bf-mono { font-size: 15px; }
.bfk-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bfk-steps li { display: flex; align-items: baseline; gap: 12px; font-size: 14px; line-height: 1.5; color: var(--bf-text); }
.bfk-steps li b { font-family: var(--bf-font-mono); font-weight: 500; font-size: 12px; color: var(--bf-orange-800); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .bfk-hero-grid { grid-template-columns: 1fr; gap: 44px; padding: 56px 0 56px; }
  .bfk-hero-fig .bfk-ph-main { min-height: 340px; }
  .bfk-hero-fig .bfk-ph-sub { display: none; }
  .bfk-evp-card, .bfk-evp-card.is-wide { grid-column: span 6; }
  .bfk-benefits-grid { grid-template-columns: 1fr; gap: 44px; }
  .bfk-benefit-grid { grid-template-columns: repeat(3, 1fr); }
  .bfk-ausb-grid { grid-template-columns: 1fr; gap: 52px; }
  .bfk-m5, .bfk-m4, .bfk-m3, .bfk-quote { grid-column: span 6; }
  .bfk-jobs-head { grid-template-columns: 1fr; gap: 16px; }
  .bfk-jobs-head .bf-lead { justify-self: start; }
  .bfk-apply { grid-template-columns: 1fr; }
  .bfk-apply-aside { border-left: none; border-top: 1px solid var(--bf-border); }
}
@media (max-width: 760px) {
  .bfk-benefit-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .bfk-hero-facts { grid-template-columns: 1fr; }
  .bfk-fact + .bfk-fact { border-left: none; border-top: 1px solid var(--bf-border); }
  .bfk-fact { padding: 16px 0; }
}
@media (max-width: 600px) {
  .bfk-evp, .bfk-benefits, .bfk-ausb, .bfk-blicke, .bfk-jobs, .bfk-bewerben { padding: 64px 0; }
  .bfk-h1 { font-size: clamp(32px, 9vw, 42px); }
  .bfk-hero-ctas { flex-direction: column; align-items: stretch; }
  .bfk-hero-ctas .bf-btn { width: 100%; }
  .bfk-evp-card, .bfk-evp-card.is-wide { grid-column: span 12; }
  .bfk-benefit-grid { grid-template-columns: 1fr 1fr; }
  .bfk-m5, .bfk-m4, .bfk-m3, .bfk-quote { grid-column: span 12; }
  .bfk-mosaik .bfk-ph { min-height: 200px; }
  .bfk-job { grid-template-columns: 1fr auto; gap: 12px 16px; padding: 20px 22px; }
  .bfk-job-type { grid-column: 1; grid-row: 2; }
  .bfk-job-arrow { grid-row: 1 / span 2; }
  .bfk-job-title, .bfk-job-loc { overflow-wrap: anywhere; }
  .bfk-form-row { grid-template-columns: 1fr; }
  .bfk-apply-form { padding: 26px 22px; }
  .bfk-apply-aside { padding: 26px 22px; }
}