/* /member/assets/css/sf-overrides.css
 * Extracted from inline <style> blocks for CSP/consistency.
 */

:root{
  --coach-w: min(420px, 92vw);
  --coach-h: min(640px, calc(100vh - 120px));
  /* falls var(--ease) in deinem CSS nicht existiert: safe fallback */
  --ease: cubic-bezier(.2,.8,.2,1);
}
.coach-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(10,12,16,.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--ease);
  z-index: 1200;
}
.coach-drawer{
  position: fixed;
  right: 14px;
  bottom: 14px;
  width: var(--coach-w);
  height: var(--coach-h);
  display: flex;
  flex-direction: column;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(820px 360px at 16% 0%, rgba(215,176,111,.055), transparent 62%),
    linear-gradient(180deg, rgba(18,24,39,.92), rgba(15,19,26,.88));
  box-shadow: 0 28px 90px rgba(0,0,0,.62);

  transform: translateX(14px) translateY(18px);
  opacity: 0;
  pointer-events: none;
  transition: transform .22s var(--ease), opacity .18s var(--ease);

  z-index: 1210;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.coach-open .coach-backdrop{
  opacity: 1;
  pointer-events: auto;
}
body.coach-open .coach-drawer{
  transform: translateX(0) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.coach-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
}
.coach-title{ display:flex; flex-direction:column; min-width:0; }
.coach-title strong{ font-weight: 950; letter-spacing: -0.02em; }
.coach-title span{
  color: rgba(255,255,255,.62);
  font-size: .90rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coach-close{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.90);
  cursor:pointer;
}
.coach-close:active{ opacity:.92; }

.coach-body{
  padding: 12px 12px 6px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}

/* Messages */
.coach-msg{ margin: 0 0 12px; }
.coach-msg__meta{ margin-bottom:6px; }
.coach-msg__bubble{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 10px 12px;
  line-height: 1.5;
  background: rgba(255,255,255,.04);
  white-space: pre-wrap;
  word-break: break-word;
}
.coach-msg.is-assistant .coach-msg__bubble{
  background: rgba(215,176,111,.08);
}

.coach-footer{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(520px 240px at 20% 0%, rgba(215,176,111,.055), transparent 60%),
    rgba(255,255,255,.02);
}
.coach-input{
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  outline: none;
}
.coach-input::placeholder{ color: rgba(255,255,255,.44); }
.coach-input:focus{
  border-color: rgba(215,176,111,.38);
  box-shadow: 0 0 0 4px rgba(215,176,111,.12);
}

/* FAB */
.coach-fab{
  position: fixed;
  right: 14px;
  bottom: 14px;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(215,176,111,.35);
  background: rgba(0,0,0,.92);
  color: rgba(255,255,255,.92);
  font-weight: 950;
  box-shadow: 0 18px 60px rgba(0,0,0,.70);
  cursor:pointer;
  opacity: 1 !important;
  z-index: 1220;
  -webkit-tap-highlight-color: transparent;
}
.coach-fab__dot{
  width: 9px; height: 9px;
  border-radius: 999px;
  background: rgba(242,214,160,.95);
  box-shadow: 0 0 0 4px rgba(242,214,160,.14);
}
body.coach-open .coach-fab{ display:none; }

@media (max-width: 520px){
  .coach-drawer{
    right: 10px;
    left: 10px;
    width: auto;
    height: min(640px, calc(100vh - 90px));
  }
  .coach-fab{ right: 10px; bottom: 10px; }
}

body.coach-open{
  overflow: hidden;
  touch-action: none;
}
body.coach-open .coach-drawer,
body.coach-open .coach-body{
  touch-action: pan-y;
}

/* HeyGen page */
.heygen-video video{
      width: 100%;
      height: auto;
      max-width: 560px;
      display: block;
    }
    @media (max-width: 700px){
      .heygen-video video{ max-width: 100%; }
    }

/* Library: Business Überblick & Realität */
/* minimal: Lesbarkeit + Block-Abstände */
    .sf-block { margin-top: 18px; }
    .sf-kv { display:grid; grid-template-columns: 1fr; gap: 10px; }
    @media (min-width: 900px) { .sf-kv { grid-template-columns: 1fr 1fr; } }
    .sf-model { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 14px; margin-top: 14px; }
    .sf-model:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
    .sf-model h3 { margin: 0 0 6px 0; }
    .sf-meta { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin: 8px 0 0 0; }
    .sf-muted { color: rgba(255,255,255,0.78); }
    body.light .sf-muted, .theme-light .sf-muted { color: rgba(0,0,0,0.68); }


/* =========================================================
   ZERO DRIFT CLEANUP — extracted former inline style="..."
   Generated classes: sf-i-001 ...
   ========================================================= */
.sf-i-001{
  align-items:start;
}
.sf-i-002{
  border:0;
  border-top:1px solid rgba(255,255,255,.08);
  margin:16px 0;
}
.sf-i-003{
  color:rgba(255,255,255,.92);
}
.sf-i-004{
  color:var(--ok);
}
.sf-i-005{
  color:var(--warn);
}
.sf-i-006{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.sf-i-007{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.sf-i-008{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.sf-i-009{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:12px;
}
.sf-i-010{
  display:flex;
  gap:10px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}
.sf-i-011{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.sf-i-012{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.sf-i-013{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}
.sf-i-014{
  display:flex;
  gap:12px;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-top:16px;
}
.sf-i-015{
  display:flex;
  gap:12px;
  margin-top:14px;
  flex-wrap:wrap;
}
.sf-i-016{
  display:flex;
  gap:8px;
  align-items:center;
}
.sf-i-017{
  flex-wrap:wrap;
  gap:12px;
}
.sf-i-074{
  flex:1;
  cursor:pointer;
}
.sf-i-019{
  font-weight:900;
}
.sf-i-020{
  list-style:none;
  padding-left:0;
  margin:0;
}
.sf-i-021{
  margin-bottom:0;
}
.sf-i-022{
  margin-bottom:10px;
}
.sf-i-023{
  margin-bottom:16px;
}
.sf-i-024{
  margin-bottom:6px;
}
.sf-i-025{
  margin-bottom:8px;
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.sf-i-026{
  margin-top:0;
}
.sf-i-027{
  margin-top:10px;
}
.sf-i-028{
  margin-top:10px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.sf-i-029{
  margin-top:12px;
}
.sf-i-030{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.sf-i-031{
  margin-top:12px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.sf-i-032{
  margin-top:12px;
  line-height:1.4;
}
.sf-i-033{
  margin-top:14px;
}
.sf-i-034{
  margin-top:14px;
  background:rgba(0,0,0,.02);
}
.sf-i-035{
  margin-top:16px;
}
.sf-i-036{
  margin-top:16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.sf-i-037{
  margin-top:18px;
}
.sf-i-038{
  margin-top:18px;
  max-width: 980px;
}
.sf-i-039{
  margin-top:26px;
}
.sf-i-040{
  margin-top:28px;
}
.sf-i-073{
  margin-top:4px;
}
.sf-i-042{
  margin-top:6px;
}
.sf-i-043{
  margin-top:8px;
}
.sf-i-044{
  margin-top:8px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.sf-i-045{
  margin:0 0 10px;
}
.sf-i-046{
  margin:0 0 10px;
  color:var(--danger);
}
.sf-i-047{
  margin:0 0 12px;
}
.sf-i-048{
  margin:0 0 12px;
  max-width:90ch;
}
.sf-i-049{
  margin:0 0 12px;
  padding-left:18px;
}
.sf-i-050{
  margin:0 0 14px;
}
.sf-i-051{
  margin:0 0 6px;
}
.sf-i-052{
  margin:0 0 8px;
}
.sf-i-053{
  margin:0;
}
.sf-i-054{
  margin:0;
  cursor:pointer;
}
.sf-i-055{
  margin:0;
  max-width:80ch;
}
.sf-i-056{
  margin:0;
  padding-left: 18px;
}
.sf-i-057{
  margin:0;
  padding-left:18px;
}
.sf-i-058{
  margin:0;
  padding:0;
  border:none;
  background:transparent;
}
.sf-i-059{
  margin:14px 0;
}
.sf-i-060{
  margin:6px 0 0;
}
.sf-i-061{
  max-width: 720px;
}
.sf-i-062{
  max-width: 980px;
}
.sf-i-063{
  max-width:560px;
  margin-top:20px;
}
.sf-i-064{
  opacity:0.55;
}
.sf-i-065{
  padding-top:0;
}
.sf-i-066{
  padding-top:10px;
}
.sf-i-067{
  padding:40px 18px;
}
.sf-i-068{
  pointer-events:none;
  opacity:0.6;
}
.sf-i-069{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.sf-i-070{
  white-space:pre-wrap;
  margin:0;
}
.sf-i-071{
  white-space:pre-wrap;
  padding:14px;
  border-radius:12px;
}
.sf-i-072{
  width:auto;
}



/* ============================================================
   UX PATCH: Grid + Mobile Calmness (Level 1)
   - .grid was missing display:grid which broke layouts
   - provide simple responsive templates for grid--2 / grid--3
   ============================================================ */
.grid{ display:grid; }

.grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1020px){
  .grid--3{ grid-template-columns: 1fr; }
}
@media (max-width: 900px){
  .grid--2{ grid-template-columns: 1fr; }
}

/* Make long text feel calmer on mobile */
.lead{ max-width: 72ch; }
.card__body p.small{ max-width: 80ch; }

/* Prevent horizontal scroll from pre/code blocks */
pre{ max-width: 100%; overflow-x:auto; }

/* Buttons wrap nicely on small screens */
.sf-i-007, .sf-i-036, .hero__grid, .footer__inner{ gap: 12px; }
.sf-i-007, .sf-i-036{ flex-wrap: wrap; }
.btn{ white-space: nowrap; }
@media (max-width: 420px){
  .btn{ width: 100%; white-space: normal; }
}

/* Slightly calmer pills */
.pill{ letter-spacing: .02em; }


/* ------------------------------------------------------------
   MOBILE FIX — Library/Foundation cards must never overflow
   (prevents horizontal swipe to read panels)
------------------------------------------------------------ */
html, body{ max-width:100%; overflow-x:hidden; }

.grid, .card{ min-width:0; }

.card{ width:100%; }
.card *{ min-width:0; }
.card p, .card h3, .card .small{
  overflow-wrap:anywhere;
  word-break: break-word;
}

@media (max-width: 768px){
  .grid--2, .grid--3{ grid-template-columns: 1fr !important; }
  .container{ padding-left: 14px; padding-right: 14px; }
}



/* Level badges */
.pill--ok{opacity:1;}
.pill--warn{opacity:1;}

/* Level2 Builder v2 */
.progress{height:10px;border-radius:999px;background:rgba(255,255,255,0.08);overflow:hidden;}
.progress__bar{height:100%;background:rgba(200,169,106,0.9);}

.alert{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);}
.alert--warn{border-color:rgba(200,169,106,0.35);}