/* Seite /sales-cockpit (Entwurf 4.11.2026): Produktseite zum Suchbegriff „Sales Cockpit“.
   Baut auf styles.css und ratgeber/ratgeber.css auf (Glas, Knöpfe, Fragen, Abschluss), hier nur das Seitenraster. */
.sc{--glas:rgba(14,36,74,.42);--glasrand:rgba(170,215,255,.16);--lesen:#C9D6EA}
.sc main{position:relative}

/* Kopf: Text links, Cockpit rechts */
.sc-held{max-width:1240px;margin:0 auto;padding:128px 28px 40px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.sc-kicker{font-family:var(--m);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.sc-titel{margin-top:16px;font-size:clamp(38px,5vw,68px);line-height:1.02;font-weight:800;letter-spacing:-.035em;text-wrap:balance}
.sc-lead{margin-top:22px;font-size:clamp(17px,1.4vw,19.5px);line-height:1.65;color:var(--lesen);max-width:52ch}
.sc-fakten{margin-top:22px;font-family:var(--m);font-size:12.5px;line-height:1.7;color:var(--mut)}
.sc-schirm{margin:0;padding:10px;border-radius:18px}
.sc-schirm img{display:block;width:100%;height:auto;border-radius:11px}
@media (prefers-reduced-motion:no-preference){
  .sc-held .sc-text>*{animation:sc-auf .9s var(--ease) both}
  .sc-held .sc-text>*:nth-child(2){animation-delay:.08s}
  .sc-held .sc-text>*:nth-child(3){animation-delay:.16s}
  .sc-held .sc-text>*:nth-child(4){animation-delay:.24s}
  .sc-held .sc-schirm{animation:sc-schirm 1.2s .12s var(--ease) backwards}
  @keyframes sc-auf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes sc-schirm{from{opacity:0;transform:perspective(1600px) rotateY(-10deg) translateX(30px)}to{opacity:1;transform:perspective(1600px) rotateY(-4deg)}}
  .sc-held .sc-schirm{transform:perspective(1600px) rotateY(-4deg);transition:transform .6s var(--ease)}
  .sc-held .sc-schirm:hover{transform:perspective(1600px) rotateY(0)}
}

/* Abschnitte: Text und Bild nebeneinander, abwechselnd gespiegelt */
.sc-abschnitt{max-width:1180px;margin:0 auto;padding:88px 28px}
.sc-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.sc-gespiegelt .sc-split>figure{order:-1}
.sc-abschnitt h2{margin-top:12px;font-size:clamp(28px,3vw,42px);line-height:1.08;font-weight:800;letter-spacing:-.025em;text-wrap:balance}
.sc-abschnitt p{margin-top:16px;font-size:17.5px;line-height:1.7;color:var(--lesen)}
.sc-abschnitt .rg-haken li{font-size:16.5px;line-height:1.6;color:var(--lesen)}
.sc-mitte{text-align:center;max-width:760px;margin:0 auto}
.sc-mitte p{margin-left:auto;margin-right:auto}

/* Kette Calls bis Deals */
.sc-kette{margin-top:28px;display:grid;grid-template-columns:1fr 26px 1fr 26px 1fr 26px 1fr;align-items:stretch;gap:6px}
.sc-kette .stufe{padding:14px 12px;border-radius:12px;border:1px solid var(--linesoft);background:rgba(10,33,72,.4)}
.sc-kette .stufe.ziel{border-color:rgba(47,212,143,.45);background:rgba(47,212,143,.08)}
.sc-kette b{display:block;font-size:15.5px;color:var(--ink)}
.sc-kette span{display:block;margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--mut)}
.sc-kette svg{align-self:center;width:26px;color:var(--cyan);opacity:.7}

/* Elf Module */
.sc-module{margin-top:36px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;text-align:left}
.sc-modul{padding:18px 18px 16px;border-radius:14px;border:1px solid var(--linesoft);background:rgba(10,33,72,.35);transition:border-color .25s,background .25s}
.sc-modul:hover{border-color:rgba(31,200,255,.35);background:rgba(30,99,214,.14)}
.sc-modul b{display:block;font-size:16px;color:var(--ink)}
.sc-mass{border-style:dashed;border-color:rgba(31,200,255,.35);background:rgba(30,99,214,.10)}
.sc-mass b{color:var(--cyan)}
.sc-modul span{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:var(--mut)}

/* Drei Karten */
.sc-drei{margin-top:36px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sc-karte{padding:26px 24px}
.sc-karte h3{font-size:20px;font-weight:800;letter-spacing:-.01em}
.sc-karte p{margin-top:10px;font-size:16px;line-height:1.65}

/* Für wen und Preis */
.sc-fuerwen{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:start}
.sc-nicht{margin-top:22px;padding:16px 18px;border-radius:12px;border:1px solid rgba(255,107,74,.28);background:rgba(255,107,74,.06);font-size:15.5px;line-height:1.6;color:var(--lesen)}
.sc-nicht b{color:#FFB4A3}
.sc-preis{padding:30px 28px}
.sc-preis small{display:block;font-family:var(--m);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.sc-preis strong{display:block;margin-top:10px;font-size:clamp(32px,3.2vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.sc-preis p{font-size:16px;margin-top:12px}
.sc-preis .rg-knopf2{margin-top:20px}

.sc-fragen{max-width:860px;margin:0 auto}
.sc-fragen .rg-fragen{margin-top:28px}
.sc-fragen .rg-fragen details p{font-size:16.5px;line-height:1.7;color:var(--lesen)}
.sc-schluss{max-width:860px;margin:0 auto;padding:0 28px 100px}
.sc-schluss .rg-cta{margin-top:0}

@media (max-width:980px){
  .sc-held,.sc-split,.sc-fuerwen{grid-template-columns:minmax(0,1fr);gap:32px}
  .sc-held{padding-top:108px}
  .sc-gespiegelt .sc-split>figure{order:0}
  .sc-module{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sc-drei{grid-template-columns:minmax(0,1fr)}
  .sc-kette{grid-template-columns:1fr 1fr;gap:10px}
  .sc-kette svg{display:none}
}
@media (max-width:600px){
  .sc-held{padding:100px 16px 20px}
  .sc-abschnitt{padding:60px 16px}
  .sc-module{grid-template-columns:minmax(0,1fr)}
  .sc-schluss{padding:0 16px 70px}
}