/* ============================================================
   v2 Karriere — Stellen, Warum wir, Bewerbungsformular
   Baut auf brewery.css / v2.css auf.
   ============================================================ */

/* ---------- Offene Stellen ---------- */
.v2-karriere { background: var(--sand); }
.v2-karriere-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.v2-job-card {
  background: #fff; border: 1px solid var(--gray-15); border-radius: 22px;
  padding: clamp(26px, 3vw, 38px);
  display: flex; flex-direction: column;
  transition: transform 350ms cubic-bezier(0.22,1,0.36,1), box-shadow 350ms ease, border-color 350ms ease;
}
.v2-job-card:hover { transform: translateY(-5px); box-shadow: 0 26px 52px rgba(15,76,129,0.12); border-color: var(--zurich-blue-50); }
.v2-job-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.v2-job-top .ic {
  width: 54px; height: 54px; border-radius: 14px;
  background: var(--zurich-blue-10); color: var(--zurich-blue);
  display: flex; align-items: center; justify-content: center;
}
.v2-job-top .ic svg { width: 26px; height: 26px; }
.v2-job-type {
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--zurich-blue); background: var(--zurich-blue-10);
  padding: 6px 13px; border-radius: 999px;
}
.v2-job-card h3 { font-size: clamp(21px, 2.2vw, 26px); font-weight: 600; color: var(--ink); margin: 0 0 6px; letter-spacing: -0.01em; }
.v2-job-loc { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 500; color: var(--gray-60); margin-bottom: 14px; }
.v2-job-loc svg { width: 16px; height: 16px; color: var(--zurich-blue); }
.v2-job-card p { font-size: 14.5px; line-height: 1.6; color: var(--gray-60); margin: 0 0 22px; }
.v2-job-apply {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: 15px; font-weight: 600; color: var(--zurich-blue);
  transition: gap 250ms ease;
}
.v2-job-apply svg { width: 17px; height: 17px; }
.v2-job-apply:hover { gap: 14px; }
@media (max-width: 760px) { .v2-karriere-grid { grid-template-columns: 1fr; } }

/* ---------- Warum wir (dunkel) ---------- */
.v2-karriere-why { background: linear-gradient(160deg, #0F4C81 0%, #07203A 100%); color: #fff; overflow: hidden; position: relative; }
.v2-karriere-why::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 45% 60% at 90% 8%, rgba(33,103,174,0.4), transparent 70%); pointer-events: none; }
.v2-karriere-why .container { position: relative; z-index: 1; }
.v2-karriere-why .brew-sec-head .v2-title { color: #fff; }
.v2-karriere-why .brew-sec-head .v2-title .accent { color: #9ec9ee; }
.v2-why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.v2-why-card {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(158,201,238,0.2); border-radius: 18px;
  padding: clamp(22px, 2.4vw, 30px);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: transform 300ms cubic-bezier(0.22,1,0.36,1), background 300ms ease, border-color 300ms ease;
}
.v2-why-card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.12); border-color: rgba(158,201,238,0.45); }
.v2-why-card .ic {
  width: 50px; height: 50px; border-radius: 13px;
  background: rgba(255,255,255,0.12); color: #9ec9ee;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.v2-why-card .ic svg { width: 24px; height: 24px; }
.v2-why-card h3 { font-size: 18px; font-weight: 600; color: #fff; margin: 0 0 8px; letter-spacing: -0.01em; }
.v2-why-card p { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.74); margin: 0; }
@media (max-width: 900px) { .v2-why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .v2-why-grid { grid-template-columns: 1fr; } }

/* ---------- Benefits / Deine Vorteile ---------- */
.v2-karriere-benefits { background: var(--sand); }
.v2-benefits-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.v2-benefit-item {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff; border: 1px solid var(--gray-15); border-radius: 18px;
  padding: 20px;
  transition: transform 300ms cubic-bezier(0.22,1,0.36,1), box-shadow 300ms ease, border-color 300ms ease;
}
.v2-benefit-item:hover { transform: translateY(-4px); box-shadow: 0 20px 42px rgba(15,76,129,0.12); border-color: var(--zurich-blue-50); }
.v2-benefit-item .ic {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  background: var(--zurich-blue-10); color: var(--zurich-blue);
  display: flex; align-items: center; justify-content: center;
}
.v2-benefit-item .ic svg { width: 22px; height: 22px; }
.v2-benefit-item h3 { font-size: 15px; font-weight: 600; color: var(--ink); margin: 2px 0 5px; letter-spacing: -0.01em; line-height: 1.25; }
.v2-benefit-item p { font-size: 13px; line-height: 1.5; color: var(--gray-60); margin: 0; }
@media (max-width: 980px) { .v2-benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .v2-benefits-grid { grid-template-columns: 1fr; } }

/* ---------- Upload im Bewerbungsformular ---------- */
.v2-upload { display: flex; align-items: center; gap: 10px; margin: 4px 0 18px; }
.v2-upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.v2-upload-btn {
  flex: 1; display: flex; align-items: center; gap: 11px;
  padding: 14px 16px; border-radius: 12px; cursor: pointer;
  background: var(--sand); border: 1.5px dashed var(--sand-deep);
  font-size: 14px; font-weight: 500; color: var(--gray-60);
  transition: border-color 220ms ease, background 220ms ease, color 220ms ease;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.v2-upload-btn:hover { border-color: var(--zurich-blue); color: var(--zurich-blue); background: var(--zurich-blue-10); }
.v2-upload-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.v2-upload-btn span { overflow: hidden; text-overflow: ellipsis; }
.v2-upload-clear {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; cursor: pointer;
  background: var(--sand); border: 1px solid var(--sand-deep); color: var(--gray-60);
  display: flex; align-items: center; justify-content: center;
}
.v2-upload-clear:hover { color: var(--danger); border-color: var(--danger); }
.v2-upload-clear svg { width: 16px; height: 16px; }
.v2-upload-warn { font-size: 12.5px; color: var(--danger); margin: -10px 0 14px; line-height: 1.45; }
.v2-upload-hint { font-size: 12px; color: var(--gray-60); margin: 14px 0 0; text-align: center; }