/* ==========================================================================
   /vision/ : Unternehmensvision, Employer Branding
   Ergänzt style.css + opener.css. Alles unter body.vision gescoped.
   ========================================================================== */

body.vision{background:var(--wcg-bone);overflow-x:hidden}
.vision section{padding:0;position:relative}
.vision :focus-visible{outline:2px solid var(--wcg-champagne);outline-offset:3px}

/* ---------- Gemeinsame Typo ---------- */
.vision .v-eyebrow{display:block;font-family:var(--wcg-font-sans);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--wcg-champagne-deep);margin-bottom:22px}
.vision .v-dark .v-eyebrow,.vision .hero .v-eyebrow{color:var(--wcg-champagne)}
.vision .v-h2{font-family:var(--wcg-font-serif);font-weight:300;font-size:clamp(32px,4vw,54px);line-height:1.08;letter-spacing:-.022em;color:var(--wcg-ink);max-width:18ch}
.vision .v-h2 em{font-style:italic;font-weight:400;color:var(--wcg-champagne-deep)}
.vision .v-dark .v-h2{color:var(--wcg-bone)}
.vision .v-dark .v-h2 em{color:var(--wcg-champagne)}
.vision .v-lede{font-family:var(--wcg-font-sans);font-weight:400;font-size:clamp(17px,1.3vw,19px);line-height:1.65;color:var(--wcg-ink-soft);max-width:58ch}

.vision .v-sec{padding:136px 0}
.vision .v-warm{background:var(--wcg-bone-warm)}
.vision .v-dark{background:var(--wcg-ink);color:var(--wcg-bone)}
@media (max-width:780px){.vision .v-sec{padding:88px 0}}
@media (max-width:480px){.vision .v-sec{padding:72px 0}}

/* ---------- Hero ---------- */
.vision .hero{padding:96px 0 104px}
.vision .hero h1.display{font-size:clamp(40px,5.4vw,76px);line-height:1.02;max-width:12ch;margin-bottom:32px}
.vision .hero h1.display em{display:block}
.vision .hero-sub{max-width:46ch;margin-bottom:40px}
.vision .hero-actions{gap:28px}
.vision .hero .btn-ghost{color:var(--wcg-bone);border-bottom-color:rgba(245,241,234,.45);background:transparent}
.vision .hero .btn-ghost:hover{color:var(--wcg-champagne);border-bottom-color:var(--wcg-champagne);background:transparent}
.vision .hero-media{aspect-ratio:1/1}
.vision .hero-media img{object-position:46% center}
@media (max-width:980px){.vision .hero-media{aspect-ratio:3/2;max-width:none}}
@media (max-width:680px){.vision .hero{padding:64px 0 72px}}

/* ---------- Anspruch ---------- */
.vision .claim{font-family:var(--wcg-font-serif);font-weight:300;font-size:clamp(34px,5.6vw,84px);line-height:1.04;letter-spacing:-.03em;color:var(--wcg-ink);max-width:16ch;margin:0}
.vision .claim em{font-style:italic;font-weight:400;color:var(--wcg-champagne-deep)}
.vision .claim-mark{display:block;width:64px;height:2px;background:var(--wcg-champagne);margin-bottom:40px}
.vision .vision-text{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:88px;padding-top:40px;border-top:1px solid var(--wcg-line)}
.vision .vision-text p{font-family:var(--wcg-font-sans);font-size:16px;line-height:1.7;color:var(--wcg-ink-soft)}
.vision .vision-text p strong{display:block;font-family:var(--wcg-font-serif);font-weight:400;font-size:22px;line-height:1.25;letter-spacing:-.01em;color:var(--wcg-ink);margin-bottom:12px}
@media (max-width:900px){.vision .vision-text{grid-template-columns:1fr;gap:32px;margin-top:56px}}

