/* Career: Rollen als geteilte Sektion (links schwarz haftend mit Zähler, rechts weiß), Gespräch in drei Schritten */
.roles{position:relative;background:#fff;color:var(--ink);padding:clamp(3rem,8vh,5rem) 0;--roles-gap:clamp(2rem,6vw,7rem)}
.roles::before{content:"";position:absolute;top:0;bottom:0;left:0;background:var(--ink);width:calc(max(var(--pad),(100% - 76rem)/2) + (min(76rem,100% - 2*var(--pad)) - var(--roles-gap))*5/12 + var(--roles-gap)/2)}
.roles .inner{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--roles-gap);align-items:start}
.roles__side{position:sticky;top:clamp(4.5rem,14vh,8rem);color:#f2f1ef}
.roles__side h2{margin:0 0 1.2rem;font-family:var(--disp);font-weight:700;font-size:clamp(2rem,3.1vw,3rem);line-height:1.08;letter-spacing:-.01em;color:#f2f1ef}
.roles__big{margin:0;display:grid;font-family:var(--disp);font-weight:700;font-size:clamp(5rem,12vw,11rem);line-height:.9;letter-spacing:-.03em;color:#f2f1ef;min-height:1em}
.roles__big span{grid-area:1/1;opacity:0;transform:translateY(.25em);transition:opacity .4s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.roles__big span.on{opacity:1;transform:none}
.roles__meter{position:relative;height:2px;margin-top:1.6rem;background:rgba(242,241,239,.18);overflow:hidden}
.roles__meter i{position:absolute;inset:0;background:#f2f1ef;transform-origin:left;transform:scaleX(.25);transition:transform .55s cubic-bezier(.16,1,.3,1)}
.roles__lead{margin:1.2rem 0 0;max-width:24rem;color:#b9b9c0;font-size:.95rem;line-height:1.6}
.roles__rows{display:grid;gap:clamp(2.5rem,7vh,5rem)}
.roles__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1.4rem,3vw,2.6rem);align-items:center;min-height:min(60vh,560px);opacity:.38;transition:opacity .5s ease;outline:none}
.roles__row.on,.roles__row:focus-visible{opacity:1}
.roles__img{border:1px solid #e2e2e6;border-radius:.6rem;overflow:hidden;background:#fff}
.roles__img img{display:block;width:100%;height:auto}
.roles__kicker{margin:0 0 .5rem;font:400 .74rem/1 var(--mono);letter-spacing:.08em;color:#9a9aa0}
.roles__row h3{margin:0 0 .6rem;font-family:var(--disp);font-weight:700;font-size:clamp(1.3rem,2vw,1.8rem);line-height:1.2}
.roles__txt>p{margin:0 0 .9rem;color:#55555c;font-size:.95rem;line-height:1.6;max-width:30rem}
.roles__pts{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.roles__pts li{position:relative;padding-left:1.2rem;font-size:.9rem;line-height:1.5;color:var(--ink)}
.roles__pts li::before{content:"";position:absolute;left:0;top:.62em;width:.55rem;height:2px;background:var(--ink)}
.talk{background:#fff;padding:clamp(3rem,8vh,5rem) 0}
.talk h2{margin:0 0 .8rem;font-family:var(--disp);font-weight:700;font-size:clamp(2rem,3.1vw,3rem);line-height:1.08;letter-spacing:-.01em;max-width:34rem}
.talk__lead{margin:0 0 clamp(2rem,5vh,3rem);color:var(--mut);font-size:.98rem;line-height:1.65;max-width:38rem}
.talk__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,3vw,3rem)}
.talk__step{padding-top:1.2rem}
.talk__no{margin:0 0 .8rem;font:400 .74rem/1 var(--mono);letter-spacing:.08em;color:#9a9aa0}
.talk__step h3{margin:0 0 .6rem;font-family:var(--disp);font-weight:700;font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.2}
.talk__step p:last-child{margin:0;color:#55555c;font-size:.95rem;line-height:1.6}
.cta__done{margin:0;font-family:var(--disp);font-weight:700;font-size:1.3rem}
@media (max-width:880px){
  .roles::before{display:none}
  .roles .inner{grid-template-columns:1fr;gap:1.6rem}
  .roles__side{position:static;background:var(--ink);padding:1.4rem var(--pad);margin:0 calc(-1*var(--pad))}
  .roles__big,.roles__meter{display:none}
  .roles__row{grid-template-columns:1fr;min-height:0;opacity:1}
  .roles__img{max-width:22rem}
  .talk__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.roles__big span,.roles__meter i,.roles__row{transition:none}.roles__row{opacity:1}}