/*
 * Team (archive-wbs_staff.php) — mockup Team.png. Namespaced .team-*.
 * Reuses fsr-* tokens/classes; base specificity, no !important, mobile-first.
 */

/* ---------- Hero ---------- */
.team-hero .fsr-phero__text { gap:0; }
.team-hero__h1 { font-size:clamp(36px,4.4vw,62px); margin:0; }
.team-hero__name { display:block; font-size:clamp(56px,8vw,104px); line-height:.98; color:var(--fsr-gold); margin:4px 0 6px; }
.team-hero__role { display:block; font-family:var(--fsr-sans); font-size:15px; letter-spacing:.03em; color:rgba(243,237,227,.82); }
.team-hero .fsr-phero__lead { margin-top:20px; }

/* ---------- Spezialgebiete ---------- */
.team-spec__kicker { display:flex; justify-content:center; margin-bottom:40px; }
.team-spec__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.team-spec__card { border:1px solid rgba(198,161,91,.42); padding:clamp(26px,3vw,38px); display:flex; flex-direction:column;
  gap:16px; background:rgba(198,161,91,.03); transition:.25s ease; }
.team-spec__card:hover { border-color:var(--fsr-gold); background:rgba(198,161,91,.07); }
.team-spec__ic { width:40px; height:40px; color:var(--fsr-gold); }
.team-spec__ic svg { width:100%; height:100%; }
.team-spec__title { font-size:26px; color:#fff; margin:0; }
.team-spec__copy { font-family:var(--fsr-sans); font-size:14.5px; line-height:1.7; color:rgba(243,237,227,.72); margin:0; }

/* ---------- Looks mit Charakter ---------- */
.team-gallery__head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:34px; }
.team-gallery__head .fsr-h2 { color:var(--fsr-black); margin-top:6px; }
.team-gallery__grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.team-gallery__tile { aspect-ratio:3/4; overflow:hidden; }
.team-gallery__tile img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.team-gallery__tile:hover img { transform:scale(1.05); }

/* ---------- Mein Ansatz ---------- */
.team-approach__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.team-approach__text .fsr-h2 { color:#fff; margin:0 0 4px; }
.team-approach__copy { color:rgba(243,237,227,.82); margin:22px 0 26px; max-width:34em; }
.team-approach__media { aspect-ratio:5/4; overflow:hidden; }
.team-approach__media img { width:100%; height:100%; object-fit:cover; display:block; }
.team-checks { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.team-checks li { position:relative; padding-left:36px; font-family:var(--fsr-sans); font-size:15.5px; color:rgba(243,237,227,.9); }
.team-checks li::before { content:""; position:absolute; left:0; top:-2px; width:24px; height:24px; border-radius:50%;
  border:1px solid var(--fsr-gold); }
.team-checks li::after { content:""; position:absolute; left:8.5px; top:2.5px; width:5px; height:10px;
  border:solid var(--fsr-gold); border-width:0 1.7px 1.7px 0; transform:rotate(42deg); }

/* ---------- Gold CTA bar ---------- */
.team-ctabar { background:var(--fsr-gold); }
.team-ctabar__in { display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:clamp(22px,3vw,34px) 32px; color:#171310; transition:.22s ease; }
.team-ctabar:hover { background:var(--fsr-gold-deep); }
.team-ctabar__lead { display:flex; align-items:center; gap:18px; }
.team-ctabar__ic { width:34px; height:34px; flex:0 0 auto; color:#171310; }
.team-ctabar__ic svg { width:100%; height:100%; }
.team-ctabar__txt { font-size:clamp(22px,2.6vw,32px); color:#171310; line-height:1.1; }
.team-ctabar__arrow { font-size:26px; color:#171310; flex:0 0 auto; }

/* ---------- Direkter Kontakt ---------- */
.team-contact__grid { display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.team-contact__media { aspect-ratio:5/4; overflow:hidden; }
.team-contact__media img { width:100%; height:100%; object-fit:cover; display:block; }
.team-contact__text .fsr-h2 { color:#fff; margin:0 0 14px; }
.team-contact__intro { color:rgba(243,237,227,.8); margin:0 0 24px; max-width:34em; }
.team-contact__lines { list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:14px; }
.team-contact__lines li { display:flex; align-items:center; gap:14px; font-family:var(--fsr-sans); font-size:15.5px; color:rgba(243,237,227,.9); }
.team-contact__lines a { color:rgba(243,237,227,.9); }
.team-contact__lines a:hover { color:var(--fsr-gold); }
.team-contact__ic { flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:1px solid rgba(198,161,91,.5);
  display:flex; align-items:center; justify-content:center; color:var(--fsr-gold); }
.team-contact__ic svg { width:18px; height:18px; }

/* ================= RESPONSIVE ================= */
@media (max-width:980px){
  .team-spec__grid { grid-template-columns:1fr; gap:18px; }
  .team-gallery__grid { grid-template-columns:repeat(3,1fr); }
  .team-gallery__tile:nth-child(4), .team-gallery__tile:nth-child(5) { display:none; }
}
@media (max-width:860px){
  .team-approach__grid, .team-contact__grid { grid-template-columns:1fr; gap:28px; }
  .team-approach__media { order:-1; aspect-ratio:16/10; }
  .team-contact__media { aspect-ratio:16/10; }
  .team-ctabar__in { flex-wrap:nowrap; gap:14px; }
  .team-ctabar__txt { font-size:clamp(17px,4.6vw,24px); }
  .team-ctabar__lead { gap:12px; min-width:0; }
}
@media (max-width:560px){
  .team-gallery__grid { grid-template-columns:repeat(2,1fr); }
  .team-gallery__tile:nth-child(3) { display:none; }
}

/* Real Sera landscape salon photo (team_hero) — frame on her (right of centre). */
.team-hero .fsr-phero__media img { object-position:70% center; }