/* ---------- Kundenergebnis ---------- */
.vision .v-outcomes-head{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;margin-bottom:64px}
.vision .v-outcomes{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--wcg-ink)}
.vision .v-outcome{padding:32px 28px 8px 0}
.vision .v-outcome + .v-outcome{padding-left:28px;border-left:1px solid var(--wcg-line)}
.vision .v-outcome h3{font-family:var(--wcg-font-serif);font-weight:400;font-size:clamp(21px,1.7vw,25px);line-height:1.2;letter-spacing:-.012em;color:var(--wcg-ink);margin-bottom:14px}
.vision .v-outcome p{font-size:15px;line-height:1.65;color:var(--wcg-muted)}
@media (max-width:980px){
  .vision .v-outcomes-head{grid-template-columns:1fr;gap:24px}
  .vision .v-outcomes{grid-template-columns:1fr 1fr}
  .vision .v-outcome:nth-child(3){padding-left:0;border-left:0}
  .vision .v-outcome:nth-child(n+3){border-top:1px solid var(--wcg-line)}
}
@media (max-width:560px){
  .vision .v-outcomes{grid-template-columns:1fr}
  .vision .v-outcome,.vision .v-outcome + .v-outcome{padding:28px 0 20px;border-left:0}
  .vision .v-outcome + .v-outcome{border-top:1px solid var(--wcg-line)}
}

/* ---------- Operating System ---------- */
.vision .os-grid{display:grid;grid-template-columns:1fr 1fr;gap:88px;align-items:center}
.vision .os-figure{position:relative;margin:0}
.vision .os-figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:42% center;border-radius:var(--wcg-r-md)}
.vision .os-figure figcaption{font-size:13px;color:var(--wcg-muted);margin-top:14px}
.vision .os-list{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--wcg-line)}
.vision .os-list li{font-family:var(--wcg-font-serif);font-weight:400;font-size:clamp(19px,1.6vw,23px);line-height:1.35;color:var(--wcg-ink);padding:18px 0 18px 32px;border-bottom:1px solid var(--wcg-line);position:relative}
.vision .os-list li::before{content:"";position:absolute;left:0;top:50%;width:14px;height:1px;background:var(--wcg-champagne-deep)}
@media (max-width:980px){.vision .os-grid{grid-template-columns:1fr;gap:48px}.vision .os-figure img{aspect-ratio:3/2}}

.vision .steps-head{margin:120px 0 48px;display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.vision .steps-head h3{font-family:var(--wcg-font-serif);font-weight:300;font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.02em;color:var(--wcg-ink)}
.vision .steps-head h3 em{font-style:italic;font-weight:400;color:var(--wcg-champagne-deep)}
.vision .steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:none}
.vision .step{padding:36px 40px 40px 0;border-top:2px solid var(--wcg-ink);position:relative}
.vision .step + .step{padding-left:40px}
.vision .step-num{display:block;width:auto;height:auto;border-radius:0;background:none;font-family:var(--wcg-font-serif);font-style:italic;font-weight:400;font-size:20px;color:var(--wcg-champagne-deep);margin-bottom:20px}
.vision .step h4{font-family:var(--wcg-font-serif);font-weight:400;font-size:clamp(22px,1.9vw,27px);line-height:1.2;color:var(--wcg-ink);margin-bottom:14px}
.vision .step p{font-size:15.5px;line-height:1.65;color:var(--wcg-ink-soft);max-width:36ch}
@media (max-width:900px){
  .vision .steps-head{margin-top:88px}
  .vision .steps{grid-template-columns:1fr}
  .vision .step,.vision .step + .step{padding:28px 0 32px}
}

