/* ==========================================================================
   sm.css — Unterseite „Social-Media-Management"
   Namensraum .sm-*. Nutzt ausschließlich Tokens aus tokens.css und die
   geteilten Klassen aus base.css / sections.css (.container, .btn, .eyebrow,
   .chip, .link, .flow, .promise, .footer). Nichts davon wird hier neu
   definiert, nur ergänzt.
   ========================================================================== */

/* ---------- Sektions-Rhythmus -------------------------------------------- */
.sm-section{ padding-block:var(--sp-24); border-top:1px solid var(--hairline); }
.sm-section__head{ max-width:var(--maxw-narrow); }
.sm-title{
  margin:var(--sp-3) 0 0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.7rem, 3.6vw, 2.6rem);
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--text);
  text-wrap:pretty;
}
.sm-lead{
  margin:var(--sp-4) 0 0;
  max-width:60ch;
  font-size:clamp(1rem, 1.35vw, 1.15rem);
  line-height:1.65;
  color:var(--text-dim);
  text-wrap:pretty;
}
.sm-note{
  margin:var(--sp-6) 0 0;
  max-width:58ch;
  padding-left:var(--sp-4);
  border-left:2px solid var(--accent-deep);
  font-size:.95rem;
  line-height:1.6;
  color:var(--text-muted);
  text-wrap:pretty;
}

/* ---------- Hero ---------------------------------------------------------- */
.sm-hero{ padding-block:clamp(var(--sp-24), 16vh, var(--sp-32)) var(--sp-16); }
.sm-backlink{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  font-family:var(--font-display);
  font-size:.85rem;
  color:var(--text-dim);
  text-decoration:none;
  transition:color .3s var(--ease), gap .3s var(--ease);
}
.sm-backlink:hover{ color:var(--accent); gap:var(--sp-3); }
.sm-hero__eyebrow{ margin-top:var(--sp-8); }
.sm-hero__title{
  margin:var(--sp-4) 0 0;
  max-width:16ch;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.4rem, 6vw, 4.5rem);
  line-height:1.02;
  letter-spacing:-.03em;
}
.sm-hero__title em{
  font-style:normal;
  color:transparent;
  background:linear-gradient(180deg, var(--text) 34%, var(--accent) 122%);
  -webkit-background-clip:text;
  background-clip:text;
}
.sm-hero__lead{
  margin:var(--sp-6) 0 0;
  max-width:56ch;
  font-size:var(--fs-lead);
  line-height:1.6;
  color:var(--text-muted);
  text-wrap:pretty;
}

/* ---------- Umschalter DJ / Club ----------------------------------------- */
.sm-choose{ margin-top:clamp(var(--sp-8), 6vw, var(--sp-16)); }
.sm-choose__label{
  font-family:var(--font-display);
  font-size:var(--fs-eyebrow);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--text-dim);
}
.sm-switch{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--sp-2);
  margin-top:var(--sp-4);
  padding:var(--sp-2);
  border:1px solid var(--hairline-strong);
  border-radius:var(--r-lg);
  background:var(--bg-elev);
}
/* Gleitende Markierung hinter dem aktiven Weg. */
.sm-switch__thumb{
  position:absolute;
  z-index:0;
  top:var(--sp-2);
  bottom:var(--sp-2);
  left:var(--sp-2);
  width:calc(50% - var(--sp-2) - var(--sp-1));
  border-radius:calc(var(--r-lg) - 6px);
  background:var(--accent-faint);
  border:1px solid var(--accent-deep);
  box-shadow:0 0 34px -10px var(--accent-glow);
  transition:transform .45s var(--ease);
}
.sm-switch[data-active="clubs"] .sm-switch__thumb{
  transform:translateX(calc(100% + var(--sp-2)));
}
.sm-switch__opt{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--sp-1);
  padding:clamp(var(--sp-4), 2.2vw, var(--sp-6));
  border:0;
  border-radius:calc(var(--r-lg) - 6px);
  background:transparent;
  text-align:left;
  cursor:pointer;
  transition:color .3s var(--ease);
}
.sm-switch__kind{
  font-family:var(--font-display);
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-dim);
  transition:color .3s var(--ease);
}
.sm-switch__name{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.05rem, 1.9vw, 1.35rem);
  letter-spacing:-.01em;
  color:var(--text-muted);
  transition:color .3s var(--ease);
}
.sm-switch__hint{
  font-size:.9rem;
  line-height:1.5;
  color:var(--text-dim);
  text-wrap:pretty;
}
.sm-switch__opt:hover .sm-switch__name{ color:var(--text); }
.sm-switch__opt[aria-selected="true"] .sm-switch__name{ color:var(--text); }
.sm-switch__opt[aria-selected="true"] .sm-switch__kind{ color:var(--accent); }

