/* "Unser Team" pages (/team, /team/<id>), owner 2026-10-26. Builds on /site.css and /huaidev-motion.css (same header,
   frame, fonts and colours as the home page); only what the team pages add is here. */

/* one language block at a time (team-boot.js sets .js and data-lang before the first paint; no JavaScript: all three) */
.js [data-lang-block]{display:none}
.js[data-lang="de"] [data-lang-block="de"],.js[data-lang="en"] [data-lang-block="en"],.js[data-lang="pt"] [data-lang-block="pt"]{display:block}
html.introRun{overflow:hidden}
header nav a[aria-current=page]{background:#16b6dd;border-color:#16b6dd;color:#fff}
header nav a[aria-current=page]:hover,header nav a[aria-current=page]:focus-visible{background:#0fa5ca;color:#fff}
.teamPage section[id],.teamPage [id$="-de"],.teamPage [id$="-en"],.teamPage [id$="-pt"]{scroll-margin-top:130px}

/* intro */
.teamHero{padding:48px 0 34px;max-width:860px}
.teamHero h1{margin:12px 0 20px}
.teamHero .lead{max-width:720px}
.sectionLabel{font-size:clamp(22px,2.4vw,30px);margin:0 0 6px}

/* team cards */
.memberGrid{list-style:none;margin:22px 0 46px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:15px}
.memberCard{display:flex;flex-direction:column;gap:14px;border:1px solid var(--stroke);background:var(--panel);border-radius:17px;padding:16px 16px 20px;min-width:0}
.memberPortrait{display:block;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#071641;border:1px solid #234a6b}
.memberPortrait img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
a.memberPortrait:hover img{transform:scale(1.04)}
.memberInitial{display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#123e64,#071641 70%);border-style:dashed;border-color:#2c5677}
.memberInitial span{font:800 clamp(44px,6vw,64px)/1 system-ui,-apple-system,sans-serif;color:#52e3fa;opacity:.55;letter-spacing:.02em}
.memberText{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.memberText h3{margin:0;font-size:21px;letter-spacing:-.01em}
.memberText h3 a{color:#f0f5f9;text-decoration:none}
.memberText h3 a:hover,.memberText h3 a:focus-visible{color:var(--mint)}
.memberModel{margin:3px 0 10px;font-size:12px;letter-spacing:.04em;color:var(--sub)}
.memberBadge{align-self:flex-start;margin:6px 0 10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#071641;background:var(--mint);border-radius:999px;padding:4px 10px}
.memberRole{margin:0 0 10px;color:var(--mint);font-size:13.5px;font-weight:650;line-height:1.45}
.memberTagline{margin:0 0 14px;color:#cfdcea;line-height:1.6;font-size:14.5px}
.memberLink{margin-top:auto;color:var(--mint);font-weight:700;text-decoration:none;font-size:14px}
.memberLink:hover,.memberLink:focus-visible{text-decoration:underline}
.memberSoon{margin:auto 0 0;display:inline-block;align-self:flex-start;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#a3b8c8;border:1px solid #33506a;border-radius:999px;padding:5px 10px}
.memberCard.soon{background:#0e1828}
@media (max-width:560px){
  .memberGrid{grid-template-columns:1fr;gap:12px}
  .memberCard{flex-direction:row;align-items:flex-start;padding:14px}
  .memberPortrait{flex:0 0 88px;width:88px}
  .memberText h3{font-size:19px}
}

/* our history: a timeline of light, the intro beside it on wide screens */
.historySection .sectionIntro>p:not(.eyebrow){max-width:62ch}
.timeline{list-style:none;position:relative;margin:26px 0 30px;padding:0 0 0 34px;max-width:760px}
.timeline::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(#52e3fa,#16b6dd 55%,rgba(22,182,221,.12))}
.timeline li{position:relative;padding:0 0 26px}
.timeline li:last-child{padding-bottom:0}
.tlDot{position:absolute;left:-31px;top:3px;width:14px;height:14px;border-radius:50%;background:#071641;border:2px solid #52e3fa;box-shadow:0 0 0 4px rgba(82,227,250,.12),0 0 14px rgba(82,227,250,.55)}
.timeline li:last-child .tlDot{background:#52e3fa}
.tlTime{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);font-weight:800}
.timeline h3{margin:5px 0 6px;font-size:19px}
.timeline p:not(.tlTime){margin:0;color:var(--sub);line-height:1.65;max-width:62ch}
@media (min-width:980px){
  .historySection{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
  .historySection .sectionIntro{position:sticky;top:130px}
  .historySection .timeline{margin-top:34px}
}
.workGrid strong{margin:12px 0 8px}

/* profile pages */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 26px;font-size:13px;color:var(--sub)}
.crumbs a{color:var(--mint);text-decoration:none}
.crumbs a:hover,.crumbs a:focus-visible{text-decoration:underline}
.profileHead{display:grid;grid-template-columns:clamp(150px,22vw,240px) minmax(0,1fr);gap:clamp(20px,4vw,44px);align-items:center;padding:0 0 34px;border-bottom:1px solid #24394c}
.profilePortrait{display:block;width:100%;height:auto;border-radius:24px;border:1px solid #235a6a;box-shadow:0 14px 50px #02091480}
.profileIntro h1{margin:10px 0 10px;font-size:clamp(38px,6vw,66px)}
.profileRole{display:block;margin-top:10px;font-size:clamp(18px,2.3vw,25px);line-height:1.3;letter-spacing:-.01em;color:var(--mint);font-weight:650}
.profileModel{margin:0 0 16px;font-size:13px;letter-spacing:.05em;color:var(--sub)}
.profileModel.profileHuman{display:inline-block;color:#071641;background:var(--mint);border-radius:999px;padding:5px 12px;font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.profileBadge{display:block;width:fit-content;margin-top:12px;color:#071641;background:var(--mint);border-radius:999px;padding:5px 12px;font-weight:800;font-size:12px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase}
.memberPortrait img{display:block}
.profileTagline{margin:0;max-width:56ch;font-size:clamp(17px,1.8vw,20px);line-height:1.55;color:#dce6ef;border-left:3px solid #16b6dd;padding-left:14px}
.profileBody{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:30px 0 10px}
.profileAside{display:grid;gap:15px;align-content:start}
.facts,.toc{border:1px solid var(--stroke);background:var(--panel);border-radius:17px;padding:18px 20px}
.factsTitle{margin:0 0 10px;color:var(--mint);font-size:11px;letter-spacing:.19em;font-weight:800;text-transform:uppercase}
.facts dl{margin:0}
.facts dl>div{padding:10px 0;border-top:1px solid #22364a}
.facts dl>div:first-child{border-top:0;padding-top:2px}
.facts dt{font-size:12px;letter-spacing:.06em;color:var(--sub)}
.facts dd{margin:3px 0 0;color:#e6eef6;line-height:1.5;font-size:14.5px;overflow-wrap:anywhere}
.toc ol{margin:0;padding-left:20px;color:var(--sub);font-size:14px;line-height:1.5}
.toc li{margin:4px 0}
.toc a{color:#cfe3ef;text-decoration:none}
.toc a:hover,.toc a:focus-visible{color:var(--mint);text-decoration:underline}
.profileText{max-width:72ch;min-width:0}
.profileText .lead{margin-top:0;font-size:18px;max-width:none}
.profileText h2{margin:40px 0 12px;font-size:clamp(23px,2.6vw,30px);line-height:1.2;letter-spacing:-.015em}
.profileText section p{margin:0 0 14px;color:#d3dfea;font-size:16.5px;line-height:1.78}
.profileLinks{display:flex;flex-wrap:wrap;gap:12px;margin:36px 0 18px}
.profileLinks a{padding:12px 16px;border-radius:10px;text-decoration:none;font-weight:700}
@media (min-width:980px){
  .profileBody{grid-template-columns:300px minmax(0,1fr);gap:48px}
  .profileAside{position:sticky;top:130px}
}
@media (max-width:640px){
  .profileHead{grid-template-columns:1fr;gap:18px}
  .profilePortrait{width:150px;border-radius:20px}
  .profileText section p{font-size:16px}
}