/* ---------- Prinzipien (das eine laute Element) ---------- */
.vision .principles-head{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;margin-bottom:72px}
.vision .principles-head .v-lede{color:rgba(245,241,234,.72)}
.vision .principles{list-style:none;margin:0;padding:0;border-top:1px solid rgba(245,241,234,.16)}
.vision .principle{display:grid;grid-template-columns:140px minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:baseline;padding:40px 0;border-bottom:1px solid rgba(245,241,234,.16)}
.vision .principle-num{font-family:var(--wcg-font-serif);font-weight:300;font-size:clamp(44px,5vw,72px);line-height:1;letter-spacing:-.03em;color:var(--wcg-champagne);font-variant-numeric:lining-nums}
.vision .principle h3{font-family:var(--wcg-font-serif);font-weight:300;font-size:clamp(28px,3.6vw,50px);line-height:1.06;letter-spacing:-.022em;color:var(--wcg-bone)}
.vision .principle p{font-size:16px;line-height:1.65;color:rgba(245,241,234,.72);max-width:42ch}
@media (max-width:980px){
  .vision .principles-head{grid-template-columns:1fr;gap:24px;margin-bottom:48px}
  .vision .principle{grid-template-columns:72px minmax(0,1fr);gap:8px 24px;padding:32px 0}
  .vision .principle p{grid-column:2}
}
@media (max-width:480px){
  .vision .principle{grid-template-columns:52px minmax(0,1fr);gap:6px 16px}
}

/* ---------- Bewusst Nein ---------- */
.vision .no-wrap{max-width:820px;margin:0 auto}
.vision .no-list{list-style:none;margin:48px 0 0;padding:0}
.vision .no-list li{display:flex;gap:24px;align-items:baseline;font-family:var(--wcg-font-serif);font-weight:300;font-size:clamp(22px,2.4vw,32px);line-height:1.25;letter-spacing:-.015em;color:var(--wcg-ink);padding:24px 0;border-top:1px solid var(--wcg-line)}
.vision .no-list li:last-child{border-bottom:1px solid var(--wcg-line)}
.vision .no-list .no-mark{flex:0 0 auto;font-family:var(--wcg-font-sans);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--wcg-champagne-deep);width:56px}
.vision .no-foot{margin-top:32px;font-size:16px;line-height:1.7;color:var(--wcg-ink-soft);max-width:56ch}
@media (max-width:560px){.vision .no-list li{gap:14px}.vision .no-list .no-mark{width:40px}}

/* ---------- Werte ---------- */
.vision .values-head{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;margin-bottom:64px}
.vision .values{display:grid;grid-template-columns:repeat(5,1fr);margin:0;padding:0;list-style:none;border-top:1px solid var(--wcg-ink)}
.vision .value{padding:28px 24px 36px 0;border-bottom:1px solid var(--wcg-line)}
.vision .value:not(:nth-child(5n+1)){padding-left:24px;border-left:1px solid var(--wcg-line)}
.vision .value h3{font-family:var(--wcg-font-serif);font-weight:400;font-size:21px;line-height:1.2;color:var(--wcg-ink);margin-bottom:10px}
.vision .value p{font-size:14.5px;line-height:1.6;color:var(--wcg-muted)}
@media (max-width:1080px){
  .vision .values{grid-template-columns:repeat(2,1fr)}
  .vision .value:not(:nth-child(5n+1)){padding-left:0;border-left:0}
  .vision .value:nth-child(2n){padding-left:24px;border-left:1px solid var(--wcg-line)}
}
@media (max-width:900px){.vision .values-head{grid-template-columns:1fr;gap:24px;margin-bottom:48px}}
@media (max-width:520px){
  .vision .values{grid-template-columns:1fr}
  .vision .value:nth-child(2n){padding-left:0;border-left:0}
  .vision .value{padding:22px 0 24px}
}

/* ---------- Der Unterschied ---------- */
.vision .diff-lines{list-style:none;margin:56px 0 0;padding:0}
.vision .diff-lines li{font-family:var(--wcg-font-serif);font-weight:300;font-size:clamp(28px,4.4vw,62px);line-height:1.12;letter-spacing:-.025em;color:var(--wcg-ink);padding:18px 0;border-top:1px solid var(--wcg-line)}
.vision .diff-lines li:last-child{border-bottom:1px solid var(--wcg-line)}
.vision .diff-lines em{font-style:italic;font-weight:300;color:var(--wcg-muted)}
.vision .diff-lines strong{font-weight:400;color:var(--wcg-ink)}