@media (max-width:640px){
  .sm-switch{ grid-template-columns:minmax(0,1fr); }
  .sm-switch__thumb{
    width:auto; right:var(--sp-2); bottom:auto;
    height:calc(50% - var(--sp-1));
    transition:transform .45s var(--ease);
  }
  .sm-switch[data-active="clubs"] .sm-switch__thumb{
    transform:translateY(calc(100% + var(--sp-2)));
  }
}

/* ---------- Weg-Panels ---------------------------------------------------- */
.sm-panel[hidden]{ display:none; }
.sm-panel{ animation:sm-panel-in .55s var(--ease) both; }
@keyframes sm-panel-in{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}

.sm-panel__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--sp-3) var(--sp-6);
}
.sm-panel__for{
  margin:var(--sp-4) 0 0;
  max-width:60ch;
  font-size:var(--fs-lead);
  line-height:1.6;
  color:var(--text-muted);
  text-wrap:pretty;
}

/* ---------- Leistungs-Register (aufklappbar) ------------------------------ */
.sm-rows{
  margin-top:clamp(var(--sp-8), 5vw, var(--sp-12));
  border-top:1px solid var(--hairline-strong);
}
.sm-row{ border-bottom:1px solid var(--hairline); }
.sm-row__btn{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:baseline;
  gap:var(--sp-4) var(--sp-6);
  width:100%;
  padding:var(--sp-6) var(--sp-4);
  margin:0;
  border:0;
  background:transparent;
  text-align:left;
  cursor:pointer;
  transition:background-color .35s var(--ease);
}
.sm-row__btn:hover{ background:var(--accent-faint); }
.sm-row__idx{
  font-family:var(--font-display);
  font-size:.72rem;
  letter-spacing:.18em;
  color:var(--text-dim);
  font-variant-numeric:tabular-nums;
  transition:color .3s var(--ease);
}
.sm-row[data-open="true"] .sm-row__idx,
.sm-row__btn:hover .sm-row__idx{ color:var(--accent); }
.sm-row__name{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.05rem, 2vw, 1.35rem);
  letter-spacing:-.01em;
  color:var(--text);
}
.sm-row__short{
  display:block;
  margin-top:var(--sp-2);
  font-family:var(--font-text);
  font-size:.95rem;
  font-weight:400;
  line-height:1.55;
  color:var(--text-dim);
  text-wrap:pretty;
}
.sm-row__sign{
  position:relative;
  width:18px; height:18px;
  flex:0 0 auto;
  align-self:center;
}
.sm-row__sign::before,
.sm-row__sign::after{
  content:"";
  position:absolute;
  inset:50% 0 auto 0;
  height:1px;
  background:var(--text-dim);
  transition:transform .4s var(--ease), background-color .3s var(--ease);
}
.sm-row__sign::after{ transform:rotate(90deg); }
.sm-row[data-open="true"] .sm-row__sign::after{ transform:rotate(0deg); }
.sm-row[data-open="true"] .sm-row__sign::before,
.sm-row[data-open="true"] .sm-row__sign::after{ background:var(--accent); }

.sm-row__panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .45s var(--ease);
}
.sm-row[data-open="true"] .sm-row__panel{ grid-template-rows:1fr; }
.sm-row__panel > div{ overflow:hidden; }
.sm-row__body{
  padding:0 var(--sp-4) var(--sp-8) calc(var(--sp-4) + 2.6rem);
  max-width:70ch;
}
.sm-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}
.sm-list li{
  position:relative;
  padding-left:var(--sp-6);
  font-size:.97rem;
  line-height:1.6;
  color:var(--text-muted);
  text-wrap:pretty;
}
.sm-list li::before{
  content:"";
  position:absolute;
  left:0; top:.62em;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent-glow);
}
@media (max-width:600px){
  .sm-row__btn{ grid-template-columns:auto minmax(0,1fr); padding-inline:var(--sp-2); }
  .sm-row__sign{ grid-column:2; grid-row:1; justify-self:end; }
  .sm-row__body{ padding-left:calc(var(--sp-2) + 2.2rem); padding-right:var(--sp-2); }
}

