/* ═══════════════════════════════════════════════════════════
   Seiten-CSS, Über uns
   Eigenes Bauteil: Rollenverteilung «So arbeiten wir» (.roles)
   ═══════════════════════════════════════════════════════════ */

.roles{max-width:940px; margin-inline:auto; display:grid; gap:.9rem}
.roles__head{
  display:none; grid-template-columns:1fr auto 1fr; gap:1.3rem; padding-inline:1.6rem;
}
.roles__lbl{
  font-family:var(--ff-d); font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
}
.roles__lbl--wir{text-align:right}

.roles__row{
  min-width:0; display:grid; grid-template-columns:1fr auto 1fr; gap:1.3rem; align-items:center;
  background:rgba(255,255,255.05); border:1px solid rgba(255,255,255.14); border-radius:var(--r);
  padding:1.3rem 1.6rem;
}
.roles__sie.roles__wir{min-width:0; display:flex; align-items:flex-start; gap:.8rem}
.roles__sie [data-ico]{color:var(--accent); flex:none; margin-top:.1rem}
.roles__wir{flex-direction:row-reverse; text-align:right}
.roles__sie p.roles__wir p{font-size:.92rem; color:rgba(255,255,255.85); margin:0}
.roles__link{
  width:34px; height:2px; background:linear-gradient(90deg, var(--accent), rgba(58,141,255.15));
  flex:none;
}
.roles__wir .roles__link{display:none}

@media(min-width:820px){
  .roles__head{display:grid}
  .roles__row{grid-template-columns:1fr 34px 1fr}
}
@media(max-width:819px){
  .roles__row{grid-template-columns:1fr}
  .roles__link{width:2px; height:20px; margin-inline:auto}
  .roles__wir{flex-direction:row; text-align:left}
}

/* ── Ansprechperson / Porträt-Lücke ───────────────────────── */
.person{display:grid; gap:clamp(2rem,5vw,3.5rem); grid-template-columns:1fr; align-items:start}
@media(min-width:760px){.person{grid-template-columns:280px 1fr}}
.person__media{min-width:0}
.person__ph{aspect-ratio:3/4; border-radius:var(--r)}
.person__txt{min-width:0}
.person__txt p{color:var(--muted); font-size:.98rem}
.person__txt p+p{margin-top:1rem}
.person__note{
  padding:1rem 1.2rem; border-left:3px solid #B57200; background:#FFF6E6;
  border-radius:0 var(--r) var(--r) 0; color:#5A4300 !important; font-size:.9rem !important;
}

@medianot all{
  .roles__row{transition:none}
}