/* ---------- Workation-Band ---------- */
.vision .band{position:relative;min-height:680px;display:flex;align-items:flex-end;overflow:hidden;background:var(--wcg-ink-deep);color:var(--wcg-bone)}
.vision .band-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.vision .band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,23,32,.05) 0%,rgba(20,23,32,.35) 45%,rgba(20,23,32,.9) 100%)}
.vision .band-content{position:relative;z-index:1;width:100%;padding:120px 0 88px}
.vision .band .v-h2{color:var(--wcg-bone);max-width:14ch}
.vision .band .v-h2 em{color:var(--wcg-champagne)}
.vision .band-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:end}
.vision .band p{font-size:17px;line-height:1.7;color:rgba(245,241,234,.86);max-width:48ch;margin-top:24px}
.vision .band-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(245,241,234,.35)}
.vision .band-facts div{padding:20px 20px 0 0}
.vision .band-facts div + div{padding-left:20px;border-left:1px solid rgba(245,241,234,.2)}
.vision .band-facts b{display:block;font-family:var(--wcg-font-serif);font-weight:300;font-size:clamp(30px,3vw,42px);line-height:1;color:var(--wcg-champagne);margin-bottom:10px}
.vision .band-facts span{font-size:13.5px;line-height:1.45;color:rgba(245,241,234,.8)}
@media (max-width:900px){.vision .band{min-height:620px}.vision .band-grid{grid-template-columns:1fr;gap:40px}.vision .band-content{padding:200px 0 64px}}
@media (max-width:420px){.vision .band-facts div + div{padding-left:12px}.vision .band-facts div{padding-right:8px}}

/* ---------- Team ---------- */
.vision .team-head{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;margin-bottom:64px}
.vision .team{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:48px 32px}
.vision .person img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--wcg-r-md);background:var(--wcg-bone-warm)}
.vision .person-name{display:block;font-family:var(--wcg-font-serif);font-weight:400;font-size:22px;line-height:1.2;color:var(--wcg-ink);margin-top:18px}
.vision .person-role{display:block;font-size:13px;letter-spacing:.04em;color:var(--wcg-muted);margin-top:4px}
@media (max-width:900px){.vision .team-head{grid-template-columns:1fr;gap:24px;margin-bottom:48px}.vision .team{grid-template-columns:repeat(3,1fr);gap:36px 24px}}
@media (max-width:640px){.vision .team{grid-template-columns:repeat(2,1fr);gap:32px 16px}.vision .person-name{font-size:19px;margin-top:12px}}

/* ---------- Abschluss-CTA ---------- */
.vision .v-cta{padding:0 0 136px}
.vision .cta-band{padding:64px 72px;margin:0}
.vision .cta-band h3{font-size:clamp(28px,3.2vw,44px);max-width:16ch;margin-bottom:14px}
.vision .cta-band .v-eyebrow{color:var(--wcg-champagne);margin-bottom:18px}
.vision .cta-actions{display:flex;flex-direction:column;gap:14px;align-items:stretch;justify-self:end}
.vision .cta-actions .btn{text-align:center}
.vision .cta-band .btn-ghost{background:transparent;color:var(--wcg-bone);border:1px solid rgba(245,241,234,.35);padding:16px 28px;border-radius:var(--wcg-r-sm)}
.vision .cta-band .btn-ghost:hover{border-color:var(--wcg-champagne);color:var(--wcg-champagne);background:transparent}
@media (max-width:780px){.vision .cta-band{padding:40px 28px}.vision .cta-actions{justify-self:start;width:100%}.vision .v-cta{padding-bottom:88px}}

/* ---------- Link zurück auf Karriere ---------- */
.vision .v-textlink{font-family:var(--wcg-font-sans);font-weight:500;font-size:14px;color:var(--wcg-ink);border-bottom:1px solid var(--wcg-champagne-deep);padding-bottom:3px}
.vision .v-textlink:hover{color:var(--wcg-champagne-deep)}