/* ---------- Aufgabenteilung ----------------------------------------------- */
.sm-split{
  margin-top:clamp(var(--sp-8), 5vw, var(--sp-12));
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,6fr);
  gap:var(--sp-4);
}
.sm-split__col{
  padding:clamp(var(--sp-4), 2.4vw, var(--sp-6));
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
  background:var(--bg-elev);
}
.sm-split__col--akm{ border-color:var(--accent-deep); background:var(--accent-faint); }
.sm-split__who{
  font-family:var(--font-display);
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.sm-split__col--akm .sm-split__who{ color:var(--accent); }
.sm-split__name{
  margin:var(--sp-2) 0 var(--sp-4);
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.15rem;
  letter-spacing:-.01em;
  color:var(--text);
}
@media (max-width:760px){ .sm-split{ grid-template-columns:minmax(0,1fr); } }

/* ---------- Analytics-Screenshots ----------------------------------------- */
.sm-shots{ margin-top:clamp(var(--sp-8), 5vw, var(--sp-12)); }
.sm-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
}
.sm-tab{
  padding:.5em 1em;
  border-radius:var(--r-pill);
  border:1px solid var(--hairline);
  background:var(--bg-elev);
  color:var(--text-dim);
  font-family:var(--font-display);
  font-size:.85rem;
  cursor:pointer;
  transition:color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.sm-tab:hover{ color:var(--text); border-color:var(--hairline-strong); }
.sm-tab[aria-selected="true"]{
  color:var(--accent-bright);
  border-color:var(--accent-deep);
  background:var(--accent-faint);
}

.sm-frame{
  position:relative;
  margin-top:var(--sp-4);
  border:1px solid var(--hairline-strong);
  border-radius:var(--r-lg);
  background:var(--bg-elev);
  overflow:hidden;
}
.sm-frame__bar{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--hairline);
  background:var(--bg-elev-2);
}
.sm-frame__dot{ width:8px; height:8px; border-radius:50%; background:var(--hairline-strong); }
.sm-frame__path{
  margin-left:var(--sp-2);
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.75rem;
  letter-spacing:.02em;
  color:var(--text-dim);
}
.sm-slot{
  position:relative;
  display:grid;
  place-items:center;
  gap:var(--sp-3);
  aspect-ratio:16/9;
  padding:var(--sp-8);
  text-align:center;
  background-image:repeating-linear-gradient(
    135deg,
    rgba(255,255,255,.022) 0 10px,
    transparent 10px 20px
  );
}
.sm-slot__label{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.82rem;
  line-height:1.7;
  color:var(--text-dim);
  max-width:46ch;
}
.sm-slot__label b{ display:block; color:var(--accent); font-weight:500; letter-spacing:.04em; }
.sm-frame__caption{
  padding:var(--sp-3) var(--sp-4);
  border-top:1px solid var(--hairline);
  font-size:.88rem;
  color:var(--text-dim);
}
@media (max-width:600px){ .sm-slot{ aspect-ratio:4/3; padding:var(--sp-4); } }

/* ---------- Zeilen-Fakten (Analytics-Kennwerte) --------------------------- */
.sm-facts{
  margin-top:var(--sp-8);
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:var(--sp-6);
}
.sm-fact{ padding-top:var(--sp-4); border-top:1px solid var(--hairline-strong); }
.sm-fact__key{
  font-family:var(--font-display);
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
}
.sm-fact__val{
  margin:var(--sp-2) 0 0;
  font-size:.95rem;
  line-height:1.6;
  color:var(--text-dim);
  text-wrap:pretty;
}

/* ---------- Abschluss-CTA -------------------------------------------------- */
.sm-cta{ padding-block:var(--sp-24); border-top:1px solid var(--hairline); text-align:center; }
.sm-cta__inner{ display:flex; flex-direction:column; align-items:center; }
.sm-cta__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--sp-3);
  margin-top:var(--sp-8);
}

@media (max-width:900px){
  .sm-section,
  .sm-cta{ padding-block:var(--sp-16); }
}

@media (prefers-reduced-motion:reduce){
  .sm-panel{ animation:none; }
  .sm-switch__thumb{ transition:none; }
  .sm-row__panel{ transition:none; }
}