/* SM Hörakustik – Team-Experience „Menschen, die sich Zeit nehmen." (Über uns)
   Desktop ≥1024: sticky Portrait links, Story-Blöcke rechts (Scrollytelling per IntersectionObserver).
   Darunter und ohne JS: jede Person als eigene Portrait-Story. */
.sm-team{ position:relative; overflow:clip; /* nicht hidden: das würde sticky brechen */ background:#FDFDFD; color:#5A3525;
  --t-gold:0; --t-orange:0; --t-warm:0; padding:clamp(72px,9vw,128px) 0 clamp(56px,7vw,96px); }
.sm-team__bg{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#FDFDFD 0%,#F7F3F1 100%); }
.sm-team__bg::before, .sm-team__bg::after{ content:""; position:absolute; inset:-10%; transition:opacity 900ms ease; }
.sm-team__bg::before{ background:radial-gradient(60% 45% at 18% 30%, rgba(223,152,39,.20) 0%, rgba(223,152,39,0) 70%); opacity:var(--t-gold); }
.sm-team__bg::after{ background:radial-gradient(55% 45% at 80% 70%, rgba(210,85,34,.16) 0%, rgba(210,85,34,0) 70%); opacity:var(--t-orange); }
.sm-team[data-tone="gold"]{ --t-gold:1; --t-orange:.18; }
.sm-team[data-tone="orange"]{ --t-gold:.25; --t-orange:1; }
.sm-team[data-tone="warm"]{ --t-gold:.55; --t-orange:.45; }
.sm-team__wrap{ position:relative; width:min(1200px, 100% - 48px); margin:0 auto; }
@media (max-width:767px){ .sm-team__wrap{ width:min(1200px, 100% - 40px); } }

/* Kopf */
.sm-team__head{ max-width:760px; margin-bottom:clamp(40px,6vw,88px); }
.sm-team__eyebrow{ margin:0 0 14px; font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#A63E15; }
.sm-team__title{ margin:0; font-size:clamp(34px,4.6vw,58px); font-weight:700; line-height:1.08; letter-spacing:-.018em; color:#5A3525; text-wrap:balance; }
.sm-team__lead{ margin:18px 0 0; max-width:60ch; font-size:clamp(17px,1.35vw,20px); line-height:1.6; color:#6B5347; }

/* Raster */
.sm-team__grid{ display:grid; grid-template-columns:1fr; gap:0; }
.sm-team__media{ display:none; }
.sm-team__stories{ list-style:none; margin:0; padding:0; }
.sm-team__story{ position:relative; padding:0 0 clamp(64px,9vw,120px); }
.sm-team__story:last-child{ padding-bottom:clamp(40px,6vw,72px); }

/* Foto je Story (mobil / ohne JS) */
.sm-team__photo{ margin:0 0 26px; width:100%; aspect-ratio:4/5; border-radius:20px; overflow:hidden; background:#F7F3F1;
  box-shadow:0 30px 60px -36px rgba(90,53,37,.45); }
.sm-team__photo img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center 18%; }
.sm-team__ph{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; position:relative;
  background:radial-gradient(70% 60% at 30% 25%, rgba(223,152,39,.22), rgba(223,152,39,0) 70%), radial-gradient(60% 50% at 80% 85%, rgba(210,85,34,.18), rgba(210,85,34,0) 70%), #F7F3F1; }
.sm-team__ph svg{ width:38%; height:auto; opacity:.14; }
.sm-team__ph span{ position:absolute; left:8%; bottom:6%; font-size:clamp(96px,22vw,180px); font-weight:700; line-height:1; color:#5A3525; opacity:.10; letter-spacing:-.04em; }

/* Typografie je Person */
.sm-team__role{ margin:0 0 10px; font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#A63E15; }
.sm-team__name{ margin:0 0 18px; font-size:clamp(38px,5.2vw,64px); font-weight:700; line-height:1; letter-spacing:-.022em; color:#5A3525; }
.sm-team__bio{ margin:0; max-width:56ch; font-size:clamp(17px,1.3vw,19.5px); line-height:1.65; color:#6B5347; }
.sm-team__quote{ margin:30px 0 0; padding:0; max-width:40ch; }
.sm-team__quote::before{ content:""; display:block; width:48px; height:2px; margin-bottom:20px; background:linear-gradient(90deg,#DF9827,#D25522); border-radius:2px; }
.sm-team__quote p{ margin:0; font-size:clamp(23px,2.05vw,30px); font-weight:600; line-height:1.34; letter-spacing:-.012em; color:#5A3525; text-wrap:pretty; }
.sm-team__quote cite{ display:block; margin-top:16px; font-style:normal; font-size:14px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#8A7268; }
.sm-team__story--short .sm-team__bio{ font-size:clamp(17px,1.3vw,19px); }

/* Abschluss: Vertrauen → Handlung */
.sm-team__proof{ margin-top:clamp(24px,4vw,56px); padding:clamp(32px,4vw,52px) clamp(24px,4vw,56px); border-radius:24px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#5A3525 0%,#4A2A1C 55%,#6B3A1E 100%); color:#FDFDFD; box-shadow:0 40px 80px -48px rgba(90,53,37,.6); }
.sm-team__proof::after{ content:""; position:absolute; right:-140px; top:-140px; width:420px; height:420px; border-radius:50%;
  border:1px solid rgba(223,152,39,.28); box-shadow:inset 0 0 0 40px rgba(223,152,39,.05); pointer-events:none; }
.sm-team__proof-grid{ position:relative; display:grid; grid-template-columns:1fr; gap:28px; align-items:center; }
.sm-team__proof .sm-team__eyebrow{ color:#DF9827; }
.sm-team__rating{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.sm-team__score{ font-size:clamp(56px,7vw,88px); font-weight:700; line-height:.95; letter-spacing:-.03em; color:#FDFDFD; }
.sm-team__stars{ display:inline-flex; gap:3px; color:#DF9827; transform:translateY(-6px); }
.sm-team__stars svg{ width:22px; height:22px; }
.sm-team__count{ margin:10px 0 0; font-size:17px; line-height:1.5; color:rgba(253,253,253,.82); }
.sm-team__count a{ color:#FDFDFD; text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(223,152,39,.7); }
.sm-team__count a:hover{ text-decoration-color:#DF9827; }
.sm-team__proof-text{ margin:0 0 22px; font-size:clamp(20px,1.8vw,26px); font-weight:600; line-height:1.3; color:#FDFDFD; max-width:26ch; text-wrap:balance; }
.sm-team__actions{ display:flex; flex-wrap:wrap; gap:12px; }
.sm-team .sm-team__btn{ display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:0 28px; border-radius:12px; font-size:19px; font-weight:700; text-decoration:none;
  transition:transform .2s cubic-bezier(.22,.61,.21,1), background .2s, border-color .2s; }
.sm-team .sm-team__btn--primary{ background:#D25522; color:#FFFFFF !important; box-shadow:0 14px 28px -16px rgba(210,85,34,.7); }
.sm-team .sm-team__btn--primary:hover{ background:#C24A1C; }
.sm-team .sm-team__btn--ghost{ border:2px solid rgba(253,253,253,.55); color:#FDFDFD !important; }
.sm-team .sm-team__btn--ghost:hover{ border-color:#FDFDFD; }
.sm-team .sm-team__btn:active{ transform:scale(.985); }
.sm-team .sm-team__btn:focus-visible{ outline:2px solid #DF9827; outline-offset:3px; }

/* Reveal (nur mit JS; ohne JS ist alles sichtbar) */
html.sm-team-js .sm-team__story > *, html.sm-team-js .sm-team__head > *, html.sm-team-js .sm-team__proof .sm-team__proof-grid > *{
  opacity:0; transform:translateY(20px); transition:opacity .65s cubic-bezier(.22,.61,.21,1), transform .65s cubic-bezier(.22,.61,.21,1); }
html.sm-team-js .is-inview > *, html.sm-team-js .is-inview .sm-team__proof-grid > *{ opacity:1; transform:none; }
html.sm-team-js .is-inview > :nth-child(2){ transition-delay:.08s } html.sm-team-js .is-inview > :nth-child(3){ transition-delay:.16s }
html.sm-team-js .is-inview > :nth-child(4){ transition-delay:.24s } html.sm-team-js .is-inview > :nth-child(5){ transition-delay:.32s }

/* ---------- Desktop: Scrollytelling ---------- */
@media (min-width:1024px){
  html.sm-team-js .sm-team__grid{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); column-gap:clamp(48px,6vw,96px); align-items:start; }
  html.sm-team-js .sm-team__media{ display:block; position:sticky; top:calc(var(--sm-header-h,96px) + 28px); }
  html.sm-team-js .sm-team__photo{ display:none; }
  html.sm-team-js .sm-team__story{ min-height:78vh; display:flex; flex-direction:column; justify-content:center; padding:6vh 0; }
  html.sm-team-js .sm-team__story:first-child{ padding-top:0; }
  .sm-team__frame{ position:relative; aspect-ratio:4/5; max-height:calc(100vh - var(--sm-header-h,96px) - 64px); border-radius:24px; overflow:hidden; background:#F7F3F1;
    box-shadow:0 40px 80px -44px rgba(90,53,37,.55); }
  .sm-team__portrait{ position:absolute; inset:0; margin:0; opacity:0; transform:scale(1.02);
    transition:opacity 320ms ease, transform 640ms cubic-bezier(.22,.61,.21,1); will-change:opacity, transform; }
  .sm-team__portrait.is-active{ opacity:1; transform:scale(1); transition:opacity 520ms ease 80ms, transform 640ms cubic-bezier(.22,.61,.21,1); z-index:1; }
  .sm-team__portrait img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center 18%; }
  .sm-team__ring{ position:absolute; left:-22%; bottom:-24%; width:70%; height:auto; pointer-events:none; z-index:2; opacity:.9;
    transform:rotate(0deg); transform-origin:50% 50%; transition:transform 900ms cubic-bezier(.22,.61,.21,1); }
  .sm-team__proof-grid{ grid-template-columns:1fr 1fr; gap:48px; }
  .sm-team__quote{ max-width:none; }
  .sm-team__bio{ max-width:58ch; }
}
@media (min-width:1280px){ html.sm-team-js .sm-team__grid{ grid-template-columns:minmax(0,11fr) minmax(0,13fr); } }

/* QA-Hook: Endzustand ohne Transition */
.sm-team--posed, .sm-team--posed *, .sm-team--posed .sm-team__bg::before, .sm-team--posed .sm-team__bg::after{ transition:none !important; }

@media (prefers-reduced-motion:reduce){
  .sm-team__bg::before, .sm-team__bg::after{ transition:none; }
  .sm-team__portrait, .sm-team__portrait.is-active{ transform:none; transition:opacity 160ms linear; }
  .sm-team__ring{ transition:none; transform:none !important; }
  html.sm-team-js .sm-team__story > *, html.sm-team-js .sm-team__head > *, html.sm-team-js .sm-team__proof .sm-team__proof-grid > *{ transform:none; transition:opacity 160ms linear; transition-delay:0s !important; }
  .sm-team .sm-team__btn{ transition:none; }
}