/* =====================================================================
   Karriere (karriere.html DE+EN + generierte /karriere/<key>-Seiten), 2026-09-30
   Nach site-navy.css einbinden. Die Stellenseiten übernehmen <head> und <body>
   aus karriere.html (tools/build-job-pages.py), also auch sheet-page + diese Datei.
   - Kachel-Sektionen: Detail-Sektionen [data-stelle-detail] werden wie .gad-sheet
     zur weißen Karte (Klasse im Tag geht nicht, der Generator matcht den Tag exakt).
   - Innere Karten: Kante #e3e9f2, Radius 18, keine doppelten Rahmen.
   - .kw-*  Grafik „So bewirbst du dich" (Stil wie RedMentis #wie / BsMind-Hero, hell)
   ===================================================================== */
/* site-navy.css Z.15 (body:not(.is-home).theme-light → #fff !important) schlägt body.sheet-page, daher höhere Spezifität */
/* Yusuf 2026-09-30: kein Navy-Hintergrund, sondern heller Ton wie früher auf Neuigkeiten; Karten mit Rahmen */
body.sheet-page.karriere-page:not(.is-home) { background: #eef3f9 !important; }
body.sheet-page.karriere-page .gad-sheet { border: 1px solid rgba(255,255,255,.85) !important; box-shadow: 0 10px 32px rgba(20,40,80,.08), inset 0 1px 0 rgba(255,255,255,.6) !important; }
body.sheet-page section[data-stelle-detail] {
  background: #fff; border-radius: 28px; margin: 28px auto; padding: 0 0 64px !important;
  max-width: min(1240px, calc(100% - 48px)); box-shadow: 0 10px 32px rgba(20,40,80,.08); border: 1px solid rgba(255,255,255,.85); overflow: hidden;
}
body.sheet-page section[data-stelle-detail] .container { padding-left: clamp(22px, 5vw, 60px); padding-right: clamp(22px, 5vw, 60px); }
body.sheet-page .job-hero { background: #fff; border-bottom: 1px solid #e3e9f2; padding-top: 56px; }
@media (max-width: 760px) {
  body.sheet-page section[data-stelle-detail] { border-radius: 20px; margin: 16px auto; padding-bottom: 44px !important; max-width: calc(100% - 24px); }
  body.sheet-page .job-hero { padding-top: 40px; }
}

/* Innere Karten */
body.sheet-page :is(.career-form, .job-meta-card, .job-detail-block, .kununu-card) {
  background: #fff; border: 1px solid #e3e9f2; border-radius: 18px; box-shadow: none;
}
/* Sektion „Feedback" = die Kachel selbst ist der Rahmen, innen kein zweiter Kasten */
body.sheet-page #kununu .kununu-card { border: 0; padding: 0; }
body.sheet-page .kununu-stars { border-radius: 18px; }
body.sheet-page .career-form { margin-top: 40px; }

/* Linien-Design: Stellenliste und FAQ ohne Kasten, nur Trennlinien */
body.sheet-page .job-list { border-top-color: #e3e9f2; }
body.sheet-page .job-row { border-bottom-color: #e3e9f2; }
body.sheet-page .faq-section .faq-container { max-width: none; }

/* ---------- Grafik „So bewirbst du dich" ---------- */
#bewerbung .kw-lead { max-width: 680px; color: #4a5768; margin-top: 12px; font-size: 18px; }
.kw-figure { margin: 44px auto 0; max-width: 980px; }
.kw { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.kw--m { display: none; max-width: 400px; margin: 0 auto; }
@media (max-width: 700px) { .kw--d { display: none; } .kw--m { display: block; } .kw-figure { margin-top: 32px; } }
.kw-box { fill: #f3f7fd; stroke: #cfdbec; stroke-width: 1.4; }
.kw-box--start { fill: #eaf2ff; stroke: #1f6feb; }
.kw-box--goal { fill: #eaf7ef; stroke: #16a34a; }
.kw-ico { fill: none; stroke: #16336a; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kw-hit { fill: none; stroke: #1f6feb; stroke-width: 2.5; opacity: 0; }
.kw-cap { font-size: 11px; font-weight: 700; letter-spacing: .12em; fill: #0066cc; }
.kw-lbl { font-size: 13.5px; font-weight: 600; fill: #0f1b2d; }
.kw-sub { font-size: 11.5px; font-weight: 500; fill: #5f6b7d; }
.kw-base { stroke: #e3e9f2; stroke-width: 2; fill: none; }
.kw-line { stroke: url(#kwGradD); stroke-width: 3; fill: none; stroke-linecap: round; }
.kw--m .kw-line { stroke: url(#kwGradM); }
.kw-pill rect { fill: #eaf7ef; stroke: #b7e2c6; }
.kw-pilltxt { font-size: 13px; font-weight: 700; fill: #0f5c2e; }
.kw-token-ring { fill: rgba(31,111,235,.12); stroke: rgba(31,111,235,.45); stroke-width: 1.5; }
.kw-token-doc { fill: #1f6feb; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.kw-gate, .kw-pill, .kw-token { transform-box: fill-box; transform-origin: center; }
/* Standbild (auch bei reduzierter Bewegung): Linie voll, Haken + Pille sichtbar, Mappe aus */
.kw-token { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .kw-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: kwDraw 9s linear infinite; }
  .kw-token { animation: kwTokenX 9s linear infinite; }
  .kw--m .kw-token { animation-name: kwTokenY; }
  .kw-hit { animation: kwHit 9s linear infinite; animation-delay: var(--d); }
  .kw-gate { animation: kwGate 9s cubic-bezier(.16,1,.3,1) infinite; }
  .kw-pill { animation: kwPill 9s ease-out infinite; }
}
@keyframes kwDraw { 0%, 4% { stroke-dashoffset: 1; } 56% { stroke-dashoffset: 0; } 94% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes kwTokenX { 0% { opacity: 0; transform: none; } 4% { opacity: 1; transform: none; } 56% { opacity: 1; transform: translateX(var(--dist)); } 62%, 100% { opacity: 0; transform: translateX(var(--dist)) scale(.6); } }
@keyframes kwTokenY { 0% { opacity: 0; transform: none; } 4% { opacity: 1; transform: none; } 56% { opacity: 1; transform: translateY(var(--dist)); } 62%, 100% { opacity: 0; transform: translateY(var(--dist)) scale(.6); } }
@keyframes kwHit { 0% { opacity: 0; } 2% { opacity: 1; } 8%, 100% { opacity: 0; } }
@keyframes kwGate { 0%, 54% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.12); } 64% { transform: scale(1); } 94% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes kwPill { 0%, 60% { opacity: 0; transform: translateY(6px); } 66% { opacity: 1; transform: none; } 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
#bewerbung .gf-flow { margin-top: 48px; }
.kw--m .kw-lbl { font-size: 15px; }
.kw--m .kw-sub { font-size: 12.5px; }
.kw--m .kw-cap { font-size: 11.5px; }
/* Stellenzeilen (Yusuf 2026-09-30): Titel volle Breite, darunter nur Level + Stellen-ID mit Icon */
.job-row .job-row-content { display: block !important; flex: 1 1 auto; min-width: 0; }
.job-row .job-row-title { max-width: none !important; }
.job-row .job-row-meta { display: flex !important; flex-wrap: wrap; gap: 6px 22px; margin-top: 8px; justify-content: flex-start !important; text-align: left !important; }
.job-row .job-row-meta .jm { display: inline-flex; align-items: center; gap: 7px; color: #5f6b7d; font-size: 14px; }
.job-row .job-row-meta .jm svg { color: #16336a; flex: none; }


/* ---------- Karriere-Hero: nur leicht abgedunkelt wie die Academy, keine Unschärfe (Yusuf 2026-10-01) ----------
   Ersetzt den Verlauf aus style.css (.karriere-hero-overlay). */
.karriere-hero .karriere-hero-overlay {
  background: linear-gradient(180deg, rgba(8,16,38,.42) 0%, rgba(8,16,38,.52) 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---------- Handy (Runde 2, 2026-10-02): „So bewirbst du dich" untereinander statt Wischreihe (nur drei kurze Schritte).
   Senkrechte Leiste verbindet die Punkte, Text 16 px. ---------- */
@media (max-width: 760px) {
  #bewerbung .gf-flow { margin-top: 28px; }
  #bewerbung .gf-steps { row-gap: 0; }
  #bewerbung .gf-step { padding: 0 0 26px 34px; }
  #bewerbung .gf-step:last-child { padding-bottom: 0; }
  #bewerbung .gf-step::before { top: 2px; }
  #bewerbung .gf-step::after { content: ""; position: absolute; left: 7px; top: 22px; bottom: 2px; width: 2px; background: linear-gradient(180deg, #1f6feb, #5aa0ff); }
  #bewerbung .gf-step:last-child::after { display: none; }
  #bewerbung .gf-step small { font-size: 13px; margin-bottom: 4px; }
  #bewerbung .gf-step h3 { font-size: 18px; margin-bottom: 6px; }
  #bewerbung .gf-step p { font-size: 16px; }

  /* Formular: keine Karte in der Sektion (doppelter Innenabstand), Felder volle Breite */
  body.sheet-page .career-form { margin-top: 28px; padding: 0; border: 0; border-radius: 0; background: none; }
  .career-form .form-group label { font-size: 14px; }
  .career-form .form-group input[type="file"] { font-size: 15px; padding: 12px; }
  .career-form .form-group input[type="file"]::file-selector-button { font-size: 15px; min-height: 36px; }
  .career-form .form-help { font-size: 13px; margin-top: 4px; }
  .career-form .form-checkbox { gap: 12px; padding: 8px 0; }
  .career-form .form-checkbox input { width: 22px; height: 22px; flex: none; margin-top: 1px; }
  .career-form .form-checkbox label { font-size: 14px; line-height: 1.5; }
  .career-form .hero-cta, .career-form [type="submit"] { width: 100%; justify-content: center; }

  /* Feedback: Sterne-Fläche ist reine Deko und kostet am Handy eine Bildschirmhöhe */
  body.sheet-page .kununu-stars { display: none